Merge pull request #43 from reedoooo/clean/styledAndCustomComponents

more updates for state management

src/App.js

@@ -5,11 +5,11 @@ import './assets/css/card.css';
 import './assets/css/page.css';
 import useManageCookies from 'context/hooks/useManageCookies';
 import useConfigurator from 'context/hooks/useConfigurator';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
 import Navigation from 'layout/navigation';
 import Configurator from 'layout/REUSABLE_COMPONENTS/Configurator';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
-import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay';
 import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from 'layout/navigation/PrivateRoute';
 import LoginDialog from 'pages/LoginDialog';

src/components/dialogs/GenericCardDialog.jsx

@@ -19,7 +19,7 @@ import CardMediaSection from '../cards/CardMediaSection';
 import CardDetailsContainer from '../cards/CardDetailsContainer';
 import { useMode } from 'context';
 import { useSnackbar } from 'notistack';
-import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
+import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween';
 import useBreakpoint from 'context/hooks/useBreakPoint';
 import GenericActionButtons from 'layout/REUSABLE_COMPONENTS/GenericActionButtons';
 import useDialogState from 'context/hooks/useDialogState';

src/components/forms/search/SearchResults.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Grid } from '@mui/material';
 import useGridItems from 'context/hooks/useGridItems';
 import usePagination from 'context/hooks/usePagination';
-import LoadingIndicator from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingIndicator';
+import LoadingIndicator from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingIndicator';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import PaginationComponent from './PaginationComponent';
 

src/context/hooks/index.jsx

@@ -13,7 +13,7 @@ import useSelectedContext from './useSelectedContext';
 import usePopover from './usePopover';
 import useSelectorActions from './useSelectorActions';
 
-export default {
+export {
   useBreakpoint,
   useLocalStorage,
   useConfigurator,

src/context/hooks/useGridItems.jsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Grid, Grow, IconButton, Tooltip } from '@mui/material';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import GenericCard from 'components/cards/GenericCard';
-import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants';
+import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants';
 import useMode from '../state/useMode';
 import HighlightOffRoundedIcon from '@mui/icons-material/HighlightOffRounded';
 import { useCardStoreHook } from '../state/useCardStore';

src/context/useManager.jsx

@@ -215,6 +215,26 @@ const useManager = () => {
           setHasFetchedCollections(true);
           setHasFetched((state) => ({ ...state, collections: true }));
           compileCardsWithQuantities(response.data, null, null);
+          const selectedId = localStorage.getItem('selectedCollectionId');
+          console.log('SELECTED ID', selectedId);
+          if (selectedId) {
+            // const collection = response.data.find((col) => {
+            //   console.log('ID', JSON.stringify(col._id));
+            //   return JSON.stringify(col._id) === JSON.stringify(selectedId); // Ensure both IDs are compared as strings
+            // });
+            const collection = response.data.find(
+              (col) => col._id === selectedId
+            );
+
+            console.log('SELECTED COLLECTION', collection);
+            console.log('RESPONSE DATA', response.data);
+            if (collection) {
+              setSelectedCollection(collection);
+            } else {
+              console.log('Selected collection not found');
+              // setSelectedCollection(null); // or handle the absence of the selected collection appropriately
+            }
+          }
           return response.data;
         } else {
           setDecks(response.data);
@@ -362,13 +382,24 @@ const useManager = () => {
           // Assuming the server returns the updated entity
           switch (entity) {
             case 'collections':
+              const selectedId = localStorage.getItem('selectedCollectionId');
+              setCollections(response.data);
+              // Re-select the collection if it was the one being updated
+              // if (selectedId === id) {
+              //   const updatedCollection = response.data.find(
+              //     (col) => col._id === id
+              //   );
+              //   setSelectedCollection(updatedCollection);
+              // }
               // const selected = localStorage.getItem('selectedCollectionId');
-              setCollections((prev) =>
-                prev.map((col) =>
-                  col._id === id ? { ...col, ...response.data } : col
-                )
-              );
-              // setSelectedCollection(response.data);
+              // setCollections(response.data);
+              // // setCollections((prev) =>
+              // //   prev.map((col) =>
+              // //     col._id === id ? { ...col, ...response.data } : col
+              // //   )
+              // // );
+              // setSelectedCollection((prev) => {
+
               break;
             case 'decks':
               setDecks((prev) =>

src/index.js

@@ -8,7 +8,7 @@ import { register, unregister } from './serviceWorker';
 import { ColorModeProvider, useMode } from './context';
 import { SnackbarProvider, enqueueSnackbar } from 'notistack';
 import { ErrorBoundary } from 'react-error-boundary';
-import ErrorFallback from 'layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback';
+import ErrorFallback from 'layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback';
 import { ThemeProvider } from 'styled-components';
 import { CssBaseline, GlobalStyles } from '@mui/material';
 import { ParallaxProvider } from 'react-scroll-parallax';

src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect, useCallback, useMemo } from 'react';
 import { Box } from '@mui/material';
 import { useSnackbar } from 'notistack';
-import LoadingOverlay from './system-utils/LoadingOverlay';
+import LoadingOverlay from './utils/system-utils/LoadingOverlay';
 import AddCircleOutlineOutlined from '@mui/icons-material/AddCircleOutlineOutlined';
 import RemoveCircleOutlineOutlined from '@mui/icons-material/RemoveCircleOutlineOutlined';
 import { useMode } from 'context';

src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx → src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx

@@ -1,7 +1,7 @@
 import { useMode } from 'context';
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import MDBox from '../MDBOX/index';
+import MDBox from '../../MDBOX/index';
 
 function DashboardLayout({ children }) {
   const { pathname } = useLocation();

src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx → src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx

@@ -3,11 +3,11 @@ import styled from 'styled-components';
 import { Box } from '@mui/material';
 import SimpleSectionHeader from './SimpleSectionHeader';
 import { PageHeaderSkeleton } from '../system-utils/SkeletonVariants';
-import RCButton from '../RCBUTTON';
+import RCButton from '../../RCBUTTON';
 import useUserData from 'context/state/useUserData';
 import { useFormManagement } from 'context/formHooks/useFormManagement';
 import { Tooltip } from '@mui/joy';
-import RCCard from '../RCCARD';
+import RCCard from '../../RCCARD';
 
 const FlexContainer = styled(Box)(({ theme }) => ({
   display: 'flex',

src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx → src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx

@@ -1,6 +1,6 @@
 import { useLocation } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import MDBox from '../MDBOX';
+import MDBox from '../../MDBOX';
 import { Grid } from '@mui/material';
 import { useMode } from 'context';
 

src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx → src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx

@@ -1,6 +1,6 @@
 import { Box, Card, CardContent, Typography, useTheme } from '@mui/material';
 import { useMode } from 'context';
-import MDBox from '../MDBOX';
+import MDBox from '../../MDBOX';
 
 const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => {
   const { theme } = useMode();

src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx → src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx

@@ -2,7 +2,7 @@ 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';
-import RCButton from '../RCBUTTON';
+import RCButton from '../../RCBUTTON';
 import { useMode } from 'context';
 
 class ErrorFallback extends React.Component {

src/layout/cart/cartPageContainers/Checkout.jsx

@@ -16,7 +16,7 @@ import Review from './Review';
 import { Elements } from '@stripe/react-stripe-js';
 import { loadStripe } from '@stripe/stripe-js';
 import { useMode } from 'context';
-import Copyright from 'layout/REUSABLE_COMPONENTS/system-utils/Copyright';
+import Copyright from 'layout/REUSABLE_COMPONENTS/utils/system-utils/Copyright';
 
 const steps = ['Shipping address', 'Payment details', 'Review your order'];
 function getStepContent(step) {

src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx

@@ -9,7 +9,7 @@ import CollectionDialog from 'components/dialogs/CollectionDialog';
 import RCChange from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCChange';
 import RCInfoItem from 'layout/REUSABLE_COMPONENTS/RC_OTHER/RCInfoItem';
 import { roundToNearestTenth } from 'context/Helpers';
-import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay';
 import RCButton from 'layout/REUSABLE_COMPONENTS/RCBUTTON';
 import useBreakpoint from 'context/hooks/useBreakPoint';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';

src/layout/collection/CollectionsViewLayout/StatBoard.jsx

@@ -2,7 +2,7 @@
 import { Grid } from '@mui/material';
 
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
-import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
+import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween';
 import useBreakpoint from 'context/hooks/useBreakPoint';
 import StatBoxes from './stats/StatBoxes';
 import ValueCircle from './stats/ValueCircle';

src/layout/collection/CollectionsViewLayout/index.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types';
 import { TransitionGroup } from 'react-transition-group';
 import CollectionListItem from './CollectionListItem';
 import useBreakpoint from 'context/hooks/useBreakPoint';
-import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay';
 import { useMode } from 'context';
-import { CollectionListItemSkeleton } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants';
+import { CollectionListItemSkeleton } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants';
 import useManager from 'context/useManager';
 import RCCard from 'layout/REUSABLE_COMPONENTS/RCCARD';
 

src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx

@@ -1,4 +1,4 @@
-import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader';
+import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader';
 import { Box, Card } from '@mui/material';
 import { DataGrid } from '@mui/x-data-grid';
 import { useMemo } from 'react';

src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx

@@ -1,5 +1,5 @@
 import { Box, Divider } from '@mui/material';
-import StatBox from 'layout/REUSABLE_COMPONENTS/layout-utils/StatBox';
+import StatBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox';
 import { useMode } from 'context';
 import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded';
 import useManager from 'context/useManager';

src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx

@@ -10,7 +10,7 @@ import {
   ResponsiveContainer,
   Legend,
 } from 'recharts';
-import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader';
+import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import useManager from 'context/useManager';
 import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON';

src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx

@@ -1,10 +1,10 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { IconButton, Grid, Grow } from '@mui/material';
 import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import { useMode } from 'context';
-import IconStatWrapper from 'layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
+import IconStatWrapper from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/IconStatWrapper';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
 import { collectionPortfolioHeaderItems } from 'data';
 
 const HeaderItem = ({ icon, label, value, delay }) => {
@@ -31,7 +31,26 @@ const CollectionPortfolioHeader = ({ onBack }) => {
   const { theme } = useMode();
   const selected = localStorage.getItem('selectedCollection');
   const collection = JSON.parse(selected);
-  const items = collectionPortfolioHeaderItems(collection);
+  const [selectedCollection, setSelectedCollection] = useState(collection);
+  const [portfolioItems, setPortfolioItems] = useState([]);
+  useEffect(() => {
+    const items = collectionPortfolioHeaderItems(selectedCollection);
+    setPortfolioItems(items);
+  }, [selectedCollection]);
+  useEffect(() => {
+    const handleStorageChange = (event) => {
+      if (event.key === 'selectedCollection') {
+        setSelectedCollection(JSON.parse(event.newValue));
+        setPortfolioItems(
+          collectionPortfolioHeaderItems(JSON.parse(event.newValue))
+        );
+      }
+    };
+    window.addEventListener('storage', handleStorageChange);
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
   return (
     <DashboardBox
       sx={{
@@ -55,7 +74,7 @@ const CollectionPortfolioHeader = ({ onBack }) => {
         <ArrowBackIcon color={theme.palette.text.colorPrimary} />
       </IconButton>
       <Grid container spacing={2}>
-        {items?.map((item, index) => (
+        {portfolioItems?.map((item, index) => (
           <HeaderItem
             key={item.label}
             icon={item.icon}

src/layout/collection/PortfolioViewLayout/TopCardsSwiper.jsx

@@ -10,9 +10,9 @@ import { useMode } from 'context';
 import placeHolder from 'assets/images/placeholder.jpeg';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import CardDetailsContainer from 'components/cards/CardDetailsContainer';
-import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
-import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader';
+import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
+import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader';
 import { CardWrapper } from 'layout/REUSABLE_STYLED_COMPONENTS/SpecificStyledComponents';
 import useManager from 'context/useManager';
 import useBreakpoint from 'context/hooks/useBreakPoint';

src/layout/collection/PortfolioViewLayout/index.jsx

@@ -3,15 +3,15 @@ import { Grid, useMediaQuery, Icon, Box, Typography } from '@mui/material';
 import { CircularProgress } from '@mui/joy';
 import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
 import { useMode } from 'context';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
-import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader';
-import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
+import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay';
 import { ResponsiveContainer } from 'recharts';
 import { formatDateBasedOnRange, roundToNearestTenth } from 'context/Helpers';
 import { formFields } from 'data/formsConfig';
 import RCDynamicForm from 'components/forms/Factory/RCDynamicForm';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import NivoContainer from 'layout/REUSABLE_COMPONENTS/layout-utils/NivoContainer';
+import NivoContainer from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/NivoContainer';
 import { ChartArea } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
 import useManager from 'context/useManager';
 import useSelectorActions from 'context/hooks/useSelectorActions';
@@ -64,11 +64,11 @@ const PortfolioViewLayout = () => {
     selectedCollectionId,
     selectedCollection,
   } = useManager();
-  useEffect(() => {
-    if (!hasFetchedCollections) {
-      fetchCollections();
-    }
-  }, []);
+  // useEffect(() => {
+  //   if (!hasFetchedCollections) {
+  //     fetchCollections();
+  //   }
+  // }, []);
   const showCollections = selectedCollectionId ? true : false;
   const percentageChange =
     roundToNearestTenth(