feat(calendar): allow adding multiple habit entries at once (#104)

domhhv · Oct 15, 2024 · cb1ec54 · cb1ec54
1 parent 3ba6198
commit cb1ec54
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 24 deletions.
diff --git a/src/components/calendar/DayHabitModalDialog.test.tsx b/src/components/calendar/DayHabitModalDialog.test.tsx
@@ -11,6 +11,7 @@ jest.mock('@context', () => ({
   useOccurrences: jest.fn(),
   useHabits: jest.fn(),
   useTraits: jest.fn(),
+  useSnackbar: jest.fn().mockReturnValue({ showSnackbar: jest.fn() }),
 }));
 
 jest.mock('@supabase/auth-helpers-react', () => ({
@@ -45,7 +46,7 @@ describe(DayHabitModalDialog.name, () => {
       addingOccurrence: false,
     });
     const { getByText } = render(<DayHabitModalDialog {...props} />);
-    expect(getByText('Add a habit entry for 2021-01-01')).toBeInTheDocument();
+    expect(getByText('Add habit entries for 2021-01-01')).toBeInTheDocument();
   });
 
   it('should not render if date is null', () => {

diff --git a/src/components/calendar/DayHabitModalDialog.tsx b/src/components/calendar/DayHabitModalDialog.tsx
@@ -1,4 +1,4 @@
-import { useOccurrences, useHabits, useTraits } from '@context';
+import { useOccurrences, useHabits, useTraits, useSnackbar } from '@context';
 import {
   Button,
   Modal,
@@ -24,10 +24,11 @@ const DayHabitModalDialog = ({
   onClose,
   date,
 }: DayHabitModalDialogProps) => {
+  const { showSnackbar } = useSnackbar();
   const { habits } = useHabits();
   const user = useUser();
   const { addOccurrence, addingOccurrence } = useOccurrences();
-  const [selectedHabitId, setSelectedHabitId] = React.useState('');
+  const [selectedHabitIds, setSelectedHabitIds] = React.useState<string[]>([]);
   const { traitsMap } = useTraits();
 
   if (!date || !open) {
@@ -37,23 +38,40 @@ const DayHabitModalDialog = ({
   const handleSubmit: MouseEventHandler<HTMLButtonElement> = async (event) => {
     event.preventDefault();
 
-    const occurrence = {
-      day: date.toISOString().split('T')[0],
-      timestamp: +date,
-      habitId: +selectedHabitId,
-      userId: user?.id as string,
-      time: null, // TODO: Add time picker
-    };
-    await addOccurrence(occurrence);
+    const addOccurrences = selectedHabitIds.map((id) => {
+      return addOccurrence({
+        day: date.toISOString().split('T')[0],
+        timestamp: +date,
+        habitId: +id,
+        userId: user?.id as string,
+        time: null, // TODO: Add time picker
+      });
+    });
+
+    await Promise.all(addOccurrences);
+
+    showSnackbar('Habit entries are added to the calendar', {
+      color: 'success',
+      dismissible: true,
+      dismissText: 'Done',
+    });
 
     handleClose();
   };
 
   const handleClose = () => {
-    setSelectedHabitId('');
+    setSelectedHabitIds([]);
     onClose();
   };
 
+  const handleHabitSelect = (habitId: string) => {
+    if (selectedHabitIds.includes(habitId)) {
+      setSelectedHabitIds(selectedHabitIds.filter((id) => id !== habitId));
+    } else {
+      setSelectedHabitIds([...selectedHabitIds, habitId]);
+    }
+  };
+
   const hasHabits = habits.length > 0;
 
   return (
@@ -65,22 +83,20 @@ const DayHabitModalDialog = ({
     >
       <ModalContent>
         <ModalHeader>
-          Add a habit entry for {format(date, 'iii, LLL d, y')}
+          Add habit entries for {format(date, 'iii, LLL d, y')}
         </ModalHeader>
         <ModalBody>
           <Select
-            required
+            selectionMode="multiple"
             label={hasHabits ? 'Habits' : 'No habits yet'}
-            selectedKeys={[selectedHabitId]}
+            selectedKeys={selectedHabitIds}
             description="Select from your habits"
             data-testid="habit-select"
           >
             {habits.map((habit) => (
               <SelectItem
                 key={habit.id.toString()}
-                onClick={() => {
-                  setSelectedHabitId(habit.id.toString());
-                }}
+                onClick={() => handleHabitSelect(habit.id.toString())}
                 textValue={habit.name}
               >
                 <span>{habit.name}</span>

diff --git a/src/context/Occurrences/OccurrencesProvider.tsx b/src/context/Occurrences/OccurrencesProvider.tsx
@@ -122,12 +122,6 @@ const OccurrencesProvider = ({ children, rangeStart, rangeEnd }: Props) => {
           ...prevOccurrences,
           nextOccurrence,
         ]);
-
-        showSnackbar('Your habit entry has been added to the calendar!', {
-          color: 'success',
-          dismissible: true,
-          dismissText: 'Done',
-        });
       } catch (e) {
         showSnackbar('Something went wrong while adding your habit', {
           color: 'danger',