From 163dd31f95c3fe39de02be602a0faf679a1296ea Mon Sep 17 00:00:00 2001 From: Reed Vogt Date: Wed, 27 Mar 2024 15:25:55 -0700 Subject: [PATCH] Completed Hero and cleaned code base --- .../actionButtons/GenericActionButtons.jsx | 104 +------- .../forms}/OptionsComponent.jsx | 8 +- .../DeckContext/useDeckManager.jsx | 4 +- src/context/hooks/useCardStore.jsx | 30 ++- src/layout/AnimatedFeatureCard.jsx | 18 +- .../REUSABLE_COMPONENTS/unique/SimpleCard.jsx | 98 +++---- src/layout/cart/CartContent.js | 40 ++- src/layout/cart/CartSummary.js | 54 ++-- .../cards-chart/ChartConfigs.jsx | 11 - .../cards-datatable/DataTableHeadCell.jsx | 23 +- .../collectionGrids/cards-datatable/index.jsx | 160 +++++------ .../data/collectionPortfolioData.jsx | 1 + src/layout/sections/HeroIconSection.jsx | 76 +++++- src/layout/sections/HeroSection.jsx | 252 ++++++++++++++---- src/layout/sections/HeroSwiper.jsx | 28 +- src/layout/sections/HeroTextSection.jsx | 12 +- src/pages/CartPage.js | 23 +- 17 files changed, 568 insertions(+), 374 deletions(-) rename src/{layout/collection/collectionGrids/cards-datatable => components/forms}/OptionsComponent.jsx (93%) diff --git a/src/components/buttons/actionButtons/GenericActionButtons.jsx b/src/components/buttons/actionButtons/GenericActionButtons.jsx index d5212a8..5700053 100644 --- a/src/components/buttons/actionButtons/GenericActionButtons.jsx +++ b/src/components/buttons/actionButtons/GenericActionButtons.jsx @@ -91,6 +91,7 @@ const ActionButtons = ({ context, page, handleCardAction, + variant, }) => { const labelValue = typeof context === 'string' ? context : context?.pageContext; @@ -133,17 +134,19 @@ const ActionButtons = ({ }, }} > - - - + {variant !== 'data-table' && ( + + + + )} { -// if (typeof context === 'undefined') { -// context = 'Collection'; -// } -// const { closeModal, isModalOpen, setModalOpen } = useModalContext(); -// const { selectedCollection, allCollections } = useSelectedContext(); -// const [buttonSize, setButtonSize] = React.useState('medium'); - -// const labelValue = -// typeof context === 'string' ? context : context?.pageContext; -// useEffect(() => { -// const buttonSizeMap = { -// xs: 'extraSmall', -// sm: 'small', -// md: 'medium', -// lg: 'large', // Adjust if there's another size you want for 'l' -// }; -// const size = buttonSizeMap[cardSize] || 'medium'; // Default to 'medium' if size is not defined -// setButtonSize(size); -// }, [cardSize]); - -// return ( -// -// {renderFullWidthAddButton( -// buttonSize, -// isModalOpen, -// labelValue, -// cardSize, -// context, -// card, -// page, -// onClick, -// closeModal, -// onSuccess, -// onFailure -// )} -// -// ); -// }; - -// export default GenericActionButtons; - -// // const renderSelectionDialog = () => ( -// // setSelectDialogOpen(false)}> -// // -// // -// // Select a {context} -// // -// // -// // -// // -// // {itemsForSelection?.map((item) => ( -// // -// // ))} -// // -// // -// // -// // ); diff --git a/src/layout/collection/collectionGrids/cards-datatable/OptionsComponent.jsx b/src/components/forms/OptionsComponent.jsx similarity index 93% rename from src/layout/collection/collectionGrids/cards-datatable/OptionsComponent.jsx rename to src/components/forms/OptionsComponent.jsx index 96dffe9..662faef 100644 --- a/src/layout/collection/collectionGrids/cards-datatable/OptionsComponent.jsx +++ b/src/components/forms/OptionsComponent.jsx @@ -1,13 +1,13 @@ // OptionsComponent.jsx import React, { useEffect } from 'react'; -import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX'; +import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; import { Autocomplete, Grid, TextField } from '@mui/material'; import { FormBox, FormFieldBox, -} from '../../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import FormField from '../../../../components/forms/reusable/FormField'; -import { useFormContext, useMode } from '../../../../context'; +} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import FormField from './reusable/FormField'; +import { useFormContext, useMode } from '../../context'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; const OptionsComponent = ({ diff --git a/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx b/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx index 9523aba..eb799ab 100644 --- a/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx +++ b/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx @@ -228,11 +228,13 @@ const useDeckManager = () => { } const arrayOfCards = [cards]; const arrayOfCardIds = [cardIds]; + const existingCard = deckId?.cards?.find((card) => card.id === cardIds); + const removeType = existingCard?.quantity > 1 ? 'decrement' : 'delete'; performAction( createApiUrl(`${deckId}/cards/remove`), 'PUT', - { cards: arrayOfCards, cardIds: arrayOfCardIds }, + { cards: arrayOfCards, cardIds: arrayOfCardIds, type: removeType }, 'removeCardsFromDeck', { paramTypes: ['object', 'array'] } ); diff --git a/src/context/hooks/useCardStore.jsx b/src/context/hooks/useCardStore.jsx index 1a7b209..2c3870f 100644 --- a/src/context/hooks/useCardStore.jsx +++ b/src/context/hooks/useCardStore.jsx @@ -33,6 +33,8 @@ export const useCardStoreHook = () => { [] ); const [searchData, setSearchData] = useLocalStorage('searchData', []); + const [randomCards, setRandomCards] = useLocalStorage('randomCards', []); + const [isDataValid, setIsDataValid] = useState(searchData.length > 0); const [initialLoad, setInitialLoad] = useState(true); // New state to track the initial load const { @@ -117,6 +119,27 @@ export const useCardStoreHook = () => { }, 100), [] ); // 500ms delay, adjust as needed + async function fetchRandomCardsAndSet() { + startLoading('fetchRandomCardsAndSet'); + try { + // Replace `http://your-server-address.com` with the actual server address + const response = await fetch( + `${process.env.REACT_APP_SERVER}/api/cards/randomCardData` + ); + if (!response.ok) { + throw new Error('Network response was not ok'); + } + const cards = await response.json(); + + // Assuming you have a function to update your UI with these cards + setRandomCards(cards); + } catch (error) { + console.error('Failed to fetch random cards:', error); + startLoading('fetchRandomCardsAndSet'); + // Optionally, update the UI to reflect the error state + // displayError('Failed to fetch random cards. Please try again later.'); + } + } useEffect(() => { // Log updated search values only if it's not the initial load @@ -132,12 +155,17 @@ export const useCardStoreHook = () => { isDataValid, setSearchData, cardsVersion, + setCardsVersion, + // toggleConfigurator, + // setIsConfiguratorOpen, + fetchRandomCardsAndSet, + handleRequest, + randomCards, // isConfiguratorOpen, // toggleConfigurator, // setPreviousSearchData, setIsDataValid, clearSearchData, - handleRequest, loadingSearchResults: isLoading('isSearchLoading'), setLoadingSearchResults: () => { startLoading('isSearchLoading'); diff --git a/src/layout/AnimatedFeatureCard.jsx b/src/layout/AnimatedFeatureCard.jsx index 8281daa..7a2b15b 100644 --- a/src/layout/AnimatedFeatureCard.jsx +++ b/src/layout/AnimatedFeatureCard.jsx @@ -71,10 +71,13 @@ export const AnimatedFeatureCard = ({ tier, onOpenModal }) => { { bottom: 0, width: '100%', mt: 'auto', + borderColor: theme.palette.chartTheme.greenAccent.darker, + borderWidth: 2, + '&:hover': { + borderColor: theme.palette.chartTheme.greenAccent.dark, + }, }} > - Manage Collections + Manage {tier.title} diff --git a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx b/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx index bea3da8..043fba5 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx +++ b/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx @@ -1,7 +1,7 @@ import React from 'react'; import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import styled from 'styled-components'; -import { CardContent, IconButton, Typography } from '@mui/joy'; +import { AspectRatio, CardContent, IconButton, Typography } from '@mui/joy'; import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'; import { useMode } from '../../../context'; import { Icon, useMediaQuery } from '@mui/material'; @@ -9,6 +9,7 @@ import MDBox from '../MDBOX'; import SaveIcon from '@mui/icons-material/Save'; import AddIcon from '@mui/icons-material/Add'; import CollectionsIcon from '@mui/icons-material/Collections'; +import FlexBetween from '../FlexBetween'; const getPrimaryStyle = (theme, isPrimary) => ({ background: isPrimary ? theme.colorPrimary : undefined, @@ -53,11 +54,11 @@ const getSearchFormHeaderStyle = (theme, isSearchFormHeader) => ({ }); const getHeroDisplayStyles = (theme, isHeroDisplay) => ({ - background: isHeroDisplay ? theme.colorCardBackground : undefined, + background: 'transparent', color: isHeroDisplay ? theme.colorPrimary : undefined, root: { minWidth: 275, - backgroundColor: 'rgba(255,255,255,0.4)', + background: 'transparent', backgroundImage: 'linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%)', backdropFilter: 'blur(40)px', @@ -165,25 +166,29 @@ const SimpleCard = ({ - + - - - - + > + + {/* No need for additional style */} + + - {heroText} + {heroText} {/* Display heroText */} - + )} diff --git a/src/layout/cart/CartContent.js b/src/layout/cart/CartContent.js index 8567037..9d18358 100644 --- a/src/layout/cart/CartContent.js +++ b/src/layout/cart/CartContent.js @@ -2,24 +2,31 @@ import React from 'react'; import { Typography, Skeleton, Box, Grid, Container } from '@mui/material'; import CartContainer from './CartContainer'; import { useCartStore } from '../../context/MAIN_CONTEXT/CartContext/CartContext'; -import { useMode } from '../../context'; +import { useMode, useUserContext } from '../../context'; import GenericCard from '../../components/cards/GenericCard'; const CartContent = () => { const { theme } = useMode(); - const { getProductGridContainerStyle } = theme.responsiveStyles; + // const { getProductGridContainerStyle } = theme.responsiveStyles; // const containerStyles = responsiveStyles.getProductGridContainerStyle; const { cartData, isLoading } = useCartStore(); + // const { user } = useUserContext(); - const renderCartItems = () => { - if (isLoading) { - return ; - } + // if (isLoading && (!cartData?.cart || cartData.cart.length === 0)) { + // return ( + // + // + // Your cart is empty. + // + // + // ); + // } - return ( + return ( + { {cartData?.cart?.map((card, index) => ( + {console.log(card)} { ))} - ); - }; - - if (!isLoading && (!cartData?.cart || cartData.cart.length === 0)) { - return ( - - - Your cart is empty. - - - ); - } - - return {renderCartItems()}; + + ); }; export default CartContent; diff --git a/src/layout/cart/CartSummary.js b/src/layout/cart/CartSummary.js index f235171..27d2b9e 100644 --- a/src/layout/cart/CartSummary.js +++ b/src/layout/cart/CartSummary.js @@ -1,29 +1,29 @@ -// import React from 'react'; -// import { Box, Typography } from '@mui/material'; +import React from 'react'; +import { Box, Typography } from '@mui/material'; -// const CartSummary = ({ quantity, totalCost }) => { -// return ( -// -// -// Items: {quantity} -// -// -// Grand Total: ${totalCost} -// -// -// ); -// }; +const CartSummary = ({ quantity, totalCost }) => { + return ( + + + Items: {quantity} + + + Grand Total: ${totalCost} + + + ); +}; -// export default CartSummary; +export default CartSummary; diff --git a/src/layout/collection/collectionGrids/cards-chart/ChartConfigs.jsx b/src/layout/collection/collectionGrids/cards-chart/ChartConfigs.jsx index 97abe98..295371d 100644 --- a/src/layout/collection/collectionGrids/cards-chart/ChartConfigs.jsx +++ b/src/layout/collection/collectionGrids/cards-chart/ChartConfigs.jsx @@ -52,21 +52,10 @@ export const ChartConfiguration = ({ () => markers?.filter((marker) => marker.value !== undefined), [markers] ); - const { tickValues, xFormat } = useMemo( () => formatDateBasedOnRange(range), [range] ); - - const chartTheme = useMemo( - () => ({ - axis: theme.palette.chartTheme.axis, - legends: theme.palette.chartTheme.legends, - tooltip: theme.palette.chartTheme.tooltip, - }), - [theme] - ); - const chartProps = useMemo( () => ({ data: nivoChartData, diff --git a/src/layout/collection/collectionGrids/cards-datatable/DataTableHeadCell.jsx b/src/layout/collection/collectionGrids/cards-datatable/DataTableHeadCell.jsx index ecec2ae..8b87dc4 100644 --- a/src/layout/collection/collectionGrids/cards-datatable/DataTableHeadCell.jsx +++ b/src/layout/collection/collectionGrids/cards-datatable/DataTableHeadCell.jsx @@ -4,12 +4,15 @@ import { TableRow, Checkbox, Icon } from '@mui/material'; import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX'; import MDTypography from '../../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import { useMode } from '../../../../context'; +import FlexBetween from '../../../REUSABLE_COMPONENTS/FlexBetween'; const DataTableHeadCell = ({ headerGroups, isSorted, setSortedValue }) => { const { theme } = useMode(); const renderCellContent = (column, idx) => { const sorted = setSortedValue(column, isSorted); + const shouldShowIcons = column.showIcons; + return ( { position: 'sticky', top: 0, zIndex: 2, - width: column.id === 'selection' ? '50px' : 'auto', + width: '100%', + // justifyContent: 'space-evenly', + // width: column.id === 'selection' ? '50px' : 'auto', alignItems: 'center', boxShadow: '0 2px 4px -1px rgba(0,0,0,0.2), 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12)', cursor: sorted ? 'pointer' : 'default', + flexGrow: 1, }} > - @@ -45,11 +53,14 @@ const DataTableHeadCell = ({ headerGroups, isSorted, setSortedValue }) => { textTransform="uppercase" sx={{ fontWeight: 'bold', + flexGrow: 1, + flexShrink: 0, + mx: '100%', }} > {column.render('Header')} - {sorted && ( + {shouldShowIcons && sorted && ( { )} - + ); }; diff --git a/src/layout/collection/collectionGrids/cards-datatable/index.jsx b/src/layout/collection/collectionGrids/cards-datatable/index.jsx index dd3213d..8c371b9 100644 --- a/src/layout/collection/collectionGrids/cards-datatable/index.jsx +++ b/src/layout/collection/collectionGrids/cards-datatable/index.jsx @@ -16,10 +16,11 @@ import TableRow from '@mui/material/TableRow'; import DataTableBodyCell from './DataTableBodyCell'; import { Box, Button, Checkbox, Grid, Paper, TableBody } from '@mui/material'; import PaginationComponent from './PaginationComponent'; -import OptionsComponent from './OptionsComponent'; +import OptionsComponent from '../../../../components/forms/OptionsComponent'; import GenericActionButtons from '../../../../components/buttons/actionButtons/GenericActionButtons'; import { useMode } from '../../../../context'; import DataTableHeadCell from './DataTableHeadCell'; +import FlexBetween from '../../../REUSABLE_COMPONENTS/FlexBetween'; const setSortedValue = (column, isSorted) => { let sortedValue; @@ -43,25 +44,15 @@ function DataTable({ noEndBorder, tableSize, }) { - // ** New Custom Breakpoints for Tracking Visible Table Data ** - // 800px - hide total price - // 650px = hide quantity - // 500px - hdie check box const { theme } = useMode(); const [showTotalPrice, setShowTotalPrice] = useState(window.innerWidth > 800); - const [showQuantity, setShowQuantity] = useState(window.innerWidth > 650); const [showSelection, setShowSelection] = useState(window.innerWidth > 500); - const [showPrice, setShowPrice] = useState(window.innerWidth > 445); useEffect(() => { const handleResize = () => { setShowTotalPrice(window.innerWidth > 800); - setShowQuantity(window.innerWidth > 650); setShowSelection(window.innerWidth > 500); - setShowPrice(window.innerWidth > 445); }; - window.addEventListener('resize', handleResize); - return () => { window.removeEventListener('resize', handleResize); }; @@ -72,21 +63,26 @@ function DataTable({ let baseColumns = [ showSelection && { id: 'selection', + showIcons: false, Header: ({ getToggleAllRowsSelectedProps }) => ( ), Cell: ({ row }) => , // Apply a fixed width to the checkbox column - width: 30, // Adjust the width as needed - minWidth: 30, // Ensure it doesn't get smaller than the set width - maxWidth: 30, // Ensure it doesn't get larger than the set width + // width: 30, // Adjust the width as needed + // minWidth: 30, // Ensure it doesn't get smaller than the set width + // maxWidth: 30, // Ensure it doesn't get larger than the set width }, { Header: 'Name', accessor: 'name' }, - // { Header: 'Price', accessor: 'price' }, + { Header: 'Price', accessor: 'price' }, + + { Header: 'Quantity', accessor: 'quantity', showIcons: false }, { id: 'action', Header: 'Action', accessor: 'action', + showIcons: false, + Cell: ({ value }) => ( console.log(error)} page={'Collection'} cardSize={'small'} + variant="data-table" /> ), }, @@ -106,21 +103,9 @@ function DataTable({ accessor: 'tPrice', }); } - if (tableSize !== 'large' && showQuantity) { - baseColumns.push({ - Header: 'Quantity', - accessor: 'quantity', - }); - } - if (tableSize !== 'large' && showPrice) { - baseColumns.push({ - Header: 'Price', - accessor: 'price', - }); - } // Filter out any falsey values to remove the conditionally included columns when not shown return baseColumns.filter(Boolean); - }, [showTotalPrice, showQuantity, showSelection, tableSize, showPrice]); + }, [showTotalPrice, showSelection, tableSize]); const defaultPageSize = useMemo( () => entriesPerPage.defaultValue, @@ -201,6 +186,9 @@ function DataTable({ '& .MuiDataGrid-columnSeparator': { visibility: 'hidden', }, + '& .MuiTableRow-root': { + flexGrow: 1, + }, }} > @@ -214,57 +202,73 @@ function DataTable({ pageOptions={pageSizeOptions} /> {/* Table */} - - {}} - headerGroups={headerGroups} - isSorted={isSorted} - setSortedValue={setSortedValue} - /> - {/* Table Body */} - - {page.map((row, key) => { - prepareRow(row); - return ( - - {row.cells.map((cell, idx) => ( - - {cell.render('Cell')} - - ))} - - ); - })} - -
+ + + + {}} + headerGroups={headerGroups} + isSorted={isSorted} + setSortedValue={setSortedValue} + /> + + {/* Table Body */} + + {page.map((row, key) => { + prepareRow(row); + return ( + + {' '} + + {row.cells.map((cell, idx) => ( + + {cell.render('Cell')} + + ))} + + + ); + })} + +
+ {/* Pagination */} - + + + ); diff --git a/src/layout/collection/data/collectionPortfolioData.jsx b/src/layout/collection/data/collectionPortfolioData.jsx index e77ddca..ae256ca 100644 --- a/src/layout/collection/data/collectionPortfolioData.jsx +++ b/src/layout/collection/data/collectionPortfolioData.jsx @@ -84,6 +84,7 @@ export default function prepareTableData(selectedCards) { Cell: ({ value }) => ( console.log('clicked')} onSuccess={() => diff --git a/src/layout/sections/HeroIconSection.jsx b/src/layout/sections/HeroIconSection.jsx index bca42a8..15a0d4d 100644 --- a/src/layout/sections/HeroIconSection.jsx +++ b/src/layout/sections/HeroIconSection.jsx @@ -8,6 +8,7 @@ import { Zoom, useMediaQuery } from '@mui/material'; import SimpleCard from '../../layout/REUSABLE_COMPONENTS/unique/SimpleCard'; import uniqueTheme from '../../layout/REUSABLE_COMPONENTS/unique/uniqueTheme'; import { useMode } from '../../context'; +import { AspectRatio } from '@mui/joy'; const heroCardData = [ { id: 'herodata-1-store-add', @@ -50,11 +51,18 @@ const HeroIconSection = ({ shouldShow }) => { flexDirection: 'row', padding: 1, width: '100%', - height: isMobileView ? 'calc(100vh - 64px)' : '20%', + zIndex: 5, + height: isMobileView ? 'calc(100vh - 64px)' : null, + maxHeight: isMobileView ? 'calc(100vh - 64px)' : 200, + overFlow: 'hidden', // Hide overflow to maintain the card's dimensions + background: 'transparent', + my: isMobileView ? null : 1, + // minHeight: isMobileView ? 'calc(100vh - 64px)' : '30vh', alignItems: isMobileView ? 'flex-end' : 'center', position: isMobileView ? 'absolute' : 'relative', // borderRadius: 'none', - mt: isMobileView ? null : '2rem', + // mt: isMobileView ? null : '2rem', + borderColor: 'transparent', }} > @@ -63,24 +71,64 @@ const HeroIconSection = ({ shouldShow }) => { textAlign: 'center', width: '100%', maxWidth: '100%', + maxHeight: 200, + overFlow: 'hidden', // Hide overflow to maintain the card's dimensions + // height: isMobileView ? 'calc(100vh - 64px)' : '20%', flexDirection: 'row', display: 'flex', + borderColor: 'transparent', justifyContent: 'space-between', - // border: 'none', - // margin: 'auto', - // display: 'flex', - // flexDirectinon: 'row', + alignItems: 'center', + mx: isMobileView ? null : 'auto', + pt: isMobileView ? '1rem' : 'auto', + // my: isMobileView ? null : 'auto', + // py: '1.5rem', + background: 'transparent', + // minHeight: '30vh', + // position: isMobileView ? 'absolute' : 'relative', }} > {heroCardData?.map((card, index) => ( - - - + + + + + ))} diff --git a/src/layout/sections/HeroSection.jsx b/src/layout/sections/HeroSection.jsx index c8b1202..e8b0aec 100644 --- a/src/layout/sections/HeroSection.jsx +++ b/src/layout/sections/HeroSection.jsx @@ -1,5 +1,5 @@ -import React, { useEffect, useState } from 'react'; -import { useMode, useStatisticsStore } from '../../context'; +import React, { useEffect, useMemo, useState } from 'react'; +import { ErrorBoundary, useMode, useStatisticsStore } from '../../context'; import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX'; import placeHolder from '../../assets/images/placeholder.jpeg'; import { Swiper, SwiperSlide } from 'swiper/react'; @@ -15,62 +15,103 @@ import { } from 'swiper/modules'; import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import { HeroSectionSkeleton } from '../../layout/REUSABLE_COMPONENTS/SkeletonVariants'; -import { Card, useMediaQuery } from '@mui/material'; +import { + Box, + Card, + CardContent, + CardMedia, + Zoom, + useMediaQuery, +} from '@mui/material'; import pages from '../../data/pages.json'; import HeroTextSection from './HeroTextSection'; import HeroIconSection from './HeroIconSection'; import HeroSwiper from './HeroSwiper'; import FlexBetween from '../REUSABLE_COMPONENTS/FlexBetween'; +import RCHeader from '../REUSABLE_COMPONENTS/RCHeader'; +import styled from 'styled-components'; +import { ChartArea } from '../../pages/pageStyles/StyledComponents'; +import { useCardStoreHook } from '../../context/hooks/useCardStore'; +import useLocalStorage from '../../context/hooks/useLocalStorage'; +import { AspectRatio } from '@mui/joy'; +import { useLoading } from '../../context/hooks/useLoading'; +import useSkeletonLoader from '../collection/collectionGrids/cards-datatable/useSkeletonLoader'; +import { + ResponsiveContainer, + CartesianGrid, + AreaChart, + BarChart, + Bar, + LineChart, + XAxis, + YAxis, + Legend, + Line, + Tooltip, + Area, +} from 'recharts'; +import DashboardBox from '../REUSABLE_COMPONENTS/DashboardBox'; +import BoxHeader from '../REUSABLE_COMPONENTS/BoxHeader'; const HeroSection = () => { const { theme } = useMode(); const { breakpoints } = theme; const { introText } = pages; + const { fetchRandomCardsAndSet } = useCardStoreHook(); + const [randomCards, setRandomCards] = useLocalStorage('randomCards', []); const isMobileView = useMediaQuery(breakpoints.down('sm')); + const isMidView = useMediaQuery(breakpoints.down('md')); const isFullView = useMediaQuery(breakpoints.up('lg')); + const { isLoading } = useLoading(); + const { SkeletonLoader } = useSkeletonLoader(); const [activeCardIndex, setActiveCardIndex] = useState(0); const [shouldShow, setShouldShow] = useState(false); - const { topFiveCards } = useStatisticsStore(); const defaultCards = new Array(45).fill({}).map((_, index) => ({ id: `default-${index}`, name: `Placeholder ${index + 1}`, description: `Description for Placeholder ${index + 1}`, image: placeHolder, })); - const cards = [...topFiveCards, ...defaultCards]; - const swiperConfig = { - effect: 'coverflow', - grabCursor: true, - centeredSlides: true, - loop: true, - resizeObserver: true, - spaceBetween: 10, - coverflowEffect: { - stretch: 0, - modifier: 1, - rotate: 0, - depth: 200, - slideShadows: false, - }, - autoplay: { - delay: 2500, - disableOnInteraction: false, - }, - modules: [EffectCoverflow, Pagination, Navigation, Autoplay], - scrollbar: { - el: '.swiper-scrollbar', - draggable: true, - }, - navigation: { - nextEl: '.swiper-button-next', - prevEl: '.swiper-button-prev', - clickable: true, - }, - className: 'swiper_container', - }; + const cards = [...randomCards, ...defaultCards]; + // const swiperConfig = { + // effect: 'coverflow', + // grabCursor: true, + // centeredSlides: true, + // loop: true, + // resizeObserver: true, + // spaceBetween: 10, + // coverflowEffect: { + // stretch: 0, + // modifier: 1, + // rotate: 0, + // depth: 200, + // slideShadows: false, + // }, + // autoplay: { + // delay: 2500, + // disableOnInteraction: false, + // }, + // modules: [EffectCoverflow, Pagination, Navigation, Autoplay], + // scrollbar: { + // el: '.swiper-scrollbar', + // draggable: true, + // }, + // navigation: { + // nextEl: '.swiper-button-next', + // prevEl: '.swiper-button-prev', + // clickable: true, + // }, + // className: 'swiper_container', + // }; useEffect(() => setShouldShow(true), []); + useEffect(() => fetchRandomCardsAndSet(), []); const handleSlideChange = (swiper) => setActiveCardIndex(swiper.realIndex); + if (!randomCards.length) return ; + + const chartData = useMemo(() => { + return randomCards[activeCardIndex]?.averagedChartData?.['30d']?.data || []; + }, [randomCards, activeCardIndex]); if (!cards.length) { return ; @@ -83,41 +124,158 @@ const HeroSection = () => { position: 'relative', minHeight: isMobileView ? 'calc(100vh - 64px)' : 'calc(100vh - 64px)', flexDirection: isMobileView ? 'column' : 'row', + // flexDirection: 'column', }} > + {!isMidView && ( + + + + + + {/* */} + {/* */} + + + {/* */} + + + + + + + + + + + + + + {' '} + + + + + + + + + + + + )} - {/* */} { + const swiperRef = useRef(null); + const swiperConfig = { effect: 'coverflow', grabCursor: true, @@ -51,6 +53,26 @@ const HeroSwiper = ({ className: 'swiper_container', }; + useEffect(() => { + // Ensuring the swiper instance is available + const swiperInstance = swiperRef.current?.swiper; + if (swiperInstance) { + // Listen to slideChange event + swiperInstance.on('slideChange', () => { + const { activeIndex } = swiperInstance; + handleSlideChange(activeIndex); // Assuming this function you pass handles updating activeCardIndex + + // Check if the slide is every 4th slide (0-indexed, so we check for 3, 7, 11, ...) + if ((activeIndex + 1) % 4 === 0) { + swiperInstance.autoplay.stop(); + setTimeout(() => { + swiperInstance?.autoplay?.start(); + }, 10000); // Pause for 30 seconds + } + }); + } + }, []); + return ( { background: 'transparent', alignItems: isMobileView ? 'flex-start' : 'center', padding: 1, + my: isMobileView ? null : 1, width: isMobileView ? '100%' : '100%', - height: isMobileView ? 'calc(100vh - 64px)' : '30%', position: isMobileView ? 'absolute' : 'relative', - mt: isMobileView ? null : '25%', - // borderRadius: 'none', - // my: isMobileView ? null : '30%', }} > @@ -28,10 +25,12 @@ const HeroTextSection = ({ shouldShow }) => { textAlign: 'center', background: 'transparent', maxWidth: '100%', - height: isMobileView ? '20vh' : '100%', + height: isMobileView ? null : '100%', alignItems: isMobileView ? 'center' : 'center', // mt: isMobileView ? '0.5rem' : 'auto', mx: 'auto', + my: 'auto', + borderColor: 'transparent', }} > { sx={{ fontWeight: 'bold', color: theme.palette.primary.main, - // marginBottom: 2, - mt: isMobileView ? '5%' : '10%', + my: isMobileView ? '1rem' : 'auto', }} > A New Era of Trading Card Games diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js index d7477f5..b9e0458 100644 --- a/src/pages/CartPage.js +++ b/src/pages/CartPage.js @@ -6,8 +6,7 @@ import { useCartStore, useMode } from '../context'; import Checkout from '../layout/cart/cartPageContainers/Checkout'; import PageLayout from '../layout/REUSABLE_COMPONENTS/PageLayout'; import { useLoading } from '../context/hooks/useLoading'; -import { CartSummary } from '../layout/cart/CartSummary'; - +import CartSummary from '../layout/cart/CartSummary'; const CartPage = () => { const { theme } = useMode(); const { @@ -34,8 +33,6 @@ const CartPage = () => { stopLoading('isPageLoading'); } }; - - // Fetch cart data if not already loaded if (!cartData) { fetchData(); } @@ -48,16 +45,6 @@ const CartPage = () => { console.error('Failed to adjust quantity in cart:', e); } }; - // Function to render the cart content grid - const renderCartContent = () => ( - - - - ); // Function to render the checkout and summary section const renderCheckoutAndSummary = () => ( @@ -94,7 +81,13 @@ const CartPage = () => { }} > - {renderCartContent()} + + + {' '} {renderCheckoutAndSummary()}