diff --git a/src/App.js b/src/App.js
index fa49743..1e08836 100644
--- a/src/App.js
+++ b/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';
diff --git a/src/components/dialogs/GenericCardDialog.jsx b/src/components/dialogs/GenericCardDialog.jsx
index f2be85c..5f22cf4 100644
--- a/src/components/dialogs/GenericCardDialog.jsx
+++ b/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';
diff --git a/src/components/forms/search/SearchResults.jsx b/src/components/forms/search/SearchResults.jsx
index 42557b0..4f8ca0b 100644
--- a/src/components/forms/search/SearchResults.jsx
+++ b/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';
diff --git a/src/context/hooks/index.jsx b/src/context/hooks/index.jsx
index 88b0eab..1c81d83 100644
--- a/src/context/hooks/index.jsx
+++ b/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,
diff --git a/src/context/hooks/useGridItems.jsx b/src/context/hooks/useGridItems.jsx
index cc2705e..2b71347 100644
--- a/src/context/hooks/useGridItems.jsx
+++ b/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';
diff --git a/src/context/useManager.jsx b/src/context/useManager.jsx
index 04556c2..ba3d352 100644
--- a/src/context/useManager.jsx
+++ b/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) =>
diff --git a/src/index.js b/src/index.js
index 7ec52bb..febd60e 100644
--- a/src/index.js
+++ b/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';
diff --git a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx b/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx
index 79353e3..d36b993 100644
--- a/src/layout/REUSABLE_COMPONENTS/GenericActionButtons.jsx
+++ b/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';
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx
similarity index 96%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout.jsx
index 8af31c3..92b92b5 100644
--- a/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx
+++ b/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();
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/IconStatWrapper.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/IconStatWrapper.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/IconStatWrapper.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/NivoContainer.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/NivoContainer.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/NivoContainer.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/NivoContainer.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx
similarity index 96%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader.jsx
index 7ad6d4b..b6a6530 100644
--- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx
+++ b/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',
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx
similarity index 96%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout.jsx
index f6e1497..19ed199 100644
--- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx
+++ b/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';
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/SimpleSectionHeader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/SimpleSectionHeader.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/SimpleSectionHeader.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/SimpleSectionHeader.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx b/src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx
similarity index 98%
rename from src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/layout-utils/StatBox.jsx
index ad219c8..ad53311 100644
--- a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx
+++ b/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();
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/Copyright.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/Copyright.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/Copyright.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/Copyright.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx
similarity index 98%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorFallback.jsx
index c6a6941..e73f5c4 100644
--- a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback.jsx
+++ b/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 {
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorIndicator.js
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/ErrorIndicator.js
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingIndicator.js b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingIndicator.js
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/LoadingIndicator.js
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingIndicator.js
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/NotFoundPage.js b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/NotFoundPage.js
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/NotFoundPage.js
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/NotFoundPage.js
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/SplashPage2.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/SplashPage2.jsx
diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/useSkeletonLoader.jsx b/src/layout/REUSABLE_COMPONENTS/utils/system-utils/useSkeletonLoader.jsx
similarity index 100%
rename from src/layout/REUSABLE_COMPONENTS/system-utils/useSkeletonLoader.jsx
rename to src/layout/REUSABLE_COMPONENTS/utils/system-utils/useSkeletonLoader.jsx
diff --git a/src/layout/cart/cartPageContainers/Checkout.jsx b/src/layout/cart/cartPageContainers/Checkout.jsx
index 4540d88..428e4a5 100644
--- a/src/layout/cart/cartPageContainers/Checkout.jsx
+++ b/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) {
diff --git a/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx b/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx
index 192ba06..8e69308 100644
--- a/src/layout/collection/CollectionsViewLayout/CollectionListItem.jsx
+++ b/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';
diff --git a/src/layout/collection/CollectionsViewLayout/StatBoard.jsx b/src/layout/collection/CollectionsViewLayout/StatBoard.jsx
index 3ced495..cb41f08 100644
--- a/src/layout/collection/CollectionsViewLayout/StatBoard.jsx
+++ b/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';
diff --git a/src/layout/collection/CollectionsViewLayout/index.jsx b/src/layout/collection/CollectionsViewLayout/index.jsx
index f42a1ad..9158e29 100644
--- a/src/layout/collection/CollectionsViewLayout/index.jsx
+++ b/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';
diff --git a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx b/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx
index 7ca95cb..348cdce 100644
--- a/src/layout/collection/CollectionsViewLayout/stats/PriceList.jsx
+++ b/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';
diff --git a/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx b/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx
index afaa3d8..f0eca33 100644
--- a/src/layout/collection/CollectionsViewLayout/stats/StatBoxes.jsx
+++ b/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';
diff --git a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx b/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx
index 1e670d9..53b1504 100644
--- a/src/layout/collection/CollectionsViewLayout/stats/ValueCircle.jsx
+++ b/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';
diff --git a/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx b/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx
index bfb4123..6b0290d 100644
--- a/src/layout/collection/PortfolioViewLayout/CollectionPortfolioHeader.jsx
+++ b/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 (
{
- {items?.map((item, index) => (
+ {portfolioItems?.map((item, index) => (
{
selectedCollectionId,
selectedCollection,
} = useManager();
- useEffect(() => {
- if (!hasFetchedCollections) {
- fetchCollections();
- }
- }, []);
+ // useEffect(() => {
+ // if (!hasFetchedCollections) {
+ // fetchCollections();
+ // }
+ // }, []);
const showCollections = selectedCollectionId ? true : false;
const percentageChange =
roundToNearestTenth(
diff --git a/src/layout/collection/index.jsx b/src/layout/collection/index.jsx
index de3ad6a..8cf8661 100644
--- a/src/layout/collection/index.jsx
+++ b/src/layout/collection/index.jsx
@@ -1,18 +1,18 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useMode } from 'context';
-import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout';
+import DashboardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
import { Grid } from '@mui/material';
import CollectionDialog from 'components/dialogs/CollectionDialog';
import useDialogState from 'context/hooks/useDialogState';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
import StatBoard from './CollectionsViewLayout/StatBoard';
import { Tab, Tabs } from '@mui/material';
import CollectionPortfolioHeader from './PortfolioViewLayout/CollectionPortfolioHeader';
-import PageHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/PageHeader';
+import PageHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader';
import useUserData from 'context/state/useUserData';
import { useFormManagement } from 'context/formHooks/useFormManagement';
-import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+import LoadingOverlay from 'layout/REUSABLE_COMPONENTS/utils/system-utils/LoadingOverlay';
import useManager from 'context/useManager';
import CollectionsViewLayout from './CollectionsViewLayout';
import PortfolioViewLayout from './PortfolioViewLayout';
@@ -21,11 +21,6 @@ const CollectionsView = ({ openDialog, handleTabAndSelect }) => {
const { theme } = useMode();
const { setActiveFormSchema } = useFormManagement();
const { user } = useUserData();
-
- const handleOpenAddDialog = useCallback(() => {
- setActiveFormSchema('addCollectionForm');
- openDialog('isAddCollectionDialogOpen');
- }, [openDialog, setActiveFormSchema]);
return (
@@ -43,7 +38,10 @@ const CollectionsView = ({ openDialog, handleTabAndSelect }) => {
buttonText="Add New Collection"
headerName="Collection Portfolio"
username={user.username}
- handleOpenDialog={handleOpenAddDialog}
+ handleOpenDialog={() => {
+ setActiveFormSchema('addCollectionForm');
+ openDialog('isAddCollectionDialogOpen');
+ }}
action={{ route: '', tooltip: 'Add Collection' }}
/>
@@ -60,11 +58,14 @@ const CollectionsView = ({ openDialog, handleTabAndSelect }) => {
);
};
-const PortfolioView = ({ handleBackToCollections }) => (
+const PortfolioView = ({ handleBackToCollections, selectedCollection }) => (
-
+
@@ -74,11 +75,20 @@ const PortfolioView = ({ handleBackToCollections }) => (
);
const CollectionPortfolio = () => {
const { theme } = useMode();
- const { collections, handleSelectCollection } = useManager();
+ const {
+ collections,
+ handleSelectCollection,
+ hasFetchedCollections,
+ fetchCollections,
+ } = useManager();
const { dialogState, openDialog, closeDialog } = useDialogState();
const [activeTab, setActiveTab] = useState(0);
const selectedCollectionId = localStorage.getItem('selectedCollectionId');
-
+ useEffect(() => {
+ if (!hasFetchedCollections) {
+ fetchCollections();
+ }
+ }, [hasFetchedCollections]);
const tabs = [
{
}
};
- const handleSelectAndShowCollection = useCallback(
- (collection) => {
- handleSelectCollection(collection);
- setActiveTab(1); // Switch to Portfolio View tab
- },
- [handleSelectCollection]
- );
useEffect(() => {
const handleStorageChange = (event) => {
- if (
- event.key === 'selectedCollectionId' ||
- event.key === 'selectedCollection'
- ) {
+ if (event.key === 'selectedCollectionId') {
const updatedCollectionId = event.newValue;
const updatedCollection = collections.find(
(collection) => collection._id === updatedCollectionId
@@ -131,6 +131,14 @@ const CollectionPortfolio = () => {
handleSelectCollection(updatedCollection);
}
}
+ // if (
+ // event.key === 'selectedCollection' &&
+ // event.newValue &&
+ // JSON.parse(event.newValue) !== event.oldValue
+ // ) {
+ // const updatedCollection = JSON.parse(event.newValue);
+ // handleSelectCollection(updatedCollection);
+ // }
};
window.addEventListener('storage', handleStorageChange);
@@ -161,14 +169,17 @@ const CollectionPortfolio = () => {
{activeTab === 0 && (
{
+ handleSelectCollection(collection);
+ setActiveTab(1); // Switch to Portfolio View tab
+ }}
/>
)}
{activeTab === 1 && selectedCollectionId && (
c._id === selectedCollectionId
- )}
+ // selectedCollection={collections?.find(
+ // (c) => c._id === selectedCollectionId
+ // )}
handleBackToCollections={() => setActiveTab(0)}
/>
)}
diff --git a/src/layout/deck/DeckListItem.jsx b/src/layout/deck/DeckListItem.jsx
index 428ba85..4cb3872 100644
--- a/src/layout/deck/DeckListItem.jsx
+++ b/src/layout/deck/DeckListItem.jsx
@@ -17,7 +17,7 @@ import GenericCard from 'components/cards/GenericCard';
import { formFields } from 'data/formsConfig';
import RCDynamicForm from 'components/forms/Factory/RCDynamicForm';
import useBreakpoint from 'context/hooks/useBreakPoint';
-import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants';
+import { SkeletonCard } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants';
import RCWrappedIcon from 'layout/REUSABLE_COMPONENTS/RCWRAPPEDICON';
import { roundToNearestTenth } from 'context/Helpers';
const AnimatedInfoItem = ({ label, value, theme, delay }) => {
diff --git a/src/layout/deck/index.jsx b/src/layout/deck/index.jsx
index ce5ceb3..25646da 100644
--- a/src/layout/deck/index.jsx
+++ b/src/layout/deck/index.jsx
@@ -9,13 +9,13 @@ import {
} from '@mui/material';
import { useMode } from 'context';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
-import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout';
+import DashboardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout';
import SearchComponent from 'components/forms/search/SearchComponent';
import DeckDialog from 'components/dialogs/DeckDialog';
import useDialogState from 'context/hooks/useDialogState';
import DeckListItem from './DeckListItem';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
-import PageHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/PageHeader';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
+import PageHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageHeader';
import useUserData from 'context/state/useUserData';
import { useFormManagement } from 'context/formHooks/useFormManagement';
import useManager from 'context/useManager';
@@ -81,11 +81,11 @@ const DeckBuilder = () => {
handleSelectDeck(updatedDeck);
}
}
- if (event.key === 'decks') {
- const updatedDecks = JSON.parse(event.newValue);
- setDecks(updatedDecks);
- setHasUpdatedDecks(true);
- }
+ // if (event.key === 'decks') {
+ // const updatedDecks = JSON.parse(event.newValue);
+ // setDecks(updatedDecks);
+ // setHasUpdatedDecks(true);
+ // }
};
window.addEventListener('storage', handleStorageChange);
@@ -93,24 +93,6 @@ const DeckBuilder = () => {
window.removeEventListener('storage', handleStorageChange);
};
}, [decks, handleSelectDeck]);
- // useEffect(() => {
- // // A function that sets the orientation state of the tabs.
- // function handleTabsOrientation() {
- // return window.innerWidth < theme.breakpoints.values.sm
- // ? setTabsOrientation('vertical')
- // : setTabsOrientation('horizontal');
- // }
-
- // /**
- // The event listener that's calling the handleTabsOrientation function when resizing the window.
- // */
- // window.addEventListener('resize', handleTabsOrientation);
-
- // // Call the handleTabsOrientation function to set the state with the initial value.
- // handleTabsOrientation();
-
- // // Remove event listener on cleanup
- // return () => window.removeEventListener('resize', handleTabsOrientation);
// }, [tabsOrientation]);
const handleChangeTab = useCallback(
async (event, newValue) => {
diff --git a/src/layout/home/HeroChartSection.jsx b/src/layout/home/HeroChartSection.jsx
index f183bb2..156f109 100644
--- a/src/layout/home/HeroChartSection.jsx
+++ b/src/layout/home/HeroChartSection.jsx
@@ -1,7 +1,7 @@
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
import placeHolder from 'assets/images/placeholder.jpeg';
import { Card, CardContent, Zoom } from '@mui/material';
-import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
+import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween';
import {
ResponsiveContainer,
CartesianGrid,
@@ -12,8 +12,8 @@ import {
Line,
Tooltip,
} from 'recharts';
-import DashboardBox from 'layout/REUSABLE_COMPONENTS/layout-utils/DashboardBox';
-import BoxHeader from 'layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader';
+import DashboardBox from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashboardBox';
+import BoxHeader from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/BoxHeader';
import { useMode } from 'context';
import { useEffect, useMemo, useRef, useState } from 'react';
import { FaShieldAlt } from 'react-icons/fa';
diff --git a/src/layout/home/HeroIconSection.jsx b/src/layout/home/HeroIconSection.jsx
index cef8c12..6499113 100644
--- a/src/layout/home/HeroIconSection.jsx
+++ b/src/layout/home/HeroIconSection.jsx
@@ -4,7 +4,7 @@ import { useMode } from 'context';
import { AspectRatio } from '@mui/joy';
import heroData from 'data/heroData';
import useBreakpoint from 'context/hooks/useBreakPoint';
-import FlexBetween from 'layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
+import FlexBetween from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/FlexBetween';
import SaveIcon from '@mui/icons-material/Save';
import AddIcon from '@mui/icons-material/Add';
import CollectionsIcon from '@mui/icons-material/Collections';
diff --git a/src/layout/home/index.jsx b/src/layout/home/index.jsx
index 9fa5186..5501a4f 100644
--- a/src/layout/home/index.jsx
+++ b/src/layout/home/index.jsx
@@ -1,7 +1,7 @@
import React, { useEffect, useMemo, useState } from 'react';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
import placeHolder from 'assets/images/placeholder.jpeg';
-import { HeroSectionSkeleton } from 'layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants';
+import { HeroSectionSkeleton } from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SkeletonVariants';
import { Card } from '@mui/material';
import HeroTextSection from './HeroTextSection';
import HeroIconSection from './HeroIconSection';
diff --git a/src/layout/profile/index.jsx b/src/layout/profile/index.jsx
index dbf2bf8..4ce5741 100644
--- a/src/layout/profile/index.jsx
+++ b/src/layout/profile/index.jsx
@@ -7,7 +7,7 @@ import TwitterIcon from '@mui/icons-material/Twitter';
import InstagramIcon from '@mui/icons-material/Instagram';
// Images
-import DashboardLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout';
+import DashboardLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/DashBoardLayout';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
import Header from './sub-components/Header';
import PlatformSettings from './sub-components/Settings';
diff --git a/src/layout/store/index.jsx b/src/layout/store/index.jsx
index 78230ac..1f9a640 100644
--- a/src/layout/store/index.jsx
+++ b/src/layout/store/index.jsx
@@ -1,7 +1,7 @@
import React, { useState } from 'react';
import { useMode } from 'context';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import SearchComponent from 'components/forms/search/SearchComponent';
import { PortfolioBoxA } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
index 97cd324..62d90c0 100644
--- a/src/pages/CartPage.js
+++ b/src/pages/CartPage.js
@@ -21,7 +21,7 @@ import {
} from '@mui/material';
import { useMode } from 'context';
import Checkout from 'layout/cart/cartPageContainers/Checkout';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
import useUserData from 'context/state/useUserData';
import CartContent from 'layout/cart';
diff --git a/src/pages/CollectionPage.js b/src/pages/CollectionPage.js
index 00df0bf..3468e70 100644
--- a/src/pages/CollectionPage.js
+++ b/src/pages/CollectionPage.js
@@ -1,7 +1,7 @@
import React, { useEffect } from 'react';
import { Grid } from '@mui/material';
import CollectionPortfolio from 'layout/collection';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import useManager from 'context/useManager';
const CollectionPage = () => {
diff --git a/src/pages/DeckBuilderPage.js b/src/pages/DeckBuilderPage.js
index 53b0e2c..67161f5 100644
--- a/src/pages/DeckBuilderPage.js
+++ b/src/pages/DeckBuilderPage.js
@@ -1,6 +1,6 @@
import React from 'react';
import DeckBuilder from 'layout/deck';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
// ==============================|| DECK BUILDER PAGE ||============================== //
diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js
index 16c0f78..4fc2366 100644
--- a/src/pages/HomePage.js
+++ b/src/pages/HomePage.js
@@ -1,6 +1,6 @@
import React from 'react';
import { Grid } from '@mui/material';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import HeroSection from 'layout/home';
import FeatureCardsSection from 'layout/home/FeatureCardsSection';
diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx
index aafdccc..1df0789 100644
--- a/src/pages/LoginPage.jsx
+++ b/src/pages/LoginPage.jsx
@@ -1,6 +1,6 @@
import React from 'react';
import { CssBaseline, Box, Typography, Card } from '@mui/material';
-import SplashPage2 from 'layout/REUSABLE_COMPONENTS/system-utils/SplashPage2';
+import SplashPage2 from 'layout/REUSABLE_COMPONENTS/utils/system-utils/SplashPage2';
import LoginDialog from './LoginDialog'; // Import the LoginDialog component
import useManageCookies from 'context/hooks/useManageCookies';
import { useMode } from 'context';
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index 4621b00..88bc92c 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import Overview from 'layout/profile/index';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import { Grid } from '@mui/material';
// ==============================|| PROFILE PAGE ||============================== //
diff --git a/src/pages/StorePage.js b/src/pages/StorePage.js
index 13254ec..05076e5 100644
--- a/src/pages/StorePage.js
+++ b/src/pages/StorePage.js
@@ -1,6 +1,6 @@
import React from 'react';
import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX';
-import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout';
+import PageLayout from 'layout/REUSABLE_COMPONENTS/utils/layout-utils/PageLayout';
import StoreSearch from 'layout/store';
import { Grid, Typography, Box } from '@mui/material';
import { useMode } from 'context';