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"
}
}

62
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 }}>
<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" }}>

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

@ -1,13 +1,11 @@
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={{

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>

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

@ -5,8 +5,11 @@ import ExpandIcon from "@components/icons/ExpandIcon";
import ClearIcon from "@mui/icons-material/Clear";
import { basketStore } from "@root/stores/BasketStore";
import { nextTick } from "process";
import { isJSDocTypedefTag } from "typescript";
interface Props {
type: string;
content: {
name: string;
desc: string;
@ -17,7 +20,7 @@ interface Props {
}[];
}
export default function CustomWrapper({content}: Props) {
export default function CustomWrapper({ type, content }: Props) {
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
@ -25,8 +28,6 @@ export default function CustomWrapper({content}: Props) {
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);
@ -94,8 +95,7 @@ export default function CustomWrapper({content}: Props) {
gap: upSm ? "111px" : "17px",
}}
>
<Typography
sx={{color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500}}>
<Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
{totalSum} руб.
</Typography>
<Box
@ -147,17 +147,19 @@ export default function CustomWrapper({content}: Props) {
marginRight: upSm ? "65px" : 0,
}}
>
<Typography sx={{
<Typography
sx={{
color: theme.palette.grey3.main,
fontSize: upSm ? "20px" : "16px",
fontWeight: 500
}}>
fontWeight: 500,
}}
>
{price} руб.
</Typography>
{upSm ? (
<Typography
component="div"
onClick={() => remove(id)}
onClick={() => remove(type, id)}
sx={{
color: theme.palette.text.secondary,
borderBottom: `1px solid ${theme.palette.text.secondary}`,

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

@ -92,8 +92,9 @@ export const TariffsTime = () => {
flexWrap: "wrap",
}}
>
{showcaseTime.map(( element) => (
{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}
@ -101,8 +102,8 @@ export const TariffsTime = () => {
money={element.price}
href=""
onclick={() => {
add({id:element.id, type:"templ", obj:element})
console.log(templ)
add({ id: element.id, type: "templ", obj: element });
console.log(templ);
}}
textButton="выбрать"
/>

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

@ -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="выбрать"
/>
))}

36
src/stores/BasketStore.ts
View File

@ -40,34 +40,26 @@ export const basketStore = create<any>()((set, get) => ({
},
reducer: {},
add: ({ id, obj, type }: any) => {
const store:any = get()[type] || {}
const store: any = get()[type] || {};
const newStore = {
[type]: {
...store,
[id]:obj
}
}
set(() => (newStore))
[id]: obj,
},
remove: (
type: {
name: string;
desc: string;
id: string;
privelegeid: string;
amount: number;
price: number;
}[],
id: string
) => {
const arrayCopy = { ...get().type };
};
set(() => newStore);
},
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