reedoooo · reedoooo · Apr 29, 2024 · Apr 29, 2024
diff --git a/jsconfig.json b/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules, build"],
+  "paths": {
+    "/*": ["src/*"]
+  }
+}
diff --git a/src/App.js b/src/App.js
@@ -7,11 +7,7 @@ import Main from './Main';
 import {
   UserProvider,
   useMode,
-  // CollectionProvider,
   CardProvider,
-  // DeckProvider,
-  // CartProvider,
-  // AppContextProvider,
   ConfiguratorProvider,
 } from './context';
 import { ThemeProvider } from 'styled-components';
@@ -29,17 +25,9 @@ const App = () => {
       <ParallaxProvider>
         <ConfiguratorProvider>
           <UserProvider>
-            {/* <CollectionProvider> */}
             <CardProvider>
-              {/* <DeckProvider> */}
-              {/* <CartProvider> */}
-              {/* <AppContextProvider> */}
               <Main />
-              {/* </AppContextProvider> */}
-              {/* </CartProvider> */}
-              {/* </DeckProvider> */}
             </CardProvider>
-            {/* </CollectionProvider> */}
           </UserProvider>
         </ConfiguratorProvider>
       </ParallaxProvider>

diff --git a/src/ErrorFallback.jsx b/src/ErrorFallback.jsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { Typography, Button, Paper, Container, Box } from '@mui/material';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import FileCopyIcon from '@mui/icons-material/FileCopy';
+
+class ErrorFallback extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasCopied: false };
+  }
+
+  handleCopyErrorDetails = () => {
+    navigator.clipboard.writeText(this.props.error.stack).then(
+      () => this.setState({ hasCopied: true }),
+      () => this.setState({ hasCopied: false })
+    );
+  };
+
+  render() {
+    const { error, resetErrorBoundary } = this.props;
+    const { hasCopied } = this.state;
+
+    return (
+      <Container component="main" maxWidth="sm">
+        <Paper elevation={3} style={{ padding: '20px', marginTop: '20px' }}>
+          <Typography variant="h4" gutterBottom>
+            Oops! Something went wrong.
+          </Typography>
+          <Typography variant="subtitle1" gutterBottom>
+            An unexpected error has occurred. Our team has been notified.
+          </Typography>
+          <Box marginTop={2}>
+            <Typography variant="body2" color="textSecondary">
+              {error.toString()}
+            </Typography>
+          </Box>
+          <Box marginTop={2}>
+            <Button
+              startIcon={<RefreshIcon />}
+              variant="contained"
+              color="primary"
+              onClick={() => window.location.reload()}
+            >
+              Refresh
+            </Button>
+            <Button
+              startIcon={<FileCopyIcon />}
+              variant="outlined"
+              color="secondary"
+              onClick={this.handleCopyErrorDetails}
+              style={{ marginLeft: '10px' }}
+            >
+              {hasCopied ? 'Copied' : 'Copy Error'}
+            </Button>
+          </Box>
+        </Paper>
+      </Container>
+    );
+  }
+}
+
+export default ErrorFallback;
diff --git a/src/Main.jsx b/src/Main.jsx
@@ -31,21 +31,23 @@ const Main = () => {
         <CSSTransition key={location.key} classNames="fade" timeout={300}>
           <Suspense fallback={<LoadingOverlay />}>
             <Routes>
-              {ROUTE_CONFIG.map(({ path, componentName, isPrivate }, index) => (
-                <Route
-                  key={index}
-                  path={path}
-                  element={
-                    isPrivate ? (
-                      <PrivateRoute>
+              {ROUTE_CONFIG.routes.map(
+                ({ path, componentName, isPrivate }, index) => (
+                  <Route
+                    key={index}
+                    path={path}
+                    element={
+                      isPrivate ? (
+                        <PrivateRoute>
+                          <LazyRoute componentName={componentName} />
+                        </PrivateRoute>
+                      ) : (
                         <LazyRoute componentName={componentName} />
-                      </PrivateRoute>
-                    ) : (
-                      <LazyRoute componentName={componentName} />
-                    )
-                  }
-                />
-              ))}
+                      )
+                    }
+                  />
+                )
+              )}
             </Routes>
           </Suspense>
         </CSSTransition>

diff --git a/src/components/forms/Factory/FormField.jsx b/src/components/forms/Factory/FormField.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types'; // Import PropTypes
-import { useMode } from '../../../context';
-import { StyledTextField } from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
+import { useMode } from 'context';
+import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
 
 const FormField = ({
   name,

diff --git a/src/components/forms/Factory/RCDynamicForm.jsx b/src/components/forms/Factory/RCDynamicForm.jsx
@@ -8,14 +8,14 @@ import useRCFormHook from '../hooks/useRCFormHook';
 import {
   FormBox,
   FormFieldBox,
-} from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
-import { useCardStore, useMode } from '../../../context';
+} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
+import { useCardStore, useMode } from 'context';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 import { getFormFieldHandlers } from '../formsConfig';
 import { useFormSubmission } from '../hooks/useFormSubmission';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import useBreakpoint from '../../../context/hooks/useBreakPoint';
-import ReusableLoadingButton from '../../../layout/REUSABLE_COMPONENTS/ReusableLoadingButton';
+import useBreakpoint from 'context/hooks/useBreakPoint';
+import ReusableLoadingButton from 'layout/REUSABLE_COMPONENTS/ReusableLoadingButton';
 
 const RCDynamicForm = ({
   formKey,
@@ -60,11 +60,6 @@ const RCDynamicForm = ({
       component="form"
       onSubmit={handleSubmit(onSubmit)}
       theme={theme}
-      // sx={{
-      //   ...(isMobile && {
-      //     padding: theme.spacing(3),
-      //   }),
-      // }}
       sx={{
         ...(isMobile && {
           padding: theme.spacing(3),

diff --git a/src/components/forms/Factory/RCInput.jsx b/src/components/forms/Factory/RCInput.jsx
@@ -18,13 +18,13 @@ import {
   Chip,
 } from '@mui/material';
 import PropTypes from 'prop-types';
-import { StyledTextField } from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
-import { useMode } from '../../../context';
+import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
+import { useMode } from 'context';
 import RCSwitch from './RCSwitch';
-import useBreakpoint from '../../../context/hooks/useBreakPoint';
+import useBreakpoint from 'context/hooks/useBreakPoint';
 import { nanoid } from 'nanoid';
-import useManager from '../../../context/useManager';
-import useSelectorActions from '../../../context/hooks/useSelectorActions';
+import useManager from 'context/useManager';
+import useSelectorActions from 'context/hooks/useSelectorActions';
 const RCInput = forwardRef(
   (
     {
@@ -44,21 +44,7 @@ const RCInput = forwardRef(
   ) => {
     const { theme } = useMode();
     const { isMobile } = useBreakpoint();
-    const { updateEntityField, selectedCollection, selectedCollectionId } =
-      useManager();
     const { handleSelectChange } = useSelectorActions();
-    // const handleSelectChange = (event) => {
-    //   const selectedValue = event.target.value;
-    //   // onChange(selectedValue); // Update local form state
-    //   if (type === 'select') {
-    //     updateEntityField(
-    //       'collections',
-    //       selectedCollectionId,
-    //       'selectedChartDataKey',
-    //       selectedValue
-    //     );
-    //   }
-    // };
     const [inputValue, setInputValue] = useState('');
     const handleKeyDown = (event) => {
       if (event.key === 'Enter' && inputValue.trim()) {

diff --git a/src/components/forms/Factory/RCSwitch.jsx b/src/components/forms/Factory/RCSwitch.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { Switch, FormControlLabel, FormControl } from '@mui/material';
-import { useMode } from '../../../context';
+import { useMode } from 'context';
 
 const RCSwitch = ({
   checked,

diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js
@@ -2,10 +2,10 @@ import React, { useCallback, useContext, useMemo } from 'react';
 import { Box, Container, Typography, Grid, Button } from '@mui/material';
 import CustomerInfoFields from './CustomerInfoFields';
 import StripeCheckoutModal from '../../dialogs/stripeModal/StripeCheckoutModal';
-import { ModalContext } from '../../../context/ModalContext/ModalContext';
+import { ModalContext } from 'context/ModalContext/ModalContext';
 import CartSummary from '../../other/dataDisplay/CartSummary';
-import { useMode } from '../../../context';
-import useManager from '../../../context/useManager';
+import { useMode } from 'context';
+import useManager from 'context/useManager';
 
 const CustomerForm = () => {
   const { isModalOpen, setModalOpen } = useContext(ModalContext);

diff --git a/src/components/forms/formsConfig.jsx b/src/components/forms/formsConfig.jsx
@@ -22,7 +22,6 @@ import { z } from 'zod';
 import useAuthManager from '../../context/MAIN_CONTEXT/AuthContext/useAuthManager';
 import { useCardStoreHook } from '../../context/MAIN_CONTEXT/CardContext/useCardStore';
 import useManager from '../../context/useManager';
-import useSelectorActions from '../../context/hooks/useSelectorActions';
 // -----------------------------------------------------------------------------
 // -----------------------------------------------------------------------------
 // ------------------------------- FORM KEYS -----------------------------------
@@ -71,13 +70,13 @@ const formFieldKeys = {
 const getFormFieldHandlers = () => {
   const { signup, login } = useAuthManager();
   const { handleRequest } = useCardStoreHook();
-  const { setTime, setStat, setTheme } = useSelectorActions();
   const {
     addCollection,
     updateCollection,
     deleteDeck,
     addDeck,
     updateDeck: updateDeckDetails,
+    // selectedCollection,
   } = useManager();
 
   const formHandlers = {
@@ -121,17 +120,17 @@ const getFormFieldHandlers = () => {
     },
     statRangeForm: (formData) => {
       console.log('Stat Range Form Data:', formData);
-      setStat(formData);
+      // setStat(formData);
       // setSearchSettings(formData, additionalData);
     },
     themeRangeForm: (formData) => {
       console.log('Theme Range Form Data:', formData);
-      setTheme(formData);
+      // setTheme(formData);
       // setSearchSettings(formData, additionalData);
     },
     timeRangeForm: (formData) => {
       console.log('Time Range Selector Form Data:', formData);
-      setTime(formData);
+      // setTime(formData);
     },
     searchSettingsForm: (formData, additionalData) => {
       console.log(
@@ -227,6 +226,7 @@ const authFormFields = signupFormFields;
 const addDeckFormFields = {
   name: {
     context: 'Deck',
+    name: 'name',
     label: 'Name',
     type: 'text',
     placeHolder: 'Enter deck name',
@@ -240,6 +240,7 @@ const addDeckFormFields = {
   },
   description: {
     context: 'Deck',
+    name: 'description',
     label: 'Description',
     type: 'text',
     placeHolder: 'Enter deck description',
@@ -261,6 +262,7 @@ const updateDeckFormFields = {
   tags: {
     context: 'Deck',
     label: 'Tags',
+    name: 'tags',
     type: 'chips',
     placeholder: 'Enter a tag',
     defaultValue: [{ value: 'tag1', label: 'tag1' }],
@@ -273,6 +275,7 @@ const updateDeckFormFields = {
   color: {
     context: 'Deck',
     label: 'Color',
+    name: 'color',
     type: 'select',
     defaultValue: 'blue',
     rules: {
@@ -297,7 +300,7 @@ const deckFormFields = updateDeckFormFields;
 const collectionFormFields = {
   name: {
     context: 'Collection',
-
+    name: 'name',
     label: 'Name',
     type: 'text',
     placeHolder: 'Enter collection name',
@@ -310,6 +313,7 @@ const collectionFormFields = {
   },
   description: {
     context: 'Collection',
+    name: 'description',
     label: 'Description',
     type: 'text',
     placeHolder: 'Enter collection description',
@@ -329,6 +333,7 @@ const searchFormFields = {
   searchTerm: {
     label: 'Search Cards',
     type: 'text',
+    name: 'searchTerm',
     placeholder: 'Search for cards...',
     defaultValue: '',
     rules: {
@@ -348,6 +353,7 @@ const collectionSearchFormFields = {
   searchTerm: {
     label: 'Search',
     type: 'text',
+    name: 'collectionSearchTerm',
     placeholder: 'Search for cards...',
     field: 'searchTerm',
     defaultValue: '',
@@ -367,17 +373,19 @@ const statRangeFormFields = {
     placeholder: 'Select statistics range', // Optional for a select, used if you have a default empty option
     defaultValue: 'highPoint',
     selected: 'highPoint',
-
-    // onSelectChange: (value) => {
-    //   console.log(value);
-    // },
     rules: {
       required: 'Statistics range is required', // Assuming you want to enforce a selection
     },
     options: [
       { value: 'highPoint', label: 'High Point' },
       { value: 'lowPoint', label: 'Low Point' },
       { value: 'average', label: 'Average' },
+      { value: 'avgPrice', label: 'Average Price' },
+      { value: 'priceChange', label: 'Price Change' },
+      {
+        value: 'percentageChange',
+        label: 'Percentage Change',
+      },
       { value: 'volume', label: 'Volume' },
       { value: 'volatility', label: 'Volatility' },
     ],
@@ -430,6 +438,8 @@ const authSwitchFormFields = {
   authSwitch: {
     label: 'Auth Switch',
     type: 'switch',
+    placeHolder: 'Auth Switch',
+    name: 'authSwitch',
     defaultValue: false,
     rules: {
       required: true,