Skip to content

Commit

Permalink
pretty much rewrote entire contexts
Browse files Browse the repository at this point in the history
  • Loading branch information
@reedoooo
reedoooo committed Oct 27, 2023
1 parent fdb3034 commit 4109ff1
Show file tree
Hide file tree
Showing 24 changed files with 1,209 additions and 940 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@
"react-pro-sidebar": "^1.1.0-alpha.1",
"react-redux": "^8.1.1",
"react-responsive-carousel": "^3.2.23",
"react-router-dom": "^6.14.2",
"react-router-dom": "^6.17.0",
"react-scripts": "5.0.1",
"react-spinners": "^0.13.8",
"react-stripe-checkout": "^2.6.3",
Expand Down
272 changes: 139 additions & 133 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,51 +1,43 @@
// External Imports
import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import styled, { createGlobalStyle } from 'styled-components';

// Component Imports
import Header from './components/headings/header/Header';
import Footer from './components/headings/footer/Footer';
import CartPage from './pages/CartPage';
import DeckBuilderPage from './pages/DeckBuilderPage';
import PrivateRoute from './components/Auth/PrivateRoute';

// Page Imports
import SplashPage from './pages/SplashPage';
import HomePage from './pages/HomePage';
import StorePage from './pages/StorePage';
import CartPage from './pages/CartPage';
import ProfilePage from './pages/ProfilePage';
import CollectionPage from './pages/CollectionPage';
import ThreeJsCube from './pages/ThreeJsCube'; // Import your Three.js component
import DeckBuilderPage from './pages/DeckBuilderPage';
import ThreeJsCube from './pages/ThreeJsCube';
import CardDeckAnimation from './pages/CardDeckAnimation';
import ProfilePage from './pages/ProfilePage';
import styled from 'styled-components';
import { createGlobalStyle } from 'styled-components';

// Context Hooks Imports
import { useCombinedContext } from './context/CombinedProvider';
import { useUserContext } from './context/UserContext/UserContext';
import PrivateRoute from './components/Auth/PrivateRoute';
// import Splash from './pages/Splash';
import { useUtilityContext } from './context/UtilityContext/UtilityContext';

// Styled Components
const AppContainer = styled.div`
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100vw;
${'' /* max-width: 100vw; */}
height: 100vh;
`;

const AppWrapper = styled.div`
flex: 1;
max-width: 100vw;
const GlobalStyle = createGlobalStyle`
/* Your global styles here */
`;

const App = () => {
const { user } = useUserContext();
const [lastCronJobTriggerTime, setLastCronJobTriggerTime] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [snackbarData, setSnackbarData] = useState({
open: false,
message: '',
});
useEffect(() => {
const timer = setTimeout(() => {
setIsLoading(false);
}, 5500);
return () => clearTimeout(timer);
}, []);

// Custom Hook for Cron Job
const useCronJob = (lastCronJobTriggerTime, setLastCronJobTriggerTime) => {
const {
cronData,
handleSendAllCardsInCollections,
Expand All @@ -54,123 +46,137 @@ const App = () => {
retrievedListOfMonitoredCards,
allCollectionsUpdated,
} = useCombinedContext();
const userId = user?.userID;

const handleTriggerCronJob = () => {
// Check if the last cron job trigger was more than 1 minute ago
const currentTime = new Date().getTime();
if (currentTime - lastCronJobTriggerTime >= 60000) {
// Update the last trigger time
setLastCronJobTriggerTime(currentTime);

if (userId && listOfMonitoredCards && retrievedListOfMonitoredCards) {
handleSendAllCardsInCollections(
userId,
listOfMonitoredCards,
retrievedListOfMonitoredCards
);
console.log('SENDING ALL CARDS IN COLLECTIONS');
} else if (
userId &&
listOfMonitoredCards &&
!retrievedListOfMonitoredCards
) {
console.log('RETRIEVING LIST OF MONITORED CARDS');
handleSendAllCardsInCollections(
userId,
listOfMonitoredCards,
handleRetreiveListOfMonitoredCards()
);
console.log('Triggered the cron job.');
}
}
};
const { user } = useUserContext();
const userId = user?.userID;

useEffect(() => {
setLastCronJobTriggerTime(new Date().getTime());
}, []);
}, [setLastCronJobTriggerTime]);

useEffect(() => {
const interval = setInterval(() => {
handleTriggerCronJob();
}, 60000);
const handleTriggerCronJob = () => {
const currentTime = new Date().getTime();
if (currentTime - lastCronJobTriggerTime >= 60000) {
setLastCronJobTriggerTime(currentTime);
if (userId && listOfMonitoredCards && retrievedListOfMonitoredCards) {
handleSendAllCardsInCollections(
userId,
listOfMonitoredCards,
retrievedListOfMonitoredCards
);
console.log('SENDING ALL CARDS IN COLLECTIONS');
} else if (userId && listOfMonitoredCards) {
console.log('RETRIEVING LIST OF MONITORED CARDS');
handleSendAllCardsInCollections(
userId,
listOfMonitoredCards,
handleRetreiveListOfMonitoredCards()
);
console.log('Triggered the cron job.');
}
}
};

const interval = setInterval(handleTriggerCronJob, 60000);
return () => clearInterval(interval);
}, [cronData, lastCronJobTriggerTime, allCollectionsUpdated]);
}, [
cronData,
lastCronJobTriggerTime,
allCollectionsUpdated,
handleRetreiveListOfMonitoredCards,
handleSendAllCardsInCollections,
listOfMonitoredCards,
retrievedListOfMonitoredCards,
userId,
]);
};

// Main Component
const App = () => {
const [lastCronJobTriggerTime, setLastCronJobTriggerTime] = useState(null);
const { isLoading, setIsContextLoading } = useUtilityContext();

useEffect(() => {
if (!isLoading) {
setIsContextLoading(false);
}
}, [isLoading, setIsContextLoading]);

useEffect(() => {
const timer = setTimeout(() => {
setIsContextLoading(false);
}, 5500);
return () => clearTimeout(timer);
}, [setIsContextLoading]);

useCronJob(lastCronJobTriggerTime, setLastCronJobTriggerTime);

return (
<>
<GlobalStyle />
<Helmet>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
rel="stylesheet"
/>
</Helmet>
{isLoading ? (
<div>
{/* <Splash /> */}
<CardDeckAnimation />
</div>
<SplashPage />
) : (
<>
<Router>
<Helmet>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin
<Router>
<AppContainer>
<Header />
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/home" element={<HomePage />} />
<Route path="/store" element={<StorePage />} />
<Route
path="/cart"
element={
<PrivateRoute>
<CartPage />
</PrivateRoute>
}
/>
<Route
path="/userprofile"
element={
<PrivateRoute>
<ProfilePage />
</PrivateRoute>
}
/>
<Route
path="/collection"
element={
<PrivateRoute>
<CollectionPage />
</PrivateRoute>
}
/>
<link
href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap"
rel="stylesheet"
<Route
path="/deckbuilder"
element={
<PrivateRoute>
<DeckBuilderPage />
</PrivateRoute>
}
/>
</Helmet>
<AppContainer>
<Header />
<AppWrapper>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route exact path="/home" element={<HomePage />} />
<Route exact path="/store" element={<StorePage />} />
<Route
path="/cart"
element={
<PrivateRoute>
<CartPage />
</PrivateRoute>
}
/>
<Route
path="/userprofile"
element={
<PrivateRoute>
<ProfilePage />
</PrivateRoute>
}
/>
<Route
path="/collection"
element={
<PrivateRoute>
<CollectionPage />
</PrivateRoute>
}
/>
<Route
path="/deckbuilder"
element={
<PrivateRoute>
<DeckBuilderPage />
</PrivateRoute>
}
/>
<Route exact path="/profile" element={<ProfilePage />} />
<Route exact path="/threejs" element={<ThreeJsCube />} />
<Route
exact
path="/cardDeck"
element={<CardDeckAnimation />}
/>
</Routes>
</AppWrapper>
<Footer />
</AppContainer>
</Router>
</>
<Route path="/profile" element={<ProfilePage />} />
<Route path="/threejs" element={<ThreeJsCube />} />
<Route path="/cardDeck" element={<CardDeckAnimation />} />
{/* Add a Route for 404 Not Found page if needed */}
</Routes>
<Footer />
</AppContainer>
</Router>
)}
</>
);
Expand Down
13 changes: 13 additions & 0 deletions src/AppWrapper.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
// import React from 'react';
// import { BrowserRouter as Router } from 'react-router-dom';
// import App from './App';

// const AppWrapper = () => {
// return (
// <Router>
// <App />
// </Router>
// );
// };

// export default AppWrapper;
20 changes: 6 additions & 14 deletions src/components/Auth/auth.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,16 @@
import { useContext, memo } from 'react';
import { Routes, Route } from 'react-router-dom';
import { AuthContext } from '../../context/Auth/authContext';
import CartPage from '../../pages/CartPage';
import ProfilePage from '../../pages/ProfilePage';
import CollectionPage from '../../pages/CollectionPage';
import DeckBuilderPage from '../../pages/DeckBuilderPage';

function Auth({ children, capability }) {
const authContext = useContext(AuthContext);
const isloggedin = authContext.isloggedin;
// const canDo = authContext.can(capability) ? true : false;
function Auth({ children }) {
const { isloggedin, user, can } = useContext(AuthContext);

console.log('isloggedin', isloggedin);
// console.log('canDo', canDo);
console.log('capability', capability);
console.log('user', user);

return isloggedin ? (
<Routes>
{/* <Route exact path="/cart" element={<CartPage />} />
<Route exact path="/userprofile" element={<ProfilePage />} />
<Route exact path="/collection" element={<CollectionPage />} />
<Route exact path="/deckbuilder" element={<DeckBuilderPage />} /> */}
{/* {can('admin') && <Route exact path="/admin" element={<AdminPage />} />} */}
{children}
</Routes>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/components/buttons/actionButtons/ChooseCollectionDialog.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const ChooseCollectionDialog = ({ onSave, isOpen, onClose }) => {
}

return (
<Dialog open={isOpen} onClose={onClose}>
<Dialog open={false} onClose={onClose}>
<DialogTitle>Select a Collection</DialogTitle>

<List className={classes.list}>
Expand Down
2 changes: 1 addition & 1 deletion src/components/cards/GenericCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ const GenericCard = ({
aria-label="outlined primary button group"
// fullWidth={true}//
display="flex"
maxWidth="110px"
// maxWidth="110px"
margin="0"
padding="0"
left="0"
Expand Down
Loading

0 comments on commit 4109ff1

Please sign in to comment.