max/money
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

fix: pg db timezone, dialog mount child when visible, show non expired link and more

Browse Source
This commit is contained in:
Max Koon
2025-11-22 11:14:29 -05:00
parent 0edbf53db3
commit c4bb0d3304
15 changed files with 199 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/ui/src/dialog.tsx
View File

@@ -1,36 +0,0 @@
import { type ReactNode } from "react";
import { Modal, View, Text, Pressable } from "react-native";
import { useKeyboard } from "./useKeyboard";
interface ProviderProps {
children: ReactNode;
visible?: boolean;
close?: () => void;
}
export function Provider({ children, visible, close }: ProviderProps) {
useKeyboard((key) => {
if (key.name == 'escape') {
if (close) close();
}
}, []);
return (
<Modal transparent visible={visible} >
{/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', }}> */}
<View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)', }}>
{children}
</View>
</Modal>
);
}
interface ContentProps {
children: ReactNode;
}
export function Content({ children }: ContentProps) {
return (
<View style={{ backgroundColor: 'white', padding: 12, alignItems: 'center' }}>
{children}
</View>
);
}

2
packages/ui/src/index.tsx
View File

@@ -1,4 +1,4 @@
import { createContext, use, useState } from "react";
import { createContext, use } from "react";
import { Transactions } from "./transactions";
import { View, Text } from "react-native";
import { Settings } from "./settings";

30
packages/ui/src/list.tsx
View File

@@ -1,30 +0,0 @@
import { useState, type ReactNode } from "react";
import { View, Text } from "react-native";
import { useKeyboard } from "./useKeyboard";
export type ListProps<T> = {
items: T[],
renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
};
export function List<T>({ items, renderItem }: ListProps<T>) {
const [idx, setIdx] = useState(0);
useKeyboard((key) => {
if (key.name == 'j') {
setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
} else if (key.name == 'k') {
setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
} else if (key.name == 'g' && key.shift) {
setIdx(items.length - 1);
}
}, [items]);
return (
<View>
{items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
{renderItem({ item, isSelected: index == idx })}
</View>)}
</View>
);
}

98
packages/ui/src/settings/accounts.tsx
View File

@@ -1,12 +1,12 @@
import { useQuery, useZero } from "@rocicorp/zero/react";
import { queries, type Mutators, type Schema } from '@money/shared';
import * as Table from "../table";
import { use, useEffect, useState } from "react";
import { RouterContext } from "..";
import { View, Text, Modal, Linking } from "react-native";
import { Button } from "../../components/Button";
import { View, Text, Linking } from "react-native";
import { useKeyboard } from "../useKeyboard";
import * as Dialog from "../dialog";
import { Button } from "../../components/Button";
import * as Table from "../../components/Table";
import * as Dialog from "../../components/Dialog";
const COLUMNS: Table.Column[] = [
{ name: 'name', label: 'Name' },
@@ -18,25 +18,17 @@ export function Accounts() {
const [items] = useQuery(queries.getItems(auth));
const [deleting, setDeleting] = useState<typeof items>([]);
const [isAddOpen, setIsAddOpen] = useState(false);
const [link] = useQuery(queries.getPlaidLink(auth));
const [loadingLink, setLoadingLink] = useState(false);
const z = useZero<Schema, Mutators>();
useKeyboard((key) => {
if (key.name == 'n') {
setDeleting([]);
} else if (key.name == 'y') {
onDelete();
}
}, [deleting]);
useKeyboard((key) => {
if (key.name == 'a') {
addAccount();
}
}, [link])
// useKeyboard((key) => {
// if (key.name == 'n') {
// setDeleting([]);
// } else if (key.name == 'y') {
// onDelete();
// }
// }, [deleting]);
const onDelete = () => {
if (!deleting) return
@@ -46,32 +38,9 @@ export function Accounts() {
}
const addAccount = () => {
if (link) {
Linking.openURL(link.link);
} else {
setLoadingLink(true);
z.mutate.link.create();
}
// else {
// setLoadingLink(true);
// z.mutate.link.create().server.then(async () => {
// const link = await queries.getPlaidLink(auth).run();
// setLoadingLink(false);
// if (link) {
// Linking.openURL(link.link);
// }
// });
// }
setIsAddOpen(true);
}
useEffect(() => {
if (loadingLink && link) {
Linking.openURL(link.link);
setLoadingLink(false);
}
}, [link, loadingLink]);
return (
<>
@@ -101,17 +70,18 @@ export function Accounts() {
{/* <Dialog.Provider visible={isAddOpen} close={() => setIsAddOpen(false)}> */}
{/* <Dialog.Content> */}
{/* <Text style={{ fontFamily: 'mono' }}>Add Account</Text> */}
{/**/}
{/* <AddAccount /> */}
{/* </Dialog.Content> */}
{/* </Dialog.Provider> */}
<Dialog.Provider visible={isAddOpen} close={() => setIsAddOpen(false)}>
<Dialog.Content>
<Text style={{ fontFamily: 'mono' }}>Add Account</Text>
<AddAccount />
</Dialog.Content>
</Dialog.Provider>
<View style={{ padding: 10 }}>
<Button onPress={addAccount}>{loadingLink ? "Loading..." : "Add Account (a)"}</Button>
<View style={{ alignSelf: "flex-start" }}>
<Button shortcut="a" onPress={addAccount}>Add Account</Button>
</View>
<Text style={{ fontFamily: 'mono' }}> </Text>
@@ -130,9 +100,31 @@ export function Accounts() {
function AddAccount() {
const { auth } = use(RouterContext);
const [link] = useQuery(queries.getPlaidLink(auth));
const [link, details] = useQuery(queries.getPlaidLink(auth));
const openLink = () => {
if (!link) return
Linking.openURL(link.link);
}
const z = useZero<Schema, Mutators>();
useEffect(() => {
console.log(link, details);
if (details.type != "complete") return;
if (link != undefined) return;
console.log("Creating new link");
z.mutate.link.create();
}, [link, details]);
return (
<Text style={{ fontFamily: 'mono' }}>{link?.link}</Text>
<>
{link ? <>
<Text style={{ fontFamily: 'mono' }}>Please click the button to complete setup.</Text>
<Button shortcut="return" onPress={openLink}>Open Plaid</Button>
</> : <Text style={{ fontFamily: 'mono' }}>Loading Plaid Link</Text>}
</>
);
}

141
packages/ui/src/table.tsx
View File

@@ -1,141 +0,0 @@
import { createContext, use, useState, type ReactNode } from "react";
import { View, Text, ScrollView } from "react-native";
import { useKeyboard } from "./useKeyboard";
import type { KeyEvent } from "@opentui/core";
const HEADER_COLOR = '#7158e2';
const TABLE_COLORS = [
'#ddd',
'#eee'
];
const SELECTED_COLOR = '#f7b730';
const EXTRA = 5;
export type ValidRecord = Record<string, string | number | null>;
interface TableState {
data: unknown[];
columns: Column[];
columnMap: Map<string, number>;
idx: number;
selectedFrom: number | undefined;
};
const INITAL_STATE = {
data: [],
columns: [],
columnMap: new Map(),
idx: 0,
selectedFrom: undefined,
} satisfies TableState;
export const Context = createContext<TableState>(INITAL_STATE);
export type Column = { name: string, label: string, render?: (i: number | string) => string };
function renderCell(row: ValidRecord, column: Column): string {
const cell = row[column.name];
if (cell == undefined) return 'n/a';
if (cell == null) return 'null';
if (column.render) return column.render(cell);
return cell.toString();
}
export interface ProviderProps<T> {
data: T[];
columns: Column[];
children: ReactNode;
onKey?: (event: KeyEvent, selected: T[]) => void;
};
export function Provider<T extends ValidRecord>({ data, columns, children, onKey }: ProviderProps<T>) {
const [idx, setIdx] = useState(0);
const [selectedFrom, setSelectedFrom] = useState<number>();
useKeyboard((key) => {
if (key.name == 'j' || key.name == 'down') {
if (key.shift && selectedFrom == undefined) {
setSelectedFrom(idx);
}
setIdx((prev) => Math.min(prev + 1, data.length - 1));
} else if (key.name == 'k' || key.name == 'up') {
if (key.shift && selectedFrom == undefined) {
setSelectedFrom(idx);
}
setIdx((prev) => Math.max(prev - 1, 0));
} else if (key.name == 'g' && key.shift) {
setIdx(data.length - 1);
} else if (key.name == 'v') {
setSelectedFrom(idx);
} else if (key.name == 'escape') {
setSelectedFrom(undefined);
} else {
const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
const to = selectedFrom ? Math.max(idx, selectedFrom) : idx;
const selected = data.slice(from, to + 1);
if (onKey) onKey(key, selected);
}
}, [data, idx, selectedFrom]);
const columnMap = new Map(columns.map(col => {
return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
}));
return (
<Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
{children}
</Context.Provider>
);
}
export function Body() {
const { columns, data, columnMap, idx, selectedFrom } = use(Context);
return (
<View>
<View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
{columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
</View>
{data.map((row, index) => {
const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
return (
<View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
<TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
</View>
);
})}
</View>
)
}
interface RowProps<T> {
row: T;
index: number;
isSelected: boolean;
}
function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
const { data, columns, columnMap } = use(Context);
return <View style={{ flexDirection: 'row' }}>
{columns.map(column => {
const rendered = renderCell(row, column);
return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
})}
</View>
}
function rpad(input: string, length: number): string {
return input + Array.from({ length })
.map(_ => " ")
.join("");
}

2
packages/ui/src/transactions.tsx
View File

@@ -1,4 +1,4 @@
import * as Table from "./table";
import * as Table from "../components/Table";
import { useQuery } from "@rocicorp/zero/react";
import { queries, type Transaction } from '@money/shared';
import { use } from "react";