From 4ddfd0e322d79fb1b3b6603a252c0f3fa5a98270 Mon Sep 17 00:00:00 2001
From: MohamedBassem <me@mbassem.com>
Date: Tue, 5 Mar 2024 13:52:19 +0000
Subject: extension: Use react-query and trpc in the extension

---
 packages/browser-extension/src/utils/providers.tsx | 40 ++++++++++++++++++++++
 packages/browser-extension/src/utils/settings.ts   | 13 +++++++
 packages/browser-extension/src/utils/trpc.ts       |  4 +++
 3 files changed, 57 insertions(+)
 create mode 100644 packages/browser-extension/src/utils/providers.tsx
 create mode 100644 packages/browser-extension/src/utils/settings.ts
 create mode 100644 packages/browser-extension/src/utils/trpc.ts

(limited to 'packages/browser-extension/src/utils')

diff --git a/packages/browser-extension/src/utils/providers.tsx b/packages/browser-extension/src/utils/providers.tsx
new file mode 100644
index 00000000..c11331f0
--- /dev/null
+++ b/packages/browser-extension/src/utils/providers.tsx
@@ -0,0 +1,40 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import { useCallback, useEffect, useState } from "react";
+import { api } from "./trpc";
+import usePluginSettings from "./settings";
+import superjson from "superjson";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [settings] = usePluginSettings();
+  const [queryClient] = useState(() => new QueryClient());
+
+  const getTrpcClient = useCallback(() => {
+    console.log(settings);
+    return api.createClient({
+      links: [
+        httpBatchLink({
+          url: `${settings.address}/api/trpc`,
+          async headers() {
+            return {
+              Authorization: `Bearer ${settings.apiKey}`,
+            };
+          },
+          transformer: superjson,
+        }),
+      ],
+    });
+  }, [settings]);
+
+  const [trpcClient, setTrpcClient] = useState(getTrpcClient());
+
+  useEffect(() => {
+    setTrpcClient(getTrpcClient());
+  }, [getTrpcClient]);
+
+  return (
+    <api.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}
diff --git a/packages/browser-extension/src/utils/settings.ts b/packages/browser-extension/src/utils/settings.ts
new file mode 100644
index 00000000..ee7f0722
--- /dev/null
+++ b/packages/browser-extension/src/utils/settings.ts
@@ -0,0 +1,13 @@
+import { useChromeStorageSync } from "use-chrome-storage";
+
+export type Settings = {
+  apiKey: string;
+  address: string;
+};
+
+export default function usePluginSettings() {
+  return useChromeStorageSync("settings", {
+    apiKey: "",
+    address: "",
+  } as Settings);
+}
diff --git a/packages/browser-extension/src/utils/trpc.ts b/packages/browser-extension/src/utils/trpc.ts
new file mode 100644
index 00000000..da21a55a
--- /dev/null
+++ b/packages/browser-extension/src/utils/trpc.ts
@@ -0,0 +1,4 @@
+import { createTRPCReact } from "@trpc/react-query";
+import type { AppRouter } from "@hoarder/trpc/routers/_app";
+
+export const api = createTRPCReact<AppRouter>();
-- 
cgit v1.2.3-70-g09d2