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

2023-05-26 21:27:33 +03:00 · 2023-05-26 21:27:33 +03:00 · 2dd34e61a9
commit 2dd34e61a9
parent 4adfc5e3f5
6 changed files with 78 additions and 76 deletions
--- a/src/index.tsx
+++ b/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},
--- a/src/pages/createQuize/FirstQuiz.tsx
+++ b/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({
-                "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
-            })
+            navigate(`/create-quize/${createBlank()}`);
        }}
      >
        Создать +
--- a/src/pages/createQuize/MyQuizzesFull.tsx
+++ b/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({
-                                        "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
-                                    })
+                                    navigate(`/create-quize/${createBlank()}`);
                                }}
                            >Создать +</Button>
                        </Box>
--- a/src/pages/startPage/stepOne.tsx
+++ b/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>
--- a/src/stores/quizes.ts
+++ b/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,
-                    [newQuiz["id"]]: newQuiz
+                state[id] = {
+                    ...state[id],
+                    ...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;
+}
--- a/src/ui_kit/CreationCard.tsx
+++ b/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",