Coherence updates with backend logic enhancements

package.json

@@ -44,6 +44,7 @@
     "react-cookie": "^4.1.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^17.0.0 || ^18.0.0",
+    "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.50.0",
     "react-icons": "^4.10.1",

src/assets/themes/components/forms/switchButton.jsx

@@ -16,6 +16,7 @@ const {
   grey,
   gradients,
   transparent,
+  chartTheme,
 } = colors;
 const { borderWidth } = borders;
 const { md } = boxShadows;
@@ -26,7 +27,7 @@ export default {
   },
   styleOverrides: {
     switchBase: {
-      color: gradients.success.state,
+      color: chartTheme.greenAccent.default,
 
       '&:hover': {
         backgroundColor: transparent.main,
@@ -41,7 +42,7 @@ export default {
 
         '& .MuiSwitch-thumb': {
           borderColor: `${gradients.success.state} !important`,
-          backgroundColor: `${gradients.success.main} !important`,
+          backgroundColor: `${chartTheme.greenAccent.light} !important`,
         },
 
         '& + .MuiSwitch-track': {
@@ -63,7 +64,7 @@ export default {
       },
     },
     thumb: {
-      backgroundColor: success.main,
+      backgroundColor: chartTheme.greenAccent.dark,
       boxShadow: md,
       border: `${borderWidth[1]} solid ${grey.light}`,
     },

src/components/cards/CardDetailsContainer.jsx

@@ -68,6 +68,14 @@ const inventoryDetails = [
   { title: 'Collection', key: 'collection' },
   { title: 'Cart', key: 'cart' },
 ];
+const CardDetailChip = styled(Chip)(({ theme }) => ({
+  borderWidth: '2px',
+  fontWeight: 700,
+  margin: theme.spacing(0.5),
+  [theme.breakpoints.down('sm')]: {
+    fontSize: theme.typography.pxToRem(12), // Smaller font size on small devices
+  },
+}));
 const CardDetailTitle = ({ title }) => (
   <Typography variant="h5" sx={{ mr: 1 }}>
     {title}:
@@ -84,9 +92,12 @@ const CardDetailPrice = ({ value }) => (
   </MDTypography>
 );
 const CardDetailRarity = ({ values, onRarityClick }) => {
+  const { theme } = useMode();
+
   return values?.map((rarity, index) => (
-    <Chip
+    <CardDetailChip
       key={index}
+      theme={theme}
       // label={`${rarity.name}: ${rarity.value}`}
       label={`${rarity.value}`}
       onClick={() => onRarityClick(rarity.name)}
@@ -100,9 +111,12 @@ const CardDetailRarity = ({ values, onRarityClick }) => {
   ));
 };
 const CardDetailSet = ({ values }) => {
+  const { theme } = useMode();
+
   return values?.map((set, index) => (
-    <Chip
+    <CardDetailChip
       key={index}
+      theme={theme}
       label={`${set.value}`}
       onClick={() => console.log(set.toString())}
       sx={{
@@ -136,8 +150,10 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => {
       {details?.map((detail, index) => (
         <Grid item xs={12} sm={6} md={4} key={index}>
           <Card sx={{ p: theme.spacing(2) }}>
-            <MDBox>
-              <CardDetailTitle title={detail.title} />
+            <MDBox sx={{ border: 'none' }}>
+              <Typography variant="h6">{detail.title}:</Typography>
+              {detail.key === 'title' && <CardDetailTitle value={card?.name} />}
+
               <Divider />
               {detail.key === 'desc' && (
                 <CardDetailDescription value={card?.desc} />

src/components/forms/Factory/RCDynamicForm.jsx

@@ -5,7 +5,6 @@ import { RCFieldError } from './RCFieldError';
 import RCInput from './RCInput';
 import { Controller } from 'react-hook-form';
 import useRCFormHook from '../hooks/useRCFormHook';
-import ReusableLoadingButton from '../../buttons/other/ReusableLoadingButton';
 import {
   FormBox,
   FormFieldBox,
@@ -24,6 +23,7 @@ import {
 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';
 
 const RCDynamicForm = ({
   formKey,
@@ -178,7 +178,7 @@ const RCDynamicForm = ({
           // color={button.color}
           variant="warning"
           fullWidth
-          sx={{ mt: 2, background: theme.palette.error.main }}
+          sx={{ mt: 2.2, background: theme.palette.error.main }}
         />
       )}
     </FormBox>

src/components/forms/hooks/useRCFormHook.jsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react';
 import { formFields, zodSchemas } from '../formsConfig';
 
 const useRCFormHook = (schemaKey, initialData) => {
-  console.log('SCHEMA KEY', schemaKey);
+  // console.log('SCHEMA KEY', schemaKey);
   const schema = zodSchemas[schemaKey];
   const defaultValues = Object.keys(schema.shape).reduce((acc, key) => {
     const fieldDefinition = schema.shape[key];

src/context/MAIN_CONTEXT/AuthContext/useAuthManager.jsx

@@ -1,25 +1,26 @@
 import { useCallback, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import jwt_decode from 'jwt-decode';
+import jwtDecode from 'jwt-decode';
 import useFetchWrapper from '../../hooks/useFetchWrapper';
 import useManageCookies from '../../hooks/useManageCookies';
 import useUserData from '../UserContext/useUserData';
 
 function useAuthManager() {
   const navigate = useNavigate();
   const { addCookies, getCookie, deleteCookies } = useManageCookies();
-  const { authUser, isLoggedIn, accessToken } = getCookie([
+  const { authUser, isLoggedIn, accessToken, refreshToken } = getCookie([
     'authUser',
     'isLoggedIn',
     'accessToken',
+    'refreshToken',
   ]);
   const { handleSetUser } = useUserData();
   const { fetchWrapper } = useFetchWrapper();
 
   const setAuthCookies = useCallback(
     (data) => {
       const { accessToken, refreshToken } = data;
-      const authData = jwt_decode(accessToken);
+      const authData = jwtDecode(accessToken);
       addCookies(
         ['accessToken', 'refreshToken', 'isLoggedIn', 'authUser', 'userId'],
         [accessToken, refreshToken, true, authData, authData.userId],
@@ -39,27 +40,30 @@ function useAuthManager() {
       'authUser',
       'isLoggedIn',
     ]);
+    localStorage.clear(); // Clear all local storage data
+
     navigate('/login');
-  }, []);
+  }, [navigate, deleteCookies]);
 
   const decodeAndSetUser = useCallback(
     (accessToken) => {
-      const decoded = jwt_decode(accessToken);
+      const decoded = jwtDecode(accessToken);
       handleSetUser(decoded); // Adjust according to your implementation
     },
     [handleSetUser]
   );
 
   const executeAuthAction = useCallback(
-    async (actionType, url, requestData) => {
+    async (endpoint, requestData) => {
       try {
         const responseData = await fetchWrapper(
-          `${process.env.REACT_APP_SERVER}/api/users/${url}`,
+          `${process.env.REACT_APP_SERVER}/api/users/${endpoint}`,
           'POST',
           requestData,
-          `${url}`
+          `${endpoint}`
         );
         if (!responseData?.data) throw new Error('Invalid response structure');
+        console.log(responseData);
         setAuthCookies(responseData.data);
       } catch (error) {
         console.error('Auth action error:', error);
@@ -71,7 +75,7 @@ function useAuthManager() {
   const login = useCallback(
     async (formData) => {
       const { username, password } = formData;
-      await executeAuthAction('login', 'signin', {
+      await executeAuthAction('signin', {
         userSecurityData: { username, password },
       });
     },
@@ -81,14 +85,19 @@ function useAuthManager() {
   const signup = useCallback(
     async (formData) => {
       const { username, password, firstName, lastName, email } = formData;
-      await executeAuthAction('signup', 'signup', {
+      await executeAuthAction('signup', {
         userSecurityData: { firstName, lastName, username, password, email },
       });
     },
     [executeAuthAction]
   );
 
-  const logout = useCallback(() => {
+  const logout = useCallback(async () => {
+    await executeAuthAction('signout', {
+      userId: authUser.userId,
+      accessToken: accessToken,
+      refreshToken: refreshToken,
+    });
     clearAuthCookies();
   }, []);
 

src/context/MAIN_CONTEXT/CartContext/useCartManager.jsx

@@ -108,7 +108,7 @@ export const useCartManager = () => {
             cartUpdates: updatedCards,
             method: 'PUT',
             type: 'increment',
-          }.cartUpdates,
+          },
           'addCardsToCart'
         );
         updateCartLocally(response?.data);
@@ -176,9 +176,9 @@ export const useCartManager = () => {
   // useEffect(() => {
   //   updateCartLocally(defaultCart);
   // }, []);
-  useEffect(() => {
-    fetchUserCart();
-  }, []);
+  // useEffect(() => {
+  //   fetchUserCart();
+  // }, []);
 
   // Calculate totals, quantities using useMemo for performance
   const totalCost = useMemo(

src/context/MAIN_CONTEXT/CollectionContext/useCollectionManager.jsx

@@ -114,7 +114,7 @@ const useCollectionManager = () => {
           actionName !== 'deleteCardFromCollection' &&
           actionName !== 'deleteCollection'
         ) {
-          await fetchCollections(); // Refresh collections after any action
+          await fetchCollections(actionName, response?.data?._id); // Refresh collections after any action
           console.log('RESPONSE: ', response);
           // refreshCollections(response?.data);
         } else if (actionName === 'deleteCollection') {
@@ -128,7 +128,7 @@ const useCollectionManager = () => {
             response?.data?.collectionId,
             response?.data?.newQuantity
           );
-          await fetchCollections(); // Refresh collections after any action
+          await fetchCollections(actionName, response?.data?.collectionId); // Refresh collections after any action
         }
       } catch (error) {
         handleError(error, actionName);

src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx

@@ -82,7 +82,6 @@ const useDeckManager = () => {
     performFetchAndUpdate('allDecks', 'GET', null, 'fetchDecks');
     setHasFetchedDecks(true);
   }, [performFetchAndUpdate]);
-
   const createNewDeck = (deckData) =>
     performFetchAndUpdate('create', 'POST', deckData, 'createNewDeck');
 
@@ -98,7 +97,6 @@ const useDeckManager = () => {
     // removeDeck(deckId); // Optimistically remove the deck first for instant UI feedback
     performFetchAndUpdate(`${deckId}/delete`, 'DELETE', {}, 'deleteDeck');
   };
-
   const addCardsToDeck = (newCards, deckId) => {
     // INCREASE QTY OF CARDS IN DECK BY 1
     // newCards.quantity = newCards.quantity + 1;
@@ -132,6 +130,7 @@ const useDeckManager = () => {
     handleError,
     addCardsToDeck,
     removeCardsFromDeck,
+    loading: status === 'loading' ? true : false,
     addOneToDeck: (cards, deck) => addCardsToDeck(cards, deck),
     removeOneFromDeck: (cards, deck) => removeCardsFromDeck(cards, deck),
     updateDeckDetails,

src/context/hooks/useEventHandlers.jsx

@@ -10,7 +10,7 @@ export const useEventHandlers = () => {
   const handleMouseMove = useCallback(
     (point) => {
       debouncedSetHoveredData(
-        point ? { x: point?.data?.x, y: point?.data?.y } : null
+        point ? { x: point?.x, y: point?.y, id: point?.id } : null
       );
     },
     [debouncedSetHoveredData]