feat: rpc client

packages/ui/src/index.tsx

@@ -3,7 +3,7 @@ import { Transactions } from "./transactions";
 import { View, Text } from "react-native";
 import { Settings } from "./settings";
 import { useKeyboard } from "./useKeyboard";
-import type { AuthData } from "@money/shared/auth";
+import type { AuthSchemaType } from "@money/shared/auth";
 
 const PAGES = {
   "/": {
@@ -39,7 +39,7 @@ type Routes<T> = {
 export type Route = Routes<typeof PAGES>;
 
 interface RouterContextType {
-  auth: AuthData | null;
+  auth: AuthSchemaType | null;
   route: Route;
   setRoute: (route: Route) => void;
 }
@@ -51,7 +51,7 @@ export const RouterContext = createContext<RouterContextType>({
 });
 
 type AppProps = {
-  auth: AuthData | null;
+  auth: AuthSchemaType | null;
   route: Route;
   setRoute: (page: Route) => void;
 };

packages/ui/src/rpc.ts

@@ -0,0 +1,50 @@
+import { AtomRpc } from "@effect-atom/atom-react";
+import { AuthMiddleware, LinkRpcs } from "@money/shared/rpc";
+import { FetchHttpClient, Headers } from "@effect/platform";
+import { Rpc, RpcClient, RpcMiddleware, RpcSerialization } from "@effect/rpc";
+import * as Layer from "effect/Layer";
+import { Effect } from "effect";
+import { use } from "react";
+import { RouterContext } from "./index";
+import * as Redacted from "effect/Redacted";
+import { Platform } from "react-native";
+
+const protocol = RpcClient.layerProtocolHttp({
+  url: "http://laptop:3000/rpc",
+}).pipe(
+  Layer.provide([
+    RpcSerialization.layerJson,
+    FetchHttpClient.layer.pipe(
+      Layer.provide(
+        Layer.succeed(FetchHttpClient.RequestInit, {
+          credentials: "include",
+        }),
+      ),
+    ),
+  ]),
+);
+
+export const useRpc = () => {
+  const { auth } = use(RouterContext);
+
+  return class Client extends AtomRpc.Tag<Client>()("RpcClient", {
+    group: LinkRpcs,
+    protocol: Layer.merge(
+      protocol,
+      RpcMiddleware.layerClient(AuthMiddleware, ({ request }) =>
+        Effect.succeed({
+          ...request,
+          ...(auth && Platform.OS == ("TUI" as any)
+            ? {
+                headers: Headers.set(
+                  request.headers,
+                  "authorization",
+                  "Bearer " + Redacted.value(auth.session.token),
+                ),
+              }
+            : {}),
+        }),
+      ),
+    ),
+  }) {};
+};

packages/ui/src/settings/accounts.tsx

@@ -7,6 +7,9 @@ import { useKeyboard } from "../useKeyboard";
 import { Button } from "../../components/Button";
 import * as Table from "../../components/Table";
 import * as Dialog from "../../components/Dialog";
+import { useAtomSet } from "@effect-atom/atom-react";
+import { useRpc } from "../rpc";
+import * as Exit from "effect/Exit";
 
 const COLUMNS: Table.Column[] = [
   { name: "name", label: "Name" },
@@ -116,52 +119,79 @@ export function Accounts() {
 }
 
 function AddAccount() {
-  const { auth } = use(RouterContext);
-  const [link, details] = useQuery(queries.getPlaidLink(auth));
+  const rpc = useRpc();
+  const createLink = useAtomSet(rpc.mutation("CreateLink"), {
+    mode: "promiseExit",
+  });
+
+  const [href, setHref] = useState("");
+
+  // const [link, details] = useQuery(queries.getPlaidLink(auth));
   const { close } = use(Dialog.Context);
 
-  const openLink = () => {
-    if (!link) return;
-    Linking.openURL(link.link);
+  const init = () => {
+    console.log("INIT");
+    const p = createLink({ payload: void 0 })
+      .then((link) => {
+        console.log("my link", link);
+        if (Exit.isSuccess(link)) {
+          setHref(link.value.href);
+        }
+      })
+      .finally(() => {
+        console.log("WHAT");
+      });
+    console.log(p);
   };
 
-  const z = useZero<Schema, Mutators>();
-
   useEffect(() => {
-    console.log(link, details);
-    if (details.type != "complete") return;
-    if (link != undefined) {
-      if (!link.completeAt) {
-        const timer = setInterval(() => {
-          console.log("Checking for link");
-          z.mutate.link.get({ link_token: link.token });
-        }, 1000 * 5);
-        return () => clearInterval(timer);
-      } else {
-        if (close) close();
-        return;
-      }
-    }
-    console.log("Creating new link");
-    z.mutate.link.create();
-  }, [link, details]);
+    console.log("useEffect");
+    init();
+  }, []);
+
+  // 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) {
+  //     if (!link.completeAt) {
+  //       const timer = setInterval(() => {
+  //         console.log("Checking for link");
+  //         z.mutate.link.get({ link_token: link.token });
+  //       }, 1000 * 5);
+  //       return () => clearInterval(timer);
+  //     } else {
+  //       if (close) close();
+  //       return;
+  //     }
+  //   }
+  //   console.log("Creating new link");
+  //   z.mutate.link.create();
+  // }, [link, details]);
 
   return (
     <>
+      <Text>Href: {href}</Text>
       <Button onPress={() => close && close()}>close</Button>
-      {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>
-      )}
+      {/* {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> */}
+      {/* )} */}
     </>
   );
 }