Merge pull request #29 from reedoooo/clean/codebase

Completed styling for the collection selection statboard row as well …
reedoooo · Mar 27, 2024 · 42697df · 42697df
2 parents 42d82a1 + 163dd31
commit 42697df
Show file tree

Hide file tree

Showing 311 changed files with 11,397 additions and 16,052 deletions.
diff --git a/package.json b/package.json
@@ -6,6 +6,7 @@
     "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@floating-ui/react": "^0.26.9",
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@hookform/resolvers": "^3.3.4",
     "@mui/icons-material": "^5.14.5",
@@ -57,6 +58,7 @@
     "react-table": "^7.8.0",
     "react-transition-group": "^4.4.5",
     "react-virtualized": "^9.22.5",
+    "recharts": "^2.12.3",
     "sass": "^1.69.7",
     "shortid": "^2.2.16",
     "slick-carousel": "^1.8.1",

diff --git a/src/App.js b/src/App.js
@@ -5,23 +5,19 @@ import Main from './Main';
 import {
   FormProvider,
   ModalProvider,
-  PopoverProvider,
   UserProvider,
   useMode,
   CollectionProvider,
   CardProvider,
   DeckProvider,
   CartProvider,
-  CardImagesProvider,
   ChartProvider,
   StatisticsProvider,
   SidebarProvider,
   AppContextProvider,
   useAuthContext,
-  usePageContext,
   ErrorBoundary,
   ConfiguratorProvider,
-  VisibilityProvider,
 } from './context';
 import { ThemeProvider } from 'styled-components';
 import { SnackbarProvider, useSnackbar } from 'notistack';
@@ -37,14 +33,10 @@ const App = () => {
   const navigate = useNavigate();
   const { resetLogoutTimer, logout, authUser, userId, isLoggedIn } =
     useAuthContext();
-  const { returnDisplay } = usePageContext();
   const { isLoading, isPageLoading, error } = useLoading();
 
-  // useEffect(() => {
-  //   if (!isLoggedIn && !isPageLoading) navigate('/login');
-  // }, [isLoggedIn, navigate, isPageLoading]);
   if (isPageLoading || error) {
-    return returnDisplay();
+    return <div>Loading...</div>;
   }
   return (
     <ErrorBoundary>
@@ -53,37 +45,29 @@ const App = () => {
         <GlobalStyles />
         <ParallaxProvider>
           <ConfiguratorProvider>
-            <VisibilityProvider>
-              <FormProvider>
-                <UserProvider>
-                  <ModalProvider>
-                    <SnackbarProvider>
-                      <PopoverProvider>
-                        <CollectionProvider>
-                          <CardProvider>
-                            <DeckProvider>
-                              <CartProvider>
-                                <CardImagesProvider>
-                                  <ChartProvider>
-                                    <StatisticsProvider>
-                                      <SidebarProvider>
-                                        <AppContextProvider>
-                                          <Main />
-                                        </AppContextProvider>
-                                      </SidebarProvider>
-                                    </StatisticsProvider>
-                                  </ChartProvider>
-                                </CardImagesProvider>
-                              </CartProvider>
-                            </DeckProvider>
-                          </CardProvider>
-                        </CollectionProvider>
-                      </PopoverProvider>
-                    </SnackbarProvider>
-                  </ModalProvider>
-                </UserProvider>
-              </FormProvider>
-            </VisibilityProvider>
+            <FormProvider>
+              <UserProvider>
+                <ModalProvider>
+                  <CollectionProvider>
+                    <CardProvider>
+                      <DeckProvider>
+                        <CartProvider>
+                          <ChartProvider>
+                            <StatisticsProvider>
+                              <SidebarProvider>
+                                <AppContextProvider>
+                                  <Main />
+                                </AppContextProvider>
+                              </SidebarProvider>
+                            </StatisticsProvider>
+                          </ChartProvider>
+                        </CartProvider>
+                      </DeckProvider>
+                    </CardProvider>
+                  </CollectionProvider>
+                </ModalProvider>
+              </UserProvider>
+            </FormProvider>
           </ConfiguratorProvider>
         </ParallaxProvider>
       </ThemeProvider>

diff --git a/src/Main.jsx b/src/Main.jsx
@@ -1,17 +1,19 @@
 import React, { Suspense, lazy } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { useMediaQuery } from '@mui/material';
-import PrivateRoute from './components/reusable/PrivateRoute';
+import PrivateRoute from './layout/PrivateRoute.jsx';
 import LoginDialog from './components/dialogs/LoginDialog';
 import { useAuthContext, useConfiguratorContext, useMode } from './context';
-import PageLayout from './layout/Containers/PageLayout.jsx';
+import PageLayout from './layout/REUSABLE_COMPONENTS/PageLayout.jsx';
 import Navigation from './layout/navigation/Navigation.jsx';
-import LoadingIndicator from './components/reusable/indicators/LoadingIndicator.js';
+import LoadingIndicator from './layout/LoadingIndicator.js';
 import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx';
-import { useCardStoreHook } from './context/hooks/useCardStore.jsx';
-import { AppContainer } from './pages/pageStyles/StyledComponents.jsx';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import LoadingOverlay from './layout/LoadingOverlay.jsx';
+import SelectionErrorDialog from './components/dialogs/SelectionErrorDialog.jsx';
+import useDialogState from './context/hooks/useDialogState.jsx';
+import useSelectedCollection from './context/MAIN_CONTEXT/CollectionContext/useSelectedCollection.jsx';
 
-// Define all routes in a single array including the component name for laziness
 const ROUTE_CONFIG = [
   { path: '/', componentName: 'HomePage', isPrivate: false },
   { path: '/home', componentName: 'HomePage', isPrivate: false },
@@ -29,7 +31,6 @@ const ROUTE_CONFIG = [
   { path: '*', componentName: 'NotFoundPage', isPrivate: false },
 ];
 
-// Dynamically import page components based on route configuration
 const LazyRoute = ({ componentName, ...rest }) => {
   const Component = lazy(() => import(`./pages/${componentName}`));
   return <Component {...rest} />;
@@ -39,6 +40,8 @@ const Main = () => {
   const isMobileView = useMediaQuery(theme.breakpoints.down('sm'));
   const { isLoggedIn } = useAuthContext();
   const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext();
+  const { dialogState, openDialog, closeDialog } = useDialogState({});
+  const { selectedCollection } = useSelectedCollection();
   return (
     <>
       {!isLoggedIn ? (
@@ -49,27 +52,40 @@ const Main = () => {
             backgroundColor: '#3D3D3D',
           }}
         >
-          <Navigation isLoggedIn={isLoggedIn} isMobileView={isMobileView} />
+          <Navigation isLoggedIn={isLoggedIn} />
           {isConfiguratorOpen && <Configurator />}
-          <Suspense fallback={<LoadingIndicator />}>
-            <Routes>
-              {ROUTE_CONFIG.map(({ path, componentName, isPrivate }, index) => (
-                <Route
-                  key={index}
-                  path={path}
-                  element={
-                    isPrivate ? (
-                      <PrivateRoute>
-                        <LazyRoute componentName={componentName} />
-                      </PrivateRoute>
-                    ) : (
-                      <LazyRoute componentName={componentName} />
+          <TransitionGroup component={null} exit={false}>
+            <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>
+                              <LazyRoute componentName={componentName} />
+                            </PrivateRoute>
+                          ) : (
+                            <LazyRoute componentName={componentName} />
+                          )
+                        }
+                      />
                     )
-                  }
-                />
-              ))}
-            </Routes>
-          </Suspense>
+                  )}
+                </Routes>
+              </Suspense>
+            </CSSTransition>
+          </TransitionGroup>
+          {dialogState.isSelectionErrorDialogOpen && (
+            <SelectionErrorDialog
+              open={dialogState.isSelectionErrorDialogOpen}
+              onClose={() => closeDialog('isSelectionErrorDialogOpen')}
+              selectedValue={selectedCollection?.name}
+            />
+          )}
         </PageLayout>
       )}
     </>

diff --git a/src/assets/animations/Cube.jsx b/src/assets/animations/Cube.jsx
diff --git a/src/assets/animations/NavMotion.jsx b/src/assets/animations/NavMotion.jsx
diff --git a/src/assets/animations/SplashPage3.jsx b/src/assets/animations/SplashPage3.jsx
diff --git a/src/assets/animations/ThreeJsCube.js b/src/assets/animations/ThreeJsCube.js