refactor(user-account): deprecate redundant state provider (#110)

domhhv · Oct 22, 2024 · 0301e40 · 0301e40
1 parent e2b14f3
commit 0301e40
Show file tree

Hide file tree

Showing 10 changed files with 117 additions and 256 deletions.
diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
@@ -3,7 +3,6 @@ import {
   OccurrencesProvider,
   SnackbarProvider,
   TraitsProvider,
-  UserAccountProvider,
 } from '@context';
 import { supabaseClient } from '@helpers';
 import { NextUIProvider } from '@nextui-org/react';
@@ -27,15 +26,13 @@ const LowerProviders = ({ children, rangeStart, rangeEnd }: ProviderProps) => {
   return (
     <NextUIProvider navigate={navigate}>
       <SnackbarProvider>
-        <UserAccountProvider>
-          <TraitsProvider>
-            <HabitsProvider>
-              <OccurrencesProvider rangeStart={rangeStart} rangeEnd={rangeEnd}>
-                {children}
-              </OccurrencesProvider>
-            </HabitsProvider>
-          </TraitsProvider>
-        </UserAccountProvider>
+        <TraitsProvider>
+          <HabitsProvider>
+            <OccurrencesProvider rangeStart={rangeStart} rangeEnd={rangeEnd}>
+              {children}
+            </OccurrencesProvider>
+          </HabitsProvider>
+        </TraitsProvider>
       </SnackbarProvider>
     </NextUIProvider>
   );

diff --git a/src/components/header/Header.test.tsx b/src/components/header/Header.test.tsx
@@ -1,4 +1,4 @@
-import { SnackbarProvider, UserAccountProvider } from '@context';
+import { SnackbarProvider } from '@context';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
@@ -24,9 +24,7 @@ describe(Header.name, () => {
     const { getByText } = render(
       <BrowserRouter>
         <SnackbarProvider>
-          <UserAccountProvider>
-            <Header />
-          </UserAccountProvider>
+          <Header />
         </SnackbarProvider>
       </BrowserRouter>
     );

diff --git a/src/components/user-account/AccountPage.test.tsx b/src/components/user-account/AccountPage.test.tsx
@@ -1,3 +1,12 @@
+import { SnackbarProvider } from '@context';
+import { useUser } from '@supabase/auth-helpers-react';
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+
+import AccountPage from './AccountPage';
+import { useAccountPage } from './use-account-page';
+
 jest.mock('./use-account-page');
 jest.mock('@supabase/auth-helpers-react', () => ({
   ...jest.requireActual('@supabase/auth-helpers-react'),
@@ -10,15 +19,6 @@ jest.mock('./use-auth-search-params', () => ({
   useAuthSearchParams: jest.fn(),
 }));
 
-import { SnackbarProvider, UserAccountProvider } from '@context';
-import { useUser } from '@supabase/auth-helpers-react';
-import { act, fireEvent, render } from '@testing-library/react';
-import React from 'react';
-import { BrowserRouter } from 'react-router-dom';
-
-import AccountPage from './AccountPage';
-import { useAccountPage } from './use-account-page';
-
 describe(AccountPage.name, () => {
   it('should show loader', () => {
     (useAccountPage as jest.Mock).mockReturnValue({
@@ -53,9 +53,7 @@ describe(AccountPage.name, () => {
     const { getByTestId } = render(
       <BrowserRouter>
         <SnackbarProvider>
-          <UserAccountProvider>
-            <AccountPage />
-          </UserAccountProvider>
+          <AccountPage />
         </SnackbarProvider>
       </BrowserRouter>
     );

diff --git a/src/components/user-account/AuthModalButton.test.tsx b/src/components/user-account/AuthModalButton.test.tsx
@@ -1,4 +1,4 @@
-import { SnackbarProvider, useUserAccount } from '@context';
+import { SnackbarProvider } from '@context';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
@@ -21,13 +21,13 @@ jest.mock('react-router-dom', () => ({
 jest.mock('@context', () => ({
   ...jest.requireActual('@context'),
   __esModule: true,
-  useUserAccount: jest.fn().mockReturnValue({
-    supabaseUser: { id: null },
-    login: jest.fn(),
-    logout: jest.fn(),
-    register: jest.fn(),
-    authenticating: false,
-  }),
+  // useUserAccount: jest.fn().mockReturnValue({
+  //   supabaseUser: { id: null },
+  //   login: jest.fn(),
+  //   logout: jest.fn(),
+  //   register: jest.fn(),
+  //   authenticating: false,
+  // }),
 }));
 
 describe(AuthModalButton.name, () => {
@@ -46,9 +46,9 @@ describe(AuthModalButton.name, () => {
   });
 
   it.skip('should navigate to /account if user is logged in', async () => {
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: '123' },
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: '123' },
+    // });
     const { getByTestId, queryByText } = render(
       <BrowserRouter>
         <AuthModalButton />
@@ -63,9 +63,9 @@ describe(AuthModalButton.name, () => {
   });
 
   it.skip('should switch to register mode', () => {
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: null },
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: null },
+    // });
     const { getByTestId, getByText } = render(
       <SnackbarProvider>
         <AuthModalButton />
@@ -104,10 +104,10 @@ describe(AuthModalButton.name, () => {
   });
 
   it.skip('should call login on submit', async () => {
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: null },
-      login: jest.fn(),
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: null },
+    //   login: jest.fn(),
+    // });
     const { getByTestId } = render(
       <SnackbarProvider>
         <AuthModalButton />
@@ -117,16 +117,16 @@ describe(AuthModalButton.name, () => {
     fireEvent.click(button);
     const submit = getByTestId('submit-button');
     fireEvent.click(submit);
-    await waitFor(() => {
-      expect(useUserAccount().login).toHaveBeenCalled();
-    });
+    // await waitFor(() => {
+    //   expect(useUserAccount().login).toHaveBeenCalled();
+    // });
   });
 
   it.skip('should call register on submit', async () => {
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: null },
-      register: jest.fn(),
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: null },
+    //   register: jest.fn(),
+    // });
     const { getByTestId, getByText } = render(
       <SnackbarProvider>
         <AuthModalButton />
@@ -138,15 +138,15 @@ describe(AuthModalButton.name, () => {
     fireEvent.click(registerTab);
     const submitRegisterButton = getByTestId('submit-button');
     fireEvent.click(submitRegisterButton);
-    await waitFor(() => {
-      expect(useUserAccount().register).toHaveBeenCalled();
-    });
+    // await waitFor(() => {
+    //   expect(useUserAccount().register).toHaveBeenCalled();
+    // });
   });
 
   it.skip('should display start decorators and logout button if user is logged in', () => {
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: '123' },
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: '123' },
+    // });
     const { getByTestId, queryByTestId } = render(
       <SnackbarProvider>
         <AuthModalButton />
@@ -160,10 +160,10 @@ describe(AuthModalButton.name, () => {
 
   it.skip('should call logout on logout button click if user is logged in', () => {
     const mockLogOut = jest.fn();
-    (useUserAccount as jest.Mock).mockReturnValue({
-      supabaseUser: { id: '123' },
-      logout: mockLogOut,
-    });
+    // (useUserAccount as jest.Mock).mockReturnValue({
+    //   supabaseUser: { id: '123' },
+    //   logout: mockLogOut,
+    // });
     const { getByTestId } = render(
       <BrowserRouter>
         <SnackbarProvider>

diff --git a/src/components/user-account/AuthModalButton.tsx b/src/components/user-account/AuthModalButton.tsx
@@ -1,4 +1,4 @@
-import { useUserAccount } from '@context';
+import { useSnackbar } from '@context';
 import {
   Button,
   ButtonGroup,
@@ -16,6 +16,9 @@ import {
   SignOut as SignOutIcon,
   User as UserIcon,
 } from '@phosphor-icons/react';
+import { sendPasswordResetEmail, signIn, signOut, signUp } from '@services';
+import { useUser } from '@supabase/auth-helpers-react';
+import { getErrorMessage } from '@utils';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -24,15 +27,10 @@ import AuthForm from './AuthForm';
 export type AuthMode = 'login' | 'register' | 'reset-password';
 
 const AuthModalButton = () => {
-  const {
-    login,
-    logout,
-    register,
-    resetPassword,
-    authenticating,
-    supabaseUser,
-  } = useUserAccount();
+  const user = useUser();
+  const { showSnackbar } = useSnackbar();
   const { isOpen, onOpen, onOpenChange, onClose } = useDisclosure();
+  const [authenticating, setAuthenticating] = React.useState(false);
   const [mode, setMode] = React.useState<AuthMode>('login');
 
   const handleClose = () => {
@@ -48,9 +46,9 @@ const AuthModalButton = () => {
     AuthMode,
     (email: string, password: string, name: string) => Promise<void>
   > = {
-    login,
-    register,
-    'reset-password': resetPassword,
+    login: signIn,
+    register: signUp,
+    'reset-password': sendPasswordResetEmail,
   };
 
   const actionLabels: Record<AuthMode, string> = {
@@ -65,14 +63,40 @@ const AuthModalButton = () => {
     'reset-password': 'Reset your password',
   };
 
+  const successfulMessages: Record<AuthMode, string> = {
+    login: 'Welcome back!',
+    register: 'Account created!',
+    'reset-password': 'Password reset email sent!',
+  };
+
   const handleSubmit = async (
     email: string,
     password: string,
     name: string
   ) => {
-    await actions[mode](email, password, name);
+    try {
+      setAuthenticating(true);
+
+      await actions[mode](email, password, name);
+
+      setAuthenticating(false);
+
+      handleClose();
 
-    handleClose();
+      showSnackbar(successfulMessages[mode], {
+        color: 'success',
+        dismissible: true,
+        dismissText: 'Done',
+      });
+    } catch (error) {
+      showSnackbar('Something went wrong. Please try again.', {
+        description: `Error details: ${getErrorMessage(error)}`,
+        color: 'danger',
+        dismissible: true,
+      });
+    } finally {
+      setAuthenticating(false);
+    }
   };
 
   const authFormProps = {
@@ -87,7 +111,7 @@ const AuthModalButton = () => {
 
   return (
     <>
-      {supabaseUser?.id ? (
+      {user?.id ? (
         <ButtonGroup>
           <Button
             as={Link}
@@ -100,7 +124,7 @@ const AuthModalButton = () => {
           </Button>
           <Tooltip content="Log out">
             <Button
-              onPress={() => logout()}
+              onPress={signOut}
               isIconOnly
               color="primary"
               className="border-l"

diff --git a/src/context/UserAccount/UserAccountContext.ts b/src/context/UserAccount/UserAccountContext.ts