reedoooo · reedoooo · Apr 23, 2024 · Apr 23, 2024
diff --git a/...ts/buttons/actionButtons/ActionButton.jsx → cleanup/ActionButton.jsx b/...ts/buttons/actionButtons/ActionButton.jsx → cleanup/ActionButton.jsx
@@ -1,7 +1,7 @@
 import { LoadingButton } from '@mui/lab';
-import { useMode } from '../../../context';
-import MDTypography from '../../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography';
-import { useLoading } from '../../../context/hooks/useLoading';
+import { useMode } from '../src/context';
+import MDTypography from '../src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography';
+import { useLoading } from '../src/context/hooks/useLoading';
 import AddCircleOutlineOutlined from '@mui/icons-material/AddCircleOutlineOutlined';
 import RemoveCircleOutlineOutlined from '@mui/icons-material/RemoveCircleOutlineOutlined';
 
@@ -38,14 +38,6 @@ const ActionButton = ({
   const { theme } = useMode();
   const { isLoading } = useLoading();
   const adjustedButtonSize = variant === 'data-table' ? 'small' : buttonSize;
-
-  const { buttonLabel, buttonVariant } = getLabelAndVariant(
-    adjustedButtonSize,
-    labelValue,
-    actionType
-  );
-
-  // Select icon based on action type
   const actionIcon =
     actionType === 'add' ? (
       <AddCircleOutlineOutlined />

diff --git a/cleanup/ChartConfigs.jsx b/cleanup/ChartConfigs.jsx
@@ -0,0 +1,76 @@
+// /* eslint-disable max-len */
+// import { useAppContext, useMode } from '../../context';
+// import { useEffect, useMemo, useState } from 'react';
+// import NivoContainer from '../REUSABLE_COMPONENTS/layout-utils/NivoContainer';
+// import { BasicTooltip } from '@nivo/tooltip';
+// import { useEventHandlers } from '../../context/hooks/useEventHandlers';
+// import MyResponsiveLine from './MyPortfolioLineChart';
+// import { ChartArea } from '../../pages/pageStyles/StyledComponents';
+// import { useForm, useWatch } from 'react-hook-form';
+// import useSelectedCollection from '../../context/MAIN_CONTEXT/CollectionContext/useSelectedCollection';
+// import useRCFormHook from '../../components/forms/hooks/useRCFormHook';
+// import { useCompileCardData } from '../../context/MISC_CONTEXT/AppContext/useCompileCardData';
+// import LoadingOverlay from '../REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
+// import { i } from 'mathjs';
+// const formatDateBasedOnRange = (range) => {
+//   const formatMap = {
+//     '24hr': { format: '%H:%M', ticks: 'every hour' },
+//     '7d': { format: '%b %d', ticks: 'every day' },
+//     '30d': { format: '%b %d', ticks: 'every day' },
+//     '90d': { format: '%b %d', ticks: 'every 3 days' },
+//     '180d': { format: '%b %d', ticks: 'every 6 days' },
+//     '270d': { format: '%b %d', ticks: 'every 9 days' },
+//     '365d': { format: '%b %d', ticks: 'every 12 days' },
+//     default: { format: '%b %d', ticks: 'every day' },
+//   };
+
+//   return formatMap[range] || formatMap.default;
+// };
+// export const ChartConfiguration = () => {
+//   const { theme } = useMode();
+//   const { greenAccent, redAccent, grey } = theme.palette.chartTheme;
+//   const { selectedTimeRange = '24hr' } = useCompileCardData();
+//   const { selectedCollection, createMarkers } = useSelectedCollection();
+//   if (!selectedCollection) {
+//     return <LoadingOverlay />;
+//   }
+//   const memoChartData = useMemo(() => {
+//     const { selectedChartData, averagedChartData, selectedChartDataKey } =
+//       selectedCollection;
+//     return !selectedChartData.data.length
+//       ? averagedChartData[selectedChartDataKey]
+//       : selectedChartData;
+//   }, [selectedCollection]);
+//   const validMarkers = useMemo(() => {
+//     const markers = createMarkers(selectedCollection);
+//     return markers.filter((marker) => marker.id && marker.value !== undefined);
+//   }, [createMarkers, selectedCollection]);
+//   const tickValues = useMemo(() => {
+//     const { ticks } = formatDateBasedOnRange(selectedTimeRange);
+//     return ticks.split(' ').map((tick) => new Date(tick).getTime());
+//   }, [selectedTimeRange]);
+//   useEffect(() => {
+//     console.log('Chart data:', memoChartData);
+//   }, [memoChartData]);
+//   if (!memoChartData) {
+//     return <LoadingOverlay />;
+//   }
+
+//   return (
+//     <ChartArea theme={theme} sx={{ minHeight: '500px' }}>
+//       <NivoContainer height={500}>
+//         <MyResponsiveLine
+//           key={selectedCollection.selectedChartDataKey}
+//           data={[memoChartData]}
+//           tickValues={tickValues}
+//           validMarkers={validMarkers}
+//           xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'}
+//           redAccent={redAccent}
+//           greenAccent={greenAccent}
+//           grey={grey}
+//           text={theme.palette.text.primary}
+//         />
+//       </NivoContainer>
+//     </ChartArea>
+//   );
+// };
diff --git a/src/App.js b/src/App.js
@@ -15,7 +15,6 @@ import {
   SidebarProvider,
   AppContextProvider,
   ConfiguratorProvider,
-  DataProvider,
 } from './context';
 import { ThemeProvider } from 'styled-components';
 import { CssBaseline, GlobalStyles } from '@mui/material';
@@ -39,9 +38,7 @@ const App = () => {
                     <CartProvider>
                       <SidebarProvider>
                         <AppContextProvider>
-                          <DataProvider>
-                            <Main />
-                          </DataProvider>
+                          <Main />
                         </AppContextProvider>
                       </SidebarProvider>
                     </CartProvider>

diff --git a/src/Main.jsx b/src/Main.jsx
@@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom';
 import PrivateRoute from './layout/navigation/PrivateRoute.jsx';
 import LoginDialog from './pages/LoginDialog.jsx';
 import { useConfiguratorContext, useMode } from './context';
-import PageLayout from './layout/REUSABLE_COMPONENTS/PageLayout.jsx';
+import PageLayout from './layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx';
 import Navigation from './layout/navigation/Navigation.jsx';
 import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';

diff --git a/src/components/cards/CardDetailsContainer.jsx b/src/components/cards/CardDetailsContainer.jsx
@@ -94,7 +94,7 @@ const CardDetailPrice = ({ value }) => (
 const CardDetailRarity = ({ values, onRarityClick }) => {
   const { theme } = useMode();
 
-  return values?.map((rarity, index) => (
+  return values?.map((rarity, index) => {
     <CardDetailChip
       key={index}
       theme={theme}
@@ -107,8 +107,8 @@ const CardDetailRarity = ({ values, onRarityClick }) => {
         margin: '5px',
       }}
       variant="outlined"
-    />
-  ));
+    />;
+  });
 };
 const CardDetailSet = ({ values }) => {
   const { theme } = useMode();
@@ -148,12 +148,15 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => {
   return (
     <Grid container spacing={2} sx={{ maxWidth: '100%' }}>
       {details?.map((detail, index) => (
-        <Grid item xs={12} sm={6} md={4} key={index}>
-          <Card sx={{ p: theme.spacing(2) }}>
-            <MDBox sx={{ border: 'none' }}>
-              <Typography variant="h6">{detail.title}:</Typography>
-              {detail.key === 'title' && <CardDetailTitle value={card?.name} />}
-
+        <Grid item xs={12} sm={12} md={4} lg={6} key={index}>
+          <Card sx={{ p: theme.spacing(1) }}>
+            <CardHeader
+              title={<Typography variant="h6">{detail.title}:</Typography>}
+            />
+            <CardContent>
+              {/* <MDBox sx={{ border: 'none' }}> */}
+              {/* <Typography variant="h6">{detail.title}:</Typography> */}
+              {/* {detail.key === 'title' && <CardDetailTitle value={card?.name} />} */}
               <Divider />
               {detail.key === 'desc' && (
                 <CardDetailDescription value={card?.desc} />
@@ -162,13 +165,17 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => {
                 <CardDetailPrice value={card?.price} />
               )}
               {detail.key === 'rarities' && (
-                <CardDetailRarity
-                  values={raritiesArray}
-                  onRarityClick={handleAction}
-                />
+                <Stack direction="row" justifyContent="center" flexWrap="wrap">
+                  <CardDetailRarity
+                    values={raritiesArray}
+                    onRarityClick={handleAction}
+                  />
+                </Stack>
               )}
               {detail.key === 'card_sets' && (
-                <CardDetailSet values={cardSetsArray} />
+                <Stack direction="row" justifyContent="center" flexWrap="wrap">
+                  <CardDetailSet values={cardSetsArray} />
+                </Stack>
               )}
               {/* {detail.icon && (
                 <CardDetailIcon
@@ -179,7 +186,8 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => {
                   }
                 />
               )} */}
-            </MDBox>
+              {/* </MDBox> */}
+            </CardContent>
           </Card>
         </Grid>
       ))}
@@ -221,7 +229,7 @@ const CardDetailsContainer = ({
   return (
     <Grid
       container
-      spacing={2}
+      // spacing={2}
       sx={{
         // background: theme.palette.chartTheme.greenAccent.light,
         justifyContent: 'center',

diff --git a/src/components/cards/GenericCard.jsx b/src/components/cards/GenericCard.jsx
@@ -7,7 +7,6 @@ import React, {
 } from 'react';
 import { Card, CardActions, Typography } from '@mui/material';
 import CardMediaSection from './CardMediaSection';
-import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
 import placeholder from '../../assets/images/placeholder.jpeg';
 import { useModalContext } from '../../context/UTILITIES_CONTEXT/ModalContext/ModalContext';
 import { useMode } from '../../context';
@@ -24,6 +23,7 @@ import { useCartManager } from '../../context/MAIN_CONTEXT/CartContext/useCartMa
 import LoadingOverlay from '../../layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
 import { useCompileCardData } from '../../context/MISC_CONTEXT/AppContext/useCompileCardData';
 import useSelectedDeck from '../../context/MAIN_CONTEXT/DeckContext/useSelectedDeck';
+import GenericActionButtons from '../../layout/REUSABLE_COMPONENTS/GenericActionButtons';
 const getQuantity = ({
   card,
   cart,

diff --git a/src/components/dialogs/GenericCardDialog.jsx b/src/components/dialogs/GenericCardDialog.jsx
@@ -16,12 +16,12 @@ import {
 } from '@mui/material';
 import CloseIcon from '@mui/icons-material/Close';
 import CardMediaSection from '../cards/CardMediaSection';
-import GenericActionButtons from '../buttons/actionButtons/GenericActionButtons';
 import CardDetailsContainer from '../cards/CardDetailsContainer';
 import { useSelectedContext, useModalContext, useMode } from '../../context';
 import { useSnackbar } from 'notistack';
-import FlexBetween from '../../layout/REUSABLE_COMPONENTS/FlexBetween';
+import FlexBetween from '../../layout/REUSABLE_COMPONENTS/layout-utils/FlexBetween';
 import useBreakpoint from '../../context/hooks/useBreakPoint';
+import GenericActionButtons from '../../layout/REUSABLE_COMPONENTS/GenericActionButtons';
 
 const GenericCardDialog = ({
   open = false,

diff --git a/src/components/forms/formsConfig.jsx b/src/components/forms/formsConfig.jsx
@@ -103,9 +103,9 @@ const getFormFieldHandlers = () => {
       console.log('Update Collection Form Data:', formData, additionalData);
       updateCollection(formData, additionalData);
     },
-    updateDeckForm: (formData, additionalData) => {
-      console.log('Update Deck Form Data:', formData, additionalData);
-      updateDeckDetails(formData, additionalData);
+    updateDeckForm: (formData) => {
+      console.log('Update Deck Form Data:', formData);
+      updateDeckDetails(formData);
     },
     addDeckForm: (formData, additionalData) => {
       console.log('Add Deck Form Data:', formData, additionalData);

diff --git a/src/context/DataContextProvider.jsx b/src/context/DataContextProvider.jsx