refactor: create component for UserInformationModal

afspeirs · Mar 16, 2024 · fef29ab · fef29ab
1 parent 9713c4b
commit fef29ab
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 82 deletions.
diff --git a/src/components/AuthUserInformation/UserInformationModal.tsx b/src/components/AuthUserInformation/UserInformationModal.tsx
@@ -0,0 +1,99 @@
+import { Auth } from '@supabase/auth-ui-react';
+import { ThemeSupa } from '@supabase/auth-ui-shared';
+import { useAtomValue } from 'jotai';
+import { LogOutIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+import { supabase } from '@/api';
+import { AvatarIcon } from '@/components/AvatarIcon';
+import { Button } from '@/components/Button';
+import { Modal } from '@/components/Modal';
+import { ModalConfirm } from '@/components/ModalConfirm';
+import { authAtom } from '@/context/auth';
+import { dbAtom } from '@/context/db';
+import { UserInformationModalProps } from './types';
+
+export function UserInformationModal({
+  open,
+  setOpen,
+}: UserInformationModalProps) {
+  const db = useAtomValue(dbAtom);
+  const auth = useAtomValue(authAtom);
+  const [openSignOutConfirmation, setOpenSignOutConfirmation] = useState(false);
+
+  const signOut = async () => {
+    setOpen(false);
+
+    const { error } = await supabase.auth.signOut();
+    if (error) console.error(error); // eslint-disable-line no-console
+
+    db?.remove()
+      .then(() => window.location.reload()); // TODO: Remove the need for the page reload
+  };
+
+  useEffect(() => {
+    if (auth?.user) {
+      setOpen(false);
+    }
+  }, [auth?.user, setOpen]);
+
+  return (
+    <Modal
+      open={open}
+      onClose={() => setOpen(false)}
+      theme={auth ? undefined : 'dark'}
+    >
+      {auth ? (
+        <>
+          <div className="flex justify-center">
+            <AvatarIcon label={auth.user.email} size="large" />
+          </div>
+
+          <div className="relative flex items-center m-4 py-4 select-none">
+            <p className="flex pl-24">
+              <strong className="absolute left-0">Email:</strong>
+              {auth.user.email || 'Signed in'}
+            </p>
+          </div>
+
+          <Button
+            active={openSignOutConfirmation}
+            colour="primary"
+            Icon={LogOutIcon}
+            onClick={() => setOpenSignOutConfirmation(true)}
+          >
+            Sign out
+          </Button>
+
+          <ModalConfirm
+            open={openSignOutConfirmation}
+            message="Are you sure you want to sign out?"
+            onClose={() => setOpenSignOutConfirmation(false)}
+            onConfirm={() => {
+              setOpenSignOutConfirmation(false);
+              signOut();
+            }}
+          />
+        </>
+      ) : (
+        <Auth
+          appearance={{
+            theme: ThemeSupa,
+            variables: {
+              default: {
+                colors: {
+                  brand: '#ee6e00',
+                  brandAccent: '#ee6e00',
+                },
+              },
+            },
+          }}
+          // providers={['google', 'github']}
+          providers={[]}
+          supabaseClient={supabase}
+          theme="dark"
+        />
+      )}
+    </Modal>
+  );
+}
diff --git a/src/components/AuthUserInformation/index.tsx b/src/components/AuthUserInformation/index.tsx
@@ -1,39 +1,16 @@
-import { Auth } from '@supabase/auth-ui-react';
-import { ThemeSupa } from '@supabase/auth-ui-shared';
 import { useAtomValue } from 'jotai';
-import { LogOutIcon, UserIcon } from 'lucide-react';
-import { useEffect, useState } from 'react';
+import { UserIcon } from 'lucide-react';
+import { useState } from 'react';
 
-import { supabase } from '@/api';
 import { AvatarIcon } from '@/components/AvatarIcon';
 import { Button } from '@/components/Button';
-import { Modal } from '@/components/Modal';
-import { ModalConfirm } from '@/components/ModalConfirm';
 import { Tooltip } from '@/components/Tooltip';
 import { authAtom } from '@/context/auth';
-import { dbAtom } from '@/context/db';
+import { UserInformationModal } from './UserInformationModal';
 
 export function AuthUserInformation() {
   const auth = useAtomValue(authAtom);
-  const db = useAtomValue(dbAtom);
   const [open, setOpen] = useState(false);
-  const [openSignOutConfirmation, setOpenSignOutConfirmation] = useState(false);
-
-  const signOut = async () => {
-    setOpen(false);
-
-    const { error } = await supabase.auth.signOut();
-    if (error) console.error(error); // eslint-disable-line no-console
-
-    db?.remove()
-      .then(() => window.location.reload()); // TODO: Remove the need for the page reload
-  };
-
-  useEffect(() => {
-    if (auth?.user) {
-      setOpen(false);
-    }
-  }, [auth?.user]);
 
   return (
     <>
@@ -53,63 +30,10 @@ export function AuthUserInformation() {
         </Button>
       </Tooltip>
 
-      <Modal
+      <UserInformationModal
         open={open}
-        onClose={() => setOpen(false)}
-        theme={auth ? undefined : 'dark'}
-      >
-        {auth ? (
-          <>
-            <div className="flex justify-center">
-              <AvatarIcon label={auth.user.email} size="large" />
-            </div>
-
-            <div className="relative flex items-center m-4 py-4 select-none">
-              <p className="flex pl-24">
-                <strong className="absolute left-0">Email:</strong>
-                {auth.user.email || 'Signed in'}
-              </p>
-            </div>
-
-            <Button
-              active={openSignOutConfirmation}
-              colour="primary"
-              Icon={LogOutIcon}
-              onClick={() => setOpenSignOutConfirmation(true)}
-            >
-              Sign out
-            </Button>
-
-            <ModalConfirm
-              open={openSignOutConfirmation}
-              message="Are you sure you want to sign out?"
-              onClose={() => setOpenSignOutConfirmation(false)}
-              onConfirm={() => {
-                setOpenSignOutConfirmation(false);
-                signOut();
-              }}
-            />
-          </>
-        ) : (
-          <Auth
-            appearance={{
-              theme: ThemeSupa,
-              variables: {
-                default: {
-                  colors: {
-                    brand: '#ee6e00',
-                    brandAccent: '#ee6e00',
-                  },
-                },
-              },
-            }}
-            // providers={['google', 'github']}
-            providers={[]}
-            supabaseClient={supabase}
-            theme="dark"
-          />
-        )}
-      </Modal>
+        setOpen={setOpen}
+      />
     </>
   );
 }
diff --git a/src/components/AuthUserInformation/types.ts b/src/components/AuthUserInformation/types.ts
@@ -0,0 +1,6 @@
+import type { Dispatch, SetStateAction } from 'react';
+
+export type UserInformationModalProps = {
+  open: boolean,
+  setOpen: Dispatch<SetStateAction<boolean>>,
+};