fix: Stepper

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

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

src/pages/Result/Result.tsx

@@ -1,18 +1,18 @@
-import {Link, useParams} from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
-import {Box, Button, useTheme} from "@mui/material";
+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 params = Number(useParams().quizId);
-    const handleNext = () => {
+  const handleNext = () => {
-        updateQuizesList(params, {step: listQuizes[params].step + 1})
+    updateQuizesList(params, { createResult: true });
-    }
+  };
   const theme = useTheme();
   return (
     <Box component="section">
@@ -22,16 +22,16 @@ export const Result = () => {
         image={image}
       />
       <Box sx={{ mt: "30px", alignItems: "center" }}>
-          <Button
+        <Button
-            variant="contained"
+          variant="contained"
-            sx={{
+          sx={{
-              mr: "23px",
+            mr: "23px",
-              minWidth: "258px",
+            minWidth: "258px",
-            }}
+          }}
-            onClick={handleNext}
+          onClick={handleNext}
-          >
+        >
-            Создать результаты
+          Создать результаты
-          </Button>
+        </Button>
 
         <Info />
       </Box>

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={"Настройка стартовой страницы"} />
+          <Stepper
-          <SwitchStepPages activeStep={activeStep} handleNext={handleNext} />
+            activeStep={activeStep}
+            desc={DESCRIPTIONS[activeStep - 1]}
+          />
+          <SwitchStepPages
+            activeStep={activeStep}
+            quizType={listQuizes[params].config.type}
+            startpage={listQuizes[params].startpage}
+            createResult={listQuizes[params].createResult}
+          />
         </Box>
       </Box>
     </>

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];
 

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 {
+export default function StepOne() {
-  handleNext: () => void;
-}
-
-export default function StepOne({ handleNext }: HandleNext) {
   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

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 {
+export default function Steptwo () {
-    handleNext: () => void
-}
-
-export default function Steptwo ({handleNext}:HandleNext) {
     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"}/>

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

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

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:
+    case 3:
-      return <Result />;
+      if (!createResult) return <Result />;
-    case 6:
       return <Setting />;
-    case 7:
+    case 4:
       return <ContactFormPage />;
-    case 8:
+    case 5:
       return <InstallQuiz />;
+    case 6:
+      return <>Реклама</>;
+
     default:
       return <></>;
   }