feat(snackbars): migrate context to zustand store (#113)

domhhv · Oct 23, 2024 · 946fdbc · 946fdbc
1 parent b9a9c82
commit 946fdbc
Show file tree

Hide file tree

Showing 30 changed files with 231 additions and 294 deletions.
diff --git a/package.json b/package.json
@@ -74,7 +74,8 @@
     "react-stately": "^3.32.2",
     "sort-by": "^1.2.0",
     "tailwind-merge": "^2.5.2",
-    "type-fest": "^4.26.1"
+    "type-fest": "^4.26.1",
+    "zustand": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",

diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
@@ -20,6 +20,7 @@ jest.mock('@components', () => ({
   HabitsPage: jest.fn(),
   AppHeader: jest.fn(),
   AccountPage: jest.fn(),
+  Snackbars: jest.fn(),
 }));
 
 jest.mock('react-aria', () => ({
@@ -31,8 +32,6 @@ jest.mock('react-aria', () => ({
 }));
 
 jest.mock('@context', () => ({
-  SnackbarProvider: jest.fn().mockImplementation(({ children }) => children),
-  UserAccountProvider: jest.fn().mockImplementation(({ children }) => children),
   TraitsProvider: jest.fn().mockImplementation(({ children }) => children),
   HabitsProvider: jest.fn().mockImplementation(({ children }) => children),
   OccurrencesProvider: jest.fn().mockImplementation(({ children }) => children),

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -1,4 +1,10 @@
-import { AppHeader, Calendar, AccountPage, HabitsPage } from '@components';
+import {
+  AppHeader,
+  Calendar,
+  AccountPage,
+  HabitsPage,
+  Snackbars,
+} from '@components';
 import { useCalendar } from '@hooks';
 import { setDefaultOptions } from 'date-fns';
 import { enGB } from 'date-fns/locale';
@@ -32,6 +38,7 @@ const App = () => {
           <Route path="*" element={<Navigate to="/calendar" replace />} />
         </Routes>
       </div>
+      <Snackbars />
     </Providers>
   );
 };

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
@@ -1,9 +1,4 @@
-import {
-  HabitsProvider,
-  OccurrencesProvider,
-  SnackbarProvider,
-  TraitsProvider,
-} from '@context';
+import { HabitsProvider, OccurrencesProvider, TraitsProvider } from '@context';
 import { supabaseClient } from '@helpers';
 import { NextUIProvider } from '@nextui-org/react';
 import { SessionContextProvider } from '@supabase/auth-helpers-react';
@@ -25,15 +20,13 @@ const LowerProviders = ({ children, rangeStart, rangeEnd }: ProviderProps) => {
 
   return (
     <NextUIProvider navigate={navigate}>
-      <SnackbarProvider>
-        <TraitsProvider>
-          <HabitsProvider>
-            <OccurrencesProvider rangeStart={rangeStart} rangeEnd={rangeEnd}>
-              {children}
-            </OccurrencesProvider>
-          </HabitsProvider>
-        </TraitsProvider>
-      </SnackbarProvider>
+      <TraitsProvider>
+        <HabitsProvider>
+          <OccurrencesProvider rangeStart={rangeStart} rangeEnd={rangeEnd}>
+            {children}
+          </OccurrencesProvider>
+        </HabitsProvider>
+      </TraitsProvider>
     </NextUIProvider>
   );
 };

diff --git a/src/components/calendar/CalendarHeader.test.tsx b/src/components/calendar/CalendarHeader.test.tsx
@@ -1,9 +1,4 @@
-import {
-  HabitsProvider,
-  OccurrencesProvider,
-  SnackbarProvider,
-  TraitsProvider,
-} from '@context';
+import { HabitsProvider, OccurrencesProvider, TraitsProvider } from '@context';
 import { render } from '@testing-library/react';
 import React from 'react';
 
@@ -30,82 +25,72 @@ describe(CalendarHeader.name, () => {
 
   it.skip('should render month and year', () => {
     const { getByText } = render(
-      <SnackbarProvider>
-        <HabitsProvider>
-          <TraitsProvider>
-            <OccurrencesProvider rangeStart={0} rangeEnd={0}>
-              <CalendarHeader {...props} />
-            </OccurrencesProvider>
-          </TraitsProvider>
-        </HabitsProvider>
-      </SnackbarProvider>
+      <HabitsProvider>
+        <TraitsProvider>
+          <OccurrencesProvider rangeStart={0} rangeEnd={0}>
+            <CalendarHeader {...props} />
+          </OccurrencesProvider>
+        </TraitsProvider>
+      </HabitsProvider>
     );
     expect(getByText('January 2022')).toBeInTheDocument();
   });
 
   it.skip('should disable previous button', () => {
     const { getByRole } = render(
-      <SnackbarProvider>
-        <HabitsProvider>
-          <TraitsProvider>
-            <OccurrencesProvider rangeStart={0} rangeEnd={0}>
-              <CalendarHeader
-                {...props}
-                prevButtonProps={{ ...props.prevButtonProps, disabled: true }}
-              />
-            </OccurrencesProvider>
-          </TraitsProvider>
-        </HabitsProvider>
-      </SnackbarProvider>
+      <HabitsProvider>
+        <TraitsProvider>
+          <OccurrencesProvider rangeStart={0} rangeEnd={0}>
+            <CalendarHeader
+              {...props}
+              prevButtonProps={{ ...props.prevButtonProps, disabled: true }}
+            />
+          </OccurrencesProvider>
+        </TraitsProvider>
+      </HabitsProvider>
     );
     expect(getByRole('navigate-back')).toBeDisabled();
   });
 
   it.skip('should disable next button', () => {
     const { getByRole } = render(
-      <SnackbarProvider>
-        <HabitsProvider>
-          <TraitsProvider>
-            <OccurrencesProvider rangeStart={0} rangeEnd={0}>
-              <CalendarHeader
-                {...props}
-                nextButtonProps={{ ...props.nextButtonProps, disabled: true }}
-              />
-            </OccurrencesProvider>
-          </TraitsProvider>
-        </HabitsProvider>
-      </SnackbarProvider>
+      <HabitsProvider>
+        <TraitsProvider>
+          <OccurrencesProvider rangeStart={0} rangeEnd={0}>
+            <CalendarHeader
+              {...props}
+              nextButtonProps={{ ...props.nextButtonProps, disabled: true }}
+            />
+          </OccurrencesProvider>
+        </TraitsProvider>
+      </HabitsProvider>
     );
     expect(getByRole('navigate-forward')).toBeDisabled();
   });
 
   it.skip('should call onNavigateBack', () => {
     const { getByRole } = render(
-      <SnackbarProvider>
-        <HabitsProvider>
-          <TraitsProvider>
-            <OccurrencesProvider rangeStart={0} rangeEnd={0}>
-              <CalendarHeader {...props} />
-            </OccurrencesProvider>
-          </TraitsProvider>
-        </HabitsProvider>
-      </SnackbarProvider>
+      <HabitsProvider>
+        <TraitsProvider>
+          <OccurrencesProvider rangeStart={0} rangeEnd={0}>
+            <CalendarHeader {...props} />
+          </OccurrencesProvider>
+        </TraitsProvider>
+      </HabitsProvider>
     );
     getByRole('navigate-back').click();
     expect(props.onNavigateBack).toHaveBeenCalled();
   });
 
   it.skip('should call onNavigateForward', () => {
     const { getByRole } = render(
-      <SnackbarProvider>
-        <HabitsProvider>
-          <TraitsProvider>
-            <OccurrencesProvider rangeStart={0} rangeEnd={0}>
-              <CalendarHeader {...props} />
-            </OccurrencesProvider>
-          </TraitsProvider>
-        </HabitsProvider>
-      </SnackbarProvider>
+      <HabitsProvider>
+        <TraitsProvider>
+          <OccurrencesProvider rangeStart={0} rangeEnd={0}>
+            <CalendarHeader {...props} />
+          </OccurrencesProvider>
+        </TraitsProvider>
+      </HabitsProvider>
     );
     getByRole('navigate-forward').click();
     expect(props.onNavigateForward).toHaveBeenCalled();

diff --git a/src/components/common/Snackbars/Snackbars.tsx b/src/components/common/Snackbars/Snackbars.tsx
@@ -0,0 +1,25 @@
+import { Alert } from '@components';
+import { useSnackbarsStore } from '@stores';
+import React from 'react';
+
+const Snackbars = () => {
+  const { snackbars, hideSnackbar } = useSnackbarsStore();
+
+  return (
+    <div className="fixed bottom-2 left-2 z-[99] flex flex-col gap-2">
+      {snackbars.map(({ id, message, options }) => {
+        return (
+          <Alert
+            key={id}
+            message={message}
+            {...options}
+            onDismiss={() => hideSnackbar(id)}
+            testId="snackbar"
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+export default Snackbars;
diff --git a/src/components/common/Snackbars/index.ts b/src/components/common/Snackbars/index.ts
@@ -0,0 +1 @@
+export { default as Snackbars } from './Snackbars';
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
@@ -2,3 +2,4 @@ export * from './ConfirmDialog';
 export * from './VisuallyHiddenInput';
 export * from './PasswordInput';
 export * from './Alert';
+export * from './Snackbars';
diff --git a/src/components/habit/add-habit/AddHabitDialogButton.test.tsx b/src/components/habit/add-habit/AddHabitDialogButton.test.tsx
@@ -1,5 +1,6 @@
-import { useHabits, useSnackbar } from '@context';
+import { useHabits } from '@context';
 import { StorageBuckets, uploadFile } from '@services';
+// import { useSnackbarsStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
@@ -14,6 +15,10 @@ jest.mock('@context', () => ({
   }),
 }));
 
+jest.mock('@stores', () => ({
+  useSnackbarsStore: jest.fn(),
+}));
+
 jest.mock('@services', () => ({
   StorageBuckets: {
     HABIT_ICONS: 'habit-icons',
@@ -115,7 +120,7 @@ describe(AddHabitDialogButton.name, () => {
       .fn()
       .mockReturnValue(Promise.resolve({ id: 1234 }));
     const mockUpdateHabit = jest.fn().mockReturnValue(Promise.resolve({}));
-    const mockShowSnackbar = jest.fn();
+    // const mockShowSnackbar = jest.fn();
     (uploadFile as jest.Mock).mockReturnValue(
       Promise.resolve({ data: { path: 'icon-path' } })
     );
@@ -126,9 +131,9 @@ describe(AddHabitDialogButton.name, () => {
     (useUser as jest.Mock).mockReturnValue({
       id: 'uuid-42',
     });
-    (useSnackbar as jest.Mock).mockReturnValue({
-      showSnackbar: mockShowSnackbar,
-    });
+    // (useSnackbarsStore as jest.Mock).mockReturnValue({
+    //   showSnackbar: mockShowSnackbar,
+    // });
 
     const { getByRole, getByTestId, getByLabelText } = render(
       <AddHabitDialogButton />

diff --git a/src/components/header/Header.test.tsx b/src/components/header/Header.test.tsx
@@ -1,4 +1,3 @@
-import { SnackbarProvider } from '@context';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
@@ -23,9 +22,7 @@ describe(Header.name, () => {
   it('should render habits and calendar links', () => {
     const { getByText } = render(
       <BrowserRouter>
-        <SnackbarProvider>
-          <Header />
-        </SnackbarProvider>
+        <Header />
       </BrowserRouter>
     );
     expect(getByText('Calendar')).toBeDefined();

diff --git a/src/components/user-account/AccountPage.test.tsx b/src/components/user-account/AccountPage.test.tsx
@@ -1,4 +1,3 @@
-import { SnackbarProvider } from '@context';
 import { useUser } from '@supabase/auth-helpers-react';
 import { act, fireEvent, render } from '@testing-library/react';
 import React from 'react';
@@ -52,9 +51,7 @@ describe(AccountPage.name, () => {
     (useUser as jest.Mock).mockReturnValue({ id: null });
     const { getByTestId } = render(
       <BrowserRouter>
-        <SnackbarProvider>
-          <AccountPage />
-        </SnackbarProvider>
+        <AccountPage />
       </BrowserRouter>
     );
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Snackbars } from './Snackbars';