Merge pull request #7 from reedoooo/dev11

package.json

@@ -8,8 +8,9 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@mui/icons-material": "^5.14.1",
     "@mui/material": "^5.14.1",
-    "@mui/styles": "^5.14.1",
+    "@mui/styles": "^5.14.13",
     "@mui/system": "^5.14.1",
+    "@mui/x-data-grid": "^6.16.2",
     "@mui/x-date-pickers": "^6.10.1",
     "@nivo/line": "^0.83.0",
     "@stripe/react-stripe-js": "^2.1.1",
@@ -32,9 +33,10 @@
     "react-helmet": "^6.1.0",
     "react-icons": "^4.10.1",
     "react-if": "^4.1.5",
+    "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",

src/App.js

@@ -1,77 +1,184 @@
+// 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 { ThemeProvider } from '@mui/material/styles';
+import styled, { createGlobalStyle } from 'styled-components';
+
+// Component Imports
 import Header from './components/headings/header/Header';
 import Footer from './components/headings/footer/Footer';
-import theme from './assets/styles/themes';
-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 CollectionPage from './pages/CollectionPage';
-import ThreeJsCube from './ThreeJsCube'; // Import your Three.js component
-import CardDeckAnimation from './CardDeckAnimation';
+import CartPage from './pages/CartPage';
 import ProfilePage from './pages/ProfilePage';
-import styled from 'styled-components';
-import { createGlobalStyle } from 'styled-components';
+import CollectionPage from './pages/CollectionPage';
+import DeckBuilderPage from './pages/DeckBuilderPage';
+import ThreeJsCube from './pages/ThreeJsCube';
+import CardDeckAnimation from './pages/CardDeckAnimation';
 
-const GlobalStyle = createGlobalStyle`
-  * {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-  }
-`;
+// Context Hooks Imports
+import { useCombinedContext } from './context/CombinedProvider';
+import { useUserContext } from './context/UserContext/UserContext';
+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 */
 `;
 
+// Custom Hook for Cron Job
+const useCronJob = (lastCronJobTriggerTime, setLastCronJobTriggerTime) => {
+  const {
+    cronData,
+    handleSendAllCardsInCollections,
+    listOfMonitoredCards,
+    handleRetreiveListOfMonitoredCards,
+    retrievedListOfMonitoredCards,
+    allCollectionsUpdated,
+  } = useCombinedContext();
+
+  const { user } = useUserContext();
+  const userId = user?.userID;
+
+  useEffect(() => {
+    setLastCronJobTriggerTime(new Date().getTime());
+  }, [setLastCronJobTriggerTime]);
+
+  useEffect(() => {
+    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,
+    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 (
-    <Router>
+    <>
+      <GlobalStyle />
       <Helmet>
         <link rel="preconnect" href="https://fonts.googleapis.com" />
-        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin />
+        <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>
-      {/* <ThemeProvider theme={theme}> */}
-      <AppContainer>
-        <Header />
-        <AppWrapper>
-          {/* <MainContent> */}
-          <Routes>
-            <Route exact path="/" element={<HomePage />} />
-            <Route exact path="/home" element={<HomePage />} />
-            <Route exact path="/store" element={<StorePage />} />
-            <Route exact path="/cart" element={<CartPage />} />
-            <Route exact path="/collection" element={<CollectionPage />} />
-            <Route exact path="/deckbuilder" element={<DeckBuilderPage />} />
-            <Route exact path="/profile" element={<ProfilePage />} />
-            <Route exact path="/userprofile" element={<ProfilePage />} />
-            {/* Add your Three.js cube component */}
-            <Route exact path="/threejs" element={<ThreeJsCube />} />
-            <Route exact path="/cardDeck" element={<CardDeckAnimation />} />
-          </Routes>
-          {/* </MainContent> */}
-        </AppWrapper>
-        <Footer />
-      </AppContainer>
-      {/* </ThemeProvider> */}
-    </Router>
+      {isLoading ? (
+        <SplashPage />
+      ) : (
+        <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>
+                }
+              />
+              <Route
+                path="/deckbuilder"
+                element={
+                  <PrivateRoute>
+                    <DeckBuilderPage />
+                  </PrivateRoute>
+                }
+              />
+              <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>
+      )}
+    </>
   );
 };
 

src/AppWrapper.jsx

@@ -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;