Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Completed styling for the collection selection statboard row as well … #29

Merged
merged 10 commits into from
Mar 27, 2024
Merged

Completed styling for the collection selection statboard row as well … #29

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b9a10c0
Completed styling for the collection selection statboard row as well …
reedoooo Mar 14, 2024
956e873
Completed styling and layout as well as mobile responsive design for …
reedoooo Mar 15, 2024
41513cd
tried various swiper styles and worked on my styled component library
reedoooo Mar 17, 2024
3d26ed3
significant code base clean up
reedoooo Mar 17, 2024
0bca1d9
customizations and tweaks done to swiper in home and data display in …
reedoooo Mar 17, 2024
6fdd2e4
committing near-perfect hero section before modifying mobile styles
reedoooo Mar 19, 2024
f3eca29
hero and navigation edits completed
reedoooo Mar 20, 2024
5d9e7e2
updated deck context to use collection context patterns. Current issu…
reedoooo Mar 20, 2024
f412f60
added some responsive styling and mostly improved communication betwe…
reedoooo Mar 23, 2024
163dd31
Completed Hero and cleaned code base
reedoooo Mar 27, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
"@babel/plugin-proposal-optional-chaining": "^7.21.0",
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@floating-ui/react": "^0.26.9",
"@fortawesome/fontawesome-free": "^6.4.0",
"@hookform/resolvers": "^3.3.4",
"@mui/icons-material": "^5.14.5",
Expand Down Expand Up @@ -57,6 +58,7 @@
"react-table": "^7.8.0",
"react-transition-group": "^4.4.5",
"react-virtualized": "^9.22.5",
"recharts": "^2.12.3",
"sass": "^1.69.7",
"shortid": "^2.2.16",
"slick-carousel": "^1.8.1",
Expand Down
64 changes: 24 additions & 40 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,19 @@ import Main from './Main';
import {
FormProvider,
ModalProvider,
PopoverProvider,
UserProvider,
useMode,
CollectionProvider,
CardProvider,
DeckProvider,
CartProvider,
CardImagesProvider,
ChartProvider,
StatisticsProvider,
SidebarProvider,
AppContextProvider,
useAuthContext,
usePageContext,
ErrorBoundary,
ConfiguratorProvider,
VisibilityProvider,
} from './context';
import { ThemeProvider } from 'styled-components';
import { SnackbarProvider, useSnackbar } from 'notistack';
Expand All @@ -37,14 +33,10 @@ const App = () => {
const navigate = useNavigate();
const { resetLogoutTimer, logout, authUser, userId, isLoggedIn } =
useAuthContext();
const { returnDisplay } = usePageContext();
const { isLoading, isPageLoading, error } = useLoading();

// useEffect(() => {
// if (!isLoggedIn && !isPageLoading) navigate('/login');
// }, [isLoggedIn, navigate, isPageLoading]);
if (isPageLoading || error) {
return returnDisplay();
return <div>Loading...</div>;
}
return (
<ErrorBoundary>
Expand All @@ -53,37 +45,29 @@ const App = () => {
<GlobalStyles />
<ParallaxProvider>
<ConfiguratorProvider>
<VisibilityProvider>
<FormProvider>
<UserProvider>
<ModalProvider>
<SnackbarProvider>
<PopoverProvider>
<CollectionProvider>
<CardProvider>
<DeckProvider>
<CartProvider>
<CardImagesProvider>
<ChartProvider>
<StatisticsProvider>
<SidebarProvider>
<AppContextProvider>
<Main />
</AppContextProvider>
</SidebarProvider>
</StatisticsProvider>
</ChartProvider>
</CardImagesProvider>
</CartProvider>
</DeckProvider>
</CardProvider>
</CollectionProvider>
</PopoverProvider>
</SnackbarProvider>
</ModalProvider>
</UserProvider>
</FormProvider>
</VisibilityProvider>
<FormProvider>
<UserProvider>
<ModalProvider>
<CollectionProvider>
<CardProvider>
<DeckProvider>
<CartProvider>
<ChartProvider>
<StatisticsProvider>
<SidebarProvider>
<AppContextProvider>
<Main />
</AppContextProvider>
</SidebarProvider>
</StatisticsProvider>
</ChartProvider>
</CartProvider>
</DeckProvider>
</CardProvider>
</CollectionProvider>
</ModalProvider>
</UserProvider>
</FormProvider>
</ConfiguratorProvider>
</ParallaxProvider>
</ThemeProvider>
Expand Down
68 changes: 42 additions & 26 deletions src/Main.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
import React, { Suspense, lazy } from 'react';
import { Route, Routes } from 'react-router-dom';
import { useMediaQuery } from '@mui/material';
import PrivateRoute from './components/reusable/PrivateRoute';
import PrivateRoute from './layout/PrivateRoute.jsx';
import LoginDialog from './components/dialogs/LoginDialog';
import { useAuthContext, useConfiguratorContext, useMode } from './context';
import PageLayout from './layout/Containers/PageLayout.jsx';
import PageLayout from './layout/REUSABLE_COMPONENTS/PageLayout.jsx';
import Navigation from './layout/navigation/Navigation.jsx';
import LoadingIndicator from './components/reusable/indicators/LoadingIndicator.js';
import LoadingIndicator from './layout/LoadingIndicator.js';
import Configurator from './layout/REUSABLE_COMPONENTS/Configurator/index.jsx';
import { useCardStoreHook } from './context/hooks/useCardStore.jsx';
import { AppContainer } from './pages/pageStyles/StyledComponents.jsx';
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import LoadingOverlay from './layout/LoadingOverlay.jsx';
import SelectionErrorDialog from './components/dialogs/SelectionErrorDialog.jsx';
import useDialogState from './context/hooks/useDialogState.jsx';
import useSelectedCollection from './context/MAIN_CONTEXT/CollectionContext/useSelectedCollection.jsx';

// Define all routes in a single array including the component name for laziness
const ROUTE_CONFIG = [
{ path: '/', componentName: 'HomePage', isPrivate: false },
{ path: '/home', componentName: 'HomePage', isPrivate: false },
Expand All @@ -29,7 +31,6 @@ const ROUTE_CONFIG = [
{ path: '*', componentName: 'NotFoundPage', isPrivate: false },
];

// Dynamically import page components based on route configuration
const LazyRoute = ({ componentName, ...rest }) => {
const Component = lazy(() => import(`./pages/${componentName}`));
return <Component {...rest} />;
Expand All @@ -39,6 +40,8 @@ const Main = () => {
const isMobileView = useMediaQuery(theme.breakpoints.down('sm'));
const { isLoggedIn } = useAuthContext();
const { isConfiguratorOpen, toggleConfigurator } = useConfiguratorContext();
const { dialogState, openDialog, closeDialog } = useDialogState({});
const { selectedCollection } = useSelectedCollection();
return (
<>
{!isLoggedIn ? (
Expand All @@ -49,27 +52,40 @@ const Main = () => {
backgroundColor: '#3D3D3D',
}}
>
<Navigation isLoggedIn={isLoggedIn} isMobileView={isMobileView} />
<Navigation isLoggedIn={isLoggedIn} />
{isConfiguratorOpen && <Configurator />}
<Suspense fallback={<LoadingIndicator />}>
<Routes>
{ROUTE_CONFIG.map(({ path, componentName, isPrivate }, index) => (
<Route
key={index}
path={path}
element={
isPrivate ? (
<PrivateRoute>
<LazyRoute componentName={componentName} />
</PrivateRoute>
) : (
<LazyRoute componentName={componentName} />
<TransitionGroup component={null} exit={false}>
<CSSTransition key={location.key} classNames="fade" timeout={300}>
<Suspense fallback={<LoadingOverlay />}>
<Routes>
{ROUTE_CONFIG.map(
({ path, componentName, isPrivate }, index) => (
<Route
key={index}
path={path}
element={
isPrivate ? (
<PrivateRoute>
<LazyRoute componentName={componentName} />
</PrivateRoute>
) : (
<LazyRoute componentName={componentName} />
)
}
/>
)
}
/>
))}
</Routes>
</Suspense>
)}
</Routes>
</Suspense>
</CSSTransition>
</TransitionGroup>
{dialogState.isSelectionErrorDialogOpen && (
<SelectionErrorDialog
open={dialogState.isSelectionErrorDialogOpen}
onClose={() => closeDialog('isSelectionErrorDialogOpen')}
selectedValue={selectedCollection?.name}
/>
)}
</PageLayout>
)}
</>
Expand Down
14 changes: 0 additions & 14 deletions src/assets/animations/Cube.jsx
View file
Open in desktop

This file was deleted.

48 changes: 0 additions & 48 deletions src/assets/animations/NavMotion.jsx
View file
Open in desktop

This file was deleted.

28 changes: 0 additions & 28 deletions src/assets/animations/SplashPage3.jsx
View file
Open in desktop

This file was deleted.

54 changes: 0 additions & 54 deletions src/assets/animations/ThreeJsCube.js
View file
Open in desktop

This file was deleted.

Loading
Loading