reedoooo · reedoooo · May 6, 2024 · May 5, 2024
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,25 +1,31 @@
 {
   "env": {
     "browser": true,
-    "es6": true,
+    "es2021": true,
     "jest": true,
     "node": true
   },
   "extends": [
     "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    // "plugin:react-hooks/recommended",
     "plugin:prettier/recommended"
   ],
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
-    "ecmaVersion": 2020,
+    "ecmaVersion": 2021,
     "sourceType": "module"
   },
-  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "plugins": [
+    "react",
+    // "react-hooks",
+    "@typescript-eslint",
+    "prettier"
+  ],
   "rules": {
     "no-console": "off",
     "@typescript-eslint/indent": ["error", 2],
@@ -32,6 +38,8 @@
     ],
     "react/react-in-jsx-scope": "off",
     "react/prop-types": "off",
+    // "react-hooks/rules-of-hooks": "error",
+    // "react-hooks/exhaustive-deps": "warn",
     "eol-last": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "array-bracket-spacing": ["error", "never"],
@@ -43,6 +51,7 @@
       "error",
       {
         "singleQuote": true,
+        "tabWidth": 2,
         "endOfLine": "lf"
       }
     ]

diff --git a/package.json b/package.json
@@ -22,7 +22,6 @@
     "@stripe/stripe-js": "^1.54.2",
     "axios": "^1.4.0",
     "chroma-js": "^2.4.2",
-    "date-fns": "^2.30.0",
     "jwt-decode": "^3.1.2",
     "lodash": "^4.17.21",
     "mathjs": "^12.4.1",
@@ -33,18 +32,16 @@
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-error-boundary": "^4.0.13",
-    "react-helmet": "^6.1.0",
     "react-helmet-async": "^2.0.4",
     "react-hook-form": "^7.50.0",
     "react-icons": "^4.10.1",
     "react-perfect-scrollbar": "^1.5.8",
-    "react-router-dom": "^6.17.0",
+    "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",
-    "react-virtualized": "^9.22.5",
     "recharts": "^2.12.3",
     "sass": "^1.69.7",
     "stripe": "^12.14.0",
@@ -58,7 +55,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx"
   },
   "eslintConfig": {
     "extends": [
@@ -84,6 +82,7 @@
     "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"

diff --git a/src/App.js b/src/App.js
@@ -1,14 +1,15 @@
 // App.js
 import React, { Suspense, lazy, useEffect } from 'react';
-import { Route, Routes, useNavigate } from 'react-router-dom';
-
-import './assets/css/index.css';
-import './assets/css/card.css';
-import './assets/css/page.css';
+import {
+  Route,
+  Routes,
+  useNavigate,
+  BrowserRouter as Router,
+} from 'react-router-dom';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import LoginDialog from 'layout/dialogs/LoginDialog';
 import Navigation from 'layout/navigation';
-import { ROUTE_CONFIG } from 'data';
+import { HelmetMetaData, ROUTES } from 'data';
 import {
   Configurator,
   LoadingOverlay,
@@ -21,7 +22,7 @@ import {
   useMode,
 } from 'context';
 import { ThemeProvider } from 'styled-components';
-import { CssBaseline } from '@mui/material';
+import { CssBaseline, GlobalStyles } from '@mui/material';
 
 // ==============================|| APP ||============================== //
 
@@ -48,31 +49,28 @@ const App = () => {
   const { isConfiguratorOpen } = useConfigurator();
   return (
     <ThemeProvider theme={theme}>
-      <CssBaseline theme={theme} />
-      {/* <GlobalStyles /> */}
-      <PageLayout
-        sx={{
-          backgroundColor: '#3D3D3D',
-        }}
-      >
+      <GlobalStyles />
+      <CssBaseline />
+      <HelmetMetaData />
+      <PageLayout>
         <Navigation isLoggedIn={isLoggedIn} />
         {isConfiguratorOpen && <Configurator />}
         <TransitionGroup component={null} exit={false}>
           <CSSTransition key={location.key} classNames="fade" timeout={300}>
             <Suspense fallback={<LoadingOverlay />}>
               <Routes>
-                {ROUTE_CONFIG.routes.map(
-                  ({ path, componentName, isPrivate }, index) => (
+                {ROUTES.map(
+                  ({ path, component: Component, isPrivate }, index) => (
                     <Route
                       key={index}
                       path={path}
                       element={
                         isPrivate ? (
                           <PrivateRoute>
-                            <LazyRoute componentName={componentName} />
+                            <Component />
                           </PrivateRoute>
                         ) : (
-                          <LazyRoute componentName={componentName} />
+                          <Component />
                         )
                       }
                     />

diff --git a/src/assets/themes/base/colors.jsx b/src/assets/themes/base/colors.jsx
@@ -36,6 +36,7 @@ const success = {
   dark: '#3da58a',
   darkest: '#2e7c67', // '#70d8bd',
   contrastText: '#dbf5ee',
+  contrastText2: '#ecfdf9',
   hoverContrastText: colorTextForDark,
 };
 const info = {

diff --git a/src/assets/themes/components/tabs/index.jsx b/src/assets/themes/components/tabs/index.jsx
@@ -11,7 +11,8 @@ export default {
   styleOverrides: {
     root: {
       position: 'relative',
-      backgroundColor: '#f8f9fa',
+      // backgroundColor: `${success.contrastText2} !important`,
+      backgroundColor: '#f6fefc',
       borderRadius: borderRadius.lg,
       minHeight: 'unset',
       padding: pxToRem(12),

diff --git a/src/assets/themes/components/tabs/tab.jsx b/src/assets/themes/components/tabs/tab.jsx
@@ -2,8 +2,9 @@ import typography from 'assets/themes/base/typography';
 import borders from 'assets/themes/base/borders';
 import colors from 'assets/themes/base/colors';
 import pxToRem from 'assets/themes/functions/pxToRem';
+import { rgba } from 'assets/themes';
 
-const { size, fontWeightMedium } = typography;
+const { size, fontWeightBold } = typography;
 const { borderRadius } = borders;
 const { dark, grey, success, text } = colors;
 
@@ -20,12 +21,13 @@ export default {
       minHeight: 'unset !important',
       height: 'auto',
       fontSize: size.lg,
-      fontWeight: fontWeightMedium,
+      fontWeight: fontWeightBold,
       textTransform: 'none',
       lineHeight: 'inherit',
-      padding: pxToRem(4),
+      py: pxToRem(12),
       borderRadius: borderRadius.md,
-      color: `${text.primary} !important`,
+      color: `${success.darkest} !important`,
+      transition: 'background-color 300ms ease, color 300ms ease', // smooth transition for background and color
 
       // color: `${dark.main} !important`,
       opacity: '1 !important',
@@ -37,8 +39,13 @@ export default {
         marginBottom: '0 !important',
         marginRight: pxToRem(6),
       },
+      '&:hover': {
+        backgroundColor: `${rgba(success.light, 0.2)} !important`, // change background color on hover
+        color: `${dark.main} !important`, // change text color on hover
+      },
       '&:selected': {
         color: `${success.main} !important`,
+        backgroundColor: rgba(success.main, 0.5),
       },
       'span.MuiTab-wrapper': {
         color: `${success.main} !important`,

diff --git a/src/context/hooks/useBreakPoint.jsx b/src/context/hooks/useBreakPoint.jsx
@@ -9,6 +9,10 @@ const useBreakpoint = () => {
   const isTablet = useMediaQuery(theme.breakpoints.down('md'));
   const isLaptop = useMediaQuery(theme.breakpoints.down('lg'));
   const isDesktop = useMediaQuery(theme.breakpoints.up('xl'));
+
+  // Checks for specific breakpoints
+  const isMobileUp = useMediaQuery(theme.breakpoints.up('sm'));
+
   const matchesXS = useMediaQuery(theme.breakpoints.only('xs'));
   const matchesSM = useMediaQuery(theme.breakpoints.only('sm'));
   const matchesMD = useMediaQuery(theme.breakpoints.only('md'));
@@ -37,6 +41,9 @@ const useBreakpoint = () => {
     isLg: isLaptop,
     isXl: isDesktop,
 
+    // Checks for points above
+    isMobileUp: isMobileUp,
+
     // Checks for ranges
     isBetweenXsAndSm: matchesXSBetweenSM,
     isBetweenSmAndMd: matchesSMBetweenMD,

diff --git a/src/context/hooks/useFetchWrapper.jsx b/src/context/hooks/useFetchWrapper.jsx
@@ -30,14 +30,14 @@ const FETCH_STATUSES = {
 const useFetchWrapper = () => {
   const [status, setStatus] = useState(FETCH_STATUSES.IDLE);
   const [data, setData] = useState(null);
+  const [activeLoadingIDs, setActiveLoadingIDs] = useState(new Set());
+
   const [responseCache, setResponseCache] = useLocalStorage('apiResponses', {});
   const [errorResponse, setErrorResponse] = useLocalStorage('apiErrors', {});
-  // const { logEvent } = useLogger('useFetchWrapper');
   const { startLoading, stopLoading, isLoading } = useLoading();
   const { enqueueSnackbar } = useSnackbar();
   const showNotification = useCallback(
     (message, variant) => {
-      // const showNotification = useCallback(message, variant) => {
       enqueueSnackbar(message, {
         variant: variant,
         anchorOrigin: {
@@ -49,19 +49,18 @@ const useFetchWrapper = () => {
     [enqueueSnackbar]
   );
 
-  // useEffect to log status changes
-  // useEffect(() => {
-  //   console.log('Status Change', { status });
-  // }, [status]);
   const fetchWrapper = useCallback(
     async (url, method = 'GET', body = null, loadingID) => {
-      // setStatus('loading');
-      // startLoading(loadingID);
-      // showNotification(`Loading ${loadingID}...`, 'info');
+      if (activeLoadingIDs.has(loadingID)) {
+        console.log(`Fetch already in progress for: ${loadingID}`);
+        return;
+      }
+      setActiveLoadingIDs((prev) => new Set(prev).add(loadingID));
+      setStatus(FETCH_STATUSES.LOADING);
+      startLoading(loadingID);
+      showNotification(`[LOADING][${loadingID}]`, 'info');
+
       try {
-        setStatus(FETCH_STATUSES.LOADING);
-        startLoading(loadingID);
-        showNotification(`[LOADING][${loadingID}]`, 'info');
         const headers = { 'Content-Type': 'application/json' };
         const options = {
           method,
@@ -78,8 +77,10 @@ const useFetchWrapper = () => {
           responseData = await response.json();
         }
         if (!response.ok) {
-          const errorInfo = `Error: ${response.statusText} (status: ${response.status})`;
-          console.error('[ERROR B]', responseData); // Log the detailed error message
+          // const error = new Error(response.statusText || 'Unknown error');
+          // error.status = response.status;
+          // error.responseData = responseData;
+          // throw error;
           const parsed = JSON.parse(responseData);
           const errorDetails = {
             message: parsed.message || 'Unknown error',
@@ -92,6 +93,7 @@ const useFetchWrapper = () => {
             ...prevErrors,
             [loadingID]: errorDetails,
           }));
+          setStatus(FETCH_STATUSES.ERROR);
           throw new Error(responseData);
         }
 
@@ -107,31 +109,22 @@ const useFetchWrapper = () => {
         );
         return responseData;
       } catch (error) {
-        // const errorDetails = {
-        //   message: error.message || 'Unknown error',
-        //   name: error.name || 'Error',
-        //   status: error.status || 'No status',
-        //   detail: error.stack || 'No additional details',
-        // };
-        // setErrorResponse((prevErrors) => ({
-        //   ...prevErrors,
-        //   [loadingID]: errorDetails,
-        // }));
-        // setErrorResponse((prevErrors) => ({
-        //   ...prevErrors,
-        //   [loadingID]: {
-        //     message: error.message || 'Unknown error',
-        //     status: error.status || 'No status',
-        //     detail: error.responseData || 'No additional details',
-        //     name: error.name || 'No name',
-        //   },
-        // }));
         setStatus(FETCH_STATUSES.ERROR);
+        setErrorResponse((prev) => ({
+          ...prev,
+          [loadingID]: serializeError(error),
+        }));
+
         showNotification(`[Error][${loadingID}] ${error.message}`, 'error');
         throw error;
         // return Promise.reject(err);
       } finally {
         stopLoading(loadingID);
+        setActiveLoadingIDs((prev) => {
+          const newIDs = new Set(prev);
+          newIDs.delete(loadingID);
+          return newIDs;
+        });
       }
     },
     [
@@ -142,6 +135,7 @@ const useFetchWrapper = () => {
       showNotification,
       startLoading,
       stopLoading,
+      activeLoadingIDs,
     ]
   );
 

diff --git a/src/context/hooks/useFormSubmission.jsx b/src/context/hooks/useFormSubmission.jsx
@@ -1,12 +1,11 @@
 import { useCallback, useState } from 'react';
-import { handleValidation, zodSchemas } from '../../data/formsConfig';
+import { handleValidation, zodSchemas } from 'data';
 
 const useFormSubmission = (formHandlers, formKey) => {
   const [isSubmitting, setIsSubmitting] = useState(false);
   const activeSchema = zodSchemas[formKey];
   const onSubmit = useCallback(
     async (formData) => {
-      // handleValidation
       setIsSubmitting(true);
       console.log('[ACTIVE FORM]', formKey);
       console.log('[FORM DATA]', formData);