[update(state)][decks]: update deck loading state

.eslintrc.json

@@ -20,12 +20,7 @@
     "ecmaVersion": 2021,
     "sourceType": "module"
   },
-  "plugins": [
-    "react",
-    // "react-hooks",
-    "@typescript-eslint",
-    "prettier"
-  ],
+  "plugins": ["react", "react-hooks", "@typescript-eslint", "prettier"],
   "rules": {
     "no-console": "off",
     "@typescript-eslint/indent": ["error", 2],
@@ -38,7 +33,7 @@
     ],
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
-    // "react-hooks/rules-of-hooks": "error",
+    "react-hooks/rules-of-hooks": "error",
     // "react-hooks/exhaustive-deps": "warn",
     "eol-last": ["error", "always"],
     "object-curly-spacing": ["error", "always"],

.github/workflows/main.yml

@@ -1,4 +1,4 @@
-name: CI
+name: CI/CD
 
 on:
   push:

.gitignore

@@ -17,6 +17,7 @@ package-lock.json
 # production
 /build
 /future-additions
+/dev
 
 # misc
 .DS_Store

MIT-LICENSE.txt

@@ -0,0 +1,20 @@
+Copyright (c) 2012-2024 Scott Chacon and others
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/swiper/react.js

@@ -0,0 +1,9 @@
+// <rootDir>/__mocks__/swiper/react.js
+import React from 'react';
+
+export const Swiper = ({ children }) => (
+  <div className="mock-swiper">{children}</div>
+);
+export const SwiperSlide = ({ children }) => (
+  <div className="mock-swiper-slide">{children}</div>
+);

package.json

@@ -2,68 +2,127 @@
   "name": "enhanced-card-store",
   "version": "0.1.0",
   "private": true,
+  "keywords": [
+    "react",
+    "stripe",
+    "store",
+    "ecommerce",
+    "shopping",
+    "cart",
+    "checkout",
+    "payment",
+    "subscription",
+    "web",
+    "app",
+    "pwa",
+    "progressive",
+    "enhanced",
+    "card",
+    "store"
+  ],
+  "author": "Reed Vogt",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/reedvogt/enhanced-card-store/issues"
+  },
   "dependencies": {
-    "@emotion/react": "^11.11.3",
-    "@emotion/styled": "^11.11.0",
-    "@floating-ui/react": "^0.26.9",
-    "@fortawesome/fontawesome-free": "^6.4.0",
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@floating-ui/react": "^0.26.13",
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@hookform/resolvers": "^3.3.4",
-    "@mui/icons-material": "^5.14.5",
-    "@mui/joy": "^5.0.0-beta.16",
-    "@mui/lab": "^5.0.0-alpha.162",
-    "@mui/material": "^5.15.6",
-    "@mui/styled-engine-sc": "^6.0.0-alpha.12",
-    "@mui/system": "^5.15.5",
-    "@mui/x-charts": "^6.18.4",
-    "@mui/x-data-grid": "^6.16.2",
-    "@mui/x-date-pickers": "^6.10.1",
-    "@nivo/line": "^0.83.0",
-    "@stripe/react-stripe-js": "^2.1.1",
-    "@stripe/stripe-js": "^1.54.2",
-    "axios": "^1.4.0",
+    "@mui/icons-material": "^5.15.16",
+    "@mui/joy": "^5.0.0-beta.36",
+    "@mui/lab": "^5.0.0-alpha.170",
+    "@mui/material": "^5.15.16",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
+    "@mui/system": "^5.15.15",
+    "@mui/x-charts": "^7.3.2",
+    "@mui/x-data-grid": "^7.3.2",
+    "@mui/x-date-pickers": "^7.3.2",
+    "@nivo/line": "^0.86.0",
+    "@stripe/react-stripe-js": "^2.7.1",
+    "@stripe/stripe-js": "^3.4.0",
+    "@testing-library/jest-dom": "^6.4.5",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "axios": "^1.6.8",
     "chroma-js": "^2.4.2",
-    "jwt-decode": "^3.1.2",
+    "dotenv": "^16.4.5",
+    "eslint-config-react-app": "^7.0.1",
+    "jwt-decode": "^4.0.0",
     "lodash": "^4.17.21",
-    "mathjs": "^12.4.1",
+    "mathjs": "^12.4.2",
     "nanoid": "^5.0.7",
     "notistack": "^3.0.1",
     "react": "^18.3.1",
-    "react-cookie": "^4.1.1",
+    "react-cookie": "^7.1.4",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
     "react-helmet-async": "^2.0.4",
-    "react-hook-form": "^7.50.0",
-    "react-icons": "^4.10.1",
+    "react-hook-form": "^7.51.4",
+    "react-icons": "^5.2.1",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router-dom": "^6.23.0",
     "react-scroll-parallax": "^3.4.5",
     "react-spring": "^9.7.3",
     "react-stripe-checkout": "^2.6.3",
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
-    "recharts": "^2.12.3",
-    "sass": "^1.69.7",
-    "stripe": "^12.14.0",
-    "styled-components": "^6.1.8",
-    "swiper": "^11.0.6",
-    "three": "^0.156.1",
-    "web-vitals": "^2.1.4",
-    "zod": "^3.22.4"
+    "recharts": "^2.12.6",
+    "sass": "^1.77.0",
+    "stripe": "^15.5.0",
+    "styled-components": "^6.1.9",
+    "swiper": "^11.1.1",
+    "three": "^0.164.1",
+    "web-vitals": "^3.5.2",
+    "zod": "^3.23.6"
   },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
+  "devDependencies": {
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@babel/preset-env": "^7.24.5",
+    "@babel/preset-react": "^7.24.1",
+    "babel-jest": "^29.7.0",
+    "depcheck": "^1.4.7",
+    "eslint": "^8.0.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-prettier": "^5.1.3",
+    "eslint-plugin-react-hooks": "^4.6.2",
+    "http-proxy-middleware": "^3.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "prettier": "^3.2.5",
+    "react-scripts": "5.0.1"
+  },
+  "babel": {
+    "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react"
+    ],
+    "plugins": [
+      "@babel/plugin-proposal-optional-chaining",
+      "@babel/plugin-proposal-private-property-in-object"
+    ]
   },
   "eslintConfig": {
     "extends": [
       "react-app",
       "react-app/jest"
     ]
   },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "predeploy": "npm run build",
+    "deploy": "npx netlify-cli deploy --dir=build",
+    "lint": "eslint src --ext .js,.jsx"
+  },
+  "config": {},
   "browserslist": {
     "production": [
       ">0.2%",
@@ -75,16 +134,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
-    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "eslint": "^8.46.0",
-    "eslint-config-prettier": "^8.9.0",
-    "eslint-plugin-prettier": "^5.0.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "http-proxy-middleware": "^2.0.6",
-    "prettier": "^3.0.0",
-    "react-scripts": "5.0.1"
   }
 }

setupTests.js

@@ -0,0 +1,2 @@
+import '@testing-library/jest-dom/extend-expect';
+// Directly in your test file or in src/setupTests.js

src/App.js

@@ -1,83 +1,84 @@
 // App.js
-import React, { Suspense, lazy, useEffect } from 'react';
-import {
-  Route,
-  Routes,
-  useNavigate,
-  BrowserRouter as Router,
-} from 'react-router-dom';
+import React, { Suspense, useEffect } from 'react';
+import { Route, Routes, useNavigate } from 'react-router-dom';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import LoginDialog from 'layout/dialogs/LoginDialog';
 import Navigation from 'layout/navigation';
-import { HelmetMetaData, ROUTES } from 'data';
+import { HelmetMetaData, getRoutes } from 'data';
 import {
   Configurator,
   LoadingOverlay,
   PageLayout,
 } from 'layout/REUSABLE_COMPONENTS';
 import {
-  useUserData,
   useConfigurator,
   useManageCookies,
   useMode,
+  useAuthManager,
 } from 'context';
 import { ThemeProvider } from 'styled-components';
 import { CssBaseline, GlobalStyles } from '@mui/material';
 
 // ==============================|| APP ||============================== //
 
 const PrivateRoute = ({ children }) => {
-  const { user } = useUserData();
+  const { getCookie } = useManageCookies();
+  const { authUser, isLoggedIn } = getCookie(['authUser', 'isLoggedIn']);
   const navigate = useNavigate();
   useEffect(() => {
-    if (user === null) {
+    if (authUser === null) {
       navigate('/login', { replace: true });
     }
-  }, [navigate, user]);
+  }, [navigate, authUser]);
 
   return children;
 };
 
-const LazyRoute = ({ componentName, ...rest }) => {
-  const Component = lazy(() => import(`./pages/${componentName}`));
-  return <Component {...rest} />;
-};
 const App = () => {
   const { getCookie } = useManageCookies();
+  const { authUser, isLoggedIn } = getCookie(['authUser', 'isLoggedIn']);
+
   const { theme } = useMode();
-  const { isLoggedIn } = getCookie(['isLoggedIn']);
+  const { logout } = useAuthManager();
   const { isConfiguratorOpen } = useConfigurator();
+  const ROUTES = getRoutes();
   return (
     <ThemeProvider theme={theme}>
       <GlobalStyles />
       <CssBaseline />
       <HelmetMetaData />
       <PageLayout>
-        <Navigation isLoggedIn={isLoggedIn} />
+        <Navigation
+          isLoggedIn={isLoggedIn}
+          logout={logout}
+          authUser={authUser}
+        />
         {isConfiguratorOpen && <Configurator />}
         <TransitionGroup component={null} exit={false}>
           <CSSTransition key={location.key} classNames="fade" timeout={300}>
-            <Suspense fallback={<LoadingOverlay />}>
-              <Routes>
-                {ROUTES.map(
-                  ({ path, component: Component, isPrivate }, index) => (
-                    <Route
-                      key={index}
-                      path={path}
-                      element={
-                        isPrivate ? (
-                          <PrivateRoute>
-                            <Component />
-                          </PrivateRoute>
-                        ) : (
+            {/* <Suspense fallback={<LoadingOverlay />}> */}
+            <Routes>
+              {ROUTES.map(
+                ({ routerPath, component: Component, isPrivate }, index) => (
+                  <Route
+                    key={routerPath}
+                    path={routerPath}
+                    element={
+                      isPrivate ? (
+                        <Suspense fallback={<LoadingOverlay />}>
+                          <PrivateRoute>{<Component />}</PrivateRoute>{' '}
+                        </Suspense>
+                      ) : (
+                        <Suspense fallback={<LoadingOverlay />}>
                           <Component />
-                        )
-                      }
-                    />
-                  )
-                )}
-              </Routes>
-            </Suspense>
+                        </Suspense>
+                      )
+                    }
+                  />
+                )
+              )}
+            </Routes>
+            {/* </Suspense> */}
           </CSSTransition>
         </TransitionGroup>
         <LoginDialog />