добавление в стор выбора типа квизов

src/index.tsx

@@ -26,7 +26,7 @@ const routeslink: {path: string; page: JSX.Element; header: boolean; sidebar: bo
     {path: "/list-empty", page: <FirstQuiz/>, header: false, sidebar: false},
     {path: "/list-full", page: <MyQuizzesFull/>, header: false, sidebar: false},
     {path: "/list-short", page: <MyQuizzes/>, header: false, sidebar: false},
-    {path: "/create", page: <StartPage/>, header: true, sidebar: true},
+    {path: "/create-quize/:quizId", page: <StartPage/>, header: true, sidebar: true},
     {path: "/questions", page: <QuestionsPage/>, header: true, sidebar: true},
     {path: "/contacts", page: <ContactFormPage/>, header: true, sidebar: true},
     {path: "/result", page: <Result/>, header: true, sidebar: true},

src/pages/createQuize/FirstQuiz.tsx

@@ -2,6 +2,7 @@ import {Button, Typography, useTheme} from "@mui/material";
 import ComplexNavText from "./ComplexNavText";
 import SectionWrapper from "@ui_kit/SectionWrapper";
 import {quizStore} from "@root/quizes";
+import {Link, useNavigate} from "react-router-dom";
 
 function getRandom(min: number, max:number) {
     min = Math.ceil(min);
@@ -10,7 +11,8 @@ function getRandom(min: number, max:number) {
 }
 
 export default function FirstQuiz() {
-    const {listQuizes, updateQuizesList, removeQuiz} = quizStore()
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
+    const navigate = useNavigate()
 
   return (
     <SectionWrapper
@@ -33,34 +35,7 @@ export default function FirstQuiz() {
       <Button
         variant="contained"
         onClick={() => {
-            updateQuizesList({
+            navigate(`/create-quize/${createBlank()}`);
-                "id": getRandom(10000, 100000),
-                "qid": "string",
-                "deleted": false,
-                "archived": true,
-                "fingerprinting": true,
-                "repeatable": true,
-                "note_prevented": true,
-                "mail_notifications": true,
-                "unique_answers": true,
-                "name": "string",
-                "description": "string",
-                "config": "string",
-                "status": "string",
-                "limit": 0,
-                "due_to": 0,
-                "time_of_passing": 0,
-                "pausable": true,
-                "version": 0,
-                "version_comment": "string",
-                "created_at": "string",
-                "updated_at": "string",
-                "question_cnt": 0,
-                "passed_count": 0,
-                "average_time": 0,
-                "super": true,
-                "group_id": 0
-            })
         }}
       >
         Создать +

src/pages/createQuize/MyQuizzesFull.tsx

@@ -5,21 +5,17 @@ import SectionWrapper from "@ui_kit/SectionWrapper";
 import React from "react";
 import {quizStore} from "@root/quizes";
 import FirstQuiz from "./FirstQuiz";
+import {useNavigate} from "react-router-dom";
 interface Props {
     outerContainerSx?: SxProps<Theme>;
     children?: React.ReactNode;
 }
 
-function getRandom(min: number, max:number) {
-    min = Math.ceil(min);
-    max = Math.floor(max);
-    return Math.floor(Math.random() * (max - min)) + min;
-}
-
-
 
 export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
-    const {listQuizes, updateQuizesList, removeQuiz} = quizStore()
+    const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
+    const navigate = useNavigate()
+
     return (
         <>
         {Object.keys(listQuizes).length === 0 ?
@@ -44,34 +40,7 @@ export default function MyQuizzesFull({outerContainerSx: sx, children}: Props) {
                                 variant="contained"
                                 sx={{padding: "10px 47px"}}
                                 onClick={() => {
-                                    updateQuizesList({
+                                    navigate(`/create-quize/${createBlank()}`);
-                                        "id": getRandom(10000, 100000),
-                                        "qid": "string",
-                                        "deleted": false,
-                                        "archived": true,
-                                        "fingerprinting": true,
-                                        "repeatable": true,
-                                        "note_prevented": true,
-                                        "mail_notifications": true,
-                                        "unique_answers": true,
-                                        "name": "string",
-                                        "description": "string",
-                                        "config": "string",
-                                        "status": "string",
-                                        "limit": 0,
-                                        "due_to": 0,
-                                        "time_of_passing": 0,
-                                        "pausable": true,
-                                        "version": 0,
-                                        "version_comment": "string",
-                                        "created_at": "string",
-                                        "updated_at": "string",
-                                        "question_cnt": 0,
-                                        "passed_count": 0,
-                                        "average_time": 0,
-                                        "super": true,
-                                        "group_id": 0
-                                    })
                                 }}
                             >Создать +</Button>
                         </Box>

src/pages/startPage/stepOne.tsx

@@ -2,6 +2,8 @@ import { Box, Button, Typography, useTheme } from "@mui/material";
 import CreationCard from "@ui_kit/CreationCard";
 import quizCreationImage1 from "../../assets/quiz-creation-1.png";
 import quizCreationImage2 from "../../assets/quiz-creation-2.png";
+import {useParams} from "react-router-dom";
+import {quizStore} from "@root/quizes";
 
 interface HandleNext {
   handleNext: () => void;
@@ -9,6 +11,10 @@ interface HandleNext {
 
 export default function StepOne({ handleNext }: HandleNext) {
   const theme = useTheme();
+  const params = Number(useParams().quizId);
+  console.log(params)
+  const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore()
+    console.log(listQuizes)
   return (
     <>
       <Box
@@ -18,18 +24,28 @@ export default function StepOne({ handleNext }: HandleNext) {
           mt: "60px",
         }}
       >
-        <Button variant="text" onClick={() => handleNext()}>
+        <Button variant="text" onClick={() => {
+            updateQuizesList(params, {config: "quize"})
+            handleNext()
+        }
+        }>
           <CreationCard
             header="Создание квиз-опроса"
             text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
             image={quizCreationImage1}
+            border={listQuizes[params].config === "quize" ? "1px solid #7E2AEA" : "none"}
           />
         </Button>
-        <Button variant="text" onClick={() => handleNext()}>
+        <Button variant="text" onClick={() => {
+            updateQuizesList(params, {config: "form"})
+            handleNext()
+        }
+        }>
           <CreationCard
             header="Создание анкеты"
             text="У стартовой страницы одна ключевая задача - заинтересовать посетителя пройти квиз. С ней сложно ошибиться, сформулируйте суть предложения и подберите живую фотографию, остальное мы сделаем за вас"
             image={quizCreationImage2}
+            border={listQuizes[params].config === "form" ? "1px solid #7E2AEA" : "none"}
           />
         </Button>
       </Box>

src/stores/quizes.ts

@@ -3,8 +3,9 @@ import { persist } from "zustand/middleware";
 
 interface QuizStore {
     listQuizes: {[key: number]: Quizes};
-    updateQuizesList: (newQuiz: Quizes) => void;
+    updateQuizesList: (id: number, values: unknown) => void;
     removeQuiz:(id: number) => void;
+    createBlank: () => void;
 }
 
 interface Quizes {
@@ -69,13 +70,13 @@ export const quizStore = create<QuizStore>()(
                 //     "group_id": 0
                 // }
                 },
-            updateQuizesList: (newQuiz) => {
+            updateQuizesList: (id: number, values: any) => {
                 const state = get()["listQuizes"] || {};
-                const newState = {
+                state[id] = {
-                    ...state,
+                    ...state[id],
-                    [newQuiz["id"]]: newQuiz
+                    ...values
                 };
-                set({listQuizes:newState});
+                set({listQuizes:state});
             },
             removeQuiz: (id) => {
                 const state = get()["listQuizes"] || {};
@@ -87,7 +88,41 @@ export const quizStore = create<QuizStore>()(
                     return accumulator;
                 }, {});
                 set({listQuizes:newState});
-            }
+            },
+            createBlank: () => {
+                const id = getRandom(1000000, 10000000)
+                const newListQuizes = get()["listQuizes"] || {};
+                newListQuizes[id] = {
+                        "id": id,
+                        "qid": "",
+                        "deleted": false,
+                        "archived": true,
+                        "fingerprinting": true,
+                        "repeatable": true,
+                        "note_prevented": true,
+                        "mail_notifications": true,
+                        "unique_answers": true,
+                        "name": "",
+                        "description": "",
+                        "config": "",
+                        "status": "",
+                        "limit": 0,
+                        "due_to": 0,
+                        "time_of_passing": 0,
+                        "pausable": true,
+                        "version": 0,
+                        "version_comment": "",
+                        "created_at": "",
+                        "updated_at": "",
+                        "question_cnt": 0,
+                        "passed_count": 0,
+                        "average_time": 0,
+                        "super": true,
+                        "group_id": 0
+                };
+                set({listQuizes:newListQuizes});
+                return id;
+            },
         }),
         {
             name: "quizes",
@@ -95,3 +130,8 @@ export const quizStore = create<QuizStore>()(
     )
 );
 
+function getRandom(min: number, max:number) {
+    min = Math.ceil(min);
+    max = Math.floor(max);
+    return Math.floor(Math.random() * (max - min)) + min;
+}

src/ui_kit/CreationCard.tsx

@@ -5,15 +5,17 @@ interface Props {
     header: string;
     text: string;
     image: any;
+    border?: string
 }
 
-export default function CreationCard({ header, text, image }: Props) {
+export default function CreationCard({ header, text, image, border}: Props) {
 
     return (
         <Box sx={{
             flexGrow: 1,
             backgroundColor: "white",
             p: "20px",
+            border: {border},
             borderRadius: "12px",
             display: "flex",
             flexDirection: "column",