diff --git a/cleanup/ActionButton.jsx b/cleanup/ActionButton.jsx deleted file mode 100644 index 618fe64..0000000 --- a/cleanup/ActionButton.jsx +++ /dev/null @@ -1,89 +0,0 @@ -import { LoadingButton } from '@mui/lab'; -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'; - -// Determines the label and variant based on button size and action -const getLabelAndVariant = (buttonSize, labelValue, action) => { - const labelTypeMap = { - extraSmall: null, - small: action, - medium: action, - large: labelValue, - }; - const buttonVariantMap = { - extraSmall: 'body4', - small: 'body3', - medium: 'body2', - large: 'body4', - }; - return { - buttonLabel: labelTypeMap[buttonSize], - buttonVariant: buttonVariantMap[buttonSize], - }; -}; - -// Generic Action Button Component -const ActionButton = ({ - buttonSize, - handleCardAction, - labelValue, - actionType, - card, - selectedEntity, - variant, -}) => { - const { theme } = useMode(); - const { isLoading } = useLoading(); - const adjustedButtonSize = variant === 'data-table' ? 'small' : buttonSize; - const actionIcon = - actionType === 'add' ? ( - - ) : ( - - ); - const loadingKey = - actionType === 'add' ? 'addCardsToCollection' : 'removeCardsFromCollection'; - - return ( - - - {String(labelValue)} {/* Force conversion to string */} - - - ); -}; - -export default ActionButton; diff --git a/cleanup/ChartConfigs.jsx b/cleanup/ChartConfigs.jsx deleted file mode 100644 index 717cd67..0000000 --- a/cleanup/ChartConfigs.jsx +++ /dev/null @@ -1,76 +0,0 @@ -// /* 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 ; -// } -// 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 ; -// } - -// return ( -// -// -// -// -// -// ); -// }; diff --git a/cleanup/MainContentSection.jsx b/cleanup/MainContentSection.jsx deleted file mode 100644 index 34489a9..0000000 --- a/cleanup/MainContentSection.jsx +++ /dev/null @@ -1,142 +0,0 @@ -// import React from 'react'; -// import { useTheme } from '@mui/material/styles'; -// import { -// Grid, -// Card, -// CardHeader, -// CardContent, -// CardActions, -// Stack, -// Container, -// useMediaQuery, -// } from '@mui/material'; -// import { useMode } from '../../context'; -// import MDBox from '../REUSABLE_COMPONENTS/MDBOX'; -// import MDTypography from '../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; -// import MDAvatar from '../../layout/REUSABLE_COMPONENTS/MDAVATAR'; -// import RCButton from '../REUSABLE_COMPONENTS/RCButton'; -// import SingleCardAnimation from '../../assets/animations/SingleCardAnimation'; -// import CardChart from '../../layout/CardChart'; -// import useCardCronJob from '../../layout/useCardCronJob'; -// import { -// StyledContainerBox, -// StyledPaper, -// } from '../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -// import placeHolder from '../../assets/images/placeholder.jpeg'; -// import { DEFAULT_COLLECTION } from '../../context/constants'; -// import useManageCookies from '../../context/hooks/useManageCookies'; -// import RCButton from '../REUSABLE_COMPONENTS/RCBUTTON'; -// import useUserData from '../../context/MAIN_CONTEXT/UserContext/useUserData'; -// import useManager from '../../context/MAIN_CONTEXT/CollectionContext/useManager'; - -// const MainContentSection = () => { -// const { theme } = useMode(); -// const { getCookie } = useManageCookies(); -// const { isLoggedIn } = getCookie(['isLoggedIn']); -// const { user } = useUserData(); -// const { -// collections: allCollections, -// selectedCollection, -// hasFetchedCollections, -// } = useManager(); -// const isMdUp = useMediaQuery(theme.breakpoints.up('md')); -// const initialCardsData = hasFetchedCollections -// ? allCollections[0]?.cards[0] -// : DEFAULT_COLLECTION.addMultipleDefaultCards(5); -// const { cardData } = useCardCronJob(initialCardsData); - -// const renderStatItem = (label, value) => ( -// -// {label}: {value} -// -// ); - -// return ( -//
-// -// -// -// -// -// {isMdUp && ( -// -// -// -// -// -// )} -// -// -// -// -// -// -// -// -// -// -// {isLoggedIn && ( -// -// } -// /> -// -// -// {renderStatItem( -// 'Total Value of Collections', -// selectedCollection?.totalPrice -// )} -// {renderStatItem( -// 'Number of Decks', -// user?.allDecks?.length -// )} -// {renderStatItem( -// 'Number of Collections', -// allCollections?.length -// )} -// {renderStatItem( -// 'Total Cards Purchased', -// user?.allCollections?.reduce( -// (acc, collection) => acc + collection.cards.length, -// 0 -// ) -// )} -// -// -// -// { -// console.log('clicked'); -// }} -// > -// Manage Collections -// -// -// View Purchase History -// -// -// -// )} -// -// -// -// -//
-// ); -// }; - -// export default MainContentSection; diff --git a/public/images/pages/cart-checkout.png b/public/images/pages/cart-checkout.png new file mode 100644 index 0000000..75ca07d Binary files /dev/null and b/public/images/pages/cart-checkout.png differ diff --git a/public/images/pages/Screenshot 2024-04-30 at 9.40.57 AM.png b/public/images/pages/collection-home.png similarity index 100% rename from public/images/pages/Screenshot 2024-04-30 at 9.40.57 AM.png rename to public/images/pages/collection-home.png diff --git a/public/images/pages/Screenshot 2024-04-30 at 9.46.02 AM.png b/public/images/pages/deck-home.png similarity index 100% rename from public/images/pages/Screenshot 2024-04-30 at 9.46.02 AM.png rename to public/images/pages/deck-home.png diff --git a/public/images/pages/homepage.png b/public/images/pages/homepage.png new file mode 100644 index 0000000..ca4d91b Binary files /dev/null and b/public/images/pages/homepage.png differ diff --git a/public/images/pages/profile-home.png b/public/images/pages/profile-home.png new file mode 100644 index 0000000..c765201 Binary files /dev/null and b/public/images/pages/profile-home.png differ diff --git a/public/images/pages/store-home.png b/public/images/pages/store-home.png new file mode 100644 index 0000000..e6da17b Binary files /dev/null and b/public/images/pages/store-home.png differ diff --git a/src/App.js b/src/App.js index f406c00..a552507 100644 --- a/src/App.js +++ b/src/App.js @@ -4,26 +4,10 @@ import './assets/css/index.css'; import './assets/css/card.css'; import './assets/css/page.css'; import Main from './Main'; -import { useMode, ConfiguratorProvider } from './context'; -import { ThemeProvider } from 'styled-components'; -import { CssBaseline, GlobalStyles } from '@mui/material'; -import { ParallaxProvider } from 'react-scroll-parallax'; - // ==============================|| APP ||============================== // const App = () => { - const { theme } = useMode(); - return ( - - - - - -
- - - - ); + return
; }; export default App; diff --git a/src/Main.jsx b/src/Main.jsx index bbddd61..38c80e5 100644 --- a/src/Main.jsx +++ b/src/Main.jsx @@ -2,7 +2,6 @@ import React, { Suspense, lazy, useEffect } from 'react'; 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/layout-utils/PageLayout.jsx'; import Navigation from './layout/navigation/Navigation.jsx'; import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx'; @@ -10,6 +9,7 @@ import { CSSTransition, TransitionGroup } from 'react-transition-group'; import LoadingOverlay from './layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx'; import useManageCookies from './context/hooks/useManageCookies.jsx'; import { ROUTE_CONFIG } from './data/route-config.jsx'; +import { useConfigurator } from 'context/hooks/useConfigurator.jsx'; // ==============================|| MAIN ROUTING ||============================== // @@ -19,8 +19,8 @@ const LazyRoute = ({ componentName, ...rest }) => { }; const Main = () => { const { getCookie } = useManageCookies(); - const { isLoggedIn, userId } = getCookie(['isLoggedIn', 'userId']); - const { isConfiguratorOpen } = useConfiguratorContext(); + const { isLoggedIn } = getCookie(['isLoggedIn']); + const { isConfiguratorOpen } = useConfigurator(); return ( { MuiCard: components.MuiCard, MuiCardMedia: components.MuiCardMedia, MuiCardContent: components.MuiCardContent, - // MuiContainer: components.MuiContainer, }, - // shadows: [ - // 'none', - // '0px 2px 1px -1px rgba(0,0,0,0.1),0px 1px 1px 0px rgba(0,0,0,0.06),0px 1px 3px 0px rgba(0,0,0,0.04)', // example for theme.shadows[1] - // '0px 3px 1px -2px rgba(0,0,0,0.1),0px 2px 2px 0px rgba(0,0,0,0.06),0px 1px 5px 0px rgba(0,0,0,0.04)', // example for theme.shadows[2] - // '0px 3px 3px -2px rgba(0,0,0,0.1),0px 3px 4px 0px rgba(0,0,0,0.06),0px 1px 8px 0px rgba(0,0,0,0.04)', // example for theme.shadows[3] - // '0px 2px 4px -1px rgba(0,0,0,0.1),0px 4px 5px 0px rgba(0,0,0,0.06),0px 1px 10px 0px rgba(0,0,0,0.04)', // example for theme.shadows[4] - // '0px 3px 5px -1px rgba(0,0,0,0.1),0px 5px 8px 0px rgba(0,0,0,0.06),0px 1px 14px 0px rgba(0,0,0,0.04)', // example for theme.shadows[5] - // '0px 3px 5px -1px rgba(0,0,0,0.1),0px 6px 10px 0px rgba(0,0,0,0.06),0px 1px 18px 0px rgba(0,0,0,0.04)', // example for theme.shadows[6] - // '0px 4px 5px -2px rgba(0,0,0,0.1),0px 7px 10px 1px rgba(0,0,0,0.06),0px 2px 16px 1px rgba(0,0,0,0.04)', // example for theme.shadows[7] - // '0px 5px 5px -3px rgba(0,0,0,0.1),0px 8px 10px 1px rgba(0,0,0,0.06),0px 3px 14px 2px rgba(0,0,0,0.04)', // example for theme.shadows[8] - // '0px 5px 6px -3px rgba(0,0,0,0.1),0px 9px 12px 1px rgba(0,0,0,0.06),0px 3px 16px 2px rgba(0,0,0,0.04)', // example for theme.shadows[9] - // '0px 5px 15px rgba(0,0,0,0.1)', // example for theme.shadows[10] - // ], skeletonLayouts: { tertiaryContent: { xs: 12, @@ -108,23 +94,3 @@ export const themeSettings = (mode) => { }, }; }; -// specialBreakpoints: specialBreakpoints, -// const colorsA = tokens(mode); -// const specialBreakpoints = { -// isSmUp: (breakpoints) => breakpoints.up('sm'), -// isMdUp: (breakpoints) => breakpoints.up('md'), -// isLgUp: (breakpoints) => breakpoints.up('lg'), -// isXlUp: (breakpoints) => breakpoints.up('xl'), -// isSmDown: (breakpoints) => breakpoints.down('sm'), -// isMdDown: (breakpoints) => breakpoints.down('md'), -// isLgDown: (breakpoints) => breakpoints.down('lg'), -// isXlDown: (breakpoints) => breakpoints.down('xl'), - -// isXSmall: (breakpoints) => breakpoints.down('xs'), -// isSmall: (breakpoints) => breakpoints.down('sm'), -// isSmallMedium: (breakpoints) => breakpoints.up('sm'), -// isMedium: (breakpoints) => breakpoints.down('md'), -// isMediumLarge: (breakpoints) => breakpoints.up('md'), -// isLarge: (breakpoints) => breakpoints.up('lg'), -// isXLarge: (breakpoints) => breakpoints.up('xl'), -// }; diff --git a/src/components/forms/search/SearchComponent.jsx b/src/components/forms/search/SearchComponent.jsx index 7aa7ae3..b6124a5 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/components/forms/search/SearchComponent.jsx @@ -7,7 +7,6 @@ import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import SettingsIcon from '@mui/icons-material/Settings'; import { useMode } from 'context'; import useLocalStorage from 'context/hooks/useLocalStorage'; -import { useConfiguratorContext } from 'context'; import SimpleCard from 'layout/REUSABLE_COMPONENTS/unique/SimpleCard'; import uniqueTheme from 'layout/REUSABLE_COMPONENTS/unique/uniqueTheme'; import { useCardStoreHook } from 'context/useCardStore'; @@ -15,12 +14,13 @@ import RCDynamicForm from '../Factory/RCDynamicForm'; import { formFields } from '../formsConfig'; import SearchIcon from '@mui/icons-material/Search'; import useBreakpoint from 'context/hooks/useBreakPoint'; +import { useConfigurator } from 'context/hooks/useConfigurator'; const SearchComponent = (pageContext) => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); const itemsPerPage = 12; const { loadingSearchResults } = useCardStoreHook(); - const { toggleConfigurator } = useConfiguratorContext(); + const { toggleConfigurator } = useConfigurator(); const [searchData, setSearchData] = useLocalStorage('searchData', []); useEffect(() => { const handleStorageChange = () => { diff --git a/src/context/ConfiguratorContext.jsx b/src/context/ConfiguratorContext.jsx index 7d8cbed..87e5efd 100644 --- a/src/context/ConfiguratorContext.jsx +++ b/src/context/ConfiguratorContext.jsx @@ -1,24 +1,24 @@ -// ConfiguratorContext.js -import React, { createContext, useContext, useState } from 'react'; -const defaultConfiguratorState = { - isConfiguratorOpen: false, - // eslint-disable-next-line @typescript-eslint/no-empty-function - toggleConfigurator: () => {}, -}; -const ConfiguratorContext = createContext(defaultConfiguratorState); +// // ConfiguratorContext.js +// import React, { createContext, useContext, useState } from 'react'; +// const defaultConfiguratorState = { +// isConfiguratorOpen: false, +// // eslint-disable-next-line @typescript-eslint/no-empty-function +// toggleConfigurator: () => {}, +// }; +// const ConfiguratorContext = createContext(defaultConfiguratorState); -export const ConfiguratorProvider = ({ children }) => { - const [isConfiguratorOpen, setIsConfiguratorOpen] = useState(false); +// export const ConfiguratorProvider = ({ children }) => { +// const [isConfiguratorOpen, setIsConfiguratorOpen] = useState(false); - const toggleConfigurator = () => setIsConfiguratorOpen((prev) => !prev); +// const toggleConfigurator = () => setIsConfiguratorOpen((prev) => !prev); - return ( - - {children} - - ); -}; +// return ( +// +// {children} +// +// ); +// }; -export const useConfiguratorContext = () => useContext(ConfiguratorContext); +// export const useConfiguratorContext = () => useContext(ConfiguratorContext); diff --git a/src/context/hooks/useConfigurator.jsx b/src/context/hooks/useConfigurator.jsx new file mode 100644 index 0000000..8b8e7cb --- /dev/null +++ b/src/context/hooks/useConfigurator.jsx @@ -0,0 +1,12 @@ +import { useState } from 'react'; + +// Custom hook to manage configurator state +export const useConfigurator = () => { + const [isConfiguratorOpen, setIsConfiguratorOpen] = useState(false); + + const toggleConfigurator = () => { + setIsConfiguratorOpen((prev) => !prev); + }; + + return { isConfiguratorOpen, toggleConfigurator }; +}; diff --git a/src/context/index.js b/src/context/index.js index 74597af..36bf602 100644 --- a/src/context/index.js +++ b/src/context/index.js @@ -1,7 +1,7 @@ // context/index.js export { useMode } from './useMode'; -export { useConfiguratorContext } from './ConfiguratorContext'; +// export { useConfiguratorContext } from './ConfiguratorContext'; export { default as ErrorBoundary } from '../layout/REUSABLE_COMPONENTS/system-utils/ErrorBoundary'; export { ColorModeProvider } from './ColorModeProvider'; -export { ConfiguratorProvider } from './ConfiguratorContext'; +// export { ConfiguratorProvider } from './ConfiguratorContext'; diff --git a/src/context/useAuthManager.jsx b/src/context/useAuthManager.jsx index 7a4eb63..b3ee109 100644 --- a/src/context/useAuthManager.jsx +++ b/src/context/useAuthManager.jsx @@ -42,7 +42,6 @@ function useAuthManager() { 'isLoggedIn', ]); localStorage.clear(); // Clear all local storage data - navigate('/login'); }, [navigate, deleteCookies]); diff --git a/src/index.js b/src/index.js index 7d9e194..160bca1 100644 --- a/src/index.js +++ b/src/index.js @@ -6,11 +6,14 @@ import { register, unregister } from './serviceWorker'; // ==============================|| REACT DOM RENDER ||============================== // -import { ColorModeProvider } from './context'; +import { ColorModeProvider, useMode } from './context'; import { Helmet } from 'react-helmet'; import { SnackbarProvider } from 'notistack'; import { ErrorBoundary } from 'react-error-boundary'; import ErrorFallback from 'layout/REUSABLE_COMPONENTS/system-utils/ErrorFallback'; +import { ThemeProvider } from 'styled-components'; +import { CssBaseline, GlobalStyles } from '@mui/material'; +import { ParallaxProvider } from 'react-scroll-parallax'; const domNode = document.getElementById('root'); @@ -30,6 +33,8 @@ const HelmetMetadata = () => ( ); const AppWrapper = () => { + const { theme } = useMode(); + return ( { - + + + + + + + diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx index 8a80d2b..e1dac1d 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx @@ -1,10 +1,11 @@ import Drawer from '@mui/material/Drawer'; import { styled } from '@mui/material/styles'; -import { useConfiguratorContext, useMode } from 'context'; +import { useMode } from 'context'; +import { useConfigurator } from 'context/hooks/useConfigurator'; export default styled(Drawer)(({ ownerState }) => { const { theme } = useMode(); - const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext(); + const { isConfiguratorOpen, toggleConfigurator } = useConfigurator(); const { boxShadows, functions, transitions } = theme; diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx index b30971b..b48bf54 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx @@ -11,7 +11,7 @@ import { } from '@mui/material'; import ConfiguratorRoot from './ConfiguratorRoot'; import searchData from 'data/json-data/search.json'; -import { useConfiguratorContext, useMode } from 'context'; +import { useMode } from 'context'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm, Controller } from 'react-hook-form'; import MDTypography from '../MDTYPOGRAPHY/MDTypography'; @@ -20,6 +20,7 @@ import { formFields } from 'components/forms/formsConfig'; import { TextField, InputLabel } from '@mui/material'; import { StyledFormControl } from '../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; import RCButton from '../RCBUTTON'; +import { useConfigurator } from 'context/hooks/useConfigurator'; const SearchSettingsForm = ({ searchSettings, @@ -91,7 +92,7 @@ const FilterSelector = ({ control, name, label, options }) => { }; const Configurator = () => { - const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext(); + const { isConfiguratorOpen, toggleConfigurator } = useConfigurator(); const { theme } = useMode(); const { control, handleSubmit } = useForm({ resolver: zodResolver(formFields['searchSettingsForm']), diff --git a/src/layout/profile/index.jsx b/src/layout/profile/index.jsx index d84a912..0785ae3 100644 --- a/src/layout/profile/index.jsx +++ b/src/layout/profile/index.jsx @@ -17,10 +17,21 @@ import { useMode } from '../../context'; function Overview() { const { theme } = useMode(); return ( - - + + {/* */}
- + @@ -30,7 +41,7 @@ function Overview() { - {/* - - */} - {/* - - Projects - - - - TBD TBD TBD - - - */} - {/* - - - - - - - */}
- {/*