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

.eslintrc.json

@@ -22,7 +22,7 @@
   },
   "plugins": [
     "react",
-    // "react-hooks",
+    "react-hooks",
     "@typescript-eslint",
     "prettier"
   ],
@@ -38,7 +38,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

@@ -31,7 +31,7 @@ jobs:
         run: npm install netlify-cli -g
 
       - name: Deploy to Netlify
-        run: npx netlify deploy --dir=src --prod
+        run: npx netlify deploy --dir=build --prod
         env:
           NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
           NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

.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.

package.json

@@ -2,6 +2,29 @@
   "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",
@@ -18,10 +41,13 @@
     "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.10.1",
     "@nivo/line": "^0.83.0",
+    "@nivo/tooltip": "^0.86.0",
     "@stripe/react-stripe-js": "^2.1.1",
     "@stripe/stripe-js": "^1.54.2",
+    "@testing-library/react": "^15.0.6",
     "axios": "^1.4.0",
     "chroma-js": "^2.4.2",
+    "eslint-config-react-app": "^7.0.1",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mathjs": "^12.4.1",
@@ -51,19 +77,22 @@
     "web-vitals": "^2.1.4",
     "zod": "^3.22.4"
   },
-  "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"
-  },
   "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%",
@@ -79,6 +108,7 @@
   "devDependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "depcheck": "^1.4.7",
     "eslint": "^8.46.0",
     "eslint-config-prettier": "^8.9.0",
     "eslint-plugin-prettier": "^5.0.0",

src/App.js

@@ -1,15 +1,10 @@
 // App.js
 import React, { Suspense, lazy, useEffect } from 'react';
-import {
-  Route,
-  Routes,
-  useNavigate,
-  BrowserRouter as Router,
-} from 'react-router-dom';
+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,
@@ -20,64 +15,71 @@ import {
   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 />

src/assets/themes/components/card/root.jsx

@@ -16,7 +16,7 @@ export default {
       minWidth: 0,
       wordWrap: 'break-word',
       backgroundImage: 'none',
-      backgroundColor: success.main_lighter,
+      // backgroundColor: success.main_lighter,
       backgroundClip: 'border-box',
       border: `${borderWidth[0]} solid ${rgba(black.main, 0.125)}`,
       borderRadius: borderRadius.xl,

src/context/hooks/useDebounce.jsx

@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react';
+/**
+ * useDebounce hook
+ *
+ * @param {any} value - The value to be debounced.
+ * @param {number} delay - The number of milliseconds to delay.
+ * @returns {any} - The debounced value after the specified delay.
+ */
+function useDebounce(value, delay) {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  const [delayTime, setDelayTime] = useState(delay || 500);
+
+  useEffect(() => {
+    // Update debounced value after the specified delay
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    // Cleanup function to cancel the timeout if value or delay changes
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [value, delay]); // Only re-run effect if value or delay changes
+
+  return debouncedValue;
+}
+
+export default useDebounce;

src/context/hooks/useFormSubmission.jsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { handleValidation, zodSchemas } from 'data';
+import { handleSchemaValidation, zodSchemas } from 'data';
 
 const useFormSubmission = (formHandlers, formKey) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
@@ -9,7 +9,7 @@ const useFormSubmission = (formHandlers, formKey) => {
       setIsSubmitting(true);
       console.log('[ACTIVE FORM]', formKey);
       console.log('[FORM DATA]', formData);
-      const validationResult = handleValidation(activeSchema, formData);
+      const validationResult = handleSchemaValidation(activeSchema, formData);
       if (!validationResult.success) {
         console.error('[INVALID RESULT]', validationResult);
         setIsSubmitting(false);

src/context/hooks/useRCFormHook.jsx

@@ -1,9 +1,8 @@
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { useEffect } from 'react';
-import { formFields, zodSchemas } from 'data';
+import { zodSchemas } from 'data';
 
-const useRCFormHook = (schemaKey, initialData) => {
+const useRCFormHook = (schemaKey) => {
   const schema = zodSchemas[schemaKey];
   const defaultValues = Object.keys(schema.shape).reduce((acc, key) => {
     const fieldDefinition = schema.shape[key];
@@ -19,17 +18,9 @@ const useRCFormHook = (schemaKey, initialData) => {
 
   const methods = useForm({
     resolver: zodResolver(schema),
-    defaultValues: !initialData ? defaultValues : null,
+    defaultValues,
   });
 
-  // useEffect(() => {
-  //   console.log(
-  //     // `[1] ${schemaKey} SCHEMA REGISTERED: ${schema}`,
-  //     // `[2] FORMSTATE REGISTERED: ${JSON.stringify(methods.formState)}`,
-  //     `[3] VALUES: ${JSON.stringify(methods.getValues())}`
-  //   );
-  // }, [methods.formState]);
-
   return methods;
 };