From 000e112ac43f5943c5e52f71916523cbfd46e0e7 Mon Sep 17 00:00:00 2001 From: ArtChaos189 Date: Thu, 23 Mar 2023 15:03:08 +0300 Subject: [PATCH] create TariffsPage --- babel.config.js | 6 + src/__mocks__/CustomRadioButtonsMocks.ts | 5 + src/__mocks__/StepperSampleMocsk.ts | 5 - src/__mocks__/showCaseObject.ts | 24 ++++ src/__mocks__/showCaseTime.ts | 48 +++++++ src/__mocks__/showCaseVolume.ts | 48 +++++++ ...epperSample.tsx => CustomRadioButtons.tsx} | 18 ++- src/components/Navbar/NavbarFull.tsx | 1 - src/index.tsx | 7 +- src/pages/Tariffs/Tariffs.tsx | 7 +- src/pages/Tariffs/TariffsPage.tsx | 86 ++++++++++++ src/pages/Tariffs/TariffsTime.tsx | 126 ------------------ src/pages/Tariffs/TariffsVolume.tsx | 123 ----------------- src/stores/BasketStore.ts | 2 +- src/stores/test/method-remove.test.ts | 10 ++ 15 files changed, 246 insertions(+), 270 deletions(-) create mode 100644 babel.config.js create mode 100644 src/__mocks__/CustomRadioButtonsMocks.ts delete mode 100644 src/__mocks__/StepperSampleMocsk.ts create mode 100644 src/__mocks__/showCaseObject.ts create mode 100644 src/__mocks__/showCaseTime.ts create mode 100644 src/__mocks__/showCaseVolume.ts rename src/components/{StepperSample.tsx => CustomRadioButtons.tsx} (52%) create mode 100644 src/pages/Tariffs/TariffsPage.tsx delete mode 100644 src/pages/Tariffs/TariffsTime.tsx delete mode 100644 src/pages/Tariffs/TariffsVolume.tsx create mode 100644 src/stores/test/method-remove.test.ts diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..dd242dc --- /dev/null +++ b/babel.config.js @@ -0,0 +1,6 @@ +module.exports = { + presets: [ + ["@babel/preset-env", { targets: { node: "current" } }], + "@babel/preset-typescript", + ], +}; diff --git a/src/__mocks__/CustomRadioButtonsMocks.ts b/src/__mocks__/CustomRadioButtonsMocks.ts new file mode 100644 index 0000000..21cae8f --- /dev/null +++ b/src/__mocks__/CustomRadioButtonsMocks.ts @@ -0,0 +1,5 @@ +export const _mocsk_ = [ + { name: "Шаблонизатор", type: "templ" }, + { name: "Опросник", type: "squiz" }, + { name: "Сокращатель ссылок", type: "reduce" }, +]; diff --git a/src/__mocks__/StepperSampleMocsk.ts b/src/__mocks__/StepperSampleMocsk.ts deleted file mode 100644 index 0ae0c06..0000000 --- a/src/__mocks__/StepperSampleMocsk.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const _mocsk_ = [ - { name: "Шаблонизатор", url: "" }, - { name: "Опросник", url: "" }, - { name: "Сокращатель ссылок", url: "" }, -]; diff --git a/src/__mocks__/showCaseObject.ts b/src/__mocks__/showCaseObject.ts new file mode 100644 index 0000000..2d4d97e --- /dev/null +++ b/src/__mocks__/showCaseObject.ts @@ -0,0 +1,24 @@ +import { showCaseTime } from "./showCaseTime"; +import { showCaseVolume } from "./showCaseVolume"; + +export const showCaseObject: Record< + string, + Record< + string, + { + name: string; + desc: string; + style: { + icon: string; + bgcolor: string; + }; + id: string; + amount: number; + price: number; + }[] + > +> = { + templ: { volume: showCaseVolume, time: showCaseTime }, + squiz: { volume: showCaseVolume, time: showCaseTime }, + reduce: { volume: showCaseVolume, time: showCaseTime }, +}; diff --git a/src/__mocks__/showCaseTime.ts b/src/__mocks__/showCaseTime.ts new file mode 100644 index 0000000..44012af --- /dev/null +++ b/src/__mocks__/showCaseTime.ts @@ -0,0 +1,48 @@ +import Infinity from "../assets/Icons/tariffs-time/Infinity.svg"; +import OneIcons from "../assets/Icons/tariffs-time/OneIcons.svg"; +import ThreeIcons from "../assets/Icons/tariffs-time/ThreeIcons.svg"; +import SixIcons from "../assets/Icons/tariffs-time/SixIcons.svg"; +import NineIcons from "../assets/Icons/tariffs-time/NineIcons.svg"; + +export const showCaseTime = [ + { + name: "Безлимит", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: Infinity, bgcolor: "#D6F3E9" }, + id: "id1", + amount: 10, + price: 100, + }, + { + name: "1 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: OneIcons, bgcolor: "#EEE4FC" }, + id: "id2", + amount: 10, + price: 1000, + }, + { + name: "3 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: ThreeIcons, bgcolor: "#EEE4FC" }, + id: "id3", + amount: 10, + price: 1000, + }, + { + name: "6 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: SixIcons, bgcolor: "#EEE4FC" }, + id: "id4", + amount: 10, + price: 1000, + }, + { + name: "9 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: NineIcons, bgcolor: "#EEE4FC" }, + id: "id5", + amount: 10, + price: 1000, + }, +]; diff --git a/src/__mocks__/showCaseVolume.ts b/src/__mocks__/showCaseVolume.ts new file mode 100644 index 0000000..47f9012 --- /dev/null +++ b/src/__mocks__/showCaseVolume.ts @@ -0,0 +1,48 @@ +import OneIcons from "../assets/Icons/tariffs-volume/OneIcons.svg"; +import TwoIcons from "../assets/Icons/tariffs-volume/TwoIcons.svg"; +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"; + +export const showCaseVolume = [ + { + name: "Безлимит", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: OneIcons, bgcolor: "#FEDFD0" }, + id: "id1", + amount: 10, + price: 100, + }, + { + name: "1 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: TwoIcons, bgcolor: "#FEDFD0" }, + id: "id2", + amount: 10, + price: 1000, + }, + { + name: "3 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: ThreeIcons, bgcolor: "#FEDFD0" }, + id: "id3", + amount: 10, + price: 1000, + }, + { + name: "6 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: FourIcons, bgcolor: "#FEDFD0" }, + id: "id4", + amount: 10, + price: 1000, + }, + { + name: "9 месяц", + desc: "Текст-заполнитель — это текст, который имеет", + style: { icon: FiveIcons, bgcolor: "#FEDFD0" }, + id: "id5", + amount: 10, + price: 1000, + }, +]; diff --git a/src/components/StepperSample.tsx b/src/components/CustomRadioButtons.tsx similarity index 52% rename from src/components/StepperSample.tsx rename to src/components/CustomRadioButtons.tsx index c5b8f2b..327fc17 100644 --- a/src/components/StepperSample.tsx +++ b/src/components/CustomRadioButtons.tsx @@ -2,11 +2,17 @@ import { List, ListItem, Typography } from "@mui/material"; import { useState } from "react"; type Props = { - _mocsk_: { name: string; url: string }[]; + setType: React.Dispatch>; + _mocsk_: { name: string; type: string }[]; }; -export const StepperSample: React.FC = ({ _mocsk_ }) => { - const [active, setActive] = useState(); +export const CustomRadioButtons: React.FC = ({ setType, _mocsk_ }) => { + const [active, setActive] = useState(0); + + const onkl = (index: number, type: string) => { + setActive(index); + setType(type); + }; return ( = ({ _mocsk_ }) => { whiteSpace: "nowrap", }} > - {_mocsk_.map(({ name, url }, index) => + {_mocsk_.map(({ name, type }, index) => active === index ? ( - setActive(index)} sx={{ color: "#7E2AEA", cursor: "pointer" }}> + onkl(index, type)} sx={{ color: "#7E2AEA", cursor: "pointer" }}> {name} ) : ( - setActive(index)} sx={{ cursor: "pointer" }}> + onkl(index, type)} sx={{ cursor: "pointer" }}> {name} ) diff --git a/src/components/Navbar/NavbarFull.tsx b/src/components/Navbar/NavbarFull.tsx index 8ab8639..7eac696 100644 --- a/src/components/Navbar/NavbarFull.tsx +++ b/src/components/Navbar/NavbarFull.tsx @@ -31,7 +31,6 @@ export default function NavbarFull({ isLoggedIn }: Props) { useEffect(() => { setBasketQuantity(Object.keys(templ).length + Object.keys(squiz).length); }); - console.log(templ); async function handleLogoutClick() { clearToken(); diff --git a/src/index.tsx b/src/index.tsx index ec172ac..84df3e5 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -10,15 +10,14 @@ import Wallet from "./pages/Wallet"; import Payment from "./pages/Payment/Payment"; import Support from "./pages/Support/Support"; import CustomTariff from "./pages/CustomTariff/CustomTariff"; -import { TariffsVolume } from "./pages/Tariffs/TariffsVolume"; import { AccountSetup } from "./pages/AccountSetup"; import Landing from "./pages/Landing/Landing"; import Tariffs from "./pages/Tariffs/Tariffs"; -import { TariffsTime } from "./pages/Tariffs/TariffsTime"; import Signin from "./pages/auth/Signin"; import Signup from "./pages/auth/Signup"; import PaymentHistory from "./pages/PaymentHistory/PaymentHistory"; import { Basket } from "./pages/Basket/Basket"; +import { TariffPage } from "./pages/Tariffs/TariffsPage"; import Footer from "@components/Footer"; import Navbar from "@components/Navbar/Navbar"; @@ -76,12 +75,12 @@ const App = () => { } > - } /> + } /> - + } /> diff --git a/src/pages/Tariffs/Tariffs.tsx b/src/pages/Tariffs/Tariffs.tsx index 4141fb0..2c2fffb 100644 --- a/src/pages/Tariffs/Tariffs.tsx +++ b/src/pages/Tariffs/Tariffs.tsx @@ -1,18 +1,17 @@ -import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material"; import { Outlet, Route, Routes } from "react-router-dom"; +import { useMediaQuery, useTheme, Box, Link, Typography } from "@mui/material"; import CardWithLink from "@components/CardWithLink"; import SectionWrapper from "@components/SectionWrapper"; import CustomIcon from "@components/icons/CustomIcon"; +import CalendarIcon from "@components/icons/CalendarIcon"; +import PieChartIcon from "@components/icons/PieChartIcon"; import TariffCard from "./TariffCard"; import video1 from "../../assets/animations/Icon_1.webm"; import video2 from "../../assets/animations/Icon_2.webm"; import video3 from "../../assets/animations/Icon_3.webm"; -import CalendarIcon from "../../components/icons/CalendarIcon"; -import PieChartIcon from "../../components/icons/PieChartIcon"; - export default function Tariffs() { const theme = useTheme(); const upMd = useMediaQuery(theme.breakpoints.up("md")); diff --git a/src/pages/Tariffs/TariffsPage.tsx b/src/pages/Tariffs/TariffsPage.tsx new file mode 100644 index 0000000..958160d --- /dev/null +++ b/src/pages/Tariffs/TariffsPage.tsx @@ -0,0 +1,86 @@ +import { useState } from "react"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { useLocation } from "react-router-dom"; + +import SectionWrapper from "@components/SectionWrapper"; +import { CustomRadioButtons } from "@root/components/CustomRadioButtons"; +import { StepperSquiz } from "@components/StepperSquiz"; +import { FreeTariffCard } from "./FreeTariffCard"; +import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume"; + +import { basketStore } from "@root/stores/BasketStore"; + +import { _mocsk_ } from "@root/__mocks__/CustomRadioButtonsMocks"; +import { showCaseObject } from "@root/__mocks__/showCaseObject"; + +import { IconsCreate } from "@root/lib/IconsCreate"; + +export const TariffPage = () => { + const theme = useTheme(); + const upMd = useMediaQuery(theme.breakpoints.up("md")); + const { add } = basketStore(); + const location = useLocation(); + const [type, setType] = useState("templ"); + const unit: string = String(location.pathname).slice(9); + + const StepperText: Record = { volume: "Тарифы на объём", time: "Тарифы на время" }; + + console.log(type); + return ( + + + + {StepperText[unit]} + + + + {showCaseObject[type][unit].map((element, index) => ( + } + headerText={element.name} + text={element.desc} + money={element.price} + href="" + onclick={() => { + add({ id: element.id, type: type, obj: element }); + }} + textButton="выбрать" + /> + ))} + + + + + ); +}; diff --git a/src/pages/Tariffs/TariffsTime.tsx b/src/pages/Tariffs/TariffsTime.tsx deleted file mode 100644 index 980f91c..0000000 --- a/src/pages/Tariffs/TariffsTime.tsx +++ /dev/null @@ -1,126 +0,0 @@ -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 { basketStore } from "@root/stores/BasketStore"; - -import { IconsCreate } from "../../lib/IconsCreate"; - -import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk"; - -import Infinity from "../../assets/Icons/tariffs-time/Infinity.svg"; -import OneIcons from "../../assets/Icons/tariffs-time/OneIcons.svg"; -import ThreeIcons from "../../assets/Icons/tariffs-time/ThreeIcons.svg"; -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, - }, -]; -export const TariffsTime = () => { - const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - - const { add, templ } = basketStore(); - - return ( - - - - Тарифы на время - - - - {showcaseTime.map((element, index) => ( - } - headerText={element.name} - text={element.desc} - money={element.price} - href="" - onclick={() => { - add({ id: element.id, type: "templ", obj: element }); - console.log(templ); - }} - textButton="выбрать" - /> - ))} - - - - - ); -}; diff --git a/src/pages/Tariffs/TariffsVolume.tsx b/src/pages/Tariffs/TariffsVolume.tsx deleted file mode 100644 index 039ac8c..0000000 --- a/src/pages/Tariffs/TariffsVolume.tsx +++ /dev/null @@ -1,123 +0,0 @@ -import { useMediaQuery, useTheme, Box, Typography } from "@mui/material"; - -import SectionWrapper from "@components/SectionWrapper"; -import { StepperSquiz } from "@components/StepperSquiz"; -import { StepperSample } from "@components/StepperSample"; -import { TariffCardTimeAndVolume } from "./TariffCardTimeAndVolume"; -import { FreeTariffCard } from "./FreeTariffCard"; -import { basketStore } from "@root/stores/BasketStore"; - -import { IconsCreate } from "../../lib/IconsCreate"; - -import { _mocsk_ } from "@root/__mocks__/StepperSampleMocsk"; - -import OneIcons from "../../assets/Icons/tariffs-volume/OneIcons.svg"; -import TwoIcons from "../../assets/Icons/tariffs-volume/TwoIcons.svg"; -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, - }, -]; -export const TariffsVolume = () => { - const theme = useTheme(); - const upMd = useMediaQuery(theme.breakpoints.up("md")); - const { add } = basketStore(); - - return ( - - - - Тарифы на объем - - - - - {showcaseVolume.map((element, index) => ( - } - headerText={element.name} - text={element.desc} - money={element.price} - href="" - onclick={() => { - add({ id: element.id, type: "templ", obj: element }); - }} - textButton="выбрать" - /> - ))} - - - - ); -}; diff --git a/src/stores/BasketStore.ts b/src/stores/BasketStore.ts index 3902845..aa9c9f2 100644 --- a/src/stores/BasketStore.ts +++ b/src/stores/BasketStore.ts @@ -49,7 +49,7 @@ export const basketStore = create()((set, get) => ({ }; set(() => newStore); }, - remove: (type: any, id: string) => { + remove: (type: string, id: string) => { const store: any = get()[type] || {}; const newStore = Object.entries(store).reduce((accamulator, [key, value], index, array) => { diff --git a/src/stores/test/method-remove.test.ts b/src/stores/test/method-remove.test.ts new file mode 100644 index 0000000..17f506b --- /dev/null +++ b/src/stores/test/method-remove.test.ts @@ -0,0 +1,10 @@ +import { basketStore } from "../BasketStore"; + +describe("remove method tests", () => { + const key = ["templ", "squiz"]; + const remove = basketStore((state) => state.remove); + + test("test remove for the correct execution", () => { + remove("templ", "id1"); + }); +});