domhhv · domhhv · Jan 2, 2025 · Jan 2, 2025
diff --git a/src/components/calendar-month/MonthCalendar.tsx b/src/components/calendar-month/MonthCalendar.tsx
@@ -7,10 +7,11 @@ import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
 import React from 'react';
 import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
+import { useLocation } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
 
-import CalendarGrid from './CalendarGrid';
-import CalendarHeader from './CalendarHeader';
+import MonthCalendarGrid from './MonthCalendarGrid';
+import MonthCalendarHeader from './MonthCalendarHeader';
 import NoteDialog from './NoteDialog';
 import OccurrenceDialog from './OccurrenceDialog';
 
@@ -26,12 +27,12 @@ const createCalendar = (identifier: string) => {
 const MonthCalendar = () => {
   const { onRangeChange } = useOccurrencesStore();
   const { locale } = useLocale();
-  const state = useCalendarState({
+  const calendarState = useCalendarState({
     locale,
     createCalendar,
   });
   const { calendarProps, prevButtonProps, nextButtonProps, title } =
-    useCalendar({}, state);
+    useCalendar({}, calendarState);
   const {
     isOpen: isNoteDialogOpen,
     onOpen: openNoteDialog,
@@ -43,17 +44,36 @@ const MonthCalendar = () => {
     onClose: closeOccurrenceDialog,
   } = useDisclosure();
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
+  const { state: locationState } = useLocation();
+
+  const setFocusedDate = React.useCallback(
+    (year: number, month: number, day: number) => {
+      const nextFocusedDate = new CalendarDate(year, month, day);
+      calendarState.setFocusedDate(nextFocusedDate);
+    },
+    [calendarState]
+  );
+
+  React.useEffect(() => {
+    if (!locationState) {
+      return;
+    }
+
+    const { year, month } = locationState;
+
+    setFocusedDate(year, month, 1);
+  }, [locationState, setFocusedDate]);
 
   React.useEffect(() => {
     onRangeChange(
       generateCalendarRange(
-        state.visibleRange.start.year,
-        state.visibleRange.start.month
+        calendarState.visibleRange.start.year,
+        calendarState.visibleRange.start.month
       )
     );
   }, [
-    state.visibleRange.start.year,
-    state.visibleRange.start.month,
+    calendarState.visibleRange.start.year,
+    calendarState.visibleRange.start.month,
     onRangeChange,
   ]);
 
@@ -63,18 +83,13 @@ const MonthCalendar = () => {
     `${activeMonthLabel.slice(0, 3)} ${activeYear} | Habitrack Calendar`
   );
 
-  const setFocusedDate = (year: number, month: number, day: number) => {
-    const nextFocusedDate = new CalendarDate(year, month, day);
-    state.setFocusedDate(nextFocusedDate);
-  };
-
   const navigateToMonth = (month: number) => {
-    const { year, day } = state.focusedDate;
+    const { year, day } = calendarState.focusedDate;
     setFocusedDate(year, month, day);
   };
 
   const navigateToYear = (year: number) => {
-    const { month, day } = state.focusedDate;
+    const { month, day } = calendarState.focusedDate;
     setFocusedDate(year, month, day);
   };
 
@@ -133,21 +148,21 @@ const MonthCalendar = () => {
   return (
     <>
       <div {...calendarProps} className={calendarContainerClassName}>
-        <CalendarHeader
+        <MonthCalendarHeader
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
           activeYear={activeYear}
           prevButtonProps={transformButtonProps(prevButtonProps)}
           nextButtonProps={transformButtonProps(nextButtonProps)}
-          onNavigateBack={state.focusPreviousPage}
-          onNavigateForward={state.focusNextPage}
+          onNavigateBack={calendarState.focusPreviousPage}
+          onNavigateForward={calendarState.focusNextPage}
           onNavigateToMonth={navigateToMonth}
           onNavigateToYear={navigateToYear}
           onResetFocusedDate={resetFocusedDate}
         />
-        <CalendarGrid
+        <MonthCalendarGrid
           activeMonthLabel={capitalizeFirstLetter(activeMonthLabel)}
           activeYear={Number(activeYear)}
-          state={state}
+          state={calendarState}
           onAddOccurrence={handleOccurrenceModalOpen}
           onAddNote={handleNoteModalOpen}
         />

diff --git a/...omponents/calendar-month/CalendarCell.tsx → ...ents/calendar-month/MonthCalendarCell.tsx b/...omponents/calendar-month/CalendarCell.tsx → ...ents/calendar-month/MonthCalendarCell.tsx
@@ -45,7 +45,7 @@ type CalendarCellProps = {
   position: CellPosition;
 };
 
-const CalendarCell = ({
+const MonthCalendarCell = ({
   dateNumber,
   monthNumber,
   fullYear,
@@ -64,6 +64,7 @@ const CalendarCell = ({
   const screenSize = useScreenSize();
   const cellDate = new Date(fullYear, monthNumber - 1, dateNumber);
   const isTodayCell = isToday(cellDate);
+  const isFutureCell = isFuture(cellDate);
   const date = format(cellDate, 'yyyy-MM-dd');
   const isDesktop = screenSize >= 1024;
 
@@ -97,7 +98,10 @@ const CalendarCell = ({
         }
       }
 
-      if (isMobile || e?.currentTarget instanceof HTMLButtonElement) {
+      if (
+        !isFutureCell &&
+        (isMobile || e?.currentTarget instanceof HTMLButtonElement)
+      ) {
         return onAddOccurrence(dateNumber, monthNumber, fullYear);
       }
     },
@@ -113,6 +117,7 @@ const CalendarCell = ({
       user,
       isMobile,
       isTodayCell,
+      isFutureCell,
     ]
   );
 
@@ -161,7 +166,7 @@ const CalendarCell = ({
     position === 'bottom-left' && 'rounded-bl-md',
     position === 'bottom-right' && 'rounded-br-md',
     isTodayCell &&
-      'bg-background-200 hover:bg-background-300 dark:bg-background-800 dark:hover:bg-background-700'
+      'bg-background-100 hover:bg-background-300 dark:bg-background-700 dark:hover:bg-background-700'
   );
 
   const cellHeaderClassName = clsx(
@@ -182,13 +187,13 @@ const CalendarCell = ({
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
             <div className="flex items-center gap-1">
-              {!isFuture(cellDate) && (
+              {!isFutureCell && (
                 <Tooltip content="Log habit" closeDelay={0}>
                   <Button
                     className="h-5 min-w-fit px-2 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0 lg:h-6 lg:px-4"
                     radius="sm"
                     onClick={handleAddOccurrenceClick}
-                    color="primary"
+                    color="secondary"
                     isDisabled={fetchingOccurrences || !user}
                   >
                     <CalendarPlus weight="bold" size={isDesktop ? 18 : 14} />
@@ -206,7 +211,7 @@ const CalendarCell = ({
                   )}
                   radius="sm"
                   onClick={handleAddNoteClick}
-                  color={hasNote ? 'success' : 'primary'}
+                  color={hasNote ? 'success' : 'secondary'}
                   isDisabled={fetchingNotes || !user}
                 >
                   {hasNote ? (
@@ -251,4 +256,4 @@ const CalendarCell = ({
   );
 };
 
-export default CalendarCell;
+export default MonthCalendarCell;
diff --git a/...omponents/calendar-month/CalendarGrid.tsx → ...ents/calendar-month/MonthCalendarGrid.tsx b/...omponents/calendar-month/CalendarGrid.tsx → ...ents/calendar-month/MonthCalendarGrid.tsx
@@ -1,15 +1,16 @@
 import { getYearWeekNumberFromMonthWeek } from '@helpers';
 import { type CalendarDate, getWeeksInMonth } from '@internationalized/date';
 import { Button } from '@nextui-org/react';
+import { isTruthy } from '@utils';
 import clsx from 'clsx';
 import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 import { useCalendarGrid, useLocale } from 'react-aria';
-import { useNavigate } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 import { type CalendarState } from 'react-stately';
 
-import type { CellPosition, CellRangeStatus } from './CalendarCell';
-import CalendarCell from './CalendarCell';
+import type { CellPosition, CellRangeStatus } from './MonthCalendarCell';
+import MonthCalendarCell from './MonthCalendarCell';
 
 type CalendarGridProps = {
   state: CalendarState;
@@ -25,31 +26,19 @@ type CalendarGridProps = {
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
 
-const CalendarGrid = ({
+const MonthCalendarGrid = ({
   state,
   onAddNote,
   onAddOccurrence,
   activeMonthLabel,
   activeYear,
 }: CalendarGridProps) => {
-  const navigate = useNavigate();
   const { gridProps } = useCalendarGrid({}, state);
   const { locale } = useLocale();
   const weeksInMonthCount = getWeeksInMonth(state.visibleRange.start, locale);
   const weekIndexes = [...new Array(weeksInMonthCount).keys()];
   const { month: activeMonth } = state.visibleRange.start;
-
-  const handleWeekClick = (startDate: CalendarDate | null) => {
-    if (!startDate) {
-      return;
-    }
-
-    navigate('/calendar/week', {
-      state: {
-        startDate: new Date(startDate.year, startDate.month - 1, startDate.day),
-      },
-    });
-  };
+  const { pathname } = useLocation();
 
   const getCellPosition = (
     weekIndex: number,
@@ -103,19 +92,31 @@ const CalendarGrid = ({
               activeYear,
               weekIndex
             );
-            const dates = state.getDatesInWeek(weekIndex);
+            const dates = state.getDatesInWeek(weekIndex).filter(isTruthy);
+            const [firstDate] = dates;
 
             return (
               <div
                 key={weekIndex}
                 className="group relative flex items-end gap-1 md:gap-2"
               >
                 <Button
+                  as={Link}
                   className={clsx(
                     'absolute -left-[24px] bottom-0 h-[107px] w-[20px] min-w-fit p-0 md:-left-[48px] md:w-[40px]'
                   )}
                   variant="light"
-                  onClick={() => handleWeekClick(dates[0])}
+                  to="/calendar/week"
+                  state={{
+                    prevPathname: pathname,
+                    month: activeMonth,
+                    year: activeYear,
+                    startDate: new Date(
+                      firstDate.year,
+                      firstDate.month - 1,
+                      firstDate.day
+                    ),
+                  }}
                 >
                   {week}
                 </Button>
@@ -150,7 +151,7 @@ const CalendarGrid = ({
                       const position = getCellPosition(weekIndex, dayIndex);
 
                       return (
-                        <CalendarCell
+                        <MonthCalendarCell
                           key={cellKey}
                           dateNumber={day}
                           monthNumber={month}
@@ -174,4 +175,4 @@ const CalendarGrid = ({
   );
 };
 
-export default CalendarGrid;
+export default MonthCalendarGrid;
diff --git a/...ts/calendar-month/CalendarHeader.test.tsx → ...lendar-month/MonthCalendarHeader.test.tsx b/...ts/calendar-month/CalendarHeader.test.tsx → ...lendar-month/MonthCalendarHeader.test.tsx
@@ -1,10 +1,12 @@
 import { render } from '@testing-library/react';
 import React from 'react';
 
-import CalendarHeader, { type CalendarHeaderProps } from './CalendarHeader';
+import MonthCalendarHeader, {
+  type MonthCalendarHeaderProps,
+} from './MonthCalendarHeader';
 
-describe(CalendarHeader.name, () => {
-  const props: CalendarHeaderProps = {
+describe(MonthCalendarHeader.name, () => {
+  const props: MonthCalendarHeaderProps = {
     activeMonthLabel: 'January',
     activeYear: '2022',
     prevButtonProps: {
@@ -23,13 +25,13 @@ describe(CalendarHeader.name, () => {
   };
 
   it.skip('should render month and year', () => {
-    const { getByText } = render(<CalendarHeader {...props} />);
+    const { getByText } = render(<MonthCalendarHeader {...props} />);
     expect(getByText('January 2022')).toBeInTheDocument();
   });
 
   it.skip('should disable previous button', () => {
     const { getByRole } = render(
-      <CalendarHeader
+      <MonthCalendarHeader
         {...props}
         prevButtonProps={{ ...props.prevButtonProps, disabled: true }}
       />
@@ -39,7 +41,7 @@ describe(CalendarHeader.name, () => {
 
   it.skip('should disable next button', () => {
     const { getByRole } = render(
-      <CalendarHeader
+      <MonthCalendarHeader
         {...props}
         nextButtonProps={{ ...props.nextButtonProps, disabled: true }}
       />
@@ -48,13 +50,13 @@ describe(CalendarHeader.name, () => {
   });
 
   it.skip('should call onNavigateBack', () => {
-    const { getByRole } = render(<CalendarHeader {...props} />);
+    const { getByRole } = render(<MonthCalendarHeader {...props} />);
     getByRole('navigate-back').click();
     expect(props.onNavigateBack).toHaveBeenCalled();
   });
 
   it.skip('should call onNavigateForward', () => {
-    const { getByRole } = render(<CalendarHeader {...props} />);
+    const { getByRole } = render(<MonthCalendarHeader {...props} />);
     getByRole('navigate-forward').click();
     expect(props.onNavigateForward).toHaveBeenCalled();
   });