refactor: react-app using hooks, hash-routes, lazy-loading, and upgra…

…ded deps (#12) * refactor: react-app using hooks, hash-routes, lazy-load and upgraded deps
romcal · Sep 20, 2024 · b24a2f4 · b24a2f4
1 parent 703117d
commit b24a2f4
Show file tree

Hide file tree

Showing 39 changed files with 14,625 additions and 14,757 deletions.
diff --git a/html-web-page/package-lock.json b/html-web-page/package-lock.json
diff --git a/html-web-page/package.json b/html-web-page/package.json
@@ -7,13 +7,13 @@
     "test:ui": "cypress run"
   },
   "dependencies": {
-    "@romcal/calendar.france": "3.0.0-dev.77",
-    "@romcal/calendar.general-roman": "3.0.0-dev.77",
+    "@romcal/calendar.france": "3.0.0-dev.81",
+    "@romcal/calendar.general-roman": "3.0.0-dev.81",
     "http-server": "^14.1.1",
-    "romcal": "3.0.0-dev.77"
+    "romcal": "3.0.0-dev.81"
   },
   "license": "MIT",
   "devDependencies": {
-    "cypress": "^13.8.1"
+    "cypress": "^13.14.2"
   }
 }
diff --git a/react-app/.eslintrc.yml b/react-app/.eslintrc.yml
@@ -13,6 +13,7 @@ rules:
   # typescript rules
   '@typescript-eslint/prefer-default-export': 'off'
   '@typescript-eslint/lines-between-class-members': 'off'
+  '@typescript-eslint/consistent-type-imports': 'error'
 
   # react rules
   'react/function-component-definition':
@@ -23,6 +24,7 @@ rules:
 
   # import rules
   'import/prefer-default-export': 'off'
+  'import/no-default-export': 'error'
   'import/no-extraneous-dependencies':
     - error
     - devDependencies:

diff --git a/react-app/cypress.config.ts b/react-app/cypress.config.ts
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-default-export */
 import { defineConfig } from 'cypress';
 import vitePreprocessor from 'cypress-vite';
 

diff --git a/react-app/package-lock.json b/react-app/package-lock.json
diff --git a/react-app/package.json b/react-app/package.json
@@ -16,112 +16,113 @@
     "test": "NODE_NO_WARNINGS=1 npx cypress run"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
-    "@microlink/react-json-view": "^1.23.0",
-    "@mui/icons-material": "^5.11.0",
-    "@mui/material": "^5.11.7",
-    "@mui/x-date-pickers": "^5.0.17",
-    "@romcal/calendar.americas": "3.0.0-dev.77",
-    "@romcal/calendar.argentina": "3.0.0-dev.77",
-    "@romcal/calendar.australia": "3.0.0-dev.77",
-    "@romcal/calendar.austria": "3.0.0-dev.77",
-    "@romcal/calendar.belgium": "3.0.0-dev.77",
-    "@romcal/calendar.bolivia": "3.0.0-dev.77",
-    "@romcal/calendar.bosnia-herzegovina": "3.0.0-dev.77",
-    "@romcal/calendar.brazil": "3.0.0-dev.77",
-    "@romcal/calendar.canada": "3.0.0-dev.77",
-    "@romcal/calendar.chile": "3.0.0-dev.77",
-    "@romcal/calendar.china": "3.0.0-dev.77",
-    "@romcal/calendar.costa-rica": "3.0.0-dev.77",
-    "@romcal/calendar.croatia": "3.0.0-dev.77",
-    "@romcal/calendar.czech-republic": "3.0.0-dev.77",
-    "@romcal/calendar.denmark": "3.0.0-dev.77",
-    "@romcal/calendar.england": "3.0.0-dev.77",
-    "@romcal/calendar.europe": "3.0.0-dev.77",
-    "@romcal/calendar.finland": "3.0.0-dev.77",
-    "@romcal/calendar.france": "3.0.0-dev.77",
-    "@romcal/calendar.france.paris": "3.0.0-dev.77",
-    "@romcal/calendar.france.saint-denis": "3.0.0-dev.77",
-    "@romcal/calendar.france.strasbourg": "3.0.0-dev.77",
-    "@romcal/calendar.general-roman": "3.0.0-dev.77",
-    "@romcal/calendar.germany": "3.0.0-dev.77",
-    "@romcal/calendar.greece": "3.0.0-dev.77",
-    "@romcal/calendar.guatemala": "3.0.0-dev.77",
-    "@romcal/calendar.hungary": "3.0.0-dev.77",
-    "@romcal/calendar.india": "3.0.0-dev.77",
-    "@romcal/calendar.ireland": "3.0.0-dev.77",
-    "@romcal/calendar.italy": "3.0.0-dev.77",
-    "@romcal/calendar.japan": "3.0.0-dev.77",
-    "@romcal/calendar.lebanon": "3.0.0-dev.77",
-    "@romcal/calendar.lithuania": "3.0.0-dev.77",
-    "@romcal/calendar.malta": "3.0.0-dev.77",
-    "@romcal/calendar.mexico": "3.0.0-dev.77",
-    "@romcal/calendar.netherlands": "3.0.0-dev.77",
-    "@romcal/calendar.new-zealand": "3.0.0-dev.77",
-    "@romcal/calendar.norway": "3.0.0-dev.77",
-    "@romcal/calendar.panama": "3.0.0-dev.77",
-    "@romcal/calendar.paraguay": "3.0.0-dev.77",
-    "@romcal/calendar.peru": "3.0.0-dev.77",
-    "@romcal/calendar.philippines": "3.0.0-dev.77",
-    "@romcal/calendar.poland": "3.0.0-dev.77",
-    "@romcal/calendar.portugal": "3.0.0-dev.77",
-    "@romcal/calendar.puerto-rico": "3.0.0-dev.77",
-    "@romcal/calendar.romania": "3.0.0-dev.77",
-    "@romcal/calendar.russia": "3.0.0-dev.77",
-    "@romcal/calendar.scotland": "3.0.0-dev.77",
-    "@romcal/calendar.slovakia": "3.0.0-dev.77",
-    "@romcal/calendar.slovenia": "3.0.0-dev.77",
-    "@romcal/calendar.spain": "3.0.0-dev.77",
-    "@romcal/calendar.sri-lanka": "3.0.0-dev.77",
-    "@romcal/calendar.sweden": "3.0.0-dev.77",
-    "@romcal/calendar.switzerland": "3.0.0-dev.77",
-    "@romcal/calendar.ukraine": "3.0.0-dev.77",
-    "@romcal/calendar.united-states": "3.0.0-dev.77",
-    "@romcal/calendar.uruguay": "3.0.0-dev.77",
-    "@romcal/calendar.venezuela": "3.0.0-dev.77",
-    "@romcal/calendar.vietnam": "3.0.0-dev.77",
-    "@romcal/calendar.wales": "3.0.0-dev.77",
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@microlink/react-json-view": "^1.23.1",
+    "@mui/icons-material": "^6.1.1",
+    "@mui/material": "^6.1.1",
+    "@mui/x-date-pickers": "^7.18.0",
+    "@romcal/calendar.americas": "3.0.0-dev.81",
+    "@romcal/calendar.argentina": "3.0.0-dev.81",
+    "@romcal/calendar.australia": "3.0.0-dev.81",
+    "@romcal/calendar.austria": "3.0.0-dev.81",
+    "@romcal/calendar.belgium": "3.0.0-dev.81",
+    "@romcal/calendar.bolivia": "3.0.0-dev.81",
+    "@romcal/calendar.bosnia-herzegovina": "3.0.0-dev.81",
+    "@romcal/calendar.brazil": "3.0.0-dev.81",
+    "@romcal/calendar.canada": "3.0.0-dev.81",
+    "@romcal/calendar.chile": "3.0.0-dev.81",
+    "@romcal/calendar.china": "3.0.0-dev.81",
+    "@romcal/calendar.costa-rica": "3.0.0-dev.81",
+    "@romcal/calendar.croatia": "3.0.0-dev.81",
+    "@romcal/calendar.czech-republic": "3.0.0-dev.81",
+    "@romcal/calendar.denmark": "3.0.0-dev.81",
+    "@romcal/calendar.england": "3.0.0-dev.81",
+    "@romcal/calendar.europe": "3.0.0-dev.81",
+    "@romcal/calendar.finland": "3.0.0-dev.81",
+    "@romcal/calendar.france": "3.0.0-dev.81",
+    "@romcal/calendar.france.paris": "3.0.0-dev.81",
+    "@romcal/calendar.france.saint-denis": "3.0.0-dev.81",
+    "@romcal/calendar.france.strasbourg": "3.0.0-dev.81",
+    "@romcal/calendar.general-roman": "3.0.0-dev.81",
+    "@romcal/calendar.germany": "3.0.0-dev.81",
+    "@romcal/calendar.greece": "3.0.0-dev.81",
+    "@romcal/calendar.guatemala": "3.0.0-dev.81",
+    "@romcal/calendar.hungary": "3.0.0-dev.81",
+    "@romcal/calendar.india": "3.0.0-dev.81",
+    "@romcal/calendar.ireland": "3.0.0-dev.81",
+    "@romcal/calendar.italy": "3.0.0-dev.81",
+    "@romcal/calendar.japan": "3.0.0-dev.81",
+    "@romcal/calendar.lebanon": "3.0.0-dev.81",
+    "@romcal/calendar.lithuania": "3.0.0-dev.81",
+    "@romcal/calendar.malta": "3.0.0-dev.81",
+    "@romcal/calendar.mexico": "3.0.0-dev.81",
+    "@romcal/calendar.netherlands": "3.0.0-dev.81",
+    "@romcal/calendar.new-zealand": "3.0.0-dev.81",
+    "@romcal/calendar.norway": "3.0.0-dev.81",
+    "@romcal/calendar.panama": "3.0.0-dev.81",
+    "@romcal/calendar.paraguay": "3.0.0-dev.81",
+    "@romcal/calendar.peru": "3.0.0-dev.81",
+    "@romcal/calendar.philippines": "3.0.0-dev.81",
+    "@romcal/calendar.poland": "3.0.0-dev.81",
+    "@romcal/calendar.portugal": "3.0.0-dev.81",
+    "@romcal/calendar.puerto-rico": "3.0.0-dev.81",
+    "@romcal/calendar.romania": "3.0.0-dev.81",
+    "@romcal/calendar.russia": "3.0.0-dev.81",
+    "@romcal/calendar.scotland": "3.0.0-dev.81",
+    "@romcal/calendar.slovakia": "3.0.0-dev.81",
+    "@romcal/calendar.slovenia": "3.0.0-dev.81",
+    "@romcal/calendar.spain": "3.0.0-dev.81",
+    "@romcal/calendar.sri-lanka": "3.0.0-dev.81",
+    "@romcal/calendar.sweden": "3.0.0-dev.81",
+    "@romcal/calendar.switzerland": "3.0.0-dev.81",
+    "@romcal/calendar.ukraine": "3.0.0-dev.81",
+    "@romcal/calendar.united-states": "3.0.0-dev.81",
+    "@romcal/calendar.uruguay": "3.0.0-dev.81",
+    "@romcal/calendar.venezuela": "3.0.0-dev.81",
+    "@romcal/calendar.vietnam": "3.0.0-dev.81",
+    "@romcal/calendar.wales": "3.0.0-dev.81",
+    "@tanstack/react-query": "^5.56.2",
     "classnames": "^2.5.1",
-    "date-fns": "^2.29.3",
+    "date-fns": "^4.1.0",
     "flatted": "^3.3.1",
-    "mobx": "^6.7.0",
-    "mobx-react": "^7.6.0",
+    "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "romcal": "3.0.0-dev.77",
-    "web-vitals": "^2.1.4"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
+    "romcal": "3.0.0-dev.81"
   },
   "devDependencies": {
-    "@babel/plugin-transform-class-properties": "^7.24.1",
-    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.1",
-    "@babel/plugin-transform-numeric-separator": "^7.24.1",
-    "@babel/plugin-transform-optional-chaining": "^7.24.1",
-    "@babel/plugin-transform-private-methods": "^7.24.1",
-    "@types/node": "^18.11.19",
-    "@types/react": "^18.0.27",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^7.7.1",
-    "@typescript-eslint/parser": "^7.7.1",
-    "@vitejs/plugin-react": "^4.2.1",
-    "cypress": "^13.8.1",
+    "@babel/plugin-transform-class-properties": "^7.25.4",
+    "@babel/plugin-transform-nullish-coalescing-operator": "^7.24.7",
+    "@babel/plugin-transform-numeric-separator": "^7.24.7",
+    "@babel/plugin-transform-optional-chaining": "^7.24.8",
+    "@babel/plugin-transform-private-methods": "^7.25.4",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^22.5.5",
+    "@types/react": "^18.3.8",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.14.1",
+    "@typescript-eslint/parser": "^7.14.1",
+    "@vitejs/plugin-react": "^4.3.1",
+    "cypress": "^13.14.2",
     "cypress-vite": "^1.5.0",
     "eslint": "^8.57.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^3.0.2",
+    "eslint-plugin-cypress": "^3.3.0",
     "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^3.2.5",
-    "typescript": "^5.3.3",
-    "vite": "^5.2.10",
+    "prettier": "^3.3.3",
+    "typescript": "^5.5.2",
+    "vite": "^5.4.6",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-tsconfig-paths": "^4.3.2"
+    "vite-tsconfig-paths": "^5.0.1"
   },
   "overrides": {
     "html-entities": "^2.5.2",

diff --git a/react-app/src/AppContext.tsx b/react-app/src/AppContext.tsx
diff --git a/react-app/src/RomcalApp.css b/react-app/src/RomcalApp.css
@@ -8,7 +8,8 @@
   position: relative;
 }
 
-.dow-0:not(.date-in-month-1):not(.developer-day)::before, .week-separator {
+.dow-0:not(.date-in-month-1):not(.developer-day)::before,
+.week-separator {
   content: '';
   position: absolute;
   top: 10px;

diff --git a/react-app/src/RomcalApp.tsx b/react-app/src/RomcalApp.tsx
@@ -1,14 +1,15 @@
+import React, { type FC } from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { Container, createTheme, ThemeProvider } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
-import React, { FC, useMemo } from 'react';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
+import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { AppContext, stores, variant } from './AppContext';
 import { Calendar } from './components/Calendar';
-import Header from './components/Header';
-import Headline from './components/Headline';
-import RomcalVersion from './components/RomcalVersion';
+import { Header } from './components/Header';
+import { Headline } from './components/Headline';
+import { RomcalVersion } from './components/RomcalVersion';
+import { DEFAULT_CALENDAR, DEFAULT_LOCALE } from './constants/settings';
 import './RomcalApp.css';
 
 const theme = createTheme({
@@ -39,22 +40,30 @@ const AppContainer = styled(Container)`
   min-height: 100vh;
 `;
 
-const RomcalApp: FC = () => {
-  const provider = useMemo(() => ({ stores, variant }), []);
+export const RomcalApp: FC = () => {
+  const currentYear = new Date().getFullYear();
+  const currentMonth = new Date().getMonth() + 1;
   return (
-    <AppContext.Provider value={provider}>
-      <LocalizationProvider dateAdapter={AdapterDateFns}>
-        <ThemeProvider theme={theme}>
-          <AppContainer maxWidth="md" fixed>
-            <Header />
-            <Headline />
-            <Calendar />
-            <RomcalVersion />
-          </AppContainer>
-        </ThemeProvider>
-      </LocalizationProvider>
-    </AppContext.Provider>
+    <LocalizationProvider dateAdapter={AdapterDateFns}>
+      <ThemeProvider theme={theme}>
+        <AppContainer maxWidth="md" fixed>
+          <Header />
+          <Headline />
+          <Routes>
+            <Route
+              path="/*"
+              element={
+                <Navigate
+                  to={`/calendar/${DEFAULT_LOCALE}/${DEFAULT_CALENDAR}/${currentYear}/${currentMonth}`}
+                  replace
+                />
+              }
+            />
+            <Route path="/calendar/:localeKey/:calendarKey/:year/:month" element={<Calendar />} />
+          </Routes>
+          <RomcalVersion />
+        </AppContainer>
+      </ThemeProvider>
+    </LocalizationProvider>
   );
 };
-
-export default RomcalApp;
diff --git a/react-app/src/components/AdditionalLineContent.tsx b/react-app/src/components/AdditionalLineContent.tsx
@@ -1,17 +1,17 @@
+import React from 'react';
 import capitalize from '@mui/material/utils/capitalize';
 import styled from '@mui/material/styles/styled';
-import React from 'react';
-import { BaseLiturgicalDay } from 'romcal';
+import type { BaseLiturgicalDay } from 'romcal';
 
-import Colors from './Colors';
+import { Colors } from './Colors';
 
 const Container = styled('p')`
   margin: 0;
   font-family: 'EB Garamond', serif;
   font-size: 0.9em;
 `;
 
-const AdditionalLineContent = (props: { day: BaseLiturgicalDay }) => {
+export const AdditionalLineContent = (props: { day: BaseLiturgicalDay }) => {
   const { day } = props;
   const rank = ['SUNDAY', 'WEEKDAY'].includes(day.rank) ? null : capitalize(day.rankName);
   const hdo = day.isHolyDayOfObligation && day.calendar.dayOfWeek !== 0 ? '(Holy Day of Obligation)' : null;
@@ -23,5 +23,3 @@ const AdditionalLineContent = (props: { day: BaseLiturgicalDay }) => {
     </Container>
   );
 };
-
-export default AdditionalLineContent;
diff --git a/react-app/src/components/Calendar.tsx b/react-app/src/components/Calendar.tsx
@@ -1,14 +1,13 @@
-import { observer } from 'mobx-react';
 import React from 'react';
 
-import CalendarContent from './CalendarContent';
-import CalendarToolbar from './CalendarToolbar';
+import { CalendarContent } from './CalendarContent';
+import { CalendarToolbar } from './CalendarToolbar';
 
-export const Calendar = observer(() => {
+export const Calendar = () => {
   return (
     <>
       <CalendarToolbar />
       <CalendarContent />
     </>
   );
-});
+};