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

2025-11-22 11:14:29 -05:00
parent 0edbf53db3
commit c4bb0d3304
15 changed files with 199 additions and 185 deletions
--- a/packages/react-native-opentui/index.tsx
+++ b/packages/react-native-opentui/index.tsx
@@ -5,13 +5,54 @@ import type {
  PressableProps,
  ScrollViewProps,
  ModalProps,
+
+  StyleProp,
+  ViewStyle,
+
+  LinkingImpl,
 } from "react-native";
 import { useTerminalDimensions } from "@opentui/react";
 import { RGBA } from "@opentui/core";
+import { platform } from "node:os";
+import { exec } from "node:child_process";

 const RATIO_WIDTH = 8.433;
 const RATIO_HEIGHT = 17;

+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string"
+): Extract<ViewStyle[K], string> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "number"
+): Extract<ViewStyle[K], number> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "boolean"
+): Extract<ViewStyle[K], boolean> | undefined;
+
+function attr<K extends keyof ViewStyle>(
+  style: StyleProp<ViewStyle>,
+  name: K,
+  type: "string" | "number" | "boolean"
+) {
+  if (!style) return undefined;
+
+  const obj: ViewStyle =
+    Array.isArray(style)
+      ? Object.assign({}, ...style.filter(Boolean))
+      : (style as ViewStyle);
+
+  const v = obj[name];
+  return typeof v === type ? v : undefined;
+}
+
 export function View({ children, style }: ViewProps) {
  const bg = style &&
    'backgroundColor' in style
@@ -25,69 +66,27 @@ export function View({ children, style }: ViewProps) {
    : style.backgroundColor
    : undefined
    : undefined;
-  const flexDirection = style &&
-    'flexDirection' in style
-    ? typeof style.flexDirection == 'string'
-    ? style.flexDirection
-    : undefined
-    : undefined;
-  const flex = style &&
-    'flex' in style
-    ? typeof style.flex == 'number'
-    ? style.flex
-    : undefined
-    : undefined;
-  const flexShrink = style &&
-    'flexShrink' in style
-    ? typeof style.flexShrink == 'number'
-    ? style.flexShrink
-    : undefined
-    : undefined;
-  const overflow = style &&
-    'overflow' in style
-    ? typeof style.overflow == 'string'
-    ? style.overflow
-    : undefined
-    : undefined;
-  const position = style &&
-    'position' in style
-    ? typeof style.position == 'string'
-    ? style.position
-    : undefined
-    : undefined;
-  const justifyContent = style &&
-    'justifyContent' in style
-    ? typeof style.justifyContent == 'string'
-    ? style.justifyContent
-    : undefined
-    : undefined;
-  const alignItems = style &&
-    'alignItems' in style
-    ? typeof style.alignItems == 'string'
-    ? style.alignItems
-    : undefined
-    : undefined;

-  const padding = style &&
-    'padding' in style
-    ? typeof style.padding == 'number'
-    ? style.padding
-    : undefined
-    : undefined;
+  const padding = attr(style, 'padding', 'number');
+
+  const props = {
+    overflow: attr(style, 'overflow', 'string'),
+    position: attr(style, 'position', 'string'),
+    alignSelf: attr(style, 'alignSelf', 'string'),
+    alignItems: attr(style, 'alignItems', 'string'),
+    justifyContent: attr(style, 'justifyContent', 'string'),
+    flexShrink: attr(style, 'flexShrink', 'number'),
+    flexDirection: attr(style, 'flexDirection', 'string'),
+    flexGrow: attr(style, 'flex', 'number') || attr(style, 'flexGrow', 'number'),
+  };

  return <box
    backgroundColor={bg}
-    flexDirection={flexDirection}
-    flexGrow={flex}
-    overflow={overflow}
-    flexShrink={flexShrink}
-    position={position}
-    justifyContent={justifyContent}
-    alignItems={alignItems}
    paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
    paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
    paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
    paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
+    {...props}
  >{children}</box>
 }

@@ -210,6 +209,18 @@ export const Platform = {
  OS: "tui",
 };

+export const Linking = {
+  openURL: async (url: string) => {
+    const cmd =
+      platform() == "darwin"
+        ? `open ${url}`
+        : platform() == "win32"
+        ? `start "" "${url}"`
+        : `xdg-open "${url}"`;
+    exec(cmd);
+  }
+} satisfies Partial<LinkingImpl>;
+
 export default {
  View,
  Text,
--- a/packages/shared/src/mutators.ts
+++ b/packages/shared/src/mutators.ts
@@ -1,6 +1,7 @@
 import type { Transaction } from "@rocicorp/zero";
 import type { AuthData } from "./auth";
-import { isLoggedIn, type Schema } from ".";
+import { type Schema } from "./zero-schema.gen";
+import { isLoggedIn } from "./zql";

 type Tx = Transaction<Schema>;

--- a/packages/shared/src/queries.ts
+++ b/packages/shared/src/queries.ts
@@ -1,6 +1,6 @@
 import { syncedQueryWithContext } from "@rocicorp/zero";
 import { z } from "zod";
-import { builder } from ".";
+import { builder } from "./zero-schema.gen";
 import { type AuthData } from "./auth";
 import { isLoggedIn } from "./zql";

@@ -22,7 +22,7 @@ export const queries = {
    isLoggedIn(authData);
    return builder.plaidLink
      .where('user_id', '=', authData.user.id)
-      .where('createdAt', '<', new Date().getTime() + (1000 * 60 * 60 * 4))
+      .where('createdAt', '>', new Date().getTime() - (1000 * 60 * 60 * 4))
      .orderBy('createdAt', 'desc')
      .one();
  }),
--- a/packages/shared/src/zql.ts
+++ b/packages/shared/src/zql.ts
@@ -3,7 +3,6 @@ import type { AuthData } from "./auth";
 export function isLoggedIn(
  authData: AuthData | null,
 ): asserts authData is AuthData {
-  console.log("AUTHDATA", authData);
  if (!authData?.user.id) {
    throw new Error("User is not logged in");
  }
--- a/packages/ui/components/Button.tsx
+++ b/packages/ui/components/Button.tsx
@@ -1,3 +1,4 @@
+import { useKeyboard } from "../src/useKeyboard";
 import type { ReactNode } from "react";
 import { Text, Pressable } from "react-native";

@@ -5,6 +6,7 @@ export interface ButtonProps {
  children: ReactNode;
  onPress?: () => void;
  variant?: 'default' | 'secondary' | 'destructive';
+  shortcut?: string;
 }

 const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: string, color: string }> = {
@@ -13,10 +15,15 @@ const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: str
  destructive: { backgroundColor: 'red', color: 'white' },
 };

-export function Button({ children, variant, onPress }: ButtonProps) {
+export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
  const { backgroundColor, color } = STYLES[variant || "default"];

+  useKeyboard((key) => {
+    if (!shortcut || !onPress) return;
+    if (key.name == shortcut) onPress();
+  });
+
  return <Pressable onPress={onPress} style={{ backgroundColor }}>
-    <Text style={{ fontFamily: 'mono', color }}>  {children}  </Text>
+    <Text style={{ fontFamily: 'mono', color }}>  {children}{shortcut && ` (${shortcut})`}  </Text>
  </Pressable>
 }
--- a/packages/ui/components/Dialog.tsx
+++ b/packages/ui/components/Dialog.tsx
@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { Modal, View, Text, Pressable } from "react-native";
-import { useKeyboard } from "./useKeyboard";
+import { Modal, View, Text } from "react-native";
+import { useKeyboard } from "../src/useKeyboard";

 interface ProviderProps {
  children: ReactNode;
@@ -18,7 +18,7 @@ export function Provider({ children, visible, close }: ProviderProps) {
    <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}
+        {visible && children}
      </View>
    </Modal>
  );
--- a/packages/ui/components/List.tsx
+++ b/packages/ui/components/List.tsx
@@ -1,6 +1,6 @@
 import { useState, type ReactNode } from "react";
 import { View, Text } from "react-native";
-import { useKeyboard } from "./useKeyboard";
+import { useKeyboard } from "../src/useKeyboard";

 export type ListProps<T> = {
  items: T[],
--- a/packages/ui/components/Table.tsx
+++ b/packages/ui/components/Table.tsx
@@ -1,6 +1,6 @@
 import { createContext, use, useState, type ReactNode } from "react";
-import { View, Text, ScrollView } from "react-native";
-import { useKeyboard } from "./useKeyboard";
+import { View, Text } from "react-native";
+import { useKeyboard } from "../src/useKeyboard";
 import type { KeyEvent } from "@opentui/core";

 const HEADER_COLOR = '#7158e2';
@@ -121,7 +121,7 @@ interface RowProps<T> {
  isSelected: boolean;
 }
 function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
-  const { data, columns, columnMap } = use(Context);
+  const { columns, columnMap } = use(Context);


  return <View style={{ flexDirection: 'row' }}>
--- a/packages/ui/src/index.tsx
+++ b/packages/ui/src/index.tsx
@@ -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";
--- a/packages/ui/src/settings/accounts.tsx
+++ b/packages/ui/src/settings/accounts.tsx
@@ -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>}
+    </>
  );
 }
--- a/packages/ui/src/transactions.tsx
+++ b/packages/ui/src/transactions.tsx
@@ -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";