Refactor and Optimize Card Management Components and Contexts

- Updated CardMediaAndDetails component to fetch and display card images. - Enhanced CardContext with PATCH request logic to update missing card data from YGOPRO API. - Implemented constructCardDifferencesPayload function for efficiently tracking card updates within collections. - Modified CartContext to prevent infinite loops and optimized state management. - Fixed server-side routes for card information retrieval and PATCH updates, ensuring proper data fetching and error handling. - Streamlined useEffect dependencies in various components to enhance performance and prevent redundant renders.
reedoooo · Dec 2, 2023 · e701a60 · e701a60
1 parent 29b2ef0
commit e701a60
Show file tree

Hide file tree

Showing 81 changed files with 2,553 additions and 1,303 deletions.
diff --git a/README.md b/README.md
@@ -94,11 +94,12 @@ Reed Vogt -
 <img src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.flaticon.com%2Ffree-icon%2Flinkedin_174857&psig=AOvVaw1F9U7jlNJPTJpYUU2wdKLW&ust=1691527142102000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCPjpk-Wzy4ADFQAAAAAdAAAAABAJ" alt="LinkedIn" style="width:24px;height:24px;">
 </a>
 
-Project Site: https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/
+Project Site: <https://65624888827a3700084a3478--enhanced-cardstore.netlify.app/>
 
-Project Repo: https://github.com/reedoooo/enhanced-card-store#readme
+Project Repo: <https://github.com/reedoooo/enhanced-card-store#readme>
 
 ## Acknowledgements
 
 - [React](https://reactjs.org/)
 - [Stripe](https://stripe.com/)
+- [Convertio](https://convertio.co/download/bde422f6082917756106e52b556e7245cfcfbe/)
diff --git a/package.json b/package.json
@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.21.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@fortawesome/fontawesome-free": "^6.4.0",
@@ -23,6 +24,7 @@
     "dayjs": "^1.11.9",
     "image-downloader": "^4.3.0",
     "jwt-decode": "^3.1.2",
+    "lodash": "^4.17.21",
     "material-ui-image": "^3.3.2",
     "moment": "^2.29.4",
     "react": "^17.0.2",

diff --git a/src/App.js b/src/App.js
@@ -1,143 +1,127 @@
-// External Imports
-import React, { useContext, useEffect, useRef, useState } from 'react';
+// Note: Main App Component
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
+import { debounce } from 'lodash';
 
 // Component Imports
 import Header from './components/headings/header/Header';
-import Footer from './components/headings/footer/Footer';
 import PrivateRoute from './components/reusable/PrivateRoute';
+import LoginDialog from './components/dialogs/LoginDialog';
+// import Footer from './components/headings/footer/Footer';
 
 // 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 DeckBuilderPage from './pages/DeckBuilderPage';
-import ThreeJsCube from './assets/animations/ThreeJsCube';
-import CardDeckAnimation from './assets/animations/CardDeckAnimation';
+import {
+  SplashPage,
+  HomePage,
+  StorePage,
+  CartPage,
+  ProfilePage,
+  CollectionPage,
+  DeckBuilderPage,
+  // ThreeJsCube,
+  // CardDeckAnimation,
+  NotFoundPage,
+} from './pages';
 
-// Context Hooks Imports
-import { useUserContext } from './context/UserContext/UserContext';
-import { useCollectionStore } from './context/CollectionContext/CollectionContext';
-import { useUtilityContext } from './context/UtilityContext/UtilityContext';
+import {
+  useUserContext,
+  useCollectionStore,
+  useUtilityContext,
+  useDeckStore,
+  useCartStore,
+  useCardImages,
+  useAuthContext,
+  usePageContext,
+} from './context';
 import { AppContainer } from './pages/pageStyles/StyledComponents';
-import { useCardImages } from './context/CardImagesContext/CardImagesContext';
-import { useCookies } from 'react-cookie';
-import { useDeckStore } from './context/DeckContext/DeckContext';
-import { useCartStore } from './context/CartContext/CartContext';
-import LoginDialog from './components/dialogs/LoginDialog';
-const App = () => {
-  // const { getRandomCardImages } = useCardImages(); // Add this line
-  // const [cookies] = useCookies(['user']);
 
-  // const user = cookies?.user;
-  // const userId = user?.id;
-  const [currentPage, setCurrentPage] = useState('');
+const App = () => {
   const { fetchAllCollectionsForUser, selectedCollection } =
     useCollectionStore();
-  const { user, fetchUser } = useUserContext();
+  const { fetchAllDecksForUser, selectedDeck } = useDeckStore();
+  const { fetchUserCart } = useCartStore();
+  const { user } = useUserContext();
+  const { logout } = useAuthContext();
+  const { isLoading, setIsLoading } = useUtilityContext();
+  const { isPageLoading, setIsPageLoading } = usePageContext();
   const userId = user?.id;
-  const [showLoginDialog, setShowLoginDialog] = useState(false);
+  const [showLoginDialog, setShowLoginDialog] = useState(!userId);
+  const logoutTimerRef = useRef(null);
 
-  const { allDecks, fetchAllDecksForUser, selectedDeck } = useDeckStore();
-  const { fetchUserCart, cartData } = useCartStore();
-  const { isLoading, setIsLoading } = useUtilityContext();
+  const handleUserActivity = debounce(() => {
+    if (logoutTimerRef.current) clearTimeout(logoutTimerRef.current);
+    logoutTimerRef.current = setTimeout(logout, 1800000); // 30 minutes
+  }, 500);
+
+  const debouncedLogout = useCallback(
+    debounce(() => {
+      if (logoutTimerRef.current) {
+        clearTimeout(logoutTimerRef.current);
+      }
+      logoutTimerRef.current = setTimeout(logout, 1800000); // 30 minutes
+    }, 500),
+    [logout] // Dependency for useCallback
+  );
+
+  // Call this function to reset the logout timer
+  const resetLogoutTimer = useCallback(() => {
+    debouncedLogout();
+  }, [debouncedLogout]);
 
-  // useEffect(() => {
-  //   getRandomCardImages(10); // Fetch 10 random images on app start
-  // }, []); // Add this useEffect
   const handleLoginSuccess = (isLoggedIn, userId) => {
     setShowLoginDialog(false);
+    setIsPageLoading(false);
     setIsLoading(false);
+    if (isLoggedIn && userId) {
+      resetLogoutTimer();
+    }
   };
 
   useEffect(() => {
-    if (!userId || typeof userId !== 'string') {
-      // Invalid or missing userId, show login dialog and hide splash page
-      setShowLoginDialog(true);
-      setIsLoading(false);
-    } else {
-      // Valid userId, hide login dialog and splash page
-      setShowLoginDialog(false);
-      setIsLoading(false);
+    // Set up event listeners for user activity
+    if (userId) {
+      window.addEventListener('mousemove', resetLogoutTimer);
+      window.addEventListener('keypress', resetLogoutTimer);
     }
-  }, [userId]);
 
-  useEffect(() => {
-    if (userId && typeof userId === 'string') {
-      fetchAllCollectionsForUser()
-        .then(() => {
-          setIsLoading(false);
-        })
-        .catch((error) => {
-          console.error('Error fetching collections:', error);
-          setIsLoading(false);
-        });
-    }
-  }, [userId, fetchAllCollectionsForUser, setIsLoading, selectedCollection]);
-  useEffect(() => {
-    if (userId && typeof userId === 'string') {
-      fetchAllDecksForUser()
-        .then(() => {
-          setIsLoading(false);
-        })
-        .catch((error) => console.error('Error fetching decks:', error));
-      setIsLoading(false);
-    }
-  }, [userId, fetchAllDecksForUser, selectedDeck, setIsLoading]);
-  useEffect(() => {
-    console.log('Checking userId in useEffect:', userId);
-    setShowLoginDialog(!userId);
-  }, [userId]);
-  // useEffect(() => {
-  //   if (userId && typeof userId === 'string') {
-  //     fetchUserCart()
-  //       .then(() => {
-  //         setIsLoading(false);
-  //       })
-  //       .catch((error) => console.error('Error fetching cart:', error));
-  //   }
-  // }, [userId, fetchUserCart, cartData, setIsLoading]);
+    // Clean up event listeners
+    return () => {
+      window.removeEventListener('mousemove', resetLogoutTimer);
+      window.removeEventListener('keypress', resetLogoutTimer);
+      if (logoutTimerRef.current) {
+        clearTimeout(logoutTimerRef.current);
+      }
+    };
+  }, [userId, resetLogoutTimer]);
 
-  // Handle initial loading state
   useEffect(() => {
-    if (!isLoading) {
-      setIsLoading(false);
+    if (userId) {
+      Promise.all([
+        fetchAllCollectionsForUser(),
+        fetchAllDecksForUser(),
+        // fetchUserCart(),
+      ])
+        .catch((error) => console.error('Error fetching data:', error))
+        .finally(() => setIsLoading(false) && setIsPageLoading(false));
     }
-  }, [isLoading, setIsLoading]);
+  }, [userId, fetchAllCollectionsForUser, fetchAllDecksForUser, fetchUserCart]);
 
   return (
     <>
-      <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 ? (
+      <Helmet>{/* Helmet Configuration */}</Helmet>
+      {isLoading || isPageLoading ? (
         <SplashPage />
       ) : (
-        <React.Fragment>
+        <>
           <LoginDialog
             open={showLoginDialog}
             onClose={() => setShowLoginDialog(false)}
             onLogin={handleLoginSuccess}
           />
-
           <AppContainer>
             <Header />
             <Routes>
-              {/* {setCurrentPage(useLocation())} */}
-
               <Route path="/" element={<HomePage />} />
               <Route path="/home" element={<HomePage />} />
               <Route path="/store" element={<StorePage />} />
@@ -174,13 +158,14 @@ const App = () => {
                 }
               />
               <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 */}
+              {/* <Route path="/threejs" element={<ThreeJsCube />} /> */}
+              {/* <Route path="/cardDeck" element={<CardDeckAnimation />} /> */}
+              <Route path="*" element={<NotFoundPage />} />{' '}
+              {/* 404 Not Found Route */}
             </Routes>
             {/* <Footer /> */}
           </AppContainer>
-        </React.Fragment>
+        </>
       )}
     </>
   );

diff --git a/src/assets/deckIcon2.svg b/src/assets/deckIcon2.svg
diff --git a/src/assets/themeSettings.jsx b/src/assets/themeSettings.jsx
@@ -73,7 +73,9 @@ export const themeSettings = (mode) => {
         evenLighter: colors.greenAccent[300],
         main: colors.greenAccent[500],
         dark: colors.greenAccent[200],
+        darker: colors.greenAccent[600],
         contrastText: '#fff',
+        hoverContrastText: '#111',
       },
       info: {
         main: colors.blueAccent[500],
@@ -134,6 +136,7 @@ export const themeSettings = (mode) => {
     spacing: (factor) => `${0.25 * factor}rem`,
     shape: {
       borderRadius: 4,
+      borderRadiusLarge: 8,
     },
     action: {
       hover: mode === 'dark' ? colors.grey[800] : colors.grey[200],