fix(calendar): correct date for entries map again (#145)

domhhv · Dec 30, 2024 · 0067e62 · 0067e62
1 parent 3b4640f
commit 0067e62
Show file tree

Hide file tree

Showing 7 changed files with 43 additions and 30 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -18,7 +18,7 @@ setDefaultOptions({ locale: enGB });
 const App = () => {
   React.useEffect(() => {
     document.getElementById('root')?.classList.add('initialized');
-  });
+  }, []);
 
   return (
     <Providers>

diff --git a/src/components/calendar-month/CalendarCell.tsx b/src/components/calendar-month/CalendarCell.tsx
@@ -69,8 +69,9 @@ const CalendarCell = ({
   const screenSize = useScreenSize();
   const date = format(
     new Date(fullYear, monthNumber - 1, dateNumber),
-    'yyyy-MM-d'
+    'yyyy-MM-dd'
   );
+
   const occurrences = isCalendarDay(date) ? occurrencesByDate[date] || [] : [];
   const isMobile = screenSize < 768;
   const hasNote = notes.some((note) => note.day === date);

diff --git a/src/components/calendar-month/CalendarHeader.tsx b/src/components/calendar-month/CalendarHeader.tsx
@@ -55,6 +55,7 @@ const CalendarHeader = ({
   const { filteredBy, filterBy } = useOccurrencesStore();
   const user = useUser();
   const screenSize = useScreenSize();
+  const isOnCurrentMonth = activeMonthLabel === MONTHS[new Date().getMonth()];
 
   const shouldRenderFilters = !!user && habits.length > 0 && traits.length > 0;
 
@@ -96,7 +97,7 @@ const CalendarHeader = ({
       <div className="flex items-center justify-between gap-0 lg:gap-2">
         <div className="mr-0 flex items-center gap-2 lg:mr-2">
           <Select
-            variant="flat"
+            variant="bordered"
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={new Set([activeMonthLabel])}
             onChange={handleMonthChange}
@@ -113,7 +114,7 @@ const CalendarHeader = ({
             ))}
           </Select>
           <Select
-            variant="flat"
+            variant="bordered"
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={new Set([activeYear])}
             onChange={handleYearChange}
@@ -143,7 +144,7 @@ const CalendarHeader = ({
           >
             <ArrowFatLeft size={isDesktop ? 20 : 16} />
           </Button>
-          {!isMobile && (
+          {!isMobile && !isOnCurrentMonth && (
             <Button
               size={isDesktop ? 'md' : 'sm'}
               variant="bordered"
@@ -169,7 +170,7 @@ const CalendarHeader = ({
       {shouldRenderFilters && (
         <div className="flex items-center justify-between gap-2">
           <Select
-            variant="flat"
+            variant="bordered"
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={filteredBy.habitIds}
             onChange={handleHabitsFilterChange}
@@ -192,7 +193,7 @@ const CalendarHeader = ({
             </SelectSection>
           </Select>
           <Select
-            variant="flat"
+            variant="bordered"
             size={isDesktop ? 'md' : 'sm'}
             selectedKeys={filteredBy.traitIds}
             onChange={handleTraitsFilterChange}

diff --git a/src/components/calendar-month/OccurrenceChip.tsx b/src/components/calendar-month/OccurrenceChip.tsx
@@ -1,8 +1,10 @@
+import { useScreenSize } from '@hooks';
 import type { Occurrence } from '@models';
 import { Badge, Button, Tooltip } from '@nextui-org/react';
 import { Note, Trash } from '@phosphor-icons/react';
 import { useNotesStore } from '@stores';
 import { getHabitIconUrl } from '@utils';
+import clsx from 'clsx';
 import { format } from 'date-fns';
 import React from 'react';
 
@@ -34,6 +36,7 @@ const OccurrenceChip = ({
   const occurrenceNotes = notes.filter(
     (n) => n.occurrenceId && occurrenceIds.includes(n.occurrenceId)
   );
+  const screenSize = useScreenSize();
 
   const chipStyle = {
     borderColor: colorOverride || traitColor,
@@ -88,17 +91,20 @@ const OccurrenceChip = ({
     >
       <div
         style={chipStyle}
-        className="relative mt-0 min-w-0 rounded-full border-2 bg-slate-100 p-2 dark:bg-slate-800 md:mr-1 md:mt-1"
+        className={clsx(
+          'relative mt-0 min-w-0 rounded-full border-2 bg-slate-100 p-1.5 dark:bg-slate-800 md:mr-1 md:mt-1',
+          screenSize < 400 && 'p-1'
+        )}
         role="habit-chip"
         onClick={(e) => {
           e.stopPropagation();
-          alert('Habit entry modl');
+          alert('Habit entry modal is coming soon!');
         }}
       >
         <img
           src={iconUrl}
           alt={`${habitName} icon`}
-          className="h-3 w-3 rounded"
+          className={clsx('h-4 w-4 rounded', screenSize < 400 && 'h-3 w-3')}
         />
       </div>
     </Tooltip>

diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx
@@ -1,33 +1,38 @@
 import { AuthModalButton } from '@components';
-import { useFetchOnAuth, useScreenSize } from '@hooks';
-import { Button, Spinner, Tooltip } from '@nextui-org/react';
+import { useScreenSize, useFetchOnAuth } from '@hooks';
+import {
+  Button,
+  Tooltip,
+  // Spinner,
+} from '@nextui-org/react';
 import { GithubLogo } from '@phosphor-icons/react';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
 import ThemeToggle from './ThemeToggle';
 
 const Header = () => {
-  const { hasFetched } = useFetchOnAuth();
+  // const { hasFetched } =
+  useFetchOnAuth();
   const screenSize = useScreenSize();
 
   return (
     <header className="border-b border-b-slate-300 bg-slate-200 dark:border-b-slate-800 dark:bg-black">
-      {!hasFetched && (
-        <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full flex-1 items-center justify-center bg-slate-50 opacity-90 dark:bg-slate-950">
-          <div className="flex -translate-y-[73px] items-center justify-center">
-            <Spinner
-              color="primary"
-              size="lg"
-              label="Please wait"
-              classNames={{
-                circle1: 'border-b-white',
-                circle2: 'border-b-white',
-              }}
-            />
-          </div>
-        </div>
-      )}
+      {/*{!hasFetched && (*/}
+      {/*  <div className="absolute bottom-0 left-0 right-0 top-0 z-50 flex h-full flex-1 items-center justify-center bg-slate-50 opacity-90 dark:bg-slate-950">*/}
+      {/*    <div className="flex -translate-y-[73px] items-center justify-center">*/}
+      {/*      <Spinner*/}
+      {/*        color="primary"*/}
+      {/*        size="lg"*/}
+      {/*        label="Please wait"*/}
+      {/*        classNames={{*/}
+      {/*          circle1: 'border-b-white',*/}
+      {/*          circle2: 'border-b-white',*/}
+      {/*        }}*/}
+      {/*      />*/}
+      {/*    </div>*/}
+      {/*  </div>*/}
+      {/*)}*/}
       <div className="mx-auto flex w-full items-center justify-between gap-2 px-2 py-2 lg:px-16 lg:py-4">
         <div className="flex items-center gap-2">
           <Button

diff --git a/src/helpers/calendar.ts b/src/helpers/calendar.ts
@@ -50,7 +50,7 @@ type Day =
 export type CalendarDay = `${Year}-${Month}-${Day}`;
 
 export const isCalendarDay = (value: string): value is CalendarDay => {
-  return /^\d{4}-\d{2}-\d{2}$/.test(value);
+  return /^\d{4}-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/.test(value);
 };
 
 const SUNDAY = 0;

diff --git a/src/stores/occurrences.store.ts b/src/stores/occurrences.store.ts
@@ -177,7 +177,7 @@ const useOccurrencesStore = create<OccurrencesState>((set, get) => {
       const nextOccurrencesByDate = occurrences.reduce(
         (acc, occurrence) => {
           const { timestamp } = occurrence;
-          const day = format(new Date(timestamp), 'yyyy-MM-d');
+          const day = format(new Date(timestamp), 'yyyy-MM-dd');
 
           if (!acc[day]) {
             acc[day] = [occurrence];