From 6e76c78cb8651a410c1160c24089c9a0ad19fff5 Mon Sep 17 00:00:00 2001 From: Nastya Date: Fri, 21 Jul 2023 01:02:20 +0300 Subject: [PATCH] =?UTF-8?q?=D0=B2=D0=BE=D0=BF=D1=80=D0=BE=D1=81=D1=8B=20?= =?UTF-8?q?=D1=82=D0=B5=D0=BF=D0=B5=D1=80=D1=8C=20=D0=B2=20=D0=BC=D0=B0?= =?UTF-8?q?=D1=81=D1=81=D0=B8=D0=B2=D0=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/questionsPage/PointsIcon.tsx | 1 + src/pages/Questions/ButtonsOptions.tsx | 8 +- src/pages/Questions/ButtonsOptionsAndPict.tsx | 8 +- src/pages/Questions/QuestionPageCard.tsx | 87 +++++----- src/pages/Questions/QuestionsPage.tsx | 32 +--- src/pages/Questions/SwitchQuestionsPage.tsx | 15 +- src/pages/Questions/TypeQuestions.tsx | 8 +- .../Questions/answerOptions/AnswerOptions.tsx | 22 +-- .../answerOptions/responseSettings.tsx | 26 +-- src/pages/Questions/branchingQuestions.tsx | 7 +- src/pages/Questions/questionList.tsx | 40 +++++ src/pages/startPage/StartPage.tsx | 2 +- src/pages/startPage/StartPageSettings.tsx | 3 +- src/stores/questions.ts | 156 ++++++++++-------- src/ui_kit/switchStepPages.tsx | 8 - 15 files changed, 212 insertions(+), 211 deletions(-) create mode 100644 src/pages/Questions/questionList.tsx diff --git a/src/assets/icons/questionsPage/PointsIcon.tsx b/src/assets/icons/questionsPage/PointsIcon.tsx index da26e066..4e672feb 100755 --- a/src/assets/icons/questionsPage/PointsIcon.tsx +++ b/src/assets/icons/questionsPage/PointsIcon.tsx @@ -15,6 +15,7 @@ export default function PointsIcon() { display: "flex", alignItems: "center", justifyContent: "center", + cursor: "move" }} > diff --git a/src/pages/Questions/ButtonsOptions.tsx b/src/pages/Questions/ButtonsOptions.tsx index 5addea83..1b0a8edc 100644 --- a/src/pages/Questions/ButtonsOptions.tsx +++ b/src/pages/Questions/ButtonsOptions.tsx @@ -8,7 +8,7 @@ import HideIcon from "../../assets/icons/questionsPage/hideIcon"; import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import { questionStore, resetSomeField, removeQuestion } from "@root/questions"; interface Props { switchState: string; @@ -18,9 +18,9 @@ interface Props { export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) { const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore() + const {openedModalSettings} = questionStore() const openedModal = () => { - createOpenedModalSettings({openedModalSettings: "open"}) + resetSomeField({openedModalSettings: "open"}) console.log(openedModalSettings) } const theme = useTheme(); @@ -87,7 +87,7 @@ export default function ButtonsOptions({ SSHC, switchState, totalIndex }: Props) - removeQuestion(params, totalIndex)}> + removeQuestion(totalIndex)}> diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 1fe5360e..ab809d37 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -9,7 +9,7 @@ import CopyIcon from "../../assets/icons/questionsPage/CopyIcon"; import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import { questionStore, removeQuestion, resetSomeField} from "@root/questions"; interface Props { switchState: string; @@ -19,9 +19,9 @@ interface Props { export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: Props) { const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore() + const {openedModalSettings} = questionStore() const openedModal = () => { - createOpenedModalSettings({openedModalSettings: "open"}) + resetSomeField({openedModalSettings: "open"}) console.log(openedModalSettings) } const theme = useTheme(); @@ -103,7 +103,7 @@ export default function ButtonsOptionsAndPict({ SSHC, switchState, totalIndex }: - removeQuestion(params, totalIndex)}> + removeQuestion(totalIndex)}> diff --git a/src/pages/Questions/QuestionPageCard.tsx b/src/pages/Questions/QuestionPageCard.tsx index 014a2023..a9036718 100644 --- a/src/pages/Questions/QuestionPageCard.tsx +++ b/src/pages/Questions/QuestionPageCard.tsx @@ -19,7 +19,7 @@ import SwitchQuestionsPage from "./SwitchQuestionsPage"; import React, {useState} from "react"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import {questionStore, updateQuestionsList, removeQuestion} from "@root/questions"; import CopyIcon from "@icons/questionsPage/CopyIcon"; import CrossedEyeIcon from "@icons/CrossedEyeIcon"; import HideIcon from "@icons/questionsPage/hideIcon"; @@ -36,11 +36,38 @@ import Page from "@icons/questionsPage/page"; import RatingIcon from "@icons/questionsPage/rating"; interface Props { - DeleteClick: () => void; totalIndex: number } -export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) { + const IconAndrom = (isExpanded:boolean, switchState:string) => { + switch (switchState) { + case 'variant': + return (); + case 'images': + return (); + case 'varimg': + return (); + case 'emoji': + return (); + case 'text': + return (); + case 'select': + return (); + case 'date': + return (); + case 'number': + return (); + case 'file': + return (); + case 'page': + return (); + case 'rating': + return (); + default: + return (<>) + } + } +export default function QuestionsPageCard({totalIndex}: Props) { function onDragStart(event: any) { event @@ -50,49 +77,11 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) { const theme = useTheme(); - const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() + const {listQuestions} = questionStore() const [isExpanded, setIsExpanded] = useState(false); - const switchState = listQuestions[params][totalIndex].type - const IconAndrom = () => { - switch (switchState) { - case 'variant': - return (); - break; - case 'images': - return (); - break - case 'varimg': - return (); - break; - case 'emoji': - return (); - break; - case 'text': - return (); - break; - case 'select': - return (); - break; - case 'date': - return (); - break; - case 'number': - return (); - break; - case 'file': - return (); - break; - case 'page': - return (); - break; - case 'rating': - return (); - break; - default: - return (<>) - } - } + const switchState = listQuestions[totalIndex].type + console.log(listQuestions[totalIndex].type) + console.log(totalIndex) return ( { - updateQuestionsList(params, totalIndex, {title: e.target.value}) - console.log(listQuestions[params][totalIndex].title) + updateQuestionsList(totalIndex, {title: e.target.value}) + console.log(listQuestions[totalIndex].title) }} InputProps={{ startAdornment: ( - {IconAndrom()} + {IconAndrom(isExpanded, switchState)} ), }} @@ -179,7 +168,7 @@ export default function QuestionsPageCard({totalIndex, DeleteClick}: Props) { /> - + removeQuestion(totalIndex)}> diff --git a/src/pages/Questions/QuestionsPage.tsx b/src/pages/Questions/QuestionsPage.tsx index 5410c9de..bd758064 100755 --- a/src/pages/Questions/QuestionsPage.tsx +++ b/src/pages/Questions/QuestionsPage.tsx @@ -6,13 +6,13 @@ import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft"; import {quizStore} from "@root/quizes"; import {useParams} from "react-router-dom"; import QuestionsPageCard from "./QuestionPageCard"; -import {questionStore} from "@root/questions"; -import QuizCard from "../createQuize/QuizCard"; +import {questionStore, createQuestion} from "@root/questions"; +import QuestionsList from "./questionList"; export default function QuestionsPage() { const {listQuizes, updateQuizesList} = quizStore(); const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() + const {listQuestions} = questionStore() const activeStep = listQuizes[params].step console.log(listQuestions) const handleNext = () => { @@ -24,22 +24,6 @@ export default function QuestionsPage() { updateQuizesList(params, {step: result ? result : 1}) }; - function onDragOver(event: any) { - event.preventDefault(); - } - - function onDrop(event: any) { - const id = event - .dataTransfer - .getData('text'); - const draggableElement = document.getElementById(id); - const dropzone = event.target; - dropzone.appendChild(draggableElement); - event - .dataTransfer - .clearData(); - } - const theme = useTheme(); return ( @@ -54,15 +38,7 @@ export default function QuestionsPage() { textDecorationColor: theme.palette.brightPurple.main }}>Свернуть всё - - {Object.values(listQuestions[params]).map((e, index) => ( - removeQuestion(params,index)}/> - ) - )} - + ); - break; case 'images': return (); - break; case 'varimg': return (); - break; case 'emoji': return (); - break; case 'text': return (); - break; case 'select': return (); - break; case 'date': return (); - break; case 'number': return (); - break; case 'file': return (); - break; case 'page': return (); - break; case 'rating': return (); - break; default: return (<>) diff --git a/src/pages/Questions/TypeQuestions.tsx b/src/pages/Questions/TypeQuestions.tsx index 06880321..5c5b2dad 100755 --- a/src/pages/Questions/TypeQuestions.tsx +++ b/src/pages/Questions/TypeQuestions.tsx @@ -13,7 +13,7 @@ import RatingIcon from "../../assets/icons/questionsPage/rating"; import {Box, useTheme} from "@mui/material"; import React from "react"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import {questionStore, updateQuestionsList} from "@root/questions"; interface Props { totalIndex: number @@ -22,8 +22,8 @@ interface Props { export default function TypeQuestions({totalIndex }: Props) { const theme = useTheme() const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() - const switchState = listQuestions[params][totalIndex].type + const {listQuestions} = questionStore() + const switchState = listQuestions[totalIndex].type const buttonTypeQuestions: { icon: JSX.Element; title: string; value: string }[] = [ { icon: , @@ -89,7 +89,7 @@ export default function TypeQuestions({totalIndex }: Props) { key={title} onClick={() => { console.log(value) - updateQuestionsList(params, totalIndex, {type: value}) + updateQuestionsList(totalIndex, {type: value}) }} icon={icon} text={title} diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index c2a67a3a..c8d73bbe 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -5,7 +5,7 @@ import SwitchAnswerOptions from "./switchAnswerOptions"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import QuestionsPageCard from "../QuestionPageCard"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import { questionStore, updateQuestionsList } from "@root/questions"; import PointsIcon from "@icons/questionsPage/PointsIcon"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; import MessageIcon from "@icons/messagIcon"; @@ -20,8 +20,8 @@ interface Props { export default function AnswerOptions({totalIndex}: Props) { const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() - const Answer = listQuestions[params][totalIndex].content.variants + const {listQuestions} = questionStore() + const Answer = listQuestions[totalIndex].content.variants console.log(Answer) const theme = useTheme(); const [switchState, setSwitchState] = React.useState('setting'); @@ -74,9 +74,9 @@ export default function AnswerOptions({totalIndex}: Props) { onChange={(e) => { const answerNew = Answer answerNew[index].answer = e.target.value - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.variants = answerNew - updateQuestionsList(params, totalIndex, {content: clonContent})}} + updateQuestionsList(totalIndex, {content: clonContent})}} InputProps={{ startAdornment: ( @@ -102,18 +102,18 @@ export default function AnswerOptions({totalIndex}: Props) { onChange={(e) => { const answerNew = Answer answerNew[index].hints = e.target.value - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.variants = answerNew - updateQuestionsList(params, totalIndex, {content: clonContent})}} + updateQuestionsList(totalIndex, {content: clonContent})}} /> { const answerNew = Answer answerNew.splice(index, 1) - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.variants = answerNew - updateQuestionsList(params, totalIndex, {content: clonContent}) + updateQuestionsList(totalIndex, {content: clonContent}) }} > @@ -152,9 +152,9 @@ export default function AnswerOptions({totalIndex}: Props) { onClick={() => { const answerNew = Answer answerNew.push({answer: "",}) - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.variants = answerNew - updateQuestionsList(params, totalIndex, {content: clonContent}) + updateQuestionsList(totalIndex, {content: clonContent}) }} > Добавьте ответ diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index e16e7239..fa1ea5b7 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -4,7 +4,7 @@ import InfoIcon from "../../../assets/icons/InfoIcon"; import * as React from "react"; import CustomTextField from "@ui_kit/CustomTextField"; import {useParams} from "react-router-dom"; -import {questionStore} from "@root/questions"; +import {questionStore, updateQuestionsList} from "@root/questions"; interface Props { totalIndex: number, @@ -12,7 +12,7 @@ interface Props { export default function ResponseSettings({totalIndex}: Props) { const params = Number(useParams().quizId); - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion} = questionStore() + const {listQuestions} = questionStore() const [checked, setChecked] = React.useState([true, false]); const handleChange = (event: React.ChangeEvent) => { setChecked([checked[0], event.target.checked, ]); @@ -24,34 +24,34 @@ export default function ResponseSettings({totalIndex}: Props) { Настройки ответов { - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.multi = e.target.checked - updateQuestionsList(params, totalIndex, {content: clonContent}) + updateQuestionsList( totalIndex, {content: clonContent}) }} /> { - let clonContent = listQuestions[params][totalIndex].content + let clonContent = listQuestions[totalIndex].content clonContent.own = e.target.checked - updateQuestionsList(params, totalIndex, {content: clonContent}) + updateQuestionsList(totalIndex, {content: clonContent}) }} /> Настройки вопросов - { - updateQuestionsList(params, totalIndex, {required: !e.target.checked}) - console.log(listQuestions[params][totalIndex].required)}}/> + updateQuestionsList(totalIndex, {required: !e.target.checked}) + console.log(listQuestions[totalIndex].required)}}/> {checked[1] ? - updateQuestionsList(params, totalIndex, {description: e.target.value})}/> + updateQuestionsList(totalIndex, {description: e.target.value})}/> : <> } diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index 3d115226..b61e35ed 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -21,16 +21,15 @@ import { useState } from "react"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; import RadioCheck from "@ui_kit/RadioCheck"; import RadioIcon from "@ui_kit/RadioIcon"; -import {questionStore} from "@root/questions"; +import { questionStore, resetSomeField } from "@root/questions"; export default function BranchingQuestions() { - const {listQuestions, updateQuestionsList, createQuestion, removeQuestion, openedModalSettings, createOpenedModalSettings} = questionStore() + const {openedModalSettings} = questionStore() const theme = useTheme(); const [condition, setCondition] = useState(false); const handleClose = () => { - createOpenedModalSettings({openedModalSettings: ""}) - console.log(openedModalSettings) + resetSomeField({openedModalSettings: ""}) } const [display, setDisplay] = React.useState("1"); diff --git a/src/pages/Questions/questionList.tsx b/src/pages/Questions/questionList.tsx new file mode 100644 index 00000000..8c4e1673 --- /dev/null +++ b/src/pages/Questions/questionList.tsx @@ -0,0 +1,40 @@ +import React from "react"; +import {useParams} from "react-router-dom"; +import {Box} from "@mui/material"; +import QuestionsPageCard from "./QuestionPageCard"; +import {quizStore} from "@root/quizes"; +import {questionStore, removeQuestion} from "@root/questions"; + +export default () => { + const quizId = Number(useParams().quizId); + const {listQuizes, updateQuizesList} = quizStore(); + const {listQuestions} = questionStore() + + function onDragOver(event: any) { + event.preventDefault(); + } + + function onDrop(event: any) { + const id = event + .dataTransfer + .getData('text'); + const draggableElement = document.getElementById(id); + const dropzone = event.target; + dropzone.appendChild(draggableElement); + event + .dataTransfer + .clearData(); + } + return ( + + {console.log(listQuestions)} + {listQuestions.map((e:any, index:number) => ( + + ) + )} + + ) +} \ No newline at end of file diff --git a/src/pages/startPage/StartPage.tsx b/src/pages/startPage/StartPage.tsx index 88bdf1fd..1d4189b7 100755 --- a/src/pages/startPage/StartPage.tsx +++ b/src/pages/startPage/StartPage.tsx @@ -12,7 +12,7 @@ import {quizStore} from "@root/quizes"; import {useParams} from "react-router-dom"; -export default function StartPage() { +export default function StartPage() { const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); const params = Number(useParams().quizId); const activeStep = listQuizes[params].step diff --git a/src/pages/startPage/StartPageSettings.tsx b/src/pages/startPage/StartPageSettings.tsx index 195543d3..3b801836 100755 --- a/src/pages/startPage/StartPageSettings.tsx +++ b/src/pages/startPage/StartPageSettings.tsx @@ -32,7 +32,7 @@ import DropZone from "./dropZone"; import Extra from "./extra"; import AlignCenterIcon from "@icons/AlignCenterIcon"; import DropFav from "./dropfavicon"; -import {questionStore} from "@root/questions"; +import {createQuestion} from "@root/questions"; interface HandleNext { handleNext: () => void; @@ -50,7 +50,6 @@ type AlignType = "left" | "right" | "center"; export default function StartPageSettings({ handleNext }: HandleNext) { const {listQuizes, updateQuizesList, removeQuiz, createBlank} = quizStore(); - const {listQuestions, updateQuestionsList, createQuestion} = questionStore() const params = Number(useParams().quizId); const theme = useTheme(); const designType = listQuizes[params].startpage diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 89034003..6f7ba38f 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -1,90 +1,106 @@ import {create} from "zustand"; import {persist} from "zustand/middleware"; + +type Variants = { + answer: string; + answerLong: string; + hints: string; +} + +interface Question { + id: number; + title: string; + description: string; + type: string; + required: true, + deleted: true, + page: number; + content: { + variants: Variants[]; + own: boolean; + multi: boolean; + }, + version: number; + parent_ids: number[]; + created_at: string; + updated_at: string; +} + interface QuestionStore { listQuestions: any; - updateQuestionsList: (id: number, index: number, values: unknown) => void; - removeQuestion: any; - createQuestion: (id: number) => void; - openedModalSettings: any - createOpenedModalSettings: (data: any) => void; + openedModalSettings: string; } export const questionStore = create()( persist( - (set, get) => ({ - listQuestions: { - }, - updateQuestionsList: (id: number, index: number, values: any) => { - const array = get()["listQuestions"][id] || []; - array[index] = { - ...array[index], - ...values - }; - const state = get()["listQuestions"] || {}; - state[id] = array - set({listQuestions: state}); - }, - - createQuestion:(id: number) => { - const idQ = getRandom(1000000, 10000000) - const array = get()["listQuestions"][id] || []; - array.push( - { - "id": idQ, - "title": "", - "description": "", - "type": "", - "required": true, - "deleted": true, - "page": 0, - "content": { - variants: [ - { - answer: "", - answerLong: "", - hints: "" - } - ], - own: true, - multi: true - }, - "version": 0, - "parent_ids": [ - 0 - ], - "created_at": "", - "updated_at": "" - } - ) - const state = get()["listQuestions"] || {}; - state[id] = array - set({listQuestions: state}); - }, - - removeQuestion: (id:number, index: number) => { - const array = get()["listQuestions"][id] || []; - array.splice(index, 1) - const state = get()["listQuestions"] || {}; - state[id] = array - set({listQuestions: state}); - }, - + () => ({ + listQuestions: [], openedModalSettings: "", - - createOpenedModalSettings: (data:any) => { - const oldState = get() - const newStore = {...oldState, ...data} - set(newStore) - } - }), + }), { name: "question", } ) ); +export const updateQuestionsList = (index: number, data: any) => { + const array = [...questionStore.getState()["listQuestions"]] + array.splice(index, 0, data) + questionStore.setState({listQuestions: array}); +} + +export const createQuestion = (id: number) => { + const idQ = getRandom(1000000, 10000000) + const newData = [...questionStore.getState()["listQuestions"]]//пересоздание массива + newData.push({ + "id": idQ, + "title": "", + "description": "", + "type": "", + "required": true, + "deleted": true, + "page": 0, + "content": { + variants: [ + { + answer: "", + answerLong: "", + hints: "" + } + ], + own: true, + multi: true + }, + "version": 0, + "parent_ids": [ + 0 + ], + "created_at": "", + "updated_at": "" + }) + questionStore.setState({listQuestions: newData}); +} + +export const removeQuestion = (index: number) => { + const array = [...questionStore.getState()["listQuestions"]] + array.splice(index, 1) + questionStore.setState({listQuestions: array}) +} + +export const resetSomeField = (data:any) => {questionStore.setState(data)} + +export const findQuestionById = (id_question: number):(null | any) => { + let found = null; + questionStore.getState()["listQuestions"].some((quiz:any, index:number) => { + if (quiz.id_question === id_question) { + found = {quiz, index} + return true + } + }) + return found; +} function getRandom(min: number, max: number) { min = Math.ceil(min); diff --git a/src/ui_kit/switchStepPages.tsx b/src/ui_kit/switchStepPages.tsx index c861f9f6..dd03d029 100755 --- a/src/ui_kit/switchStepPages.tsx +++ b/src/ui_kit/switchStepPages.tsx @@ -18,28 +18,20 @@ export default function SwitchStepPages({activeStep = 1, handleNext }: Props) { switch (activeStep) { case 1: return (); - break; case 2: return (); - break case 3: return (); - break; case 4: return (); - break; case 5: return (); - break; case 6: return (); - break; case 7: return (); - break; case 8: return (); - break; default: return (<>) }