fix(calendar): trigger occurrences initial fetch (#150)

src/components/calendar-month/MonthCalendar.tsx

@@ -4,7 +4,13 @@ import { useDisclosure } from '@nextui-org/react';
 import { useOccurrencesStore } from '@stores';
 import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
-import { endOfMonth, endOfWeek, startOfMonth, startOfWeek } from 'date-fns';
+import {
+  endOfMonth,
+  endOfWeek,
+  startOfMonth,
+  startOfWeek,
+  startOfToday,
+} from 'date-fns';
 import React from 'react';
 import { useCalendar, useLocale } from 'react-aria';
 import { useParams } from 'react-router-dom';
@@ -49,13 +55,15 @@ const MonthCalendar = () => {
   const params = useParams();
 
   React.useEffect(() => {
-    const { year, month, day } = params;
+    const currentMonth = startOfMonth(startOfToday());
 
-    if (!year || !month || !day) {
-      return;
-    }
+    const {
+      year = currentMonth.getFullYear(),
+      month = currentMonth.getMonth() + 1,
+      day = currentMonth.getDate(),
+    } = params;
 
-    const focusedDate = new Date(Number(year), Number(month) - 1, 1);
+    const focusedDate = new Date(Number(year), Number(month) - 1, Number(day));
 
     const rangeStart = startOfWeek(startOfMonth(focusedDate));
     const rangeEnd = endOfWeek(endOfMonth(focusedDate));

src/components/calendar-month/MonthCalendarHeader.tsx

@@ -3,6 +3,7 @@ import { useScreenWidth } from '@hooks';
 import type { Habit, Trait } from '@models';
 import type { SelectedItems } from '@nextui-org/react';
 import {
+  Tooltip,
   ListboxItem,
   Select,
   SelectItem,
@@ -242,12 +243,16 @@ const MonthCalendarHeader = ({
                 const iconUrl = getHabitIconUrl(iconPath);
 
                 return (
-                  <img
-                    key={id}
-                    src={iconUrl}
-                    alt={`${name} icon`}
-                    className={clsx('h-4 w-4', screenWidth < 400 && 'h-3 w-3')}
-                  />
+                  <Tooltip key={id} content={name}>
+                    <img
+                      src={iconUrl}
+                      alt={`${name} icon`}
+                      className={clsx(
+                        'h-4 w-4',
+                        screenWidth < 400 && 'h-3 w-3'
+                      )}
+                    />
+                  </Tooltip>
                 );
               });
             }}

src/components/calendar-week/WeekCalendar.tsx

@@ -10,6 +10,7 @@ import {
   endOfWeek,
   getISOWeekYear,
   getWeek,
+  startOfToday,
 } from 'date-fns';
 import { motion } from 'framer-motion';
 import React from 'react';
@@ -20,19 +21,30 @@ import OccurrenceChip from '../calendar-month/OccurrenceChip';
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
 const WeekCalendar = () => {
-  const { year, month, day } = useParams();
-  const { occurrences } = useOccurrencesStore();
+  const params = useParams();
+  const { occurrences, onRangeChange } = useOccurrencesStore();
   const [startOfTheWeek, setStartOfTheWeek] = React.useState(new Date());
 
   React.useEffect(() => {
-    if (!year || !month || !day) {
-      return;
-    }
+    const currentWeek = startOfWeek(startOfToday());
+
+    const {
+      year = currentWeek.getFullYear(),
+      month = currentWeek.getMonth() + 1,
+      day = currentWeek.getDate(),
+    } = params;
 
     const date = new Date(Number(year), Number(month) - 1, Number(day));
 
-    setStartOfTheWeek(startOfWeek(startOfDay(date)));
-  }, [year, month, day]);
+    const startDate = startOfWeek(startOfDay(date));
+
+    setStartOfTheWeek(startDate);
+
+    const rangeStart = startOfWeek(startDate);
+    const rangeEnd = endOfWeek(startDate);
+
+    onRangeChange([+rangeStart, +rangeEnd]);
+  }, [params, onRangeChange]);
 
   const days = eachDayOfInterval<Date>({
     start: startOfTheWeek,