extension: Show who the logged in user is in the extension options

3 files changed, 57 insertions, 36 deletions

diff --git a/packages/browser-extension/src/OptionsPage.tsx b/packages/browser-extension/src/OptionsPage.tsx
index 5cb4a45b..5f0f479a 100644
--- a/packages/browser-extension/src/OptionsPage.tsx
+++ b/packages/browser-extension/src/OptionsPage.tsx
@@ -1,5 +1,7 @@
-import { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import usePluginSettings from "./utils/settings";
+import { api } from "./utils/trpc";
+import Spinner from "./Spinner";
 
 export default function OptionsPage() {
   const [settings, setSettings, _1, _2, _3] = usePluginSettings();
@@ -7,9 +9,40 @@ export default function OptionsPage() {
   const apiKeyRef = useRef<HTMLInputElement>(null);
   const addressRef = useRef<HTMLInputElement>(null);
 
+  const [settingsInput, setSettingsInput] = useState<typeof settings>(settings);
+
+  useEffect(() => {
+    setSettingsInput(settings);
+  }, [settings]);
+
   const [isSaved, setIsSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
+  const {
+    data: whoami,
+    isPending: isWhoAmiPending,
+    error: whoAmIError,
+  } = api.users.whoami.useQuery();
+
+  const invalidateWhoami = api.useUtils().users.whoami.invalidate;
+
+  let loggedInMessage: React.ReactNode;
+  if (whoAmIError) {
+    if (whoAmIError.data?.code == "UNAUTHORIZED") {
+      loggedInMessage = <span>Not logged in</span>;
+    } else {
+      loggedInMessage = (
+        <span>Something went wrong: {whoAmIError.message}</span>
+      );
+    }
+  }
+  if (isWhoAmiPending) {
+    loggedInMessage = <Spinner />;
+  }
+  if (whoami) {
+    loggedInMessage = <span>{whoami.name}</span>;
+  }
+
   const onSave = () => {
     if (apiKeyRef.current?.value == "") {
       setError("API Key can't be empty");
@@ -27,6 +60,12 @@ export default function OptionsPage() {
       setIsSaved(false);
     }, 2000);
     setIsSaved(true);
+    invalidateWhoami();
+  };
+
+  const onLogout = () => {
+    setSettings((s) => ({ ...s, apiKey: "" }));
+    invalidateWhoami();
   };
 
   return (
@@ -34,25 +73,38 @@ export default function OptionsPage() {
       <span className="text-lg">Settings</span>
       <hr />
       <p className="text-red-500">{error}</p>
+      <div className="flex gap-2">
+        <span className="my-auto">Logged in as:</span>
+        {loggedInMessage}
+      </div>
       <div className="flex space-x-2">
         <label className="m-auto h-full">Server Address</label>
         <input
           ref={addressRef}
-          value={settings.address || "https://demo.hoarder.app"}
+          value={settingsInput.address}
+          onChange={(e) =>
+            setSettingsInput((s) => ({ ...s, address: e.target.value }))
+          }
           className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
         />
       </div>
-      <div className="flex space-x-2 pt-2">
+      <div className="flex space-x-2">
         <label className="m-auto h-full">API Key</label>
         <input
           ref={apiKeyRef}
-          value={settings.apiKey}
+          value={settingsInput.apiKey}
+          onChange={(e) =>
+            setSettingsInput((s) => ({ ...s, apiKey: e.target.value }))
+          }
           className="h-8 flex-1 rounded-lg border border-gray-300 p-2"
         />
       </div>
       <button className="rounded-lg border border-gray-200" onClick={onSave}>
         {isSaved ? "Saved!" : "Save"}
       </button>
+      <button className="rounded-lg border border-gray-200" onClick={onLogout}>
+        Logout
+      </button>
     </div>
   );
 }
diff --git a/packages/browser-extension/src/providers.tsx b/packages/browser-extension/src/providers.tsx
deleted file mode 100644
index a055f3d1..00000000
--- a/packages/browser-extension/src/providers.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { httpBatchLink } from "@trpc/client";
-import React, { useState } from "react";
-import { trpc } from "./trpc";
-
-export function App() {
-  const [queryClient] = useState(() => new QueryClient());
-  const [trpcClient] = useState(() =>
-    trpc.createClient({
-      links: [
-        httpBatchLink({
-          url: "http://localhost:3000/trpc",
-          // You can pass any HTTP headers you wish here
-          async headers() {
-            return {
-              // authorization: getAuthCookie(),
-            };
-          },
-        }),
-      ],
-    }),
-  );
-  return (
-    <trpc.Provider client={trpcClient} queryClient={queryClient}>
-      <QueryClientProvider client={queryClient}>
-        {/* Your app here */}
-      </QueryClientProvider>
-    </trpc.Provider>
-  );
-}
diff --git a/packages/browser-extension/src/utils/providers.tsx b/packages/browser-extension/src/utils/providers.tsx
index c11331f0..cf3ca804 100644
--- a/packages/browser-extension/src/utils/providers.tsx
+++ b/packages/browser-extension/src/utils/providers.tsx
@@ -10,12 +10,11 @@ export function Providers({ children }: { children: React.ReactNode }) {
   const [queryClient] = useState(() => new QueryClient());
 
   const getTrpcClient = useCallback(() => {
-    console.log(settings);
     return api.createClient({
       links: [
         httpBatchLink({
           url: `${settings.address}/api/trpc`,
-          async headers() {
+          headers() {
             return {
               Authorization: `Bearer ${settings.apiKey}`,
             };