Skip to content

Commit

Permalink
Merge pull request #34 from reedoooo/clean/test
Browse files Browse the repository at this point in the history 
working on deck list re render
  • Loading branch information
@reedoooo
reedoooo authored Apr 12, 2024
2 parents 59e6cef + 97c3df6 commit 41dda4f
Show file tree
Hide file tree
Showing 86 changed files with 3,038 additions and 2,902 deletions.
4 changes: 4 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,14 @@
"image-downloader": "^4.3.0",
"jwt-decode": "^3.1.2",
"lodash": "^4.17.21",
"lodash.set": "^4.3.2",
"logrocket": "^8.1.0",
"material-ui-image": "^3.3.2",
"mathjs": "^12.4.1",
"moment": "^2.29.4",
"nanoid": "^5.0.7",
"notistack": "^3.0.1",
"pino": "^8.20.0",
"polished": "^4.3.1",
"react": "^17.0.0 || ^18.0.0",
"react-cookie": "^4.1.1",
Expand Down
7 changes: 2 additions & 5 deletions src/components/buttons/actionButtons/ActionButton.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ const ActionButton = ({
labelValue,
actionType,
card,
selectedEntity,
variant,
}) => {
const { theme } = useMode();
Expand Down Expand Up @@ -60,11 +61,7 @@ const ActionButton = ({
// color={actionType === 'add' ? 'success.main' : 'error'}
size={adjustedButtonSize}
loading={isLoading(loadingKey)}
onClick={
actionType === 'add'
? () => handleCardAction('add', card)
: () => handleCardAction('remove', card)
}
onClick={handleCardAction}
startIcon={actionIcon}
sx={{
width: '100%',
Expand Down
84 changes: 42 additions & 42 deletions src/components/buttons/actionButtons/GenericActionButtons.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import MDBox from '../../../layout/REUSABLE_COMPONENTS/MDBOX';
import useDeckManager from '../../../context/MAIN_CONTEXT/DeckContext/useDeckManager';
import { useCartManager } from '../../../context/MAIN_CONTEXT/CartContext/useCartManager';
import LoadingOverlay from '../../../layout/REUSABLE_COMPONENTS/system-utils/LoadingOverlay';
import useSelectedCollection from '../../../context/MAIN_CONTEXT/CollectionContext/useSelectedCollection';
import useSelectedDeck from '../../../context/MAIN_CONTEXT/DeckContext/useSelectedDeck';

const buttonSizeMap = {
xs: 'extraSmall',
Expand All @@ -20,6 +22,7 @@ const buttonSizeMap = {

const GenericActionButtons = ({
card,
// selectedEnt,
context = 'Collection',
onClick,
onSuccess,
Expand All @@ -30,13 +33,33 @@ const GenericActionButtons = ({
}) => {
const { enqueueSnackbar } = useSnackbar(); // Add this line to use Notistack
const memoizedReturnValues = useCollectionManager(); // Add this line to use useCollectionManager
const memoizedSelectionVals1 = useSelectedCollection(); // Add this line to use useCollectionManager
const memoizedSelectionVals2 = useSelectedDeck(); // Add this line to use useCollectionManager
const memoizedSelectionVals3 = useCartManager(); // Add this line to use useCollectionManager
if (!memoizedReturnValues) return <LoadingOverlay />; // Add this line to use useCollectionManager
const { addOneToCollection, removeOneFromCollection } = memoizedReturnValues; // Modify this line to use useCollectionManager
const { addOneToDeck, removeOneFromDeck } = useDeckManager();
const { addOneToCart, removeOneFromCart } = useCartManager();
const [buttonSize, setButtonSize] = useState(
buttonSizeMap[cardSize] || 'medium'
);
const [selectedEntity, setSelectedEntity] = useState({});
useEffect(() => {
if (context === 'Collection') {
setSelectedEntity(memoizedSelectionVals1.selectedCollection);
} else if (context === 'Deck') {
// console.log('ENT', memoizedSelectionVals2.selectedDeck);
setSelectedEntity(memoizedSelectionVals2.selectedDeckId);
} else if (context === 'Cart') {
setSelectedEntity(memoizedSelectionVals3.cart);
}
}, [
memoizedSelectionVals1.selectedCollection,
memoizedSelectionVals2.selectedDeckId,
memoizedSelectionVals2.allDecks,
memoizedSelectionVals3.cart,
context,
]);
useEffect(() => {
setButtonSize(buttonSizeMap[cardSize] || 'medium');
}, [cardSize]);
Expand All @@ -56,6 +79,7 @@ const GenericActionButtons = ({
}),
[removeOneFromCollection, removeOneFromDeck, removeOneFromCart]
);

const handleAction = useCallback(
async (action, cardData, currentContext) => {
if (!cardData) {
Expand All @@ -64,56 +88,26 @@ const GenericActionButtons = ({
return;
}
console.log(
`Action: ${action}, Card: ${cardData?.name}, Context: ${currentContext}`
`Action: ${action}, Card: ${card?.name}, Context: ${currentContext}, ENTITY: ${selectedEntity}`
);
// Dynamic action handling
if (action === 'add' && addActions[currentContext]) {
addActions[currentContext](cardData);
} else if (action === 'remove' && removeActions[currentContext]) {
removeActions[currentContext](cardData);
}
const actionMap = action === 'add' ? addActions : removeActions;
actionMap[currentContext]?.(card, selectedEntity);
},
[card, context, addActions, removeActions]
);
return (
<ActionButtons
buttonSize={buttonSize}
card={card}
context={context}
page={page}
handleCardAction={() => handleAction('add', card, context)}
datatable={datatable}
variant={datatable ? 'data-table' : 'card'}
/>
[addActions, removeActions, enqueueSnackbar, selectedEntity]
);
};

const ActionButtons = ({
buttonSize,
card,
context,
page,
handleCardAction,
variant,
datatable,
}) => {
const labelValue =
typeof context === 'string' ? context : context?.pageContext;
const stackDirection = buttonSize === 'extraSmall' ? 'column' : 'row';
const currentContextIcon = getContextIcon(labelValue);

return (
<Box
sx={{
display: 'flex',
flexDirection: stackDirection,
flexDirection: buttonSize === 'extraSmall' ? 'column' : 'row',
alignItems: 'center',
gap: 1,
width: '100%',
height: '100%',
}}
>
{variant !== 'data-table' && (
{datatable !== 'data-table' && (
<MDBox
sx={{
display: 'flex',
Expand Down Expand Up @@ -141,7 +135,7 @@ const ActionButtons = ({
>
<MDTypography variant="button" color="white" sx={{ color: 'white' }}>
<GlassyIcon
Icon={currentContextIcon}
Icon={getContextIcon(context)}
iconColor="#FFFFFF"
size={160}
/>
Expand All @@ -153,25 +147,31 @@ const ActionButtons = ({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: variant === 'data-table' ? 0 : 1,
gap: datatable ? 0 : 1,
width: '80%',
}}
>
<ActionButton
action="add"
buttonSize={buttonSize}
handleCardAction={handleCardAction}
handleCardAction={() =>
handleAction('add', card, context, selectedEntity)
}
labelValue={'add'} // Assuming 'context' is intended to be used as 'labelValue'
variant={variant}
variant={datatable ? 'data-table' : 'card'}
actionType="add"
selectedEntity={selectedEntity}
/>
<ActionButton
action="remove"
buttonSize={buttonSize}
handleCardAction={handleCardAction}
handleCardAction={() =>
handleAction('remove', card, context, selectedEntity)
}
labelValue={'remove'} // Assuming 'context' is intended to be used as 'labelValue'
variant={variant}
variant={datatable ? 'data-table' : 'card'}
actionType="remove"
selectedEntity={selectedEntity}
/>
</Box>
</Box>
Expand Down
75 changes: 43 additions & 32 deletions src/components/cards/CardDetailsContainer.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
ListItem,
Stack,
Typography,
Container,
} from '@mui/material';
import {
FaDragon,
Expand All @@ -24,7 +25,6 @@ import { useMode } from '../../context';
import styled from 'styled-components';
import MDBox from '../../layout/REUSABLE_COMPONENTS/MDBOX';
import MDTypography from '../../layout/REUSABLE_COMPONENTS/MDTYPOGRAPHY/MDTypography';
import { CardDetailContainer } from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
const IconWrapper = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
Expand Down Expand Up @@ -87,7 +87,8 @@ const CardDetailRarity = ({ values, onRarityClick }) => {
return values?.map((rarity, index) => (
<Chip
key={index}
label={`${rarity.name}: ${rarity.value}`}
// label={`${rarity.name}: ${rarity.value}`}
label={`${rarity.value}`}
onClick={() => onRarityClick(rarity.name)}
sx={{
borderWidth: '2px',
Expand All @@ -102,7 +103,7 @@ const CardDetailSet = ({ values }) => {
return values?.map((set, index) => (
<Chip
key={index}
label={`${set.name}: ${set.value}`}
label={`${set.value}`}
onClick={() => console.log(set.toString())}
sx={{
borderWidth: '2px',
Expand Down Expand Up @@ -130,27 +131,44 @@ const RenderDetailsSection = ({ details, card, className, handleAction }) => {
})
);

return details?.map((detail, index) => (
<Grid item xs={12} sm={12} md={12} lg={6} xl={6} key={index}>
<CardDetailTitle title={detail.title} />
<Divider />
{detail.key === 'desc' && <CardDetailDescription value={card?.desc} />}
{detail.key === 'price' && <CardDetailPrice value={card?.price} />}
{detail.key === 'rarities' && (
<CardDetailRarity values={raritiesArray} onRarityClick={handleAction} />
)}
{detail.key === 'card_sets' && <CardDetailSet values={cardSetsArray} />}
{/* {detail.icon && (
<CardDetailIcon
icon={
iconDetails.forEach(
(iconDetail) => iconDetail.key === detail.key
)?.icon
}
/>
)} */}
return (
<Grid container spacing={2} sx={{ maxWidth: '100%' }}>
{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} />
<Divider />
{detail.key === 'desc' && (
<CardDetailDescription value={card?.desc} />
)}
{detail.key === 'price' && (
<CardDetailPrice value={card?.price} />
)}
{detail.key === 'rarities' && (
<CardDetailRarity
values={raritiesArray}
onRarityClick={handleAction}
/>
)}
{detail.key === 'card_sets' && (
<CardDetailSet values={cardSetsArray} />
)}
{/* {detail.icon && (
<CardDetailIcon
icon={
iconDetails.forEach(
(iconDetail) => iconDetail.key === detail.key
)?.icon
}
/>
)} */}
</MDBox>
</Card>
</Grid>
))}
</Grid>
));
);
};

const RenderInventoryList = () => (
Expand Down Expand Up @@ -192,17 +210,10 @@ const CardDetailsContainer = ({
// background: theme.palette.chartTheme.greenAccent.light,
justifyContent: 'center',
borderRadius: theme.shape.borderRadius,
maxWidth: '100%',
}}
>
{isTextSection && (
<RenderDetailsSection
details={textDetails}
card={card}
className={className}
handleAction={handleAction}
/>
)}
{isInventorySection && <RenderInventoryList />}
{/* {isInventorySection && <RenderInventoryList />} */}
{className === 'card-details-container-swiper' && (
<RenderDetailsSection
details={textDetails}
Expand Down
20 changes: 18 additions & 2 deletions src/components/cards/CardMediaSection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ import {
MediaContainer,
MediaPopover,
} from '../../layout/REUSABLE_STYLED_COMPONENTS/ReusableStyledComponents';
import Checkbox from '@mui/material/Checkbox';
import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder';
import BookmarkIcon from '@mui/icons-material/Bookmark';

const CardMediaSection = forwardRef(
(
{
Expand All @@ -28,15 +32,17 @@ const CardMediaSection = forwardRef(
setAnchorEl(null);
}
}, [isHovered, ref]);
const label = { inputProps: { 'aria-label': 'Bookmark card' } };

return (
<MediaContainer
ref={ref}
style={{ position: 'relative' }} // Ensure this container has relative positioning
{...(isRequired && {
onMouseEnter: () => handleInteraction?.(!isModalOpen ? true : false), // Use optional chaining
onMouseLeave: () => handleInteraction?.(false), // Use optional chaining
onClick: () => {
handleClick?.();
// handleOverlayChange('newOverlayValue'); // Your existing logic
},
})}
>
Expand All @@ -46,7 +52,17 @@ const CardMediaSection = forwardRef(
image={imgUrl}
loading="lazy"
/>

<Checkbox
{...label}
icon={<BookmarkBorderIcon />}
checkedIcon={<BookmarkIcon />}
style={{
position: 'absolute',
top: 0, // Align to the top
right: 0, // Align to the right
margin: '8px', // Adjust spacing as needed
}}
/>
{anchorEl && isHovered && (
<MediaPopover
open={isHovered}
Expand Down
8 changes: 8 additions & 0 deletions src/components/cards/GenericCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -198,7 +198,15 @@ const GenericCard = React.forwardRef((props, ref) => {
>
<GenericActionButtons
card={card}
// selectedEntity={
// effectiveContext === 'Cart'
// ? cart
// : effectiveContext === 'Collection'
// ? selectedCollection
// : selectedDeck
// }
context={effectiveContext}
// selectedEnt={selectedEntity}
onClick={() => handleContextSelect(effectiveContext)}
onSuccess={() =>
enqueueSnackbar(
Expand Down
Loading

0 comments on commit 41dda4f

Please sign in to comment.