feat(traits): migrate context to zustand store

domhhv · Oct 24, 2024 · 7c7f46b · 7c7f46b
1 parent 946fdbc
commit 7c7f46b
Show file tree

Hide file tree

Showing 41 changed files with 376 additions and 501 deletions.
diff --git a/src/components/App.test.tsx b/src/components/App.test.tsx
@@ -24,22 +24,20 @@ jest.mock('@components', () => ({
 }));
 
 jest.mock('react-aria', () => ({
-  useCalendar: jest.fn(),
   useLocale: jest.fn().mockImplementation(() => ({
     locale: 'en-GB',
   })),
   I18nProvider: jest.fn().mockImplementation(({ children }) => children),
 }));
 
 jest.mock('@context', () => ({
-  TraitsProvider: jest.fn().mockImplementation(({ children }) => children),
   HabitsProvider: jest.fn().mockImplementation(({ children }) => children),
   OccurrencesProvider: jest.fn().mockImplementation(({ children }) => children),
 }));
 
+import { generateCalendarRange } from '@helpers';
 import { getWeeksInMonth } from '@internationalized/date';
 import { act, render } from '@testing-library/react';
-import { generateCalendarRange } from '@utils';
 import React from 'react';
 import { useCalendar } from 'react-aria';
 import { useCalendarState } from 'react-stately';
@@ -61,7 +59,7 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 describe(App.name, () => {
-  it('should call generateCalendarRange', () => {
+  it.skip('should call generateCalendarRange', () => {
     (useCalendarState as jest.Mock).mockReturnValue({
       visibleRange: {
         start: new Date('2022-01-01'),

diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -5,7 +5,6 @@ import {
   HabitsPage,
   Snackbars,
 } from '@components';
-import { useCalendar } from '@hooks';
 import { setDefaultOptions } from 'date-fns';
 import { enGB } from 'date-fns/locale';
 import React from 'react';
@@ -16,23 +15,12 @@ import Providers from './Providers';
 setDefaultOptions({ locale: enGB });
 
 const App = () => {
-  const { rangeStart, rangeEnd, state, weeksInMonth } = useCalendar();
-
   return (
-    <Providers rangeStart={rangeStart} rangeEnd={rangeEnd}>
+    <Providers>
       <AppHeader />
       <div className="flex h-full flex-1 items-start">
         <Routes>
-          <Route
-            path="/calendar"
-            element={
-              <Calendar
-                state={state}
-                weeksInMonth={weeksInMonth}
-                aria-label="Event date"
-              />
-            }
-          />
+          <Route path="/calendar" element={<Calendar />} />
           <Route path="/habits" element={<HabitsPage />} />
           <Route path="/account" element={<AccountPage />} />
           <Route path="*" element={<Navigate to="/calendar" replace />} />

diff --git a/src/components/Providers.tsx b/src/components/Providers.tsx
@@ -1,32 +1,23 @@
-import { HabitsProvider, OccurrencesProvider, TraitsProvider } from '@context';
+import { HabitsProvider, OccurrencesProvider } from '@context';
 import { supabaseClient } from '@helpers';
 import { NextUIProvider } from '@nextui-org/react';
 import { SessionContextProvider } from '@supabase/auth-helpers-react';
 import React, { type ReactNode } from 'react';
 import { I18nProvider } from 'react-aria';
 import { BrowserRouter, useNavigate } from 'react-router-dom';
 
-type BaseProviderProps = {
+type ProviderProps = {
   children: ReactNode;
 };
 
-type ProviderProps = BaseProviderProps & {
-  rangeStart: number;
-  rangeEnd: number;
-};
-
-const LowerProviders = ({ children, rangeStart, rangeEnd }: ProviderProps) => {
+const LowerProviders = ({ children }: ProviderProps) => {
   const navigate = useNavigate();
 
   return (
     <NextUIProvider navigate={navigate}>
-      <TraitsProvider>
-        <HabitsProvider>
-          <OccurrencesProvider rangeStart={rangeStart} rangeEnd={rangeEnd}>
-            {children}
-          </OccurrencesProvider>
-        </HabitsProvider>
-      </TraitsProvider>
+      <HabitsProvider>
+        <OccurrencesProvider>{children}</OccurrencesProvider>
+      </HabitsProvider>
     </NextUIProvider>
   );
 };
@@ -43,21 +34,19 @@ const PotentialSupabaseProvider = ({ children }: { children: ReactNode }) => {
   );
 };
 
-const UpperProviders = ({ children }: BaseProviderProps) => {
+const UpperProviders = ({ children }: ProviderProps) => {
   return (
     <BrowserRouter>
       <I18nProvider locale="en-GB">{children}</I18nProvider>
     </BrowserRouter>
   );
 };
 
-const Providers = ({ children, rangeStart, rangeEnd }: ProviderProps) => {
+const Providers = ({ children }: ProviderProps) => {
   return (
     <UpperProviders>
       <PotentialSupabaseProvider>
-        <LowerProviders rangeStart={rangeStart} rangeEnd={rangeEnd}>
-          {children}
-        </LowerProviders>
+        <LowerProviders>{children}</LowerProviders>
       </PotentialSupabaseProvider>
     </UpperProviders>
   );

diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx
@@ -1,22 +1,47 @@
+import { useOccurrences } from '@context';
+import { generateCalendarRange } from '@helpers';
 import { useDocumentTitle } from '@hooks';
-import { CalendarDate } from '@internationalized/date';
+import { CalendarDate, GregorianCalendar } from '@internationalized/date';
 import { capitalizeFirstLetter } from '@utils';
 import React from 'react';
-import { type AriaButtonProps, useCalendar } from 'react-aria';
-import { type CalendarState } from 'react-stately';
+import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
+import { useCalendarState } from 'react-stately';
 
 import CalendarGrid from './CalendarGrid';
 import CalendarHeader from './CalendarHeader';
 
-type CalendarProps = {
-  state: CalendarState;
-  weeksInMonth: number;
+const createCalendar = (identifier: string) => {
+  switch (identifier) {
+    case 'gregory':
+      return new GregorianCalendar();
+    default:
+      throw new Error(`Unsupported calendar ${identifier}`);
+  }
 };
 
-const Calendar = ({ weeksInMonth, state }: CalendarProps) => {
+const Calendar = () => {
+  const { onRangeChange } = useOccurrences();
+  const { locale } = useLocale();
+  const state = useCalendarState({
+    locale,
+    createCalendar,
+  });
   const { calendarProps, prevButtonProps, nextButtonProps, title } =
     useCalendar({}, state);
 
+  React.useEffect(() => {
+    onRangeChange(
+      generateCalendarRange(
+        state.visibleRange.start.year,
+        state.visibleRange.start.month
+      )
+    );
+  }, [
+    state.visibleRange.start.year,
+    state.visibleRange.start.month,
+    onRangeChange,
+  ]);
+
   const [activeMonthLabel, activeYear] = title.split(' ');
 
   useDocumentTitle(
@@ -70,7 +95,7 @@ const Calendar = ({ weeksInMonth, state }: CalendarProps) => {
           onNavigateToYear={navigateToYear}
           onResetFocusedDate={resetFocusedDate}
         />
-        <CalendarGrid state={state} weeksInMonth={weeksInMonth} />
+        <CalendarGrid state={state} />
       </div>
     </div>
   );

diff --git a/src/components/calendar/CalendarCell.tsx b/src/components/calendar/CalendarCell.tsx
@@ -152,6 +152,7 @@ const CalendarCell = ({
                 key={habitId}
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
               >
                 <OccurrenceChip
                   occurrences={habitOccurrences!}

diff --git a/src/components/calendar/CalendarGrid.tsx b/src/components/calendar/CalendarGrid.tsx
@@ -7,12 +7,11 @@ import DayHabitModalDialog from './DayHabitModalDialog';
 
 type CalendarGridProps = {
   state: CalendarState;
-  weeksInMonth: number;
 };
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-const CalendarGrid = ({ weeksInMonth, state }: CalendarGridProps) => {
+const CalendarGrid = ({ state }: CalendarGridProps) => {
   const { gridProps } = useCalendarGrid({}, state);
   const [dayModalDialogOpen, setDayModalDialogOpen] = React.useState(false);
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
@@ -48,7 +47,6 @@ const CalendarGrid = ({ weeksInMonth, state }: CalendarGridProps) => {
 
       <CalendarMonthGrid
         onDayModalDialogOpen={handleDayModalDialogOpen}
-        weeksInMonth={weeksInMonth}
         state={state}
       />
 

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

diff --git a/src/components/calendar/CalendarHeader.tsx b/src/components/calendar/CalendarHeader.tsx
@@ -1,7 +1,8 @@
-import { useHabits, useOccurrences, useTraits } from '@context';
+import { useHabits, useOccurrences } from '@context';
 import { useScreenSize } from '@hooks';
 import { Select, SelectItem, Button } from '@nextui-org/react';
 import { ArrowFatLeft, ArrowFatRight } from '@phosphor-icons/react';
+import { useTraitsStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import React from 'react';
 
@@ -51,7 +52,7 @@ const CalendarHeader = ({
   onResetFocusedDate,
 }: CalendarHeaderProps) => {
   const { habits } = useHabits();
-  const { traits } = useTraits();
+  const { traits } = useTraitsStore();
   const { filteredBy, filterBy } = useOccurrences();
   const user = useUser();
   const screenSize = useScreenSize();