Add initial loading states to the app

.eslintrc

@@ -29,6 +29,7 @@
     }
   },
   "rules": {
+    "object-shorthand": "error",
     "import/order": [
       "error",
       {

.github/workflows/lint.yml

@@ -1,6 +1,6 @@
 # .github/workflows/lint.yml
 
-name: Lint # name of the action (displayed in the github interface)
+name: Code health checks # name of the action (displayed in the github interface)
 
 on: # event list
   pull_request: # on a pull request to each of these branches
@@ -26,5 +26,11 @@ jobs: # list of things to do
       - name: Install Dependencies
         run: yarn install
 
+      - name: Type Checking
+        run: yarn typecheck
+
       - name: Code Linting
-        run: yarn eslint:check
+        run: yarn eslint:check
+
+      - name: Code Formatting
+        run: yarn prettier:check

src/components/calendar/CalendarCell.tsx

@@ -31,29 +31,34 @@ const StyledCalendarDayCellButton = styled('button')(() => ({
   '&:last-of-type': {
     borderRight: '1px solid',
   },
-  '&[data-prev-month="true"]': {
+  '&[data-prev-month="true"]:not([disabled])': {
     cursor: 'w-resize',
   },
-  '&[data-next-month="true"]': {
+  '&[data-next-month="true"]:not([disabled])': {
     cursor: 'e-resize',
   },
   '&[data-prev-month="true"], &[data-next-month="true"]': {
     backgroundColor: 'white',
-    '&:hover': {
+    '&:not([disabled]):hover': {
       backgroundColor: '#f5f5f4',
     },
   },
   '&[data-active="true"]': {
-    cursor: 'pointer',
     backgroundColor: '#f5f5f4',
-    '&:hover': {
-      backgroundColor: '#e7e5e4',
+    '&:not([disabled])': {
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#e7e5e4',
+      },
     },
   },
   '&[data-current="true"]': {
     backgroundColor: '#e7e5e4',
-    '&:hover': {
-      backgroundColor: '#d6d3d1',
+    '&:not([disabled])': {
+      cursor: 'pointer',
+      '&:hover': {
+        backgroundColor: '#d6d3d1',
+      },
     },
   },
 }));
@@ -87,7 +92,9 @@ export default function CalendarCell({
   onClick,
   rangeStatus,
 }: Props) {
-  const { setCalendarEvents } = React.useContext(CalendarEventsContext);
+  const { removeCalendarEvent, fetchingCalendarEvents } = React.useContext(
+    CalendarEventsContext
+  );
   const [active, setActive] = React.useState(false);
   const [current, setCurrent] = React.useState(false);
   const [eventIdBeingDeleted, setEventIdBeingDeleted] = React.useState<
@@ -129,9 +136,7 @@ export default function CalendarCell({
 
     try {
       await deleteCalendarEvent(calendarEventId);
-      setCalendarEvents((prevCalendarEvents) =>
-        prevCalendarEvents.filter((event) => event.id !== calendarEventId)
-      );
+      removeCalendarEvent(calendarEventId);
     } catch (error) {
       console.error(error);
     } finally {
@@ -146,6 +151,7 @@ export default function CalendarCell({
       data-next-month={rangeStatus === 'above-range'}
       data-current={current}
       onClick={handleClick}
+      disabled={fetchingCalendarEvents}
     >
       <StyledCalendarDayCellButtonHeader>
         <Typography level="body-sm" fontWeight={current ? 900 : 400}>

src/components/calendar/CalendarHeader.tsx

@@ -1,3 +1,4 @@
+import { CalendarEventsContext } from '@context';
 import { NavigateBefore, NavigateNext } from '@mui/icons-material';
 import { Typography, styled, IconButton } from '@mui/joy';
 import { AnimatePresence, motion } from 'framer-motion';
@@ -10,6 +11,7 @@ const StyledCalendarHeader = styled('div')(({ theme }) => ({
   border: '1px solid',
   borderRadius: theme.radius.sm,
   alignItems: 'center',
+  position: 'relative',
 }));
 
 const StyledCalendarActiveMonthContainer = styled('div')({
@@ -30,6 +32,19 @@ const StyledIconButton = styled(IconButton)(({ theme }) => ({
   },
 }));
 
+const StyledLoadingOverlay = styled(Typography)(() => ({
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  margin: 'auto',
+  backgroundColor: 'rgba(255, 255, 255, 0.8)',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+}));
+
 type ButtonProps = {
   disabled: boolean;
   'aria-label': string;
@@ -52,6 +67,8 @@ export default function CalendarHeader({
   onNavigateBack,
   onNavigateForward,
 }: Props) {
+  const { fetchingCalendarEvents } = React.useContext(CalendarEventsContext);
+
   return (
     <StyledCalendarHeader>
       <StyledCalendarActiveMonthContainer>
@@ -84,6 +101,17 @@ export default function CalendarHeader({
           </StyledIconButton>
         </StyledCalendarNavigationContainer>
       </StyledCalendarActiveMonthContainer>
+
+      {fetchingCalendarEvents && (
+        <StyledLoadingOverlay>
+          <motion.div
+            animate={{ opacity: [0, 1, 0] }}
+            transition={{ duration: 1.5, repeat: Infinity }}
+          >
+            Fetching calendar events, please wait...
+          </motion.div>
+        </StyledLoadingOverlay>
+      )}
     </StyledCalendarHeader>
   );
 }

src/components/calendar/DayHabitModalDialog.tsx

@@ -26,7 +26,7 @@ type Props = {
 
 export default function DayHabitModalDialog({ open, onClose, date }: Props) {
   const { habits } = React.useContext(HabitsContext);
-  const { setCalendarEvents } = React.useContext(CalendarEventsContext);
+  const { addCalendarEvent } = React.useContext(CalendarEventsContext);
   const [submitting, setSubmitting] = React.useState(false);
   const [selectedBadHabit, setSelectedBadHabit] = React.useState<number | null>(
     null
@@ -49,10 +49,7 @@ export default function DayHabitModalDialog({ open, onClose, date }: Props) {
         date,
         selectedBadHabit as number
       );
-      setCalendarEvents((prevCalendarEvents) => [
-        ...prevCalendarEvents,
-        newCalendarEvent,
-      ]);
+      addCalendarEvent(newCalendarEvent);
     } catch (error) {
       console.error(error);
     } finally {

src/components/habit/add-habit/AddHabitDialogButton.tsx

@@ -19,13 +19,17 @@ import {
 } from '@mui/joy';
 import React, { FormEventHandler } from 'react';
 
-export default function AddHabitDialogButton() {
+type Props = {
+  disabled?: boolean;
+};
+
+export default function AddHabitDialogButton({ disabled = false }: Props) {
   const [open, setOpen] = React.useState(false);
   const [habitName, setHabitName] = React.useState('');
   const [habitDescription, setHabitDescription] = React.useState('');
   const [habitTrait, setHabitTrait] = React.useState<'good' | 'bad' | ''>('');
   const [addingHabit, setAddingHabit] = React.useState(false);
-  const { setHabits } = React.useContext(HabitsContext);
+  const { addHabit } = React.useContext(HabitsContext);
 
   const handleDialogOpen = () => {
     setOpen(true);
@@ -48,7 +52,7 @@ export default function AddHabitDialogButton() {
       setHabitName('');
       setHabitDescription('');
       setHabitTrait('');
-      setHabits((prevHabits) => [...prevHabits, newHabit]);
+      addHabit(newHabit);
     } catch (error) {
       console.error(error);
     } finally {
@@ -80,6 +84,7 @@ export default function AddHabitDialogButton() {
         variant="solid"
         startDecorator={<AddRounded />}
         onClick={handleDialogOpen}
+        disabled={disabled}
       >
         Add habit
       </Button>

src/components/habit/edit-habit/EditHabitDialog.tsx

@@ -36,8 +36,10 @@ export default function EditHabitDialog({
   const [description, setDescription] = React.useState('');
   const [trait, setTrait] = React.useState<'good' | 'bad' | ''>('');
   const [isUpdating, setIsUpdating] = React.useState(false);
-  const { setHabits } = React.useContext(HabitsContext);
-  const { setCalendarEvents } = React.useContext(CalendarEventsContext);
+  const habitsContext = React.useContext(HabitsContext);
+  const { updateHabitInsideCalendarEvents } = React.useContext(
+    CalendarEventsContext
+  );
 
   React.useEffect(() => {
     setIsOpen(open);
@@ -84,21 +86,8 @@ export default function EditHabitDialog({
         description,
         trait: trait as 'good' | 'bad',
       });
-      setHabits((prevHabits) =>
-        prevHabits.map((prevHabit) =>
-          prevHabit.id === habit.id ? updatedHabit : prevHabit
-        )
-      );
-      setCalendarEvents((prevCalendarEvents) =>
-        prevCalendarEvents.map((prevCalendarEvent) =>
-          prevCalendarEvent.habit.id === habit.id
-            ? {
-                ...prevCalendarEvent,
-                habit: updatedHabit,
-              }
-            : prevCalendarEvent
-        )
-      );
+      habitsContext.updateHabit(updatedHabit);
+      updateHabitInsideCalendarEvents(updatedHabit);
     } catch (error) {
       console.error(error);
     } finally {

src/components/habit/view-habit/HabitItem.tsx

@@ -49,17 +49,14 @@ type HabitItemProps = {
 
 export default function HabitItem({ habit, onEdit }: HabitItemProps) {
   const [isBeingDeleted, setIsBeingDeleted] = React.useState(false);
-  const { setHabits } = React.useContext(HabitsContext);
+  const { removeHabit } = React.useContext(HabitsContext);
 
   const handleDeleteHabit = async () => {
     setIsBeingDeleted(true);
 
     try {
       await deleteHabit(habit.id);
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      setHabits((prevHabits) =>
-        prevHabits.filter((prevHabit) => prevHabit.id !== habit.id)
-      );
+      removeHabit(habit.id);
     } catch (error) {
       console.error(error);
     } finally {

src/components/habit/view-habit/ViewAllHabitsModalButton.tsx

@@ -3,6 +3,7 @@ import ViewListRoundedIcon from '@mui/icons-material/ViewListRounded';
 import {
   Box,
   Button,
+  CircularProgress,
   DialogContent,
   DialogTitle,
   List,
@@ -27,7 +28,11 @@ const StyledPlaceholderContainer = styled(Box)(({ theme }) => ({
   margin: `${theme.spacing(1)} auto 0`,
 }));
 
-export default function ViewAllHabitsModalButton() {
+type Props = {
+  loading?: boolean;
+};
+
+export default function ViewAllHabitsModalButton({ loading = false }: Props) {
   const { habits } = React.useContext(HabitsContext);
   const [open, setOpen] = React.useState(false);
   const [isEditingHabit, setIsEditingHabit] = React.useState(false);
@@ -56,10 +61,17 @@ export default function ViewAllHabitsModalButton() {
       <Button
         color="neutral"
         variant="soft"
+        disabled={loading}
         onClick={handleOpen}
-        startDecorator={<ViewListRoundedIcon />}
+        startDecorator={
+          loading ? (
+            <CircularProgress size="sm" variant="soft" color="neutral" />
+          ) : (
+            <ViewListRoundedIcon />
+          )
+        }
       >
-        View All Habits
+        {loading ? 'Fetching habits...' : 'View All Habits'}
       </Button>
       <Modal open={open} onClose={handleClose}>
         <ModalDialog>

src/components/header/Header.tsx

@@ -1,4 +1,5 @@
 import { AddHabitDialogButton, ViewAllHabitsModalButton } from '@components';
+import { HabitsContext } from '@context';
 import { AccountCircleOutlined } from '@mui/icons-material';
 import { IconButton } from '@mui/joy';
 import { styled } from '@mui/joy/styles';
@@ -29,12 +30,14 @@ const StyledAppHeaderContent = styled('div')(() => ({
 }));
 
 export default function Header() {
+  const { fetchingHabits } = React.useContext(HabitsContext);
+
   return (
     <StyledAppHeader>
       <StyledAppHeaderContent>
         <StyledButtonsContainer>
-          <AddHabitDialogButton />
-          <ViewAllHabitsModalButton />
+          <AddHabitDialogButton disabled={fetchingHabits} />
+          <ViewAllHabitsModalButton loading={fetchingHabits} />
         </StyledButtonsContainer>
         <IconButton>
           <AccountCircleOutlined />