feat(calendar): replace select with listbox for adding entries (#131)

domhhv · web-flow · commit 5f038a8e21c0 · 2024-12-14T21:45:55.000+01:00
* feat(calendar): replace select with listbox for adding entries

* style: improve code

* ci: increase node version for Object.groupBy support
diff --git a/.github/workflows/code-health.yml b/.github/workflows/code-health.yml
@@ -6,7 +6,7 @@ on:
       - main
 
 env:
-  NODE_VERSION: 20
+  NODE_VERSION: 22
 
 jobs:
   setup:
diff --git a/src/components/calendar/AddOccurrenceDialog.test.tsx b/src/components/calendar/AddOccurrenceDialog.test.tsx
@@ -4,8 +4,9 @@ import { fireEvent, render, waitFor } from '@testing-library/react';
 import { makeTestHabit } from '@tests';
 import { format } from 'date-fns';
 import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
 
-import DayHabitModalDialog from './DayHabitModalDialog';
+import AddOccurrenceDialog from './AddOccurrenceDialog';
 
 jest.mock('@stores', () => ({
   useHabitsStore: jest.fn(),
@@ -20,7 +21,7 @@ jest.mock('date-fns', () => ({
   format: jest.fn(),
 }));
 
-describe(DayHabitModalDialog.name, () => {
+describe(AddOccurrenceDialog.name, () => {
   const mockOnClose = jest.fn();
   const date = new Date(2021, 1, 1, 12);
 
@@ -42,7 +43,11 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: jest.fn(),
       addingOccurrence: false,
     });
-    const { getByText } = render(<DayHabitModalDialog {...props} />);
+    const { getByText } = render(
+      <BrowserRouter>
+        <AddOccurrenceDialog {...props} />
+      </BrowserRouter>
+    );
     expect(getByText('Add habit entries for 2021-01-01')).toBeInTheDocument();
   });
 
@@ -55,7 +60,7 @@ describe(DayHabitModalDialog.name, () => {
       addingOccurrence: false,
     });
     const { container } = render(
-      <DayHabitModalDialog {...props} date={null} />
+      <AddOccurrenceDialog {...props} date={null} />
     );
     expect(container.firstChild).toBeNull();
   });
@@ -69,7 +74,7 @@ describe(DayHabitModalDialog.name, () => {
       addingOccurrence: false,
     });
     const { container } = render(
-      <DayHabitModalDialog {...props} open={false} />
+      <AddOccurrenceDialog {...props} open={false} />
     );
     expect(container.firstChild).toBeNull();
   });
@@ -83,7 +88,7 @@ describe(DayHabitModalDialog.name, () => {
       addingOccurrence: false,
     });
     const { container } = render(
-      <DayHabitModalDialog {...props} date={null} />
+      <AddOccurrenceDialog {...props} date={null} />
     );
     expect(container.firstChild).toBeNull();
   });
@@ -96,8 +101,14 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: jest.fn(),
       addingOccurrence: false,
     });
-    const { getAllByText } = render(<DayHabitModalDialog {...props} />);
-    expect(getAllByText('No habits yet')).toHaveLength(2);
+    const { getByText } = render(
+      <BrowserRouter>
+        <AddOccurrenceDialog {...props} />
+      </BrowserRouter>
+    );
+    expect(
+      getByText('No habits yet. Create a habit to get started.')
+    ).toBeInTheDocument();
   });
 
   it('should render habit options', () => {
@@ -110,7 +121,7 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: jest.fn(),
       addingOccurrence: false,
     });
-    const { getByText } = render(<DayHabitModalDialog {...props} />);
+    const { getByText } = render(<AddOccurrenceDialog {...props} />);
     expect(getByText('Test Habit')).toBeInTheDocument();
   });
 
@@ -125,7 +136,7 @@ describe(DayHabitModalDialog.name, () => {
       addingOccurrence: false,
     });
     const { container, getAllByText, getByTestId } = render(
-      <DayHabitModalDialog {...props} />
+      <AddOccurrenceDialog {...props} />
     );
     fireEvent.click(getByTestId('habit-select'));
     fireEvent.click(getAllByText('Test Habit')[1]);
@@ -145,7 +156,7 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: jest.fn(),
       addingOccurrence: false,
     });
-    const { getByRole } = render(<DayHabitModalDialog {...props} />);
+    const { getByRole } = render(<AddOccurrenceDialog {...props} />);
     fireEvent.click(getByRole('button', { name: 'Close' }));
     expect(mockOnClose).toHaveBeenCalledTimes(1);
   });
@@ -160,7 +171,7 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: jest.fn(),
       addingOccurrence: false,
     });
-    const { getByRole, getByText } = render(<DayHabitModalDialog {...props} />);
+    const { getByRole, getByText } = render(<AddOccurrenceDialog {...props} />);
     fireEvent.click(getByRole('habit-select'));
     fireEvent.click(getByText('Test Habit'));
     expect(
@@ -183,7 +194,7 @@ describe(DayHabitModalDialog.name, () => {
       addOccurrence: mockAddOccurrence,
       addingOccurrence: false,
     });
-    const { getByRole, getByText } = render(<DayHabitModalDialog {...props} />);
+    const { getByRole, getByText } = render(<AddOccurrenceDialog {...props} />);
     fireEvent.click(getByRole('habit-select'));
     fireEvent.click(getByText('Test Habit'));
     expect(
diff --git a/src/components/calendar/AddOccurrenceDialog.tsx b/src/components/calendar/AddOccurrenceDialog.tsx
@@ -5,38 +5,46 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  Select,
-  SelectItem,
+  Listbox,
+  ListboxSection,
+  ListboxItem,
 } from '@nextui-org/react';
 import { useHabitsStore, useOccurrencesStore } from '@stores';
 import { useUser } from '@supabase/auth-helpers-react';
 import { format } from 'date-fns';
 import React, { type MouseEventHandler } from 'react';
+import { Link } from 'react-router-dom';
 
-type DayHabitModalDialogProps = {
+type AddOccurrenceDialogProps = {
   open: boolean;
   onClose: () => void;
   date: Date | null;
 };
 
-const DayHabitModalDialog = ({
+const AddOccurrenceDialog = ({
   open,
   onClose,
   date,
-}: DayHabitModalDialogProps) => {
+}: AddOccurrenceDialogProps) => {
   const { habits } = useHabitsStore();
   const user = useUser();
   const { addOccurrence, addingOccurrence } = useOccurrencesStore();
   const [selectedHabitIds, setSelectedHabitIds] = React.useState<string[]>([]);
 
+  const habitsByTraitName = React.useMemo(() => {
+    return Object.groupBy(habits, (habit) => habit.trait?.name || 'Unknown');
+  }, [habits]);
+
   if (!date || !open) {
     return null;
   }
 
+  const hasHabits = habits.length > 0;
+
   const handleSubmit: MouseEventHandler<HTMLButtonElement> = async (event) => {
     event.preventDefault();
 
-    if (!user) {
+    if (!user || !hasHabits) {
       return null;
     }
 
@@ -68,8 +76,6 @@ const DayHabitModalDialog = ({
     }
   };
 
-  const hasHabits = habits.length > 0;
-
   return (
     <Modal
       role="add-occurrence-modal"
@@ -82,43 +88,50 @@ const DayHabitModalDialog = ({
           Add habit entries for {format(date, 'iii, LLL d, y')}
         </ModalHeader>
         <ModalBody>
-          <Select
+          <Listbox
+            variant="flat"
+            color="primary"
             selectionMode="multiple"
-            label={hasHabits ? 'Habits' : 'No habits yet'}
             selectedKeys={selectedHabitIds}
-            description="Select from your habits"
-            data-testid="habit-select"
+            disabledKeys={['none']}
+            emptyContent="No habits yet. Create a habit to get started."
+            className="max-h-80 overflow-auto rounded border border-neutral-200 p-2 dark:border-neutral-800"
           >
-            {habits.map((habit) => (
-              <SelectItem
-                key={habit.id.toString()}
-                onClick={() => handleHabitSelect(habit.id.toString())}
-                textValue={habit.name}
-              >
-                <span>{habit.name}</span>
-                {habit.trait && (
-                  <span className="font-regular ml-2 text-neutral-400">
-                    {habit.trait.name}
-                  </span>
+            {Object.keys(habitsByTraitName).map((traitName) => (
+              <ListboxSection key={traitName} showDivider title={traitName}>
+                {habitsByTraitName[traitName] ? (
+                  habitsByTraitName[traitName].map((habit) => (
+                    <ListboxItem
+                      key={habit.id.toString()}
+                      onClick={() => handleHabitSelect(habit.id.toString())}
+                    >
+                      {habit.name}
+                    </ListboxItem>
+                  ))
+                ) : (
+                  <ListboxItem key="none">No habits</ListboxItem>
                 )}
-              </SelectItem>
+              </ListboxSection>
             ))}
-          </Select>
+          </Listbox>
         </ModalBody>
         <ModalFooter>
           <Button
+            as={hasHabits ? Button : Link}
             type="submit"
             color="primary"
             isLoading={addingOccurrence}
-            isDisabled={!hasHabits}
-            onClick={handleSubmit}
+            onClick={hasHabits ? handleSubmit : undefined}
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            to={hasHabits ? undefined : '/habits'}
           >
-            Submit
+            {hasHabits ? 'Add' : 'Go to Habits'}
           </Button>
         </ModalFooter>
       </ModalContent>
     </Modal>
   );
 };
 
-export default DayHabitModalDialog;
+export default AddOccurrenceDialog;
diff --git a/src/components/calendar/CalendarGrid.tsx b/src/components/calendar/CalendarGrid.tsx
@@ -2,8 +2,8 @@ import React from 'react';
 import { useCalendarGrid } from 'react-aria';
 import { type CalendarState } from 'react-stately';
 
+import AddOccurrenceDialog from './AddOccurrenceDialog';
 import CalendarMonthGrid from './CalendarMonthGrid';
-import DayHabitModalDialog from './DayHabitModalDialog';
 
 type CalendarGridProps = {
   state: CalendarState;
@@ -50,7 +50,7 @@ const CalendarGrid = ({ state }: CalendarGridProps) => {
         state={state}
       />
 
-      <DayHabitModalDialog
+      <AddOccurrenceDialog
         open={dayModalDialogOpen}
         onClose={handleDayModalDialogClose}
         date={activeDate}
