fix(calendar): correct retrieval date from entries map in cells (#144)

* fix(calendar): correct retrieval date from entries map in cells

* refactor: useFetchOnAuth

Author: domhhv

src/components/calendar-month/CalendarCell.tsx

@@ -1,3 +1,4 @@
+import { isCalendarDay } from '@helpers';
 import { useScreenSize } from '@hooks';
 import { Button, Tooltip } from '@nextui-org/react';
 import {
@@ -68,9 +69,9 @@ const CalendarCell = ({
   const screenSize = useScreenSize();
   const date = format(
     new Date(fullYear, monthNumber - 1, dateNumber),
-    'yyyy-MM-dd'
+    'yyyy-MM-d'
   );
-  const occurrences = occurrencesByDate[date] || [];
+  const occurrences = isCalendarDay(date) ? occurrencesByDate[date] || [] : [];
   const isMobile = screenSize < 768;
   const hasNote = notes.some((note) => note.day === date);
 

src/components/header/Header.tsx

@@ -1,18 +1,33 @@
 import { AuthModalButton } from '@components';
 import { useFetchOnAuth, useScreenSize } from '@hooks';
-import { Button, Tooltip } from '@nextui-org/react';
+import { Button, Spinner, Tooltip } 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 = () => {
-  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>
+      )}
       <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

src/helpers/calendar.ts

@@ -1,3 +1,58 @@
+type Year = `${number}${number}${number}${number}`;
+
+type Month =
+  | '01'
+  | '02'
+  | '03'
+  | '04'
+  | '05'
+  | '06'
+  | '07'
+  | '08'
+  | '09'
+  | '10'
+  | '11'
+  | '12';
+
+type Day =
+  | '01'
+  | '02'
+  | '03'
+  | '04'
+  | '05'
+  | '06'
+  | '07'
+  | '08'
+  | '09'
+  | '10'
+  | '11'
+  | '12'
+  | '13'
+  | '14'
+  | '15'
+  | '16'
+  | '17'
+  | '18'
+  | '19'
+  | '20'
+  | '21'
+  | '22'
+  | '23'
+  | '24'
+  | '25'
+  | '26'
+  | '27'
+  | '28'
+  | '29'
+  | '30'
+  | '31';
+
+export type CalendarDay = `${Year}-${Month}-${Day}`;
+
+export const isCalendarDay = (value: string): value is CalendarDay => {
+  return /^\d{4}-\d{2}-\d{2}$/.test(value);
+};
+
 const SUNDAY = 0;
 const MONDAY = 1;
 

src/hooks/useFetchOnAuth.ts

@@ -9,10 +9,17 @@ import React from 'react';
 
 const useFetchOnAuth = () => {
   const supabase = useSupabaseClient();
-  const { fetchTraits, clearTraits } = useTraitsStore();
-  const { fetchHabits, clearHabits } = useHabitsStore();
-  const { fetchOccurrences, clearOccurrences } = useOccurrencesStore();
-  const { fetchNotes, clearNotes } = useNotesStore();
+  const { fetchTraits, fetchingTraits, clearTraits } = useTraitsStore();
+  const { fetchHabits, fetchingHabits, clearHabits } = useHabitsStore();
+  const { fetchOccurrences, fetchingOccurrences, clearOccurrences } =
+    useOccurrencesStore();
+  const { fetchNotes, fetchingNotes, clearNotes } = useNotesStore();
+
+  const hasFetched =
+    !fetchingTraits &&
+    !fetchingHabits &&
+    !fetchingOccurrences &&
+    !fetchingNotes;
 
   React.useEffect(() => {
     if (!supabase.auth) {
@@ -49,6 +56,8 @@ const useFetchOnAuth = () => {
     clearOccurrences,
     clearNotes,
   ]);
+
+  return { hasFetched };
 };
 
 export default useFetchOnAuth;

src/models/occurrence.model.ts

@@ -1,3 +1,4 @@
+import type { CalendarDay } from '@helpers';
 import type { CamelCasedPropertiesDeep } from 'type-fest';
 
 import type { TablesInsert, Tables } from '../../supabase/database.types';
@@ -17,8 +18,7 @@ export type Occurrence = BaseOccurrence & {
   habit: HabitWithTrait | null;
 };
 
-type OccurrenceDate = string;
-export type OccurrencesDateMap = Record<OccurrenceDate, Occurrence[]>;
+export type OccurrencesDateMap = Record<CalendarDay, Occurrence[]>;
 
 export type OccurrencesInsert = CamelCasedPropertiesDeep<
   TablesInsert<'occurrences'>

src/stores/habits.store.ts

@@ -37,7 +37,7 @@ const useHabitsStore = create<HabitsState>((set) => {
   return {
     habits: [],
     addingHabit: false,
-    fetchingHabits: false,
+    fetchingHabits: true,
     habitIdBeingUpdated: null,
     habitIdBeingDeleted: null,
 

src/stores/notes.store.ts

@@ -27,7 +27,7 @@ const { showSnackbar } = useSnackbarsStore.getState();
 
 const useNotesStore = create<NotesState>((set) => ({
   notes: [],
-  fetchingNotes: false,
+  fetchingNotes: true,
   addingNote: false,
   updatingNote: false,
   deletingNote: false,

src/stores/occurrences.store.ts

@@ -11,6 +11,7 @@ import {
 } from '@services';
 import { useHabitsStore, useSnackbarsStore, useTraitsStore } from '@stores';
 import { getErrorMessage } from '@utils';
+import { format } from 'date-fns';
 import { create } from 'zustand';
 
 type OccurrenceFilters = {
@@ -48,7 +49,7 @@ const useOccurrencesStore = create<OccurrencesState>((set, get) => {
 
   return {
     addingOccurrence: false,
-    fetchingOccurrences: false,
+    fetchingOccurrences: true,
     allOccurrences: [],
     occurrences: [],
     occurrencesByDate: {},
@@ -176,11 +177,8 @@ const useOccurrencesStore = create<OccurrencesState>((set, get) => {
       const nextOccurrencesByDate = occurrences.reduce(
         (acc, occurrence) => {
           const { timestamp } = occurrence;
-          const date = new Date(timestamp);
-          const dateNumber = date.getDate();
-          const month = date.getMonth();
-          const year = date.getFullYear();
-          const day = `${year}-${month + 1}-${dateNumber}`;
+          const day = format(new Date(timestamp), 'yyyy-MM-d');
+
           if (!acc[day]) {
             acc[day] = [occurrence];
           } else {

src/stores/traits.store.ts

@@ -23,7 +23,7 @@ const { showSnackbar } = useSnackbarsStore.getState();
 
 const useTraitsStore = create<TraitsState>((set) => ({
   traits: testTraits,
-  fetchingTraits: false,
+  fetchingTraits: true,
   addingTrait: false,
   fetchTraits: async () => {
     try {