Completed Hero and cleaned code base

reedoooo · Mar 27, 2024 · 163dd31 · 163dd31
1 parent f412f60
commit 163dd31
Show file tree

Hide file tree

Showing 17 changed files with 568 additions and 374 deletions.
diff --git a/src/components/buttons/actionButtons/GenericActionButtons.jsx b/src/components/buttons/actionButtons/GenericActionButtons.jsx
@@ -91,6 +91,7 @@ const ActionButtons = ({
   context,
   page,
   handleCardAction,
+  variant,
 }) => {
   const labelValue =
     typeof context === 'string' ? context : context?.pageContext;
@@ -133,17 +134,19 @@ const ActionButtons = ({
           },
         }}
       >
-        <MDTypography variant="button" color="white" sx={{ color: 'white' }}>
-          <GlassyIcon
-            Icon={currentContextIcon}
-            iconColor="#FFFFFF"
-            size={160}
-            // gradientStartColor="#0C86DF"
-            // gradientEndColor="#FFFFFF"
-            // size={120}
-            // blurAmount={75}
-          />
-        </MDTypography>
+        {variant !== 'data-table' && (
+          <MDTypography variant="button" color="white" sx={{ color: 'white' }}>
+            <GlassyIcon
+              Icon={currentContextIcon}
+              iconColor="#FFFFFF"
+              size={160}
+              // gradientStartColor="#0C86DF"
+              // gradientEndColor="#FFFFFF"
+              // size={120}
+              // blurAmount={75}
+            />
+          </MDTypography>
+        )}
       </MDBox>
       <Box
         sx={{
@@ -172,82 +175,3 @@ const ActionButtons = ({
 };
 
 export default GenericActionButtons;
-
-// import React, { useCallback, useEffect } from 'react';
-// import { useModalContext } from '../../../context/UTILITIES_CONTEXT/ModalContext/ModalContext';
-// import { renderFullWidthAddButton } from './renderFullWidthAddButton';
-// import useSelectedContext from '../../../context/hooks/useSelectedContext';
-
-// const GenericActionButtons = ({
-//   card,
-//   context = context || context?.pageContext,
-//   onClick, // New onClick prop for handling context selection
-//   onSuccess,
-//   onFailure,
-//   page,
-//   cardSize,
-// }) => {
-//   if (typeof context === 'undefined') {
-//     context = 'Collection';
-//   }
-//   const { closeModal, isModalOpen, setModalOpen } = useModalContext();
-//   const { selectedCollection, allCollections } = useSelectedContext();
-//   const [buttonSize, setButtonSize] = React.useState('medium');
-
-//   const labelValue =
-//     typeof context === 'string' ? context : context?.pageContext;
-//   useEffect(() => {
-//     const buttonSizeMap = {
-//       xs: 'extraSmall',
-//       sm: 'small',
-//       md: 'medium',
-//       lg: 'large', // Adjust if there's another size you want for 'l'
-//     };
-//     const size = buttonSizeMap[cardSize] || 'medium'; // Default to 'medium' if size is not defined
-//     setButtonSize(size);
-//   }, [cardSize]);
-
-//   return (
-//     <React.Fragment>
-//       {renderFullWidthAddButton(
-//         buttonSize,
-//         isModalOpen,
-//         labelValue,
-//         cardSize,
-//         context,
-//         card,
-//         page,
-//         onClick,
-//         closeModal,
-//         onSuccess,
-//         onFailure
-//       )}
-//     </React.Fragment>
-//   );
-// };
-
-// export default GenericActionButtons;
-
-// // const renderSelectionDialog = () => (
-// //   <Dialog open={selectDialogOpen} onClose={() => setSelectDialogOpen(false)}>
-// //     <DialogTitle
-// //       sx={{
-// //         backgroundColor: theme.palette.backgroundE.darker,
-// //         color: theme.palette.text.primary,
-// //       }}
-// //     >
-// //       <MDTypography variant="button" fontWeight="medium">
-// //         Select a {context}
-// //       </MDTypography>
-// //     </DialogTitle>
-// //     <DialogContent>
-// //       <DialogActions>
-// //         {itemsForSelection?.map((item) => (
-// //           <Button key={item.id} onClick={() => onClick(item)}>
-// //             {item.name}
-// //           </Button>
-// //         ))}
-// //       </DialogActions>
-// //     </DialogContent>
-// //   </Dialog>
-// // );
diff --git a/...rids/cards-datatable/OptionsComponent.jsx → src/components/forms/OptionsComponent.jsx b/...rids/cards-datatable/OptionsComponent.jsx → src/components/forms/OptionsComponent.jsx
@@ -1,13 +1,13 @@
 // OptionsComponent.jsx
 import React, { useEffect } from 'react';
-import MDBox from '../../../REUSABLE_COMPONENTS/MDBOX';
+import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX';
 import { Autocomplete, Grid, TextField } from '@mui/material';
 import {
   FormBox,
   FormFieldBox,
-} from '../../../REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
-import FormField from '../../../../components/forms/reusable/FormField';
-import { useFormContext, useMode } from '../../../../context';
+} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
+import FormField from './reusable/FormField';
+import { useFormContext, useMode } from '../../context';
 import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 
 const OptionsComponent = ({

diff --git a/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx b/src/context/MAIN_CONTEXT/DeckContext/useDeckManager.jsx
@@ -228,11 +228,13 @@ const useDeckManager = () => {
       }
       const arrayOfCards = [cards];
       const arrayOfCardIds = [cardIds];
+      const existingCard = deckId?.cards?.find((card) => card.id === cardIds);
+      const removeType = existingCard?.quantity > 1 ? 'decrement' : 'delete';
 
       performAction(
         createApiUrl(`${deckId}/cards/remove`),
         'PUT',
-        { cards: arrayOfCards, cardIds: arrayOfCardIds },
+        { cards: arrayOfCards, cardIds: arrayOfCardIds, type: removeType },
         'removeCardsFromDeck',
         { paramTypes: ['object', 'array'] }
       );

diff --git a/src/context/hooks/useCardStore.jsx b/src/context/hooks/useCardStore.jsx
@@ -33,6 +33,8 @@ export const useCardStoreHook = () => {
     []
   );
   const [searchData, setSearchData] = useLocalStorage('searchData', []);
+  const [randomCards, setRandomCards] = useLocalStorage('randomCards', []);
+
   const [isDataValid, setIsDataValid] = useState(searchData.length > 0);
   const [initialLoad, setInitialLoad] = useState(true); // New state to track the initial load
   const {
@@ -117,6 +119,27 @@ export const useCardStoreHook = () => {
     }, 100),
     []
   ); // 500ms delay, adjust as needed
+  async function fetchRandomCardsAndSet() {
+    startLoading('fetchRandomCardsAndSet');
+    try {
+      // Replace `http://your-server-address.com` with the actual server address
+      const response = await fetch(
+        `${process.env.REACT_APP_SERVER}/api/cards/randomCardData`
+      );
+      if (!response.ok) {
+        throw new Error('Network response was not ok');
+      }
+      const cards = await response.json();
+
+      // Assuming you have a function to update your UI with these cards
+      setRandomCards(cards);
+    } catch (error) {
+      console.error('Failed to fetch random cards:', error);
+      startLoading('fetchRandomCardsAndSet');
+      // Optionally, update the UI to reflect the error state
+      // displayError('Failed to fetch random cards. Please try again later.');
+    }
+  }
 
   useEffect(() => {
     // Log updated search values only if it's not the initial load
@@ -132,12 +155,17 @@ export const useCardStoreHook = () => {
     isDataValid,
     setSearchData,
     cardsVersion,
+    setCardsVersion,
+    // toggleConfigurator,
+    // setIsConfiguratorOpen,
+    fetchRandomCardsAndSet,
+    handleRequest,
+    randomCards,
     // isConfiguratorOpen,
     // toggleConfigurator,
     // setPreviousSearchData,
     setIsDataValid,
     clearSearchData,
-    handleRequest,
     loadingSearchResults: isLoading('isSearchLoading'),
     setLoadingSearchResults: () => {
       startLoading('isSearchLoading');

diff --git a/src/layout/AnimatedFeatureCard.jsx b/src/layout/AnimatedFeatureCard.jsx
@@ -71,10 +71,13 @@ export const AnimatedFeatureCard = ({ tier, onOpenModal }) => {
         </CardContent>
         <CardActions
           sx={{
-            alignSelf: 'end',
-            justifyContent: 'flex-end',
-            alignItems: 'baseline',
-            flexGrow: 1,
+            // alignSelf: 'end',
+            // justifyContent: 'flex-end',
+            // alignItems: 'baseline',
+            // flexGrow: 1,
+            marginTop: 'auto',
+            width: '100%', // Ensure CardActions takes full width
+            justifyContent: 'flex-end', // Align button to the end
           }}
         >
           <SimpleButton
@@ -90,9 +93,14 @@ export const AnimatedFeatureCard = ({ tier, onOpenModal }) => {
               bottom: 0,
               width: '100%',
               mt: 'auto',
+              borderColor: theme.palette.chartTheme.greenAccent.darker,
+              borderWidth: 2,
+              '&:hover': {
+                borderColor: theme.palette.chartTheme.greenAccent.dark,
+              },
             }}
           >
-            Manage Collections
+            Manage {tier.title}
           </SimpleButton>
         </CardActions>
       </FeatureCard>