fix: Stepper

2023-10-05 13:12:56 +03:00 · 2023-10-05 13:12:56 +03:00 · eb88eeb440
commit eb88eeb440
parent bdc7438378
10 changed files with 131 additions and 84 deletions
--- a/src/pages/ContactFormPage/ContactFormPage.tsx
+++ b/src/pages/ContactFormPage/ContactFormPage.tsx
@ -1,5 +1,4 @@
 import React from "react";
-import Stepper from "@ui_kit/Stepper";
 import { Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField } from "@mui/material";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 import CustomTextField from "@ui_kit/CustomTextField";
@ -41,7 +40,6 @@ export default function ContactFormPage() {
  const theme = useTheme();
  return (
    <>
-      <Stepper activeStep={activeStep} desc={"Настройте форму контактов"} />
      <Box sx={{ display: "flex", alignItems: "center", gap: "10px" }}>
        <Link
          sx={{
--- a/src/pages/InstallQuiz/InstallQuiz.tsx
+++ b/src/pages/InstallQuiz/InstallQuiz.tsx
@ -1,4 +1,5 @@
 import React, { useState } from "react";
+import { useParams } from "react-router-dom";
 import {
  Box,
  Button,
@ -18,7 +19,7 @@ import {
  Tooltip,
  useTheme,
 } from "@mui/material";
-import Stepper from "@ui_kit/Stepper";
+import { quizStore } from "@root/quizes";
 import LinkIcon from "../../assets/icons/LinkIcon";
 import InfoIcon from "../../assets/icons/InfoIcon";
 import ArrowDown from "../../assets/icons/ArrowDownIcon";
@ -70,17 +71,8 @@ export default function InstallQuiz() {
    },
  ];

-  const [activeStep, setActiveStep] = React.useState(5);
-
-  const handleNext = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep + 1);
-  };
-
-  const handleBack = () => {
-    setActiveStep((prevActiveStep) => prevActiveStep - 1);
-  };
-
  const [display, setDisplay] = React.useState("1");
+  const quizId = Number(useParams().quizId);
  const handleChange = (event: SelectChangeEvent) => {
    setDisplay(event.target.value);
  };
@ -96,9 +88,14 @@ export default function InstallQuiz() {
  const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");

  const theme = useTheme();
+  const { listQuizes, updateQuizesList } = quizStore();
+
+  const handleNext = () => {
+    updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
+  };
+
  return (
    <>
-      <Stepper activeStep={activeStep} desc={"Установите квиз"} />
      <Box sx={{ marginTop: "60px", display: "flex", gap: "40px" }}>
        <Paper
          sx={{
@ -416,7 +413,7 @@ export default function InstallQuiz() {
        >
          <ArrowLeft />
        </Button>
-        <Button variant="contained">Запустить рекламу</Button>
+        <Button variant="contained" onClick={handleNext}>Запустить рекламу</Button>
      </Box>

      <Modal
--- a/src/pages/Result/Result.tsx
+++ b/src/pages/Result/Result.tsx
@ -1,18 +1,18 @@
-import {Link, useParams} from "react-router-dom";
-import {Box, Button, useTheme} from "@mui/material";
+import { Link, useParams } from "react-router-dom";
+import { Box, Button, useTheme } from "@mui/material";
 import CreationFullCard from "./CreationFullCard";

 import Info from "../../assets/icons/Info";

 import image from "../../assets/Rectangle 110.png";
-import {quizStore} from "@root/quizes";
+import { quizStore } from "@root/quizes";

 export const Result = () => {
-    const {listQuizes, updateQuizesList} = quizStore();
+  const { listQuizes, updateQuizesList } = quizStore();
  const params = Number(useParams().quizId);
  const handleNext = () => {
-        updateQuizesList(params, {step: listQuizes[params].step + 1})
-    }
+    updateQuizesList(params, { createResult: true });
+  };
  const theme = useTheme();
  return (
    <Box component="section">
--- a/src/pages/startPage/StartPage.tsx
+++ b/src/pages/startPage/StartPage.tsx
@ -2,7 +2,16 @@ import Stepper from "@ui_kit/Stepper";
 import SwitchStepPages from "@ui_kit/switchStepPages";
 import React, { useState } from "react";
 import PenaLogo from "@ui_kit/PenaLogo";
-import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
+import {
+  Box,
+  Button,
+  Container,
+  FormControl,
+  IconButton,
+  TextField,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
 import BackArrowIcon from "@icons/BackArrowIcon";
 import NavMenuItem from "@ui_kit/Header/NavMenuItem";
 import EyeIcon from "@icons/EyeIcon";
@ -14,6 +23,15 @@ import { Burger } from "@icons/Burger";
 import { PenaLogoIcon } from "@icons/PenaLogoIcon";
 import { SidebarMobile } from "./Sidebar/SidebarMobile";

+const DESCRIPTIONS = [
+  "Настройка стартовой страницы",
+  "Задайте вопросы",
+  "Настройте авторезультаты",
+  "Настройте форму контактов",
+  "Установите квиз",
+  "Запустите рекламу",
+] as const;
+
 export default function StartPage() {
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const params = Number(useParams().quizId);
@ -24,10 +42,6 @@ export default function StartPage() {

  const [mobileSidebar, setMobileSidebar] = useState<boolean>(false);

-  const handleNext = () => {
-    updateQuizesList(params, { step: listQuizes[params].step + 1 });
-  };
-
  const handleBack = () => {
    let result = listQuizes[params].step - 1;
    updateQuizesList(params, { step: result ? result : 1 });
@ -50,7 +64,11 @@ export default function StartPage() {
          zIndex: theme.zIndex.drawer + 1,
        }}
      >
-        {isMobile ? <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} /> : <PenaLogo width={124} />}
+        {isMobile ? (
+          <PenaLogoIcon style={{ fontSize: "39px", color: "white" }} />
+        ) : (
+          <PenaLogo width={124} />
+        )}
        <Box
          sx={{
            display: isMobile ? "none" : "flex",
@ -104,7 +122,12 @@ export default function StartPage() {
              />
            ) : (
              <CustomAvatar
-                sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
+                sx={{
+                  ml: "11px",
+                  backgroundColor: theme.palette.orange.main,
+                  height: "36px",
+                  width: "36px",
+                }}
              />
            )}
          </Box>
@ -157,7 +180,12 @@ export default function StartPage() {
                Опубликовать
              </Button>
              <CustomAvatar
-                sx={{ ml: "11px", backgroundColor: theme.palette.orange.main, height: "36px", width: "36px" }}
+                sx={{
+                  ml: "11px",
+                  backgroundColor: theme.palette.orange.main,
+                  height: "36px",
+                  width: "36px",
+                }}
              />
            </Box>
          </>
@ -180,8 +208,16 @@ export default function StartPage() {
            boxSizing: "border-box",
          }}
        >
-          <Stepper activeStep={activeStep} desc={"Настройка стартовой страницы"} />
-          <SwitchStepPages activeStep={activeStep} handleNext={handleNext} />
+          <Stepper
+            activeStep={activeStep}
+            desc={DESCRIPTIONS[activeStep - 1]}
+          />
+          <SwitchStepPages
+            activeStep={activeStep}
+            quizType={listQuizes[params].config.type}
+            startpage={listQuizes[params].startpage}
+            createResult={listQuizes[params].createResult}
+          />
        </Box>
      </Box>
    </>
--- a/src/pages/startPage/StartPageSettings.tsx
+++ b/src/pages/startPage/StartPageSettings.tsx
@ -36,10 +36,6 @@ import AlignCenterIcon from "@icons/AlignCenterIcon";
 import DropFav from "./dropfavicon";
 import { createQuestion } from "@root/questions";

-interface HandleNext {
-  handleNext: () => void;
-}
-
 const designTypes = [
  [
    "standard",
@ -62,7 +58,7 @@ const designTypes = [
 type BackgroundType = "image" | "video";
 type AlignType = "left" | "right" | "center";

-export default function StartPageSettings({ handleNext }: HandleNext) {
+export default function StartPageSettings() {
  const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
  const params = Number(useParams().quizId);
  const theme = useTheme();
@ -73,6 +69,10 @@ export default function StartPageSettings({ handleNext }: HandleNext) {
  );
  const [alignType, setAlignType] = useState<AlignType>("left");

+  const handleNext = () => {
+    updateQuizesList(params, { step: listQuizes[params].step + 1 });
+  };
+
  const videoHC = (videoInp: HTMLInputElement) => {
    const file = videoInp.files?.[0];

--- a/src/pages/startPage/stepOne.tsx
+++ b/src/pages/startPage/stepOne.tsx
@ -5,11 +5,7 @@ import quizCreationImage2 from "../../assets/quiz-creation-2.png";
 import {useParams} from "react-router-dom";
 import {quizStore} from "@root/quizes";

-interface HandleNext {
-  handleNext: () => void;
-}
-
-export default function StepOne({ handleNext }: HandleNext) {
+export default function StepOne() {
  const theme = useTheme();

  const params = Number(useParams().quizId);
@ -28,7 +24,6 @@ export default function StepOne({ handleNext }: HandleNext) {
            let SPageClone = listQuizes[params].config
            SPageClone.type = "quize"
            updateQuizesList(params, {config: SPageClone })
-            handleNext()
        }
        }>
          <CreationCard
@ -42,7 +37,6 @@ export default function StepOne({ handleNext }: HandleNext) {
            let SPageClone = listQuizes[params].config
            SPageClone.type = "form"
            updateQuizesList(params, {config: SPageClone })
-            handleNext()
        }
        }>
          <CreationCard
--- a/src/pages/startPage/steptwo.tsx
+++ b/src/pages/startPage/steptwo.tsx
@ -6,11 +6,7 @@ import cardImage3 from "../../assets/card-3.png";
 import {quizStore} from "@root/quizes";
 import {useParams} from "react-router-dom";

-interface HandleNext {
-    handleNext: () => void
-}
-
-export default function Steptwo ({handleNext}:HandleNext) {
+export default function Steptwo () {
    const params = Number(useParams().quizId);
    const {listQuizes, updateQuizesList} = quizStore()
    return (
@ -27,7 +23,6 @@ export default function Steptwo ({handleNext}:HandleNext) {
                <Button variant='text'
                        onClick={() => {
                            updateQuizesList(params, {startpage: "standard"})
-                            handleNext()
                        }}
                >
                    <CardWithImage image={cardImage1} text="Standard" border={listQuizes[params].startpage === "standard" ? "1px solid #7E2AEA" : "none"} />
@ -35,7 +30,6 @@ export default function Steptwo ({handleNext}:HandleNext) {
                <Button variant='text'
                            onClick={() => {
                                updateQuizesList(params, {startpage: "expanded"})
-                                handleNext()
                            }}
                >
                    <CardWithImage image={cardImage2} text="Expanded" border={listQuizes[params].startpage === "expanded" ? "1px solid #7E2AEA" : "none"}/>
@ -43,7 +37,6 @@ export default function Steptwo ({handleNext}:HandleNext) {
                <Button variant='text'
                            onClick={() => {
                                updateQuizesList(params, {startpage: "centered"})
-                                handleNext()
                            }}
                >
                    <CardWithImage image={cardImage3} text="Centered" border={listQuizes[params].startpage === "centered" ? "1px solid #7E2AEA" : "none"}/>
--- a/src/stores/quizes.ts
+++ b/src/stores/quizes.ts
@ -36,6 +36,7 @@ export interface Quizes {
    group_id: number,
    step: number,
    startpage: string,
+    createResult: boolean,
    config:  {
        type: string,
        logo: string,
@ -118,6 +119,7 @@ export const quizStore = create<QuizStore>()(
                    "group_id": 0,
                    "step": 1,
                    "startpage": "",
+                    "createResult": false,
                    "config": {
                        "noStartPage": false,
                        "type": "", // quiz или form
--- a/src/ui_kit/Sidebar.tsx
+++ b/src/ui_kit/Sidebar.tsx
@ -1,5 +1,15 @@
 import { useState } from "react";
-import { Container, Box, useTheme, List, Typography, IconButton } from "@mui/material";
+import { useParams } from "react-router-dom";
+import {
+  Container,
+  Box,
+  useTheme,
+  List,
+  Typography,
+  IconButton,
+} from "@mui/material";
+
+import { quizStore } from "@root/quizes";

 import MegaphoneIcon from "../assets/icons/MegaphoneIcon";
 import QuestionIcon from "../assets/icons/QuestionIcon";
@ -33,8 +43,9 @@ const quizSettingsMenuItems = [
 export default function Sidebar() {
  const theme = useTheme();
  const [isMenuCollapsed, setIsMenuCollapsed] = useState(false);
-  const [activeMenuItemIndex, setActiveMenuItemIndex] = useState<number>(0);
  const [progress, setProgress] = useState<number>(1 / 6);
+  const quizId = Number(useParams().quizId);
+  const { listQuizes, updateQuizesList } = quizStore();

  const handleMenuCollapseToggle = () => setIsMenuCollapsed((prev) => !prev);
  return (
@ -76,7 +87,10 @@ export default function Sidebar() {
            Создание квиза
          </Typography>
        )}
-        <IconButton onClick={handleMenuCollapseToggle} sx={{ ml: isMenuCollapsed ? undefined : "auto" }}>
+        <IconButton
+          onClick={handleMenuCollapseToggle}
+          sx={{ ml: isMenuCollapsed ? undefined : "auto" }}
+        >
          <CollapseMenuIcon
            height="16px"
            width="16px"
@ -90,15 +104,17 @@ export default function Sidebar() {
          const Icon = menuItem[0];
          return (
            <MenuItem
-              onClick={() => setActiveMenuItemIndex(index)}
+              onClick={() => {
+                updateQuizesList(quizId, { step: index + 1 });
+              }}
              key={menuItem[1]}
              text={menuItem[1]}
              isCollapsed={isMenuCollapsed}
-              isActive={activeMenuItemIndex === index}
+              isActive={listQuizes[quizId].step === index + 1}
              icon={
                <Icon
                  color={
-                    activeMenuItemIndex === index
+                    listQuizes[quizId].step === index + 1
                      ? theme.palette.brightPurple.main
                      : isMenuCollapsed
                      ? "white"
@ -131,10 +147,10 @@ export default function Sidebar() {
        {quizSettingsMenuItems.map((menuItem, index) => {
          const Icon = menuItem[0];
          const totalIndex = index + createQuizMenuItems.length;
-          const isActive = activeMenuItemIndex === totalIndex;
+          const isActive = listQuizes[quizId].step === totalIndex + 1;
          return (
            <MenuItem
-              onClick={() => setActiveMenuItemIndex(totalIndex)}
+              onClick={() => updateQuizesList(quizId, { step: totalIndex + 1 })}
              key={menuItem[1]}
              text={menuItem[1]}
              isActive={isActive}
@ -142,7 +158,11 @@ export default function Sidebar() {
              icon={
                <Icon
                  color={
-                    isActive ? theme.palette.brightPurple.main : isMenuCollapsed ? "white" : theme.palette.grey2.main
+                    isActive
+                      ? theme.palette.brightPurple.main
+                      : isMenuCollapsed
+                      ? "white"
+                      : theme.palette.grey2.main
                  }
                  height={isMenuCollapsed ? "35px" : "24px"}
                  width={isMenuCollapsed ? "35px" : "24px"}
--- a/src/ui_kit/switchStepPages.tsx
+++ b/src/ui_kit/switchStepPages.tsx
@ -10,27 +10,34 @@ import { Setting } from "../pages/Result/Setting";

 interface Props {
  activeStep: number;
-  handleNext: () => void;
+  quizType: string;
+  startpage: string;
+  createResult: boolean;
 }

-export default function SwitchStepPages({ activeStep = 1, handleNext }: Props) {
+export default function SwitchStepPages({
+  activeStep = 1,
+  quizType,
+  startpage,
+  createResult,
+}: Props) {
  switch (activeStep) {
    case 1:
-      return <StepOne handleNext={handleNext} />;
+      if (!quizType) return <StepOne />;
+      if (!startpage) return <Steptwo />;
+      return <StartPageSettings />;
    case 2:
-      return <Steptwo handleNext={handleNext} />;
-    case 3:
-      return <StartPageSettings handleNext={handleNext} />;
-    case 4:
      return <QuestionsPage />;
-    case 5:
-      return <Result />;
-    case 6:
+    case 3:
+      if (!createResult) return <Result />;
      return <Setting />;
-    case 7:
+    case 4:
      return <ContactFormPage />;
-    case 8:
+    case 5:
      return <InstallQuiz />;
+    case 6:
+      return <>Реклама</>;
+
    default:
      return <></>;
  }