basketStore(create fn: remove , add)

package.json

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

src/components/Navbar/NavbarFull.tsx

@@ -1,16 +1,20 @@
-import { Box, Button, Container, IconButton, Typography, useTheme } from "@mui/material";
+import { useEffect, useState } from "react";
-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 { 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" }}>

src/pages/Basket/AccordionWrapper.tsx

@@ -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={{

src/pages/Basket/Basket.tsx

@@ -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(templ).length > 0 ? <CustomWrapper type="templ" content={templ} /> : <></>}
-          {Object.keys(squiz).length > 0 ? <CustomWrapper content={squiz} /> : <></>}
+        {Object.keys(squiz).length > 0 ? <CustomWrapper type="squiz" content={squiz} /> : <></>}
-          {Object.keys(reducer).length > 0 ? <CustomWrapper content={reducer} /> : <></>}
+        {Object.keys(reducer).length > 0 ? <CustomWrapper type="reducer" content={reducer} /> : <></>}
       </TabPanel>
       <TotalPrice />
     </SectionWrapper>

src/pages/Basket/CustomWrapper.tsx

@@ -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
+            <Typography sx={{ color: theme.palette.grey3.main, fontSize: upSm ? "20px" : "16px", fontWeight: 500 }}>
-                            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}`,

src/pages/Tariffs/TariffsTime.tsx

@@ -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})
+              add({ id: element.id, type: "templ", obj: element });
-                            console.log(templ)
+              console.log(templ);
             }}
             textButton="выбрать"
           />

src/pages/Tariffs/TariffsVolume.tsx

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

src/stores/BasketStore.ts

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