diff --git a/jsconfig.json b/jsconfig.json new file mode 100644 index 0000000..cd3bb1d --- /dev/null +++ b/jsconfig.json @@ -0,0 +1,10 @@ +{ + "compilerOptions": { + "baseUrl": "src" + }, + "include": ["src"], + "exclude": ["node_modules, build"], + "paths": { + "/*": ["src/*"] + } +} diff --git a/src/App.js b/src/App.js index eebc3c1..49368c3 100644 --- a/src/App.js +++ b/src/App.js @@ -7,11 +7,7 @@ import Main from './Main'; import { UserProvider, useMode, - // CollectionProvider, CardProvider, - // DeckProvider, - // CartProvider, - // AppContextProvider, ConfiguratorProvider, } from './context'; import { ThemeProvider } from 'styled-components'; @@ -29,17 +25,9 @@ const App = () => { - {/* */} - {/* */} - {/* */} - {/* */}
- {/* */} - {/* */} - {/* */} - {/* */} diff --git a/src/ErrorFallback.jsx b/src/ErrorFallback.jsx new file mode 100644 index 0000000..36387aa --- /dev/null +++ b/src/ErrorFallback.jsx @@ -0,0 +1,62 @@ +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'; + +class ErrorFallback extends React.Component { + constructor(props) { + super(props); + this.state = { hasCopied: false }; + } + + handleCopyErrorDetails = () => { + navigator.clipboard.writeText(this.props.error.stack).then( + () => this.setState({ hasCopied: true }), + () => this.setState({ hasCopied: false }) + ); + }; + + render() { + const { error, resetErrorBoundary } = this.props; + const { hasCopied } = this.state; + + return ( + + + + Oops! Something went wrong. + + + An unexpected error has occurred. Our team has been notified. + + + + {error.toString()} + + + + + + + + + ); + } +} + +export default ErrorFallback; diff --git a/src/Main.jsx b/src/Main.jsx index 5b25a7d..038a90a 100644 --- a/src/Main.jsx +++ b/src/Main.jsx @@ -31,21 +31,23 @@ const Main = () => { }> - {ROUTE_CONFIG.map(({ path, componentName, isPrivate }, index) => ( - + {ROUTE_CONFIG.routes.map( + ({ path, componentName, isPrivate }, index) => ( + + + + ) : ( - - ) : ( - - ) - } - /> - ))} + ) + } + /> + ) + )} diff --git a/src/components/forms/Factory/FormField.jsx b/src/components/forms/Factory/FormField.jsx index 822dae2..09d4a19 100644 --- a/src/components/forms/Factory/FormField.jsx +++ b/src/components/forms/Factory/FormField.jsx @@ -1,7 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; // Import PropTypes -import { useMode } from '../../../context'; -import { StyledTextField } from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import { useMode } from 'context'; +import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; const FormField = ({ name, diff --git a/src/components/forms/Factory/RCDynamicForm.jsx b/src/components/forms/Factory/RCDynamicForm.jsx index e13a5e3..ef8df57 100644 --- a/src/components/forms/Factory/RCDynamicForm.jsx +++ b/src/components/forms/Factory/RCDynamicForm.jsx @@ -8,14 +8,14 @@ import useRCFormHook from '../hooks/useRCFormHook'; import { FormBox, FormFieldBox, -} from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { useCardStore, useMode } from '../../../context'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import { useCardStore, useMode } from 'context'; import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline'; import { getFormFieldHandlers } from '../formsConfig'; import { useFormSubmission } from '../hooks/useFormSubmission'; import React, { useCallback, useEffect, useMemo, useState } from 'react'; -import useBreakpoint from '../../../context/hooks/useBreakPoint'; -import ReusableLoadingButton from '../../../layout/REUSABLE_COMPONENTS/ReusableLoadingButton'; +import useBreakpoint from 'context/hooks/useBreakPoint'; +import ReusableLoadingButton from 'layout/REUSABLE_COMPONENTS/ReusableLoadingButton'; const RCDynamicForm = ({ formKey, @@ -60,11 +60,6 @@ const RCDynamicForm = ({ component="form" onSubmit={handleSubmit(onSubmit)} theme={theme} - // sx={{ - // ...(isMobile && { - // padding: theme.spacing(3), - // }), - // }} sx={{ ...(isMobile && { padding: theme.spacing(3), diff --git a/src/components/forms/Factory/RCInput.jsx b/src/components/forms/Factory/RCInput.jsx index a078470..5e9a96b 100644 --- a/src/components/forms/Factory/RCInput.jsx +++ b/src/components/forms/Factory/RCInput.jsx @@ -18,13 +18,13 @@ import { Chip, } from '@mui/material'; import PropTypes from 'prop-types'; -import { StyledTextField } from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import { useMode } from '../../../context'; +import { StyledTextField } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import { useMode } from 'context'; import RCSwitch from './RCSwitch'; -import useBreakpoint from '../../../context/hooks/useBreakPoint'; +import useBreakpoint from 'context/hooks/useBreakPoint'; import { nanoid } from 'nanoid'; -import useManager from '../../../context/useManager'; -import useSelectorActions from '../../../context/hooks/useSelectorActions'; +import useManager from 'context/useManager'; +import useSelectorActions from 'context/hooks/useSelectorActions'; const RCInput = forwardRef( ( { @@ -44,21 +44,7 @@ const RCInput = forwardRef( ) => { const { theme } = useMode(); const { isMobile } = useBreakpoint(); - const { updateEntityField, selectedCollection, selectedCollectionId } = - useManager(); const { handleSelectChange } = useSelectorActions(); - // const handleSelectChange = (event) => { - // const selectedValue = event.target.value; - // // onChange(selectedValue); // Update local form state - // if (type === 'select') { - // updateEntityField( - // 'collections', - // selectedCollectionId, - // 'selectedChartDataKey', - // selectedValue - // ); - // } - // }; const [inputValue, setInputValue] = useState(''); const handleKeyDown = (event) => { if (event.key === 'Enter' && inputValue.trim()) { diff --git a/src/components/forms/Factory/RCSwitch.jsx b/src/components/forms/Factory/RCSwitch.jsx index 1bc5eba..077b77a 100644 --- a/src/components/forms/Factory/RCSwitch.jsx +++ b/src/components/forms/Factory/RCSwitch.jsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import { Switch, FormControlLabel, FormControl } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const RCSwitch = ({ checked, diff --git a/src/components/forms/customerCheckoutForm/CustomerForm.js b/src/components/forms/customerCheckoutForm/CustomerForm.js index bd5f6d9..90eb4da 100644 --- a/src/components/forms/customerCheckoutForm/CustomerForm.js +++ b/src/components/forms/customerCheckoutForm/CustomerForm.js @@ -2,10 +2,10 @@ import React, { useCallback, useContext, useMemo } from 'react'; import { Box, Container, Typography, Grid, Button } from '@mui/material'; import CustomerInfoFields from './CustomerInfoFields'; import StripeCheckoutModal from '../../dialogs/stripeModal/StripeCheckoutModal'; -import { ModalContext } from '../../../context/ModalContext/ModalContext'; +import { ModalContext } from 'context/ModalContext/ModalContext'; import CartSummary from '../../other/dataDisplay/CartSummary'; -import { useMode } from '../../../context'; -import useManager from '../../../context/useManager'; +import { useMode } from 'context'; +import useManager from 'context/useManager'; const CustomerForm = () => { const { isModalOpen, setModalOpen } = useContext(ModalContext); diff --git a/src/components/forms/formsConfig.jsx b/src/components/forms/formsConfig.jsx index 5177598..02dd1fd 100644 --- a/src/components/forms/formsConfig.jsx +++ b/src/components/forms/formsConfig.jsx @@ -22,7 +22,6 @@ import { z } from 'zod'; import useAuthManager from '../../context/MAIN_CONTEXT/AuthContext/useAuthManager'; import { useCardStoreHook } from '../../context/MAIN_CONTEXT/CardContext/useCardStore'; import useManager from '../../context/useManager'; -import useSelectorActions from '../../context/hooks/useSelectorActions'; // ----------------------------------------------------------------------------- // ----------------------------------------------------------------------------- // ------------------------------- FORM KEYS ----------------------------------- @@ -71,13 +70,13 @@ const formFieldKeys = { const getFormFieldHandlers = () => { const { signup, login } = useAuthManager(); const { handleRequest } = useCardStoreHook(); - const { setTime, setStat, setTheme } = useSelectorActions(); const { addCollection, updateCollection, deleteDeck, addDeck, updateDeck: updateDeckDetails, + // selectedCollection, } = useManager(); const formHandlers = { @@ -121,17 +120,17 @@ const getFormFieldHandlers = () => { }, statRangeForm: (formData) => { console.log('Stat Range Form Data:', formData); - setStat(formData); + // setStat(formData); // setSearchSettings(formData, additionalData); }, themeRangeForm: (formData) => { console.log('Theme Range Form Data:', formData); - setTheme(formData); + // setTheme(formData); // setSearchSettings(formData, additionalData); }, timeRangeForm: (formData) => { console.log('Time Range Selector Form Data:', formData); - setTime(formData); + // setTime(formData); }, searchSettingsForm: (formData, additionalData) => { console.log( @@ -227,6 +226,7 @@ const authFormFields = signupFormFields; const addDeckFormFields = { name: { context: 'Deck', + name: 'name', label: 'Name', type: 'text', placeHolder: 'Enter deck name', @@ -240,6 +240,7 @@ const addDeckFormFields = { }, description: { context: 'Deck', + name: 'description', label: 'Description', type: 'text', placeHolder: 'Enter deck description', @@ -261,6 +262,7 @@ const updateDeckFormFields = { tags: { context: 'Deck', label: 'Tags', + name: 'tags', type: 'chips', placeholder: 'Enter a tag', defaultValue: [{ value: 'tag1', label: 'tag1' }], @@ -273,6 +275,7 @@ const updateDeckFormFields = { color: { context: 'Deck', label: 'Color', + name: 'color', type: 'select', defaultValue: 'blue', rules: { @@ -297,7 +300,7 @@ const deckFormFields = updateDeckFormFields; const collectionFormFields = { name: { context: 'Collection', - + name: 'name', label: 'Name', type: 'text', placeHolder: 'Enter collection name', @@ -310,6 +313,7 @@ const collectionFormFields = { }, description: { context: 'Collection', + name: 'description', label: 'Description', type: 'text', placeHolder: 'Enter collection description', @@ -329,6 +333,7 @@ const searchFormFields = { searchTerm: { label: 'Search Cards', type: 'text', + name: 'searchTerm', placeholder: 'Search for cards...', defaultValue: '', rules: { @@ -348,6 +353,7 @@ const collectionSearchFormFields = { searchTerm: { label: 'Search', type: 'text', + name: 'collectionSearchTerm', placeholder: 'Search for cards...', field: 'searchTerm', defaultValue: '', @@ -367,10 +373,6 @@ const statRangeFormFields = { placeholder: 'Select statistics range', // Optional for a select, used if you have a default empty option defaultValue: 'highPoint', selected: 'highPoint', - - // onSelectChange: (value) => { - // console.log(value); - // }, rules: { required: 'Statistics range is required', // Assuming you want to enforce a selection }, @@ -378,6 +380,12 @@ const statRangeFormFields = { { value: 'highPoint', label: 'High Point' }, { value: 'lowPoint', label: 'Low Point' }, { value: 'average', label: 'Average' }, + { value: 'avgPrice', label: 'Average Price' }, + { value: 'priceChange', label: 'Price Change' }, + { + value: 'percentageChange', + label: 'Percentage Change', + }, { value: 'volume', label: 'Volume' }, { value: 'volatility', label: 'Volatility' }, ], @@ -430,6 +438,8 @@ const authSwitchFormFields = { authSwitch: { label: 'Auth Switch', type: 'switch', + placeHolder: 'Auth Switch', + name: 'authSwitch', defaultValue: false, rules: { required: true, diff --git a/src/components/forms/search/PaginationComponent.jsx b/src/components/forms/search/PaginationComponent.jsx index 0e4bbf8..9dda522 100644 --- a/src/components/forms/search/PaginationComponent.jsx +++ b/src/components/forms/search/PaginationComponent.jsx @@ -64,11 +64,11 @@ export default PaginationComponent; // // PaginationComponent.jsx // import React from 'react'; -// import MDPagination from '../../../layout/REUSABLE_COMPONENTS/MDPAGINATION'; -// import MDBox from '../../../layout/REUSABLE_COMPONENTS/MDBOX'; -// import MDInput from '../../../layout/REUSABLE_COMPONENTS/MDINPUT'; +// import MDPagination from 'layout/REUSABLE_COMPONENTS/MDPAGINATION'; +// import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +// import MDInput from 'layout/REUSABLE_COMPONENTS/MDINPUT'; // import Icon from '@mui/material/Icon'; -// import MDTypography from '../../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +// import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; // const PaginationComponent = ({ // pageOptions, diff --git a/src/components/forms/search/SearchComponent.jsx b/src/components/forms/search/SearchComponent.jsx index 78b55c7..0d28849 100644 --- a/src/components/forms/search/SearchComponent.jsx +++ b/src/components/forms/search/SearchComponent.jsx @@ -12,19 +12,19 @@ import { useMediaQuery, } from '@mui/material'; import SearchResults from './SearchResults'; -import MDBox from '../../../layout/REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +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/MAIN_CONTEXT/CardContext/useCardStore'; +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/MAIN_CONTEXT/CardContext/useCardStore'; import RCDynamicForm from '../Factory/RCDynamicForm'; import { formFields } from '../formsConfig'; import SearchIcon from '@mui/icons-material/Search'; -import useBreakpoint from '../../../context/hooks/useBreakPoint'; +import useBreakpoint from 'context/hooks/useBreakPoint'; // import SearchForm from './SearchForm'; const SearchComponent = (pageContext) => { const { theme } = useMode(); diff --git a/src/components/forms/search/SearchResults.jsx b/src/components/forms/search/SearchResults.jsx index 5f2b9dc..6497e39 100644 --- a/src/components/forms/search/SearchResults.jsx +++ b/src/components/forms/search/SearchResults.jsx @@ -1,9 +1,9 @@ import React, { useMemo } from 'react'; import { Box, 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 MDBox from '../../../layout/REUSABLE_COMPONENTS/MDBOX'; +import useGridItems from 'context/hooks/useGridItems'; +import usePagination from 'context/hooks/usePagination'; +import LoadingIndicator from 'layout/REUSABLE_COMPONENTS/system-utils/LoadingIndicator'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; import PaginationComponent from './PaginationComponent'; const SearchResults = ({ diff --git a/src/components/forms/search/SearchSettings.jsx b/src/components/forms/search/SearchSettings.jsx index 34c095e..1f4106f 100644 --- a/src/components/forms/search/SearchSettings.jsx +++ b/src/components/forms/search/SearchSettings.jsx @@ -2,8 +2,8 @@ import React, { useState } from 'react'; import { Paper, Box, Container, Typography } from '@mui/material'; import SearchFormB from './SearchFormB'; // Ensure path is correct -import { useMode } from '../../../context'; -import { SearchSettingsBox } from '../../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import { useMode } from 'context'; +import { SearchSettingsBox } from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; export const commonPaperStyles = (theme) => ({ padding: theme.spacing(3), diff --git a/src/config.json b/src/config.json deleted file mode 100644 index 165ea06..0000000 --- a/src/config.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "compilerOptions": { - "baseUrl": ".", - "target": "es5", - "module": "commonjs", - "sourceMap": true, - "outDir": "dist", - "paths": { - "*": ["src/*"], - - "@material-ui/core": ["../node_modules/@material-ui/core"], - "@material-ui/icons": ["../node_modules/@material-ui/icons"], - "@material-ui/lab": ["../node_modules/@material-ui/lab"], - "@material-ui/pickers": ["../node_modules/@material-ui/pickers"], - "@material-ui/styles": ["../node_modules/@material-ui/styles"], - "@material-ui/system": ["../node_modules/@material-ui/system"], - "@material-ui/utils": ["../node_modules/@material-ui/utils"], - "@tabler/icons-react": ["../node_modules/@tabler/icons-react"], - "@tabler/icons": ["../node_modules/@tabler/icons"], - "@tabler/core": ["../node_modules/@tabler/core"], - "@tabler/core-react": ["../node_modules/@tabler/core-react"], - "@tabler/core-icons": ["../node_modules/@tabler/core-icons"], - "@tabler/core-react-icons": ["../node_modules/@tabler/core-react-icons"] - } - } -} diff --git a/src/context/MAIN_CONTEXT/CardContext/useCardStore.jsx b/src/context/MAIN_CONTEXT/CardContext/useCardStore.jsx index ae82d3c..7bb6bb2 100644 --- a/src/context/MAIN_CONTEXT/CardContext/useCardStore.jsx +++ b/src/context/MAIN_CONTEXT/CardContext/useCardStore.jsx @@ -5,7 +5,7 @@ import useLogger from '../../hooks/useLogger'; import useLocalStorage from '../../hooks/useLocalStorage'; // Ensure this is the correct path to your hook import { useLoading } from '../../hooks/useLoading'; import useManageCookies from '../../hooks/useManageCookies'; -import { formFields } from '../../../components/forms/formsConfig'; +import { formFields } from 'components/forms/formsConfig'; function debounce(func, wait) { let timeout; diff --git a/src/context/UTILITIES_CONTEXT/ColorModeContext/ColorModeProvider.jsx b/src/context/UTILITIES_CONTEXT/ColorModeContext/ColorModeProvider.jsx index c88e6b1..ace311b 100644 --- a/src/context/UTILITIES_CONTEXT/ColorModeContext/ColorModeProvider.jsx +++ b/src/context/UTILITIES_CONTEXT/ColorModeContext/ColorModeProvider.jsx @@ -1,6 +1,6 @@ import { useState, useMemo, createContext, useEffect, useContext } from 'react'; import { createTheme } from '@mui/material'; -import { themeSettings } from '../../../assets/themes/themeSettings'; +import { themeSettings } from 'assets/themes/themeSettings'; import useManageCookies from '../../hooks/useManageCookies'; export const ColorModeContext = createContext({ diff --git a/src/context/hooks/useFetchWrapper.jsx b/src/context/hooks/useFetchWrapper.jsx index e186619..635e35d 100644 --- a/src/context/hooks/useFetchWrapper.jsx +++ b/src/context/hooks/useFetchWrapper.jsx @@ -67,7 +67,7 @@ const useFetchWrapper = () => { setData(responseData); setResponseCache((prevCache) => ({ ...prevCache, - [loadingID]: responseData, + [loadingID]: responseData.message, })); showNotification( `Success: Your ${loadingID} data has been fetched.`, diff --git a/src/context/hooks/useSelectorActions.jsx b/src/context/hooks/useSelectorActions.jsx index 95023c5..b0255b5 100644 --- a/src/context/hooks/useSelectorActions.jsx +++ b/src/context/hooks/useSelectorActions.jsx @@ -3,27 +3,20 @@ import useLocalStorage from './useLocalStorage'; import useManager from '../useManager'; function useSelectorActions() { - // const [timeRange, setTimeRange] = useLocalStorage('timeRange', '24hr'); - // const [stat, setStat] = useLocalStorage('stat', 'highpoint'); - // const [theme, setTheme] = useLocalStorage('theme', 'light'); const { updateEntityField, selectedCollection, handleSelectCollection } = useManager(); const [time, setTime] = useState('24hr'); const [stat, setStat] = useState('highpoint'); const [theme, setTheme] = useState('light'); - const selectorValues = useLocalStorage('selectorValues', { + const [selectorValues, setSelectorValues] = useLocalStorage('selectors', { selectedTimeRange: time, selectedStat: stat, selectedTheme: theme, }); - const themes = new Map( - Object.entries({ - light: 'light', - dark: 'dark', - }) - ); - const [selectedTheme, setSelectedTheme] = useState(themes['light']); - + const themes = { + light: 'light', + dark: 'dark', + }; const handleSelectChange = (e, selectorName, context) => { console.log( 'SELECTOR VALUES CHANGED', @@ -37,9 +30,6 @@ function useSelectorActions() { switch (selectorName) { case 'timeRange': setTime(e.target.value); - // setSelectedChartData( - // selectedCollection.averagedChartData[e.target.value] - // ); updateEntityField( 'collections', selectedCollectionId, @@ -49,54 +39,65 @@ function useSelectorActions() { selectedCollection.selectedChartDataKey = e.target.value; selectedCollection.selectedChartData = selectedCollection.averagedChartData[e.target.value]; + setSelectorValues({ + selectedTimeRange: e.target.value, + selectedStat: selectedCollection.selectedStatDataKey, + selectedTheme: selectedCollection.selectedThemeDataKey, + }); handleSelectCollection(selectedCollection); break; case 'statRange': setStat(e.target.value); - // setSelectedStat(selectedCollection.collectionStatistics[stat]); - // updateEntityField( - // 'collections', - // selectedCollectionId, - // ['selectedStatDataKey', 'selectedStat'], - // [ - // e.target.value, - // selectedCollection.collectionStatistics - // .get(selectedCollection.selectedChartDataKey) - // .data.get(e.target.value), - // ] - // ); + updateEntityField( + 'collections', + selectedCollectionId, + ['selectedStatDataKey', 'selectedStatData'], + [ + e.target.value, + selectedCollection.collectionStatistics[e.target.value], + ] + ); + selectedCollection.selectedStatDataKey = e.target.value; + selectedCollection.selectedStatData = + selectedCollection.collectionStatistics[e.target.value]; + setSelectorValues({ + selectedTimeRange: selectedCollection.selectedChartDataKey, + selectedStat: e.target.value, + selectedTheme: selectedCollection.selectedThemeDataKey, + }); + handleSelectCollection(selectedCollection); break; case 'themeRange': setTheme(e.target.value); - setSelectedTheme(themes[selectorValues.selectedTheme]); + updateEntityField( + 'collections', + selectedCollectionId, + ['selectedThemeDataKey', 'selectedThemeData'], + [e.target.value, themes[e.target.value]] + ); + selectedCollection.selectedThemeDataKey = e.target.value; + selectedCollection.selectedThemeData = themes[e.target.value]; + setSelectorValues({ + selectedTimeRange: selectedCollection.selectedChartDataKey, + selectedStat: selectedCollection.selectedStatDataKey, + selectedTheme: e.target.value, + }); + handleSelectCollection(selectedCollection); break; default: break; } }; - // useEffect(() => { - // // Assuming setSelectedChartData is a function that sets some state elsewhere - // setSelectedChartData(selectedCollection.averagedChartData[timeRange]); - // }, [timeRange, selectedCollection]); - - // useEffect(() => { - // setSelectedChartData(selectedCollection.collectionStatistics[stat]); - // }, [stat, selectedCollection]); - - // useEffect(() => { - // setSelectedChartData(themes.get(theme)); - // }, [theme, themes]); - return { setTime, setStat, setTheme, handleSelectChange, selectorValues, - selectedTheme: theme, - selectedTimeRange: time, - selectedStat: stat, + selectedTheme: selectedCollection?.selectedThemeDataKey, + selectedTimeRange: selectedCollection?.selectedChartDataKey, + selectedStat: selectedCollection?.selectedStatDataKey, }; } diff --git a/src/context/useManager.jsx b/src/context/useManager.jsx index ef029ba..7b4aead 100644 --- a/src/context/useManager.jsx +++ b/src/context/useManager.jsx @@ -137,7 +137,28 @@ const useManager = () => { // }, {}); return cards; }, [collections, decks, cart, setCardsWithQuantities]); - + let BASE_STAT_CONFIGS = [ + { name: 'highPoint', statKey: 'highPoint', label: 'High Point' }, + { name: 'lowPoint', statKey: 'lowPoint', label: 'Low Point' }, + { name: 'average', statKey: 'average', label: 'Average' }, + { + name: 'percentageChange', + statKey: 'percentageChange', + label: 'Percentage Change', + }, + { name: 'priceChange', statKey: 'priceChange', label: 'Price Change' }, + { name: 'avgPrice', statKey: 'avgPrice', label: 'Average Price' }, + { name: 'volume', statKey: 'volume', label: 'Volume' }, + { name: 'volatility', statKey: 'volatility', label: 'Volatility' }, + ]; + const generateCollectionStatistics = useCallback( + (allCollections) => { + if (!allCollections) return; + compileCollectionMetaData(allCollections); + compileCardsWithQuantities(); + }, + [collections, setCollectionMetaData, compileCardsWithQuantities] + ); const isCardInContext = useCallback( (card) => { const cardsList = { @@ -179,8 +200,7 @@ const useManager = () => { return response.data; } else if (entity === 'collections') { setCollections(response.data); - compileCollectionMetaData(response.data); - compileCardsWithQuantities(); + generateCollectionStatistics(response.data); setHasFetchedCollections(true); return response.data; } else { @@ -203,6 +223,7 @@ const useManager = () => { setHasFetchedCart, setCart, compileCollectionMetaData, + generateCollectionStatistics, ] ); const fetchSingleEntity = useCallback( @@ -266,9 +287,9 @@ const useManager = () => { switch (entity) { case 'collections': setCollections((prev) => - prev.map((col) => - col._id === response.data._id ? response.data : col - ) + prev.map((col) => { + return col._id === response.data._id ? response.data : col; + }) ); break; case 'decks': diff --git a/src/data/collectionPortfolioData.jsx b/src/data/collectionPortfolioData.jsx index e0598e0..9281bfc 100644 --- a/src/data/collectionPortfolioData.jsx +++ b/src/data/collectionPortfolioData.jsx @@ -2,7 +2,7 @@ import Icon from '@mui/material/Icon'; // Images import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import React from 'react'; -import LoadingIndicator from '../../../components/reusable/indicators/LoadingIndicator'; +import LoadingIndicator from 'components/reusable/indicators/LoadingIndicator'; import { roundToNearestTenth } from '../context/Helpers'; const Name = ({ name }) => ( ({ + path, + componentName, + isPrivate, + })), +}; diff --git a/src/data/searchData.jsx b/src/data/searchData.jsx index 5594e3e..5b1356c 100644 --- a/src/data/searchData.jsx +++ b/src/data/searchData.jsx @@ -2,7 +2,7 @@ import Icon from '@mui/material/Icon'; // Images import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import React, { memo } from 'react'; -import LoadingIndicator from '../../../components/reusable/indicators/LoadingIndicator'; +import LoadingIndicator from 'components/reusable/indicators/LoadingIndicator'; import GenericCard from '../components/cards/GenericCard'; import { Container } from '@mui/system'; import { Box } from '@mui/material'; diff --git a/src/index.js b/src/index.js index 20c9f14..2b590fb 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,7 @@ import { BrowserRouter as Router } from 'react-router-dom'; import App from './App'; // import LogRocket from 'logrocket'; // LogRocket.init('8iqglq/card-store'); -import * as serviceWorker from './serviceWorker'; +import { register, unregister } from './serviceWorker'; // ==============================|| REACT DOM RENDER ||============================== // @@ -14,6 +14,7 @@ import { Elements } from '@stripe/react-stripe-js'; import { Helmet } from 'react-helmet'; import { SnackbarProvider } from 'notistack'; import { ErrorBoundary } from 'react-error-boundary'; +import ErrorFallback from 'ErrorFallback'; const domNode = document.getElementById('root'); @@ -40,11 +41,12 @@ const AppWrapper = () => { return ( { - console.error(error); - resetErrorBoundary(); - return null; - }} + FallbackComponent={ErrorFallback} + // FallbackComponent={({ error, resetErrorBoundary }) => { + // console.error(error); + // resetErrorBoundary(); + // return null; + // }} onError={(error) => { console.error(error); }} @@ -70,7 +72,8 @@ const AppWrapper = () => { ReactDOM.render(, domNode); -// If you want your app to work offline and load faster, you can change -// unregister() to register() below. Note this comes with some pitfalls. -// Learn more about service workers: https://bit.ly/CRA-PWA -// serviceWorker.unregister(); +if (process.env.NODE_ENV === 'production') { + register(); // Only register the service worker in production +} else { + unregister(); // Disable the service worker in development +} diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx index c58536e..7117ea1 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/ConfiguratorRoot.jsx @@ -1,8 +1,8 @@ import Drawer from '@mui/material/Drawer'; import { styled } from '@mui/material/styles'; -import { useConfiguratorContext, useMode } from '../../../context'; +import { useConfiguratorContext, useMode } from 'context'; import { useEffect } from 'react'; -import { useCardStoreHook } from '../../../context/MAIN_CONTEXT/CardContext/useCardStore'; +import { useCardStoreHook } from 'context/MAIN_CONTEXT/CardContext/useCardStore'; export default styled(Drawer)(({ ownerState }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx index bd10037..e2ac031 100644 --- a/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/Configurator/index.jsx @@ -10,14 +10,14 @@ import { Slide, } from '@mui/material'; import ConfiguratorRoot from './ConfiguratorRoot'; -import searchData from '../../../data/json-data/search.json'; -import { useConfiguratorContext, useMode } from '../../../context'; +import searchData from 'data/json-data/search.json'; +import { useConfiguratorContext, useMode } from 'context'; import { zodResolver } from '@hookform/resolvers/zod'; import { useForm, Controller } from 'react-hook-form'; import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import MDBox from '../MDBOX'; import MDButton from '../MDBUTTON'; -import { formFields } from '../../../components/forms/formsConfig'; +import { formFields } from 'components/forms/formsConfig'; import { TextField, InputLabel } from '@mui/material'; import { StyledFormControl } from '../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; diff --git a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx index 15eb049..760df90 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBOX/MdBoxRoot.jsx @@ -1,6 +1,6 @@ import Box from '@mui/material/Box'; import { styled } from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; export default styled(Box)(({ ownerstate }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/MDBUTTON/MDButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/MDBUTTON/MDButtonRoot.jsx index a64fb17..48395e2 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBUTTON/MDButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBUTTON/MDButtonRoot.jsx @@ -1,6 +1,6 @@ import Button from '@mui/material/Button'; import styled from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; export default styled(Button)(({ ownerState }) => { // const { palette, functions, borders, boxShadows } = theme; diff --git a/src/layout/REUSABLE_COMPONENTS/MDBUTTON/index.jsx b/src/layout/REUSABLE_COMPONENTS/MDBUTTON/index.jsx index 1785b2a..46d3599 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDBUTTON/index.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDBUTTON/index.jsx @@ -1,7 +1,7 @@ import { forwardRef } from 'react'; import PropTypes from 'prop-types'; import MDButtonRoot from './MDButtonRoot'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const MDButton = forwardRef( ({ color, variant, size, circular, iconOnly, children, ...rest }, ref) => { diff --git a/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx b/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx index 3633439..2ff73db 100644 --- a/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypographyRoot.jsx @@ -1,6 +1,6 @@ import Typography from '@mui/material/Typography'; import styled from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; export default styled(Typography)(({ ownerstate }) => { // const { palette, typography, functions } = theme; diff --git a/src/layout/REUSABLE_COMPONENTS/RC/RCChange.jsx b/src/layout/REUSABLE_COMPONENTS/RC/RCChange.jsx index 639bd32..3e696d9 100644 --- a/src/layout/REUSABLE_COMPONENTS/RC/RCChange.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RC/RCChange.jsx @@ -6,7 +6,7 @@ import ArrowDropUpIcon from '@mui/icons-material/ArrowDropUp'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import MDBox from '../MDBOX'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const useStyles = (theme) => ({ container: { diff --git a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx index 7ccd52b..d9cb050 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBADGE/RCBadgeRoot.jsx @@ -1,6 +1,6 @@ import { Badge } from '@mui/material'; import styled from 'styled-components'; -import { useMode } from '../../../context/UTILITIES_CONTEXT/ColorModeContext/useMode'; +import { useMode } from 'context/UTILITIES_CONTEXT/ColorModeContext/useMode'; export default styled(Badge)(({ ownerState }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx index f6edc63..3409cc6 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCBUTTON/RCButtonRoot.jsx @@ -1,6 +1,6 @@ import { Button } from '@mui/material'; import styled from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; // const calculateStyles = (size) => { // switch (size) { // case 'small': diff --git a/src/layout/REUSABLE_COMPONENTS/RCICON/RCIcon.jsx b/src/layout/REUSABLE_COMPONENTS/RCICON/RCIcon.jsx index 1143021..e90ac33 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCICON/RCIcon.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCICON/RCIcon.jsx @@ -3,7 +3,7 @@ // import * as MuiIcons from '@mui/icons-material'; // import uniqueTheme from '../unique/uniqueTheme'; // import { Box } from '@mui/material'; -// import { useMode } from '../../../context'; +// import { useMode } from 'context'; // const StyledIcon = styled(Box)(({ theme }) => ({ // borderRadius: '50%', diff --git a/src/layout/REUSABLE_COMPONENTS/RCInput/RCInputRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCInput/RCInputRoot.jsx index 390ab54..71ff56f 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCInput/RCInputRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCInput/RCInputRoot.jsx @@ -1,6 +1,6 @@ import TextField from '@mui/material/TextField'; import styled from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; export default styled(TextField)(({ ownerState }) => { const { error, success, disabled } = ownerState; diff --git a/src/layout/REUSABLE_COMPONENTS/RCLOGOSECTION/RCLogoSection.jsx b/src/layout/REUSABLE_COMPONENTS/RCLOGOSECTION/RCLogoSection.jsx index e15ad62..58953cf 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCLOGOSECTION/RCLogoSection.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCLOGOSECTION/RCLogoSection.jsx @@ -1,8 +1,8 @@ import React from 'react'; import { ButtonBase, Typography, Avatar } from '@mui/material'; import { Link, useNavigate } from 'react-router-dom'; -import config from '../../../config'; import DeckBuilderIcon from '../icons/DeckBuilderIcon'; // Import DeckBuilderIcon +import { ROUTE_CONFIG } from 'data/route-config'; // ==============================|| MAIN LOGO ||============================== // @@ -17,7 +17,7 @@ const RCLogoSection = () => { { diff --git a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx index 223bace..9b46684 100644 --- a/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx +++ b/src/layout/REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIconRoot.jsx @@ -1,6 +1,6 @@ import { Box } from '@mui/material'; import styled from 'styled-components'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; export default styled(Box)(({ color }) => { const { theme } = useMode(); diff --git a/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx b/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx index 5fa7c11..52285d1 100644 --- a/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx +++ b/src/layout/REUSABLE_COMPONENTS/icons/DeckOfCardsIcon.jsx @@ -1,6 +1,6 @@ import React from 'react'; import ReusableIconButton from './ReusableIconButton'; -import deckIcon from '../../../assets/icons/deckIcon2.png'; +import deckIcon from 'assets/icons/deckIcon2.png'; const DeckOfCardsIcon = (color) => { return ( diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx index d447bdd..97d5efe 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/BoxHeader.jsx @@ -2,7 +2,7 @@ import { Box, Icon, Typography } from '@mui/material'; import React from 'react'; import FlexBetween from './FlexBetween'; import PropTypes from 'prop-types'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const BoxHeader = ({ icon, diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx index e8c8f54..8af31c3 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/DashBoardLayout.jsx @@ -1,4 +1,4 @@ -import { useMode } from '../../../context'; +import { useMode } from 'context'; import { useLocation } from 'react-router-dom'; import PropTypes from 'prop-types'; import MDBox from '../MDBOX/index'; diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx index 5ee06c6..490994d 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageHeader.jsx @@ -1,14 +1,14 @@ import React from 'react'; import styled from 'styled-components'; import { Box } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import SimpleCard from '../unique/SimpleCard'; import SimpleSectionHeader from '../unique/SimpleSectionHeader'; import uniqueTheme from '../unique/uniqueTheme'; import { PageHeaderSkeleton } from '../system-utils/SkeletonVariants'; import RCButton from '../RCBUTTON'; -import useUserData from '../../../context/MAIN_CONTEXT/UserContext/useUserData'; -import { useFormManagement } from '../../../components/forms/hooks/useFormManagement'; +import useUserData from 'context/MAIN_CONTEXT/UserContext/useUserData'; +import { useFormManagement } from 'components/forms/hooks/useFormManagement'; const FlexContainer = styled(Box)(({ theme }) => ({ display: 'flex', diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx index a0265f3..583c7ec 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/PageLayout.jsx @@ -2,7 +2,7 @@ import { useLocation } from 'react-router-dom'; import PropTypes from 'prop-types'; import MDBox from '../MDBOX'; import { Grid } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; function PageLayout({ background, backCol, children }) { const { pathname } = useLocation(); diff --git a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx b/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx index 2130d97..b87956a 100644 --- a/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx +++ b/src/layout/REUSABLE_COMPONENTS/layout-utils/StatBox.jsx @@ -1,6 +1,6 @@ import { Box, Card, CardContent, Typography, useTheme } from '@mui/material'; import ProgressCircle from '../system-utils/ProgressCircle'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import MDBox from '../MDBOX'; const StatBox = ({ title, subtitle, icon, progress, increase, wrapIcon }) => { diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js b/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js index 566d59e..d332740 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/ErrorIndicator.js @@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'; import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; import Container from '@mui/material/Container'; import { Alert, AlertTitle } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; // Styled components with theme utilization const StyledContainer = styled(Container)(({ theme }) => ({ diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx index 04fe439..ac92c9a 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react'; -import { useMode } from '../../../context'; -import useBreakpoint from '../../../context/hooks/useBreakPoint'; +import { useMode } from 'context'; +import useBreakpoint from 'context/hooks/useBreakPoint'; import { Box, CircularProgress } from '@mui/material'; const LoadingOverlay = () => { diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx index 2f40d4d..453bfb5 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/ProgressCircle.jsx @@ -3,7 +3,7 @@ import React from 'react'; import { Box, useTheme } from '@mui/material'; import PropTypes from 'prop-types'; import RCToolTip from '../RCTOOLTIP/RCToolTip'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import useSkeletonLoader from './useSkeletonLoader'; const ProgressCircleSkeleton = ({ size = 120 }) => { diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx index 5bb9e8e..d00d162 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/SkeletonVariants.jsx @@ -13,7 +13,7 @@ import { } from '@mui/material'; import useSkeletonLoader from './useSkeletonLoader'; import MDBox from '../MDBOX'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import { AspectRatioBoxSkeleton, StyledSkeletonCard, diff --git a/src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx b/src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx index 0cfa153..4bed1dd 100644 --- a/src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx +++ b/src/layout/REUSABLE_COMPONENTS/system-utils/SplashPage2.jsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef } from 'react'; import * as THREE from 'three'; -import placeholder from '../../../assets/images/placeholder.jpeg'; +import placeholder from 'assets/images/placeholder.jpeg'; import { Box } from '@mui/material'; const SplashPage2 = () => { diff --git a/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx b/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx index fb730ba..2dcbacd 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx +++ b/src/layout/REUSABLE_COMPONENTS/unique/IconStatWrapper.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { Card, Icon, Box, Typography } from '@mui/material'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const StyledCard = styled(Card)` display: flex; diff --git a/src/layout/REUSABLE_COMPONENTS/unique/SimpleButton.jsx b/src/layout/REUSABLE_COMPONENTS/unique/SimpleButton.jsx index 181545d..5f64d8b 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleButton.jsx +++ b/src/layout/REUSABLE_COMPONENTS/unique/SimpleButton.jsx @@ -2,7 +2,7 @@ import React from 'react'; import { rgba } from 'polished'; import styled from 'styled-components'; import { Box } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; const ButtonContainer = styled(Box)` ${ '' /* flex: 1; diff --git a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx b/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx index 59e6581..49c7d79 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx +++ b/src/layout/REUSABLE_COMPONENTS/unique/SimpleCard.jsx @@ -3,7 +3,7 @@ import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import styled from 'styled-components'; import { AspectRatio, CardContent, IconButton, Typography } from '@mui/joy'; import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import { Icon, useMediaQuery } from '@mui/material'; import MDBox from '../MDBOX'; import SaveIcon from '@mui/icons-material/Save'; diff --git a/src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx b/src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx index 7c578a2..c116e25 100644 --- a/src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx +++ b/src/layout/REUSABLE_COMPONENTS/unique/SimpleSectionHeader.jsx @@ -1,7 +1,7 @@ import React from 'react'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import MDTypography from '../MDTYPOGRAPHY/MDTypography'; import { useMediaQuery, useTheme } from '@mui/material'; import MDBox from '../MDBOX'; diff --git a/src/layout/cart/cartPageContainers/Checkout.jsx b/src/layout/cart/cartPageContainers/Checkout.jsx index ecb5c8a..1ed959d 100644 --- a/src/layout/cart/cartPageContainers/Checkout.jsx +++ b/src/layout/cart/cartPageContainers/Checkout.jsx @@ -16,8 +16,8 @@ import PaymentForm from './PaymentForm'; import Review from './Review'; import { Elements } from '@stripe/react-stripe-js'; import { loadStripe } from '@stripe/stripe-js'; -import useUserData from '../../../context/MAIN_CONTEXT/UserContext/useUserData'; -import { useMode } from '../../../context'; +import useUserData from 'context/MAIN_CONTEXT/UserContext/useUserData'; +import { useMode } from 'context'; function Copyright() { return ( diff --git a/src/layout/cart/cartPageContainers/Review.jsx b/src/layout/cart/cartPageContainers/Review.jsx index 57628b1..0ccfed4 100644 --- a/src/layout/cart/cartPageContainers/Review.jsx +++ b/src/layout/cart/cartPageContainers/Review.jsx @@ -4,7 +4,7 @@ import List from '@mui/material/List'; import ListItem from '@mui/material/ListItem'; import ListItemText from '@mui/material/ListItemText'; import Grid from '@mui/material/Grid'; -import useManager from '../../../context/useManager'; +import useManager from 'context/useManager'; const addresses = ['1 MUI Drive', 'Reactville', 'Anytown', '99999', 'USA']; const payments = [ { name: 'Card type', detail: 'Visa' }, diff --git a/src/layout/collection/ChartGridLayout.jsx b/src/layout/collection/ChartGridLayout.jsx index 34f326c..d2d8f38 100644 --- a/src/layout/collection/ChartGridLayout.jsx +++ b/src/layout/collection/ChartGridLayout.jsx @@ -200,14 +200,11 @@ FormSelectorRow.displayName = 'FormSelectorRow'; const ChartAreaComponent = React.memo(() => { const { theme } = useMode(); const { greenAccent, redAccent, grey } = theme.palette.chartTheme; - const { selectedTimeRange } = useSelectorActions(); + const { selectedTimeRange, selectedStat } = useSelectorActions(); const { selectedCollection, handleSelectCollection } = useManager(); const [collection, setCollection] = useState(selectedCollection); const [timeRange, setTimeRange] = useState('24hr'); const [marker, setMarker] = useState(null); - // if (!selectedCollection) { - // return ; - // } useEffect(() => { const handleStorageChange = (event) => { if (event.key === 'selectedCollection' && event.newValue) { @@ -215,14 +212,10 @@ const ChartAreaComponent = React.memo(() => { setCollection(JSON.parse(event.newValue)); setTimeRange(JSON.parse(event.newValue).selectedChartDataKey); setMarker( - JSON.parse(event.newValue) - .collectionStatistics.get( - JSON.parse(event.newValue).selectedChartDataKey - ) - .data.get(JSON.parse(event.newValue).selectedStat) + JSON.parse(event.newValue).collectionStatistics[ + event.newValue.selectedStatDataKey + ] ); - - // handleSelectCollection(JSON.parse(event.newValue)); } }; @@ -256,11 +249,15 @@ const ChartAreaComponent = React.memo(() => { return ; } const memoMarker = useMemo(() => { - if (!marker) { - return null; - } - return marker; - }, [marker]); + const { selectedStatData, collectionStatistics, selectedStatDataKey } = + collection; + console.log('MARKER SET: ', collectionStatistics[selectedStatDataKey]); + const newMarker = !selectedStatData + ? collectionStatistics[selectedStatDataKey] + : selectedStatData; + // setMarker(newMarker); + return newMarker; + }, [collection, selectedStat]); const tickValues = useMemo(() => { const { ticks } = formatDateBasedOnRange(timeRange); @@ -271,6 +268,8 @@ const ChartAreaComponent = React.memo(() => { console.log('TIME RANGE:', timeRange); console.log('SELCTED RANGE:', selectedTimeRange); + // console.log('MARKER:', memoMarker); + console.log('SELECTED MARKER', selectedStat); }, [memoChartData, timeRange, selectedTimeRange]); return renderCardContainer( }> @@ -281,7 +280,7 @@ const ChartAreaComponent = React.memo(() => { key={timeRange} data={[memoChartData]} tickValues={tickValues} - validMarkers={memoMarker} + validMarkers={[memoMarker]} xFormat={memoChartData.id === '24hr' ? '%H:%M' : '%b %d'} redAccent={redAccent} greenAccent={greenAccent} diff --git a/src/layout/collection/MyPortfolioLineChart.jsx b/src/layout/collection/MyPortfolioLineChart.jsx index 53c12f4..866634c 100644 --- a/src/layout/collection/MyPortfolioLineChart.jsx +++ b/src/layout/collection/MyPortfolioLineChart.jsx @@ -67,8 +67,11 @@ const MyResponsiveLine = ({ tickRotation: 0, legend: 'Value ($)', legendOffset: -60, - legendPosition: 'middle', + legendPosition: 'start', + // legendPosition: 'middle', color: text, + min: 'auto', + max: 'auto', format: (value) => `$${value?.toFixed(2)}`, }} margin={{ top: 20, right: 40, bottom: 50, left: 70 }} @@ -81,11 +84,12 @@ const MyResponsiveLine = ({ useUTC: false, }} yScale={{ - type: 'linear', + type: 'linear', // Linear scale will be used for y-axis + // min: 'auto', // Auto-scale will fit values between min and max min: '0', // Explicitly setting minimum to 0, adjust as needed max: 'auto', // Consider setting an explicit max if appropriate stacked: false, // Changed to false unless stacking is needed - reverse: false, + reverse: false, // Reverse the scale if needed }} curve="catmullRom" // This curve type can create smoother, more wavy lines motionConfig="wobbly" // A more dynamic motion configuration @@ -93,7 +97,7 @@ const MyResponsiveLine = ({ stiffness={90} damping={15} enableSlices="x" - // markers={} + markers={validMarkers} layers={[ 'grid', 'markers', @@ -162,15 +166,15 @@ MyResponsiveLine.propTypes = { // handleMouseMove: PropTypes.func.isRequired, // handleMouseLeave: PropTypes.func.isRequired, // tickValues: PropTypes.arrayOf(PropTypes.number).isRequired, - validMarkers: PropTypes.arrayOf( - PropTypes.shape({ - id: PropTypes.string.isRequired, - x: PropTypes.number.isRequired, - y: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, - color: PropTypes.string.isRequired, - }) - ).isRequired, + // validMarkers: PropTypes.arrayOf( + // PropTypes.shape({ + // id: PropTypes.string.isRequired, + // x: PropTypes.number.isRequired, + // y: PropTypes.number.isRequired, + // value: PropTypes.number.isRequired, + // color: PropTypes.string.isRequired, + // }) + // ).isRequired, greenAccent: PropTypes.object.isRequired, redAccent: PropTypes.object.isRequired, diff --git a/src/layout/collection/data/portfolioData.jsx b/src/layout/collection/data/portfolioData.jsx index 7bf9e88..84af718 100644 --- a/src/layout/collection/data/portfolioData.jsx +++ b/src/layout/collection/data/portfolioData.jsx @@ -1,7 +1,7 @@ import React from 'react'; import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import { useSnackbar } from 'notistack'; -import { roundToNearestTenth } from '../../../context/Helpers'; +import { roundToNearestTenth } from 'context/Helpers'; import GenericActionButtons from '../../REUSABLE_COMPONENTS/GenericActionButtons'; // Note: No changes needed for these components const Name = ({ name }) => ( diff --git a/src/layout/collection/statItems/PerformanceStatBox.jsx b/src/layout/collection/statItems/PerformanceStatBox.jsx index b8ad287..7af4545 100644 --- a/src/layout/collection/statItems/PerformanceStatBox.jsx +++ b/src/layout/collection/statItems/PerformanceStatBox.jsx @@ -1,6 +1,6 @@ import { Box } from '@mui/material'; import StatBox from 'REUSABLE_COMPONENTS/StatBox'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import StackedLineChartRoundedIcon from '@mui/icons-material/StackedLineChartRounded'; const PerformanceStatBox = () => { diff --git a/src/layout/collection/statItems/PricedCardList.jsx b/src/layout/collection/statItems/PricedCardList.jsx index 09a66b1..20ebf77 100644 --- a/src/layout/collection/statItems/PricedCardList.jsx +++ b/src/layout/collection/statItems/PricedCardList.jsx @@ -5,8 +5,8 @@ import { DataGrid } from '@mui/x-data-grid'; import prepareTableData from '../data/topCards'; import { useMemo } from 'react'; import { Divider } from '@mui/joy'; -import { useMode } from '../../../context'; -import useManager from '../../../context/useManager'; +import { useMode } from 'context'; +import useManager from 'context/useManager'; const PricedCardList = () => { const { theme } = useMode(); diff --git a/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx b/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx index d504e64..afb66a6 100644 --- a/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx +++ b/src/layout/collection/statItems/TotalCardsCollectedStatBox.jsx @@ -1,8 +1,8 @@ import { Box } from '@mui/material'; import StatBox from '../../REUSABLE_COMPONENTS/layout-utils/StatBox'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import FormatListNumberedRoundedIcon from '@mui/icons-material/FormatListNumberedRounded'; -import useManager from '../../../context/useManager'; +import useManager from 'context/useManager'; const TotalCardsCollectedStatBox = () => { const { theme } = useMode(); const colors = theme.palette.chartTheme; diff --git a/src/layout/collection/statItems/TotalPriceStatBox.jsx b/src/layout/collection/statItems/TotalPriceStatBox.jsx index 8d52a8c..7445c1a 100644 --- a/src/layout/collection/statItems/TotalPriceStatBox.jsx +++ b/src/layout/collection/statItems/TotalPriceStatBox.jsx @@ -1,9 +1,9 @@ import { Box } from '@mui/material'; import StatBox from '../../REUSABLE_COMPONENTS/layout-utils/StatBox'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import MonetizationOnIcon from '@mui/icons-material/MonetizationOn'; -import { roundToNearestTenth } from '../../../context/Helpers'; -import useManager from '../../../context/useManager'; +import { roundToNearestTenth } from 'context/Helpers'; +import useManager from 'context/useManager'; const TotalPriceStatBox = () => { const { theme } = useMode(); const colors = theme.palette.chartTheme; diff --git a/src/layout/collection/statItems/ValuDistributionCircle.jsx b/src/layout/collection/statItems/ValuDistributionCircle.jsx index 71d76ba..948dc99 100644 --- a/src/layout/collection/statItems/ValuDistributionCircle.jsx +++ b/src/layout/collection/statItems/ValuDistributionCircle.jsx @@ -1,7 +1,7 @@ /* eslint-disable max-len */ import React, { useMemo } from 'react'; import { Box, Card, Icon, Typography } from '@mui/material'; -import { useMode } from '../../../context'; +import { useMode } from 'context'; import { PieChart, Pie, @@ -13,7 +13,7 @@ import { import BoxHeader from '../../REUSABLE_COMPONENTS/layout-utils/BoxHeader'; import RCWrappedIcon from '../../REUSABLE_COMPONENTS/RCWRAPPEDICON/RCWrappedIcon'; import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; -import useManager from '../../../context/useManager'; +import useManager from 'context/useManager'; const ValuDistributionCircle = () => { const { theme } = useMode(); diff --git a/src/layout/profile/NotificationSection.js/NotificationList.jsx b/src/layout/profile/NotificationSection.js/NotificationList.jsx index 2ae7e9a..17a3d50 100644 --- a/src/layout/profile/NotificationSection.js/NotificationList.jsx +++ b/src/layout/profile/NotificationSection.js/NotificationList.jsx @@ -16,8 +16,8 @@ import { Stack, Typography, } from '@mui/material'; -import { useMode } from '../../../context'; -import useUserData from '../../../context/MAIN_CONTEXT/UserContext/useUserData'; +import { useMode } from 'context'; +import useUserData from 'context/MAIN_CONTEXT/UserContext/useUserData'; const ListItemWrapper = styled('div')(({ theme }) => ({ cursor: 'pointer', padding: 16, diff --git a/src/layout/profile/NotificationSection.js/index.js b/src/layout/profile/NotificationSection.js/index.js index 7edeb6c..6336aba 100644 --- a/src/layout/profile/NotificationSection.js/index.js +++ b/src/layout/profile/NotificationSection.js/index.js @@ -30,7 +30,7 @@ import Transitions from 'ui-component/extended/Transitions'; import NotificationList from './NotificationList'; // assets -import { IconBell } from '../../../../../node_modules/@tabler/icons-react'; +import { IconBell } from '../../node_modules/@tabler/icons-react'; // notification status options const status = [ diff --git a/src/layout/profile/sub-components/Footer.jsx b/src/layout/profile/sub-components/Footer.jsx index 015e846..02b2b41 100644 --- a/src/layout/profile/sub-components/Footer.jsx +++ b/src/layout/profile/sub-components/Footer.jsx @@ -5,7 +5,7 @@ import Link from '@mui/material/Link'; import Icon from '@mui/material/Icon'; // Material Dashboard 2 React base styles -import typography from '../../../assets/themes/base/typography'; +import typography from 'assets/themes/base/typography'; import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; diff --git a/src/layout/profile/sub-components/Header.jsx b/src/layout/profile/sub-components/Header.jsx index 1e00a5f..720e8be 100644 --- a/src/layout/profile/sub-components/Header.jsx +++ b/src/layout/profile/sub-components/Header.jsx @@ -11,15 +11,15 @@ import Tabs from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; import Icon from '@mui/material/Icon'; // Images -import backgroundImage from '../../../assets/images/bg1.jpg'; -import burceMars from '../../../assets/images/bg1.jpg'; -import { useMode } from '../../../context'; +import backgroundImage from 'assets/images/bg1.jpg'; +import burceMars from 'assets/images/bg1.jpg'; +import { useMode } from 'context'; import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; // import MDAvatar from '../../REUSABLE_COMPONENTS/MDAVATAR'; import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import { Avatar } from '@mui/material'; -import useUserData from '../../../context/MAIN_CONTEXT/UserContext/useUserData'; -import useManageCookies from '../../../context/hooks/useManageCookies'; +import useUserData from 'context/MAIN_CONTEXT/UserContext/useUserData'; +import useManageCookies from 'context/hooks/useManageCookies'; function Header({ children }) { const { theme } = useMode(); diff --git a/src/layout/profile/sub-components/ProfileInfoCard.jsx b/src/layout/profile/sub-components/ProfileInfoCard.jsx index 3c1c66b..6ccbece 100644 --- a/src/layout/profile/sub-components/ProfileInfoCard.jsx +++ b/src/layout/profile/sub-components/ProfileInfoCard.jsx @@ -10,8 +10,8 @@ import Tooltip from '@mui/material/Tooltip'; import Icon from '@mui/material/Icon'; // Material Dashboard 2 React base styles -import colors from '../../../assets/themes/base/colors'; -import typography from '../../../assets/themes/base/typography'; +import colors from 'assets/themes/base/colors'; +import typography from 'assets/themes/base/typography'; import MDBox from '../../REUSABLE_COMPONENTS/MDBOX'; import MDTypography from '../../REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; diff --git a/src/layout/profile/sub-components/profilesListData.jsx b/src/layout/profile/sub-components/profilesListData.jsx index 5ddbbef..a6cadbe 100644 --- a/src/layout/profile/sub-components/profilesListData.jsx +++ b/src/layout/profile/sub-components/profilesListData.jsx @@ -1,9 +1,9 @@ -import marie from '../../../assets/images/bg1.jpg'; -import ivana from '../../../assets/images/bg1.jpg'; -import team3 from '../../../assets/images/bg1.jpg'; -import team4 from '../../../assets/images/bg1.jpg'; +import marie from 'assets/images/bg1.jpg'; +import ivana from 'assets/images/bg1.jpg'; +import team3 from 'assets/images/bg1.jpg'; +import team4 from 'assets/images/bg1.jpg'; -import kal from '../../../assets/images/bg1.jpg'; +import kal from 'assets/images/bg1.jpg'; export default [ { diff --git a/src/pages/HomePage.js b/src/pages/HomePage.js index 6fe8a39..16218af 100644 --- a/src/pages/HomePage.js +++ b/src/pages/HomePage.js @@ -1,6 +1,7 @@ import React from 'react'; import { Grid } from '@mui/material'; -import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +import PageLayout from 'layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; +// import PageLayout from '../layout/REUSABLE_COMPONENTS/layout-utils/PageLayout'; import HeroSection from '../layout/home/HeroSection'; import FeatureCardsSection from '../layout/home/FeatureCardsSection'; diff --git a/src/pages/LoginDialog.jsx b/src/pages/LoginDialog.jsx index 2fbf58c..23ce584 100644 --- a/src/pages/LoginDialog.jsx +++ b/src/pages/LoginDialog.jsx @@ -2,33 +2,30 @@ import React, { useEffect, useState } from 'react'; import { Avatar, Box, - Button, Checkbox, - CircularProgress, CssBaseline, - DialogContent, DialogTitle, Divider, FormControlLabel, Typography, } from '@mui/material'; import LockOutlinedIcon from '@mui/icons-material/LockOutlined'; -import { useMode } from '../context'; -import MDBox from '../layout/REUSABLE_COMPONENTS/MDBOX'; -import MDTypography from '../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; +import { useMode } from 'context'; +import MDBox from 'layout/REUSABLE_COMPONENTS/MDBOX'; +import MDTypography from 'layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography'; import { DialogPaper, StyledDialog, StyledDialogContent, -} from '../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; -import RCSwitch from '../components/forms/Factory/RCSwitch'; +} from 'layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents'; +import RCSwitch from 'components/forms/Factory/RCSwitch'; import LoginIcon from '@mui/icons-material/Login'; import PersonAddIcon from '@mui/icons-material/PersonAdd'; -import useDialogState from '../context/hooks/useDialogState'; -import useManageCookies from '../context/hooks/useManageCookies'; -import { useFormManagement } from '../components/forms/hooks/useFormManagement'; -import { formFields } from '../components/forms/formsConfig'; -import RCDynamicForm from '../components/forms/Factory/RCDynamicForm'; +import useDialogState from 'context/hooks/useDialogState'; +import useManageCookies from 'context/hooks/useManageCookies'; +import { useFormManagement } from 'components/forms/hooks/useFormManagement'; +import { formFields } from 'components/forms/formsConfig'; +import RCDynamicForm from 'components/forms/Factory/RCDynamicForm'; function LoginDialog() { const { theme } = useMode(); const { getCookie } = useManageCookies(); @@ -113,9 +110,7 @@ function LoginDialog() { startIcon: signupMode ? : , }} intialData={{}} - // initialData={formFields[currentSchemaKey]} /> - {/* */} } label="Remember me"