PenaSide/front-hub
3
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects Releases Wiki Activity

basketStore(create fn: remove , add)

Browse Source
This commit is contained in:
ArtChaos189 2023-03-22 14:51:16 +03:00
parent 873604d748
commit 39d85c8463
9 changed files with 1250 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -63,6 +63,7 @@
},
"devDependencies": {
"@craco/craco": "^7.1.0",
"craco-alias": "^3.0.1"
"craco-alias": "^3.0.1",
"jest": "^29.5.0"
}
}

64
src/components/Navbar/NavbarFull.tsx
View File

@ -1,16 +1,20 @@
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import LogoutIcon from "../icons/LogoutIcon";
import NavMenuItem from "../NavMenuItem";
import PenaLogo from "../PenaLogo";
import SectionWrapper from "../SectionWrapper";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { apiRequestHandler } from "../../utils/api/apiRequestHandler";
import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
import NavMenuItem from "../NavMenuItem";
import SectionWrapper from "../SectionWrapper";
import { basketStore } from "@root/stores/BasketStore";
import { IconsCreate } from "@root/lib/IconsCreate";
import { authStore } from "@stores/makeRequest";
import BasketIcon from "../../assets/Icons/BasketIcon.svg";
import LogoutIcon from "../icons/LogoutIcon";
import WalletIcon from "../icons/WalletIcon";
import CustomAvatar from "./Avatar";
import PenaLogo from "../PenaLogo";
import Icon from "@mui/material/Icon";
interface Props {
isLoggedIn: boolean;
@ -20,6 +24,14 @@ export default function NavbarFull({ isLoggedIn }: Props) {
const theme = useTheme();
const navigate = useNavigate();
const { clearToken } = authStore();
const [basketQuantity, setBasketQuantity] = useState<number>(0);
const { templ, squiz, reducer } = basketStore();
useEffect(() => {
setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length);
});
console.log(templ);
async function handleLogoutClick() {
clearToken();
@ -63,9 +75,41 @@ export default function NavbarFull({ isLoggedIn }: Props) {
}}
>
<IconButton onClick={() => navigate("/basket")} sx={{ p: 0 }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
<Typography component="div" sx={{ position: "absolute" }}>
<IconsCreate svg={BasketIcon} bgcolor="#F2F3F7" />
</Typography>
{basketQuantity && (
<Icon
sx={{
position: "relative",
left: "8px",
bottom: "7px",
width: "16px",
height: "16px",
backgroundColor: "#7E2AEA",
borderRadius: "12px",
}}
>
<Typography
component="div"
sx={{
display: "flex",
fontSize: "12px",
mt: "4.5px",
width: "100%",
height: "9px",
color: "white",
alignItems: "center",
justifyContent: "center",
}}
>
{basketQuantity}
</Typography>
</Icon>
)}
</IconButton>
<IconButton sx={{ p: 0 }}>
<IconButton sx={{ p: 0, ml: "8px" }}>
<WalletIcon color={theme.palette.grey2.main} bgcolor="#F2F3F7" />
</IconButton>
<Box sx={{ ml: "8px", whiteSpace: "nowrap" }}>

42
src/pages/Basket/AccordionWrapper.tsx
View File

@ -1,34 +1,32 @@
import { Box } from "@mui/material";
import CustomAccordionBasket from "../../components/CustomAccordionBasket";
interface Props {
content:{title:string, data:[string,number][]}[]
content: { title: string; data: [string, number][] }[];
}
export default function AccordionWrapperBasket({content}:Props) {
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
export default function AccordionWrapperBasket({ content }: Props) {
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
}}
>
{content.map((accordionItem, index) => (
<CustomAccordionBasket
key={index}
header={accordionItem.title}
dataSection={accordionItem.data}
totalPrice={3920}
/>
))}
</Box>
);
}}
>
{content.map((accordionItem, index) => (
<CustomAccordionBasket
key={index}
header={accordionItem.title}
dataSection={accordionItem.data}
totalPrice={3920}
/>
))}
</Box>
);
}

8
src/pages/Basket/Basket.tsx
View File

@ -1,7 +1,7 @@
import { Box, IconButton, Typography, useMediaQuery, useTheme } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { useState } from "react";
import { useState, useEffect } from "react";
import TotalPrice from "@components/TotalPrice";
import { basketStore } from "@root/stores/BasketStore";
import CustomWrapper from "./CustomWrapper";
@ -59,9 +59,9 @@ export const Basket = () => {
<Typography variant="h4">Корзина</Typography>
</Box>
<TabPanel value={tabIndex} index={0} mt={upMd ? "27px" : "10px"}>
{Object.keys(templ).length > 0 ? <CustomWrapper content={templ} /> : <></>}
{Object.keys(squiz).length > 0 ? <CustomWrapper content={squiz} /> : <></>}
{Object.keys(reducer).length > 0 ? <CustomWrapper content={reducer} /> : <></>}
{Object.keys(templ).length > 0 ? <CustomWrapper type="templ" content={templ} /> : <></>}
{Object.keys(squiz).length > 0 ? <CustomWrapper type="squiz" content={squiz} /> : <></>}
{Object.keys(reducer).length > 0 ? <CustomWrapper type="reducer" content={reducer} /> : <></>}
</TabPanel>
<TotalPrice />
</SectionWrapper>

316
src/pages/Basket/CustomWrapper.tsx
View File

@ -1,180 +1,182 @@
import {useState} from "react";
import {Box, SvgIcon, Typography, useMediaQuery, useTheme} from "@mui/material";
import { useState } from "react";
import { Box, SvgIcon, Typography, useMediaQuery, useTheme } from "@mui/material";
import ExpandIcon from "@components/icons/ExpandIcon";
import ClearIcon from "@mui/icons-material/Clear";
import {basketStore} from "@root/stores/BasketStore";
import { basketStore } from "@root/stores/BasketStore";
import { nextTick } from "process";
import { isJSDocTypedefTag } from "typescript";
interface Props {
content: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
type: string;
content: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[];
}
export default function CustomWrapper({content}: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
export default function CustomWrapper({ type, content }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState<boolean>(false);
const {templ, squiz, remove} = basketStore();
const { templ, squiz, remove } = basketStore();
console.log(templ);
const totalSum = Object.values(content).reduce((accamulator, { price }) => (accamulator += price), 0);
const name = Object.values(content).map(({ name }) => name);
const totalSum = Object.values(content).reduce((accamulator, {price}) => (accamulator += price), 0);
const name = Object.values(content).map(({name}) => name);
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
return (
<Box
sx={{
overflow: "hidden",
borderRadius: "12px",
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.067
4749)`,
}}
}}
>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[0]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
}}
>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{totalSum} руб.
</Typography>
<Box
sx={{
backgroundColor: "white",
"&:first-of-type": {
borderTopLeftRadius: "12px",
borderTopRightRadius: "12px",
},
"&:last-of-type": {
borderBottomLeftRadius: "12px",
borderBottomRightRadius: "12px",
},
"&:not(:last-of-type)": {
borderBottom: `1px solid ${theme.palette.grey2.main}`,
},
}}
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<Box
onClick={() => setIsExpanded((prev) => !prev)}
sx={{
height: "72px",
px: "20px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
cursor: "pointer",
userSelect: "none",
}}
>
<Typography
sx={{
fontSize: upMd ? "20px" : "16px",
lineHeight: upMd ? undefined : "19px",
fontWeight: 500,
color: theme.palette.text.secondary,
px: 0,
}}
>
{name[0]}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "flex-end",
height: "100%",
alignItems: "center",
gap: upSm ? "111px" : "17px",
}}
>
<Typography
sx={{color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500}}>
{totalSum} руб.
</Typography>
<Box
sx={{
borderLeft: upSm ? "1px solid #9A9AAF" : "none",
paddingLeft: upSm ? "24px" : 0,
height: "100%",
display: "flex",
justifyContent: "center",
alignItems: "center",
}}
>
<ExpandIcon isExpanded={isExpanded}/>
</Box>
</Box>
</Box>
{isExpanded &&
Object.values(content).map(({desc, id, privelegeid, amount, price}, index) => (
<Box
key={index}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{desc}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
width: upSm ? "195px" : "123px",
marginRight: upSm ? "65px" : 0,
}}
>
<Typography sx={{
color: theme.palette.grey3.main,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500
}}>
{price} руб.
</Typography>
{upSm ? (
<Typography
component="div"
onClick={() => remove(id)}
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
cursor: "pointer",
}}
>
Удалить
</Typography>
) : (
<SvgIcon component={ClearIcon}></SvgIcon>
)}
</Box>
</Box>
))}
<ExpandIcon isExpanded={isExpanded} />
</Box>
</Box>
</Box>
);
{isExpanded &&
Object.values(content).map(({ desc, id, privelegeid, amount, price }, index) => (
<Box
key={index}
sx={{
px: "20px",
py: upMd ? "25px" : undefined,
pt: upMd ? undefined : "15px",
pb: upMd ? undefined : "25px",
backgroundColor: "#F1F2F6",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
gap: "15px",
}}
>
<Typography
sx={{
fontSize: upMd ? undefined : "16px",
lineHeight: upMd ? undefined : "19px",
color: theme.palette.grey3.main,
}}
>
{desc}
</Typography>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
gap: "10px",
alignItems: "center",
width: upSm ? "195px" : "123px",
marginRight: upSm ? "65px" : 0,
}}
>
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500,
}}
>
{price} руб.
</Typography>
{upSm ? (
<Typography
component="div"
onClick={() => remove(type, id)}
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,
width: "max-content",
lineHeight: "19px",
cursor: "pointer",
}}
>
Удалить
</Typography>
) : (
<SvgIcon component={ClearIcon}></SvgIcon>
)}
</Box>
</Box>
))}
</Box>
</Box>
);
}

211
src/pages/Tariffs/TariffsTime.tsx
View File

@ -1,15 +1,15 @@
import {useMediaQuery, useTheme, Box, Typography} from "@mui/material";
import { useMediaQuery, useTheme, Box, Typography } from "@mui/material";
import SectionWrapper from "@components/SectionWrapper";
import {StepperSample} from "@components/StepperSample";
import {StepperSquiz} from "@root/components/StepperSquiz";
import {TariffCardTimeAndVolume} from "./TariffCardTimeAndVolume";
import {FreeTariffCard} from "./FreeTariffCard";
import { StepperSample } from "@components/StepperSample";
import { StepperSquiz } from "@root/components/StepperSquiz";
import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume";
import { FreeTariffCard } from "./FreeTariffCard";
import { basketStore } from "@root/stores/BasketStore";
import {IconsCreate} from "../../lib/IconsCreate";
import { IconsCreate } from "../../lib/IconsCreate";
import {_mocsk_} from "@root/__mocks__/StepperSampleMocsk";
import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk";
import Infinity from "../../assets/Icons/tariffs-time/Infinity.svg";
import OneIcons from "../../assets/Icons/tariffs-time/OneIcons.svg";
@ -18,108 +18,109 @@ import SixIcons from "../../assets/Icons/tariffs-time/SixIcons.svg";
import NineIcons from "../../assets/Icons/tariffs-time/NineIcons.svg";
const showcaseTime = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: {icon: Infinity, bgcolor: "#D6F3E9"},
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: {icon: OneIcons, bgcolor: "#EEE4FC"},
id: 2,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: {icon: ThreeIcons, bgcolor: "#EEE4FC"},
id: 3,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: {icon: SixIcons, bgcolor: "#EEE4FC"},
id: 4,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: {icon: NineIcons, bgcolor: "#EEE4FC"},
id: 1,
amount: 10,
price: 1000,
},
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: Infinity, bgcolor: "#D6F3E9" },
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#EEE4FC" },
id: 2,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#EEE4FC" },
id: 3,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: SixIcons, bgcolor: "#EEE4FC" },
id: 4,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: NineIcons, bgcolor: "#EEE4FC" },
id: 1,
amount: 10,
price: 1000,
},
];
export const TariffsTime = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { add, templ} = basketStore();
const { add, templ } = basketStore();
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
return (
<SectionWrapper
maxWidth="lg"
sx={{
mt: "20px",
mb: upMd ? "90px" : "63px",
display: "flex",
flexDirection: "column",
}}
>
<StepperSquiz text="Тарифы на время" />
<Typography variant="h4" sx={{ marginBottom: "28px" }}>
Тарифы на время
</Typography>
<StepperSample _mocsk_={_mocsk_} />
<Box
sx={{
width: upMd ? "100%" : undefined,
mt: "40px",
mb: "30px",
display: "flex",
flexDirection: upMd ? "row" : "column",
gap: upMd ? "3.5%" : "30px",
alignSelf: "center",
flexWrap: "wrap",
}}
>
{showcaseTime.map((element, index) => (
<TariffCardTimeAndVolume
key={index}
sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => {
add({ id: element.id, type: "templ", obj: element });
console.log(templ);
}}
>
<StepperSquiz text="Тарифы на время"/>
<Typography variant="h4" sx={{marginBottom: "28px"}}>
Тарифы на время
</Typography>
<StepperSample _mocsk_={_mocsk_}/>
<Box
sx={{
width: upMd ? "100%" : undefined,
mt: "40px",
mb: "30px",
display: "flex",
flexDirection: upMd ? "row" : "column",
gap: upMd ? "3.5%" : "30px",
alignSelf: "center",
flexWrap: "wrap",
}}
>
{showcaseTime.map(( element) => (
<TariffCardTimeAndVolume
sx={{width: upMd ? "31%" : undefined, marginBottom: "40px"}}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor}/>}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => {
add({id:element.id, type:"templ", obj:element})
console.log(templ)
}}
textButton="выбрать"
/>
))}
textButton="выбрать"
/>
))}
<FreeTariffCard
sx={{
width: upMd ? "31%" : undefined,
marginBottom: "40px",
backgroundColor: "#7E2AEA",
color: "white",
}}
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
href=""
/>
</Box>
</SectionWrapper>
);
<FreeTariffCard
sx={{
width: upMd ? "31%" : undefined,
marginBottom: "40px",
backgroundColor: "#7E2AEA",
color: "white",
}}
headerText="бесплатно"
text="Текст-заполнитель — это текст, который имеет "
href=""
/>
</Box>
</SectionWrapper>
);
};

89
src/pages/Tariffs/TariffsVolume.tsx
View File

@ -17,51 +17,51 @@ import ThreeIcons from "../../assets/Icons/tariffs-volume/ThreeIcons.svg";
import FourIcons from "../../assets/Icons/tariffs-volume/FourIcons.svg";
import FiveIcons from "../../assets/Icons/tariffs-volume/FiveIcons.svg";
const showcaseVolume = [
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FourIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "Безлимит",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: OneIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 100,
},
{
name: "1 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: TwoIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "3 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: ThreeIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "6 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FourIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
{
name: "9 месяц",
desc: "Текст-заполнитель — это текст, который имеет",
style: { icon: FiveIcons, bgcolor: "#FEDFD0" },
id: 1,
amount: 10,
price: 1000,
},
];
export const TariffsVolume = () => {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const { add } = basketStore();
const { add } = basketStore();
return (
<SectionWrapper
@ -91,15 +91,18 @@ export const TariffsVolume = () => {
flexWrap: "wrap",
}}
>
{showcaseVolume.map((element) => (
{showcaseVolume.map((element, index) => (
<TariffCardTimeAndVolume
key={index}
sx={{ width: upMd ? "31%" : undefined, marginBottom: "40px" }}
icon={<IconsCreate svg={element.style.icon} bgcolor={element.style.bgcolor} />}
headerText={element.name}
text={element.desc}
money={element.price}
href=""
onclick={() => { add({id:element.id, type:"templ", obj:element})}}
onclick={() => {
add({ id: element.id, type: "templ", obj: element });
}}
textButton="выбрать"
/>
))}

40
src/stores/BasketStore.ts
View File

@ -39,35 +39,27 @@ export const basketStore = create<any>()((set, get) => ({
},
},
reducer: {},
add: ({id, obj, type}:any) => {
const store:any = get()[type] || {}
add: ({ id, obj, type }: any) => {
const store: any = get()[type] || {};
const newStore = {
[type]:{
[type]: {
...store,
[id]:obj
}
}
set(() => (newStore))
[id]: obj,
},
};
set(() => newStore);
},
remove: (
type: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[],
id: string
) => {
const arrayCopy = { ...get().type };
remove: (type: any, id: string) => {
const store: any = get()[type] || {};
Object.keys(arrayCopy).forEach((key) => {
if (key === id) {
delete arrayCopy[key];
const newStore = Object.entries(store).reduce<any>((accamulator, [key, value], index, array) => {
if (key !== id) {
accamulator[key] = value;
}
});
set({ type: arrayCopy });
return accamulator;
}, {});
set({ [type]: newStore });
},
}));

850
yarn.lock
View File

File diff suppressed because it is too large Load Diff