fix(calendar): correct date for entries map; fix screen flicker on to…

…oltip (#143)

src/components/App.tsx

@@ -1,6 +1,6 @@
 import {
   AppHeader,
-  Calendar,
+  MonthCalendar,
   AccountPage,
   HabitsPage,
   Snackbars,
@@ -11,6 +11,7 @@ import React from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import Providers from './Providers';
+import WeekCalendar from './calendar-week/WeekCalendar';
 
 setDefaultOptions({ locale: enGB });
 
@@ -24,10 +25,11 @@ const App = () => {
       <AppHeader />
       <div className="flex h-full flex-1 flex-col items-start bg-slate-50 dark:bg-slate-950">
         <Routes>
-          <Route path="/calendar" element={<Calendar />} />
+          <Route path="/calendar/month" element={<MonthCalendar />} />
+          <Route path="/calendar/week" element={<WeekCalendar />} />
           <Route path="/habits" element={<HabitsPage />} />
           <Route path="/account" element={<AccountPage />} />
-          <Route path="*" element={<Navigate to="/calendar" replace />} />
+          <Route path="*" element={<Navigate to="/calendar/month" replace />} />
         </Routes>
       </div>
       <Snackbars />

src/components/calendar/CalendarCell.tsx → src/components/calendar-month/CalendarCell.tsx

@@ -146,11 +146,7 @@ const CalendarCell = ({
       return null;
     }
 
-    if (isMobile) {
-      return <CalendarBlank size={14} weight="bold" />;
-    }
-
-    return <p className="font-bold">Today</p>;
+    return <CalendarBlank size={14} weight="bold" />;
   };
 
   const cellRootClassName = clsx(
@@ -182,10 +178,10 @@ const CalendarCell = ({
         <p className="font-bold">{dateNumber}</p>
         <div className="flex items-center justify-between gap-2">
           {rangeStatus === 'in-range' && !isMobile && (
-            <div className="flex items-center gap-1 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0">
+            <div className="flex items-center gap-1">
               <Tooltip content="Log habit" closeDelay={0}>
                 <Button
-                  className="h-5 min-w-fit px-2"
+                  className="h-5 min-w-fit px-2 opacity-100 transition-opacity group-hover/cell:opacity-100 md:opacity-0"
                   radius="sm"
                   onClick={handleAddOccurrenceClick}
                   color="primary"
@@ -199,10 +195,13 @@ const CalendarCell = ({
                 closeDelay={0}
               >
                 <Button
-                  className="h-5 min-w-fit px-2"
+                  className={clsx(
+                    'h-5 min-w-fit px-2 opacity-0 transition-opacity group-hover/cell:opacity-100',
+                    hasNote && 'opacity-100'
+                  )}
                   radius="sm"
                   onClick={handleAddNoteClick}
-                  color="primary"
+                  color={hasNote ? 'success' : 'primary'}
                   isDisabled={fetchingNotes || !user}
                 >
                   {hasNote ? (

src/components/calendar/CalendarGrid.tsx → src/components/calendar-month/CalendarGrid.tsx

@@ -20,6 +20,7 @@ type CalendarGridProps = {
   ) => void;
   activeMonthLabel: string;
   activeYear: number;
+  onWeekClick: (weekNum: number) => void;
 };
 
 const WEEK_DAYS = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
@@ -30,6 +31,7 @@ const CalendarGrid = ({
   onAddOccurrence,
   activeMonthLabel,
   activeYear,
+  onWeekClick,
 }: CalendarGridProps) => {
   const { gridProps } = useCalendarGrid({}, state);
   const { locale } = useLocale();
@@ -98,6 +100,7 @@ const CalendarGrid = ({
                     'hidden' // TODO: show the week number button, open weekly view (WIP) on click
                   )}
                   variant="ghost"
+                  onClick={() => onWeekClick(weekNum)}
                 >
                   {weekNum}
                 </Button>

src/components/calendar/CalendarHeader.tsx → src/components/calendar-month/CalendarHeader.tsx

@@ -119,7 +119,7 @@ const CalendarHeader = ({
             onChange={handleYearChange}
             classNames={{
               base: 'w-[50px] md:w-[100px]',
-              popoverContent: isMobile ? 'w-[50px]' : 'w-[100px]',
+              popoverContent: isMobile ? 'w-[75px]' : 'w-[100px]',
               selectorIcon: isMobile && 'hidden',
               innerWrapper: isMobile && 'w-full',
               value: isMobile && 'text-tiny',
@@ -138,6 +138,7 @@ const CalendarHeader = ({
             isDisabled={prevButtonProps.disabled}
             aria-label={prevButtonProps['aria-label']}
             onClick={onNavigateBack}
+            className={isMobile ? 'w-6 min-w-fit p-0' : ''}
             role="navigate-back"
           >
             <ArrowFatLeft size={isDesktop ? 20 : 16} />
@@ -158,6 +159,7 @@ const CalendarHeader = ({
             isDisabled={nextButtonProps.disabled}
             aria-label={nextButtonProps['aria-label']}
             onClick={onNavigateForward}
+            className={isMobile ? 'w-6 min-w-fit p-0' : ''}
             role="navigate-forward"
           >
             <ArrowFatRight size={isDesktop ? 20 : 16} />

src/components/calendar/Calendar.tsx → src/components/calendar-month/MonthCalendar.tsx

@@ -7,6 +7,7 @@ import { capitalizeFirstLetter } from '@utils';
 import clsx from 'clsx';
 import React from 'react';
 import { type AriaButtonProps, useCalendar, useLocale } from 'react-aria';
+import { useNavigate } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
 
 import CalendarGrid from './CalendarGrid';
@@ -23,7 +24,7 @@ const createCalendar = (identifier: string) => {
   }
 };
 
-const Calendar = () => {
+const MonthCalendar = () => {
   const { onRangeChange } = useOccurrencesStore();
   const { locale } = useLocale();
   const state = useCalendarState({
@@ -43,6 +44,7 @@ const Calendar = () => {
     onClose: closeOccurrenceDialog,
   } = useDisclosure();
   const [activeDate, setActiveDate] = React.useState<Date | null>(null);
+  const navigate = useNavigate();
 
   React.useEffect(() => {
     onRangeChange(
@@ -63,13 +65,6 @@ const Calendar = () => {
     `${activeMonthLabel.slice(0, 3)} ${activeYear} | Habitrack Calendar`
   );
 
-  const transformButtonProps = (
-    buttonProps: Pick<AriaButtonProps<'button'>, 'isDisabled' | 'aria-label'>
-  ) => ({
-    'aria-label': buttonProps['aria-label'] || '',
-    disabled: Boolean(buttonProps.isDisabled),
-  });
-
   const setFocusedDate = (year: number, month: number, day: number) => {
     const nextFocusedDate = new CalendarDate(year, month, day);
     state.setFocusedDate(nextFocusedDate);
@@ -93,11 +88,6 @@ const Calendar = () => {
     setFocusedDate(year, month + 1, day);
   };
 
-  const calendarContainerClassName = clsx(
-    'flex h-full w-full max-w-full flex-1 flex-col gap-2 p-0 px-2 pb-8 lg:gap-4 lg:px-0 lg:px-16 lg:py-4',
-    isOccurrenceDialogOpen && 'pointer-events-none'
-  );
-
   const handleOccurrenceModalClose = () => {
     window.setTimeout(() => {
       closeOccurrenceDialog();
@@ -130,6 +120,22 @@ const Calendar = () => {
     setActiveDate(new Date(fullYear, monthIndex - 1, dateNumber, 12));
   };
 
+  const handleWeekClick = (weekNumber: number) => {
+    navigate('/calendar/week', { state: { weekNumber } });
+  };
+
+  const transformButtonProps = (
+    buttonProps: Pick<AriaButtonProps<'button'>, 'isDisabled' | 'aria-label'>
+  ) => ({
+    'aria-label': buttonProps['aria-label'] || '',
+    disabled: Boolean(buttonProps.isDisabled),
+  });
+
+  const calendarContainerClassName = clsx(
+    'flex h-full w-full max-w-full flex-1 flex-col gap-2 p-0 px-2 pb-8 lg:gap-4 lg:px-0 lg:px-16 lg:py-4',
+    isOccurrenceDialogOpen && 'pointer-events-none'
+  );
+
   return (
     <>
       <div {...calendarProps} className={calendarContainerClassName}>
@@ -150,6 +156,7 @@ const Calendar = () => {
           state={state}
           onAddOccurrence={handleOccurrenceModalOpen}
           onAddNote={handleNoteModalOpen}
+          onWeekClick={handleWeekClick}
         />
       </div>
 
@@ -168,4 +175,4 @@ const Calendar = () => {
   );
 };
 
-export default Calendar;
+export default MonthCalendar;

src/components/calendar/index.ts → src/components/calendar-month/index.ts

@@ -1,5 +1,5 @@
-export * from './Calendar';
-export { default as Calendar } from './Calendar';
+export * from './MonthCalendar';
+export { default as MonthCalendar } from './MonthCalendar';
 
 export * from './OccurrenceChip';
 export { default as OccurrenceChip } from './OccurrenceChip';

src/components/calendar-week/WeekCalendar.tsx

@@ -0,0 +1,14 @@
+// import { useLocation } from 'react-router-dom';
+
+const WeekCalendar = () => {
+  // const { state } = useLocation();
+  // const { weekNumber } = state;
+
+  return (
+    <div className="flex h-full w-full max-w-full flex-1 flex-col px-2">
+      <h1>Weekly Calendar</h1>
+    </div>
+  );
+};
+
+export default WeekCalendar;

src/components/header/Header.tsx

@@ -20,6 +20,7 @@ const Header = () => {
             as={Link}
             to="/calendar"
             size={screenSize > 1024 ? 'md' : 'sm'}
+            className={screenSize < 339 ? 'min-w-fit px-2' : ''}
           >
             Calendar
           </Button>
@@ -28,6 +29,7 @@ const Header = () => {
             as={Link}
             to="/habits"
             size={screenSize > 1024 ? 'md' : 'sm'}
+            className={screenSize < 339 ? 'min-w-fit px-2' : ''}
           >
             Habits
           </Button>

src/components/index.ts

@@ -1,7 +1,7 @@
 export * from './App';
 export { default as App } from './App';
 
-export * from './calendar';
+export * from './calendar-month';
 
 export * from './header';
 

src/index.css

@@ -13,7 +13,7 @@ button,
   font-weight: 600 !important;
 }
 
-[data-overlay-container='true'] {
+#root:has([data-overlay-container='true']) [data-overlay-container='true'] {
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/stores/occurrences.store.ts

@@ -176,7 +176,11 @@ const useOccurrencesStore = create<OccurrencesState>((set, get) => {
       const nextOccurrencesByDate = occurrences.reduce(
         (acc, occurrence) => {
           const { timestamp } = occurrence;
-          const day = new Date(timestamp).toISOString().split('T')[0];
+          const date = new Date(timestamp);
+          const dateNumber = date.getDate();
+          const month = date.getMonth();
+          const year = date.getFullYear();
+          const day = `${year}-${month + 1}-${dateNumber}`;
           if (!acc[day]) {
             acc[day] = [occurrence];
           } else {