add

.github/workflows/main.yml

@@ -0,0 +1,37 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: '18.16.0'
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build
+
+      - name: Install Netlify CLI
+        run: npm install netlify-cli -g
+
+      - name: Deploy to Netlify
+        run: npx netlify deploy --dir=src --prod
+        env:
+          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
+          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}

src/App.js

@@ -26,6 +26,8 @@ import { useUtilityContext } from './context/UtilityContext/UtilityContext';
 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';
 const App = () => {
   const [cookies] = useCookies(['user']);
 
@@ -34,6 +36,8 @@ const App = () => {
   // const { setContext } = useAppContext(); // Assuming useAppContext provides setContext
   const { fetchAllCollectionsForUser, selectedCollection } =
     useCollectionStore();
+  const { allDecks, fetchAllDecksForUser, selectedDeck } = useDeckStore();
+  const { fetchUserCart, cartData } = useCartStore();
   const { isLoading, setIsLoading } = useUtilityContext();
 
   // const { getRandomCardImages } = useCardImages(); // Add this line
@@ -44,7 +48,7 @@ const App = () => {
 
   useEffect(() => {
     if (user) {
-      fetchAllCollectionsForUser(user.id)
+      fetchAllCollectionsForUser()
         .then(() => {
           setIsLoading(false);
         })
@@ -54,6 +58,20 @@ const App = () => {
         });
     }
   }, [user, fetchAllCollectionsForUser, setIsLoading, selectedCollection]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchAllDecksForUser(user?.id).catch((err) =>
+  //       console.error('Failed to get all decks:', err)
+  //     );
+  //   }
+  // }, [fetchAllDecksForUser]);
+  // useEffect(() => {
+  //   if (user) {
+  //     fetchUserCart(user?.id).catch((err) =>
+  //       console.error('Failed to get cart:', err)
+  //     );
+  //   }
+  // }, [fetchUserCart]);
 
   // Handle initial loading state
   useEffect(() => {
@@ -79,7 +97,7 @@ const App = () => {
       {isLoading ? (
         <SplashPage />
       ) : (
-        <Router>
+        <React.Fragment>
           <AppContainer>
             <Header />
             <Routes>
@@ -127,7 +145,7 @@ const App = () => {
             </Routes>
             <Footer />
           </AppContainer>
-        </Router>
+        </React.Fragment>
       )}
     </>
   );

src/assets/themeSettings.jsx

@@ -62,6 +62,7 @@ export const themeSettings = (mode) => {
       error: {
         main: colors.redAccent[500],
         dark: colors.redAccent[700],
+        contrastText: '#fff',
       },
       warning: {
         main: colors.redAccent[500],
@@ -70,6 +71,7 @@ export const themeSettings = (mode) => {
         light: colors.greenAccent[100],
         main: colors.greenAccent[500],
         dark: colors.greenAccent[200],
+        contrastText: '#fff',
       },
       info: {
         main: colors.blueAccent[500],

src/components/buttons/actionButtons/CardActionButtons.jsx

@@ -1,83 +1,89 @@
 import React, { useCallback } from 'react';
-import { Box, Button, Grid } from '@mui/material';
+import {
+  Box,
+  Button,
+  Divider,
+  Grid,
+  IconButton,
+  Typography,
+  useMediaQuery,
+} from '@mui/material';
 import { useStyles } from '../buttonStyles';
 import useAppContext from '../../../context/hooks/useAppContext';
 import { useMode } from '../../../context/hooks/colormode';
 import { useCollectionStore } from '../../../context/CollectionContext/CollectionContext';
 import Logger from '../../grids/collectionGrids/Logger';
 import { useDeckStore } from '../../../context/DeckContext/DeckContext';
 import { useCartStore } from '../../../context/CartContext/CartContext';
+import AddCircleOutlineIcon from '@material-ui/icons/AddCircleOutline';
+import DeleteIcon from '@material-ui/icons/Delete';
 const cardOtherLogger = new Logger([
   'Action',
   'Card Name',
   'Quantity',
   'Total Price',
 ]);
-const CardActionButtons = ({ card, context, closeModal }) => {
+const CardActionButtons = ({
+  card,
+  context,
+  closeModal,
+  modifiedContextProps,
+}) => {
   const { theme } = useMode(); // Using the theme hook
 
   const classes = useStyles();
-  const { contextProps, isContextAvailable } = useAppContext(context); // Changed to object destructuring
-  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
-  const { addToDeck, removeFromDeck } = useDeckStore();
-  const { addToCart, removeFromCart } = useCartStore();
-  // const { totalQuantity } = context[contextProps?.totalQuantity];
-  // const { totalQuantity } = useCollectionStore();
-  // if (!isContextAvailable || !contextProps) {
-  //   console.error(`The component isn't wrapped with the ${context}Provider`);
-  //   return <Box sx={{ color: 'error.main' }}>Context not available</Box>;
-  // }
+  // const { contextProps, isContextAvailable } = useAppContext(context);
+  const isLargeScreen = useMediaQuery(theme.breakpoints.up('lg'));
 
+  const { addOneToCollection, removeOneFromCollection } = useCollectionStore();
+  const { addOneToDeck, removeOneFromDeck } = useDeckStore();
+  const { addOneToCart, removeOneFromCart } = useCartStore();
   const styles = {
     box: {
       display: 'flex',
       flexDirection: 'column',
       justifyContent: 'center',
       alignItems: 'center',
+      flexGrow: 1,
+      width: '100%', // Using theme spacing
       padding: theme.spacing(2), // Using theme spacing
       backgroundColor: theme.palette.background.paper, // Using theme background color
     },
+    grid: {
+      // display: 'flex',
+      flexGrow: 1,
+      // flexDirection: 'column',
+      width: '100%', // Using theme spacing
+    },
+    grid2: {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'row',
+      width: '100%', // Using theme spacing
+      justifyContent: 'space-between',
+    },
     button: {
       margin: theme.spacing(1), // Using theme spacing
       color: theme.palette.background.primary, // Using theme text color
       backgroundColor: theme.palette.success.main, // Using theme background color
     },
+    removeButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.error.contrastText, // Using theme text color
+      backgroundColor: theme.palette.error.main, // Using theme background color
+    },
+    addButton: {
+      margin: theme.spacing(1), // Using theme spacing
+      color: theme.palette.success.contrastText, // Using theme text color
+      backgroundColor: theme.palette.success.main, // Using theme background color
+    },
     gridItem: {
       textAlign: 'center',
     },
   };
   const ADD = 'add';
   const REMOVE_ONE = 'removeOne';
   const REMOVE_ALL = 'removeAll';
-  // const performAction = useCallback(
-  //   (action, card) => {
-  //     console.log(
-  //       `action --> ${action}`,
-  //       `payload --> ${card}`,
-  //       `context --> ${context}`
-  //     );
-  //     try {
-  //       if (context === 'Collection') {
-  //         if (action === ADD) {
-  //           addOneToCollection(card, card.id);
-  //           cardOtherLogger.logCardAction('Add Card', card);
-  //         } else if (action === REMOVE_ONE) {
-  //           removeOneFromCollection(card, card.id);
-  //           cardOtherLogger.logCardAction('Remove Card', card);
-  //         }
-  //       }
-  //       // Additional context handling can be implemented here
-  //     } catch (error) {
-  //       console.error(
-  //         `Error performing action '${action}' with payload`,
-  //         card,
-  //         error
-  //       );
-  //     }
-  //   },
-  //   [context, addOneToCollection, removeOneFromCollection, cardOtherLogger]
-  // );
-
   const performAction = useCallback(
     (action, card) => {
       try {
@@ -91,16 +97,16 @@ const CardActionButtons = ({ card, context, closeModal }) => {
             break;
           case 'Deck':
             if (action === 'add') {
-              addToDeck(card, card.id);
+              addOneToDeck(card);
             } else if (action === 'removeOne') {
-              removeFromDeck(card, card.id);
+              removeOneFromDeck(card);
             }
             break;
           case 'Cart':
             if (action === 'add') {
-              addToCart(card, card.id);
+              addOneToCart(card);
             } else if (action === 'removeOne') {
-              removeFromCart(card, card.id);
+              removeOneFromCart(card);
             }
             break;
           default:
@@ -118,16 +124,16 @@ const CardActionButtons = ({ card, context, closeModal }) => {
     [
       addOneToCollection,
       removeOneFromCollection,
-      addToDeck,
-      removeFromDeck,
-      addToCart,
-      removeFromCart,
+      addOneToDeck,
+      removeOneFromDeck,
+      addOneToCart,
+      removeOneFromCart,
       context,
     ]
   );
 
   const handleAddClick = () => {
-    console.log('handleAddClick', card);
+    console.log('handleAddClick', card, context);
     performAction(ADD, card);
     closeModal?.();
   };
@@ -144,24 +150,69 @@ const CardActionButtons = ({ card, context, closeModal }) => {
 
   return (
     <Box sx={styles.box} onClick={closeModal}>
-      <Grid container spacing={2}>
-        <Grid item xs={6} sx={styles.gridItem}>
-          {`In ${context}: `} {card.quantity}
-        </Grid>
-        <Grid item xs={6} sx={styles.gridItem}>
-          <Button sx={styles.button} onClick={handleAddClick}>
-            +
-          </Button>
-          <Button sx={styles.button} onClick={handleRemoveOne}>
-            -
-          </Button>
-        </Grid>
-      </Grid>
+      {!isLargeScreen && (
+        <>
+          <Grid container spacing={2} sx={styles.grid}>
+            <Grid
+              item
+              xs={6}
+              sx={{ textAlign: 'center', justifyContent: 'center' }}
+            >
+              <Typography variant="h8" component="span">
+                {`In ${context}: `}
+              </Typography>
+              <Typography variant="h6" component="span">
+                {card.quantity}
+              </Typography>
+            </Grid>
+
+            <Grid item xs={6} sx={styles.gridItem}>
+              <Button sx={styles.addButton} onClick={handleAddClick}>
+                +
+              </Button>
+              <Button sx={styles.removeButton} onClick={handleRemoveOne}>
+                -
+              </Button>
+            </Grid>
+          </Grid>
+          <Divider />
+          <Grid container spacing={2} sx={styles.grid2}>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.addButton}
+                onClick={handleAddClick}
+              >
+                <AddCircleOutlineIcon fontSize="inherit" />
+              </IconButton>
+            </Grid>
+            <Grid item xs={6} sx={styles.gridItem}>
+              <IconButton
+                aria-label="delete"
+                size="medium"
+                sx={styles.removeButton}
+                onClick={handleRemoveOne}
+              >
+                <DeleteIcon fontSize="inherit" />
+              </IconButton>
+            </Grid>
+          </Grid>
+        </>
+      )}
+      <Button
+        variant="contained"
+        color="secondary"
+        sx={{ ...styles.addButton, width: '100%' }}
+        onClick={handleAddClick}
+      >
+        {`Add to ${context}`}
+      </Button>
       <Button
         variant="contained"
         color="secondary"
-        sx={{ ...styles.button, width: '100%' }}
-        onClick={handleRemoveAll}
+        sx={{ ...styles.removeButton, width: '100%' }}
+        onClick={handleRemoveOne}
       >
         {`Remove from ${context}`}
       </Button>