feat(calendar): improve responsivity

domhhv · Feb 29, 2024 · 0c3bea3 · 0c3bea3
1 parent 6caaf1e
commit 0c3bea3
Show file tree

Hide file tree

Showing 18 changed files with 1,367 additions and 1,113 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,8 +23,7 @@
   ],
   "scripts": {
     "prepare": "([ -d ./.git ] && husky install) || echo \"Skipping husky install since package does not have .git folder\"",
-    "prebuild": "npm run typecheck && npm run eslint:check && npm run prettier:check",
-    "build": "NODE_ENV=production webpack && npm run insert-favicons",
+    "build": "NODE_ENV=production webpack --mode production && npm run insert-favicons",
     "dev": "NODE_ENV=development webpack-dev-server --open --hot",
     "start": "NODE_ENV=production serve -s dist",
     "typecheck": "tsc --noEmit",
@@ -50,33 +49,25 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.2",
     "@mui/joy": "^5.0.0-beta.25",
-    "@mui/material": "^5.15.2",
     "@supabase/auth-helpers-react": "^0.4.2",
     "@supabase/supabase-js": "^2.39.5",
-    "@testing-library/react": "^14.2.1",
     "date-fns": "^3.0.6",
-    "framer-motion": "^10.16.16",
-    "gh-pages": "^6.1.1",
-    "html-webpack-plugin": "^5.6.0",
     "localforage": "^1.10.0",
     "match-sorter": "^6.3.3",
     "react": "^18.2.0",
     "react-aria": "^3.31.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.22.0",
     "react-stately": "^3.29.0",
-    "serve": "^14.2.1",
-    "sort-by": "^1.2.0",
-    "webpack": "^5.89.0",
-    "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "sort-by": "^1.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
     "@babel/preset-env": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.10.6",
     "@types/react": "^18.2.46",
@@ -96,6 +87,7 @@
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-unused-imports": "^3.0.0",
+    "html-webpack-plugin": "^5.6.0",
     "husky": "^8.0.3",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
@@ -104,6 +96,10 @@
     "supabase": "^1.142.2",
     "ts-jest": "^29.1.2",
     "ts-loader": "^9.5.1",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "webpack": "^5.90.3",
+    "webpack-bundle-analyzer": "^4.10.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^5.0.2"
   }
 }
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -8,31 +8,26 @@ import {
 } from '@context';
 import { supabaseClient, theme } from '@helpers';
 import { USER_THEME_STORAGE_KEY } from '@hooks';
-import {
-  type CalendarDate,
-  createCalendar,
-  getWeeksInMonth,
-} from '@internationalized/date';
-import { CssVarsProvider, styled } from '@mui/joy';
+import { type CalendarDate, getWeeksInMonth } from '@internationalized/date';
+import { GregorianCalendar } from '@internationalized/date';
+import { CssVarsProvider } from '@mui/joy';
 import { SessionContextProvider } from '@supabase/auth-helpers-react';
 import { generateCalendarRange } from '@utils';
 import React from 'react';
 import { useLocale } from 'react-aria';
 import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { useCalendarState } from 'react-stately';
 
-const StyledAppContainerDiv = styled('div')({
-  display: 'flex',
-  flexDirection: 'column',
-  alignItems: 'center',
-  flex: '1 1 0%',
-  [theme.getColorSchemeSelector('light')]: {
-    backgroundColor: theme.palette.neutral[200],
-  },
-  [theme.getColorSchemeSelector('dark')]: {
-    backgroundColor: theme.palette.neutral[800],
-  },
-});
+import { StyledAppContainerDiv } from './styled';
+
+const createCalendar = (identifier: string) => {
+  switch (identifier) {
+    case 'gregory':
+      return new GregorianCalendar();
+    default:
+      throw new Error(`Unsupported calendar ${identifier}`);
+  }
+};
 
 const App = () => {
   const { locale } = useLocale();
@@ -60,7 +55,7 @@ const App = () => {
           <UserAccountProvider>
             <TraitsProvider>
               <HabitsProvider>
-                <OccurrencesProvider range={range}>
+                <OccurrencesProvider rangeStart={range[0]} rangeEnd={range[1]}>
                   <BrowserRouter>
                     <AppHeader />
                     <StyledAppContainerDiv>

diff --git a/src/components/calendar/CalendarGrid.tsx b/src/components/calendar/CalendarGrid.tsx
@@ -1,11 +1,10 @@
 import { useOccurrences } from '@context';
 import { Box, Typography } from '@mui/joy';
-import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { useCalendarGrid } from 'react-aria';
 import { CalendarState } from 'react-stately';
 
-import MotionCalendarMonthGrid from './CalendarMonthGrid';
+import CalendarMonthGrid from './CalendarMonthGrid';
 import DayHabitModalDialog from './DayHabitModalDialog';
 import {
   StyledCalendarGridContainerDiv,
@@ -57,18 +56,13 @@ const CalendarGrid = ({ weeksInMonth, state }: CalendarGridProps) => {
           );
         })}
       </Box>
-      <AnimatePresence mode="wait">
-        <MotionCalendarMonthGrid
-          key={state.visibleRange.start.month}
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          occurrencesByDate={occurrencesByDate}
-          onDayModalDialogOpen={handleDayModalDialogOpen}
-          weeksInMonth={weeksInMonth}
-          state={state}
-        />
-      </AnimatePresence>
+      <CalendarMonthGrid
+        key={state.visibleRange.start.month}
+        occurrencesByDate={occurrencesByDate}
+        onDayModalDialogOpen={handleDayModalDialogOpen}
+        weeksInMonth={weeksInMonth}
+        state={state}
+      />
 
       <DayHabitModalDialog
         open={dayModalDialogOpen}

diff --git a/src/components/calendar/CalendarHeader.tsx b/src/components/calendar/CalendarHeader.tsx
@@ -1,14 +1,11 @@
-import { useOccurrences } from '@context';
 import { NavigateBefore, NavigateNext } from '@mui/icons-material';
 import { Typography } from '@mui/joy';
-import { AnimatePresence, motion } from 'framer-motion';
 import React from 'react';
 
 import {
   StyledCalendarActiveMonthContainer,
   StyledCalendarHeader,
   StyledCalendarNavigationContainer,
-  StyledHeaderLoadingOverlay,
   StyledNavigationIconButton,
 } from './styled';
 
@@ -34,23 +31,14 @@ const CalendarHeader = ({
   onNavigateBack,
   onNavigateForward,
 }: CalendarHeaderProps) => {
-  const { fetchingOccurrences } = useOccurrences();
-
   return (
     <StyledCalendarHeader>
       <StyledCalendarActiveMonthContainer>
-        <AnimatePresence mode="wait">
-          <motion.div
-            key={`${activeMonthLabel}-${activeYear}`}
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-          >
-            <Typography level="title-lg" sx={{ margin: 0 }}>
-              {activeMonthLabel} {activeYear}
-            </Typography>
-          </motion.div>
-        </AnimatePresence>
+        <div>
+          <Typography level="title-lg" sx={{ margin: 0 }}>
+            {activeMonthLabel} {activeYear}
+          </Typography>
+        </div>
         <StyledCalendarNavigationContainer>
           <StyledNavigationIconButton
             disabled={prevButtonProps.disabled}
@@ -68,17 +56,6 @@ const CalendarHeader = ({
           </StyledNavigationIconButton>
         </StyledCalendarNavigationContainer>
       </StyledCalendarActiveMonthContainer>
-
-      {fetchingOccurrences && (
-        <StyledHeaderLoadingOverlay>
-          <motion.span
-            animate={{ opacity: [0, 1, 0] }}
-            transition={{ duration: 1.5, repeat: Infinity }}
-          >
-            Fetching calendar events, please wait...
-          </motion.span>
-        </StyledHeaderLoadingOverlay>
-      )}
     </StyledCalendarHeader>
   );
 };

diff --git a/src/components/calendar/CalendarMonthGrid.tsx b/src/components/calendar/CalendarMonthGrid.tsx
@@ -1,6 +1,5 @@
 import { CalendarDate } from '@internationalized/date';
 import type { OccurrencesDateMap } from '@models';
-import { motion } from 'framer-motion';
 import React, { type ForwardedRef } from 'react';
 import { CalendarState } from 'react-stately';
 
@@ -62,4 +61,4 @@ const Month = (
   );
 };
 
-export default motion(React.forwardRef(Month));
+export default React.forwardRef(Month);
diff --git a/src/components/calendar/OccurrenceChip.tsx b/src/components/calendar/OccurrenceChip.tsx
@@ -1,5 +1,5 @@
 import { useHabits, useOccurrences } from '@context';
-import { useHabitTraitChipColor } from '@hooks';
+import { useHabitTraitChipColor, useScreenSize } from '@hooks';
 import type { Occurrence } from '@models';
 import DeleteForeverIcon from '@mui/icons-material/DeleteForever';
 import { ChipDelete, CircularProgress, Tooltip } from '@mui/joy';
@@ -23,6 +23,7 @@ const OccurrenceChip = ({ occurrence, onDelete }: OccurrenceChipProps) => {
   const traitChipColor = useHabitTraitChipColor(
     habitsMap[occurrence.habitId]?.traitId
   );
+  const screenSize = useScreenSize();
 
   const isBeingDeleted = occurrenceIdBeingDeleted === occurrence.id;
 
@@ -57,7 +58,7 @@ const OccurrenceChip = ({ occurrence, onDelete }: OccurrenceChipProps) => {
           />
         }
         disabled={isBeingDeleted}
-        endDecorator={endDecorator}
+        endDecorator={screenSize < 1025 ? null : endDecorator}
       />
     </Tooltip>
   );