From 51c11eac353bf887ae9e0b81b063b260fa4ef640 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 25 Aug 2023 12:14:53 +0300 Subject: [PATCH 1/8] feat: upload file store logic --- .../OwnTextField/settingTextField.tsx | 4 +- src/pages/Questions/UploadFile/UploadFile.tsx | 53 +++++++++++++------ src/stores/questions.ts | 4 +- 3 files changed, 38 insertions(+), 23 deletions(-) diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index ee22ce49..e7ecdaf2 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -13,15 +13,13 @@ import { questionStore, updateQuestionsList } from "@root/questions"; import InfoIcon from "../../../assets/icons/InfoIcon"; -import type { QuestionType } from "@root/questions"; - type SettingTextFieldProps = { totalIndex: number; }; type Answer = { name: string; - value: QuestionType; + value: string; }; const ANSWER_TYPES: Answer[] = [ diff --git a/src/pages/Questions/UploadFile/UploadFile.tsx b/src/pages/Questions/UploadFile/UploadFile.tsx index 38774ca1..716fea8e 100644 --- a/src/pages/Questions/UploadFile/UploadFile.tsx +++ b/src/pages/Questions/UploadFile/UploadFile.tsx @@ -1,3 +1,4 @@ +import { useState, useEffect } from "react"; import { Box, FormControl, @@ -8,7 +9,9 @@ import { useTheme, } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; -import React, { useState } from "react"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import InfoIcon from "../../../assets/icons/InfoIcon"; import ArrowDown from "../../../assets/icons/ArrowDownIcon"; import SwitchUpload from "./switchUpload"; @@ -17,25 +20,41 @@ interface Props { totalIndex: number; } +const DESIGN_TYPES = [ + { name: "Все типы файлов", value: "all" }, + { name: "Изображения", value: "picture" }, + { name: "Видео", value: "video" }, + { name: "Аудио", value: "audio" }, + { name: "Документ", value: "document" }, +]; + export default function UploadFile({ totalIndex }: Props) { + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { setSwitchState(data); }; - const designTypes = [ - ["Все типы файлов"], - ["Изображения"], - ["Видео"], - ["Аудио"], - ["Документ"], - ]; - const [designType, setDesignType] = useState(designTypes[0][0]); - const handleChange = (event: SelectChangeEvent) => { - setDesignType(event.target.value); + const handleChange = ({ target }: SelectChangeEvent) => { + const clonContent = listQuestions[totalIndex].content; + clonContent.type = target.value; + updateQuestionsList(totalIndex, { content: clonContent }); }; + useEffect(() => { + const isTypeSetted = DESIGN_TYPES.find( + ({ value }) => value === listQuestions[totalIndex].content.type + ); + + if (!isTypeSetted) { + const clonContent = listQuestions[totalIndex].content; + clonContent.type = DESIGN_TYPES[0].value; + updateQuestionsList(totalIndex, { content: clonContent }); + } + }, []); + return ( <> } > - {designTypes.map((type) => ( + {DESIGN_TYPES.map(({ name, value }) => ( - {type[0]} + {name} ))} diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 64636c58..2473f36d 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -7,8 +7,6 @@ export type Variants = { hints: string; }; -export type QuestionType = "single" | "multi" | "number"; - type Hint = { text: string; video: string; @@ -43,7 +41,7 @@ export interface Question { innerName: string; back: string; placeholder: string; - type: QuestionType; + type: string; }; version: number; parent_ids: number[]; From 8592e9e212b0e5194beda6467b963427c3972905 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 25 Aug 2023 12:30:25 +0300 Subject: [PATCH 2/8] fix: upload pictures store --- .../Questions/UploadFile/settingUpload.tsx | 38 +++++++++++++------ .../Questions/UploadFile/switchUpload.tsx | 4 +- src/stores/questions.ts | 2 + 3 files changed, 31 insertions(+), 13 deletions(-) diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx index b3b1336b..15245742 100644 --- a/src/pages/Questions/UploadFile/settingUpload.tsx +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -1,15 +1,31 @@ -import {Box, Typography} from "@mui/material"; +import { Box, Typography } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import InfoIcon from "../../../assets/icons/InfoIcon"; +type SettingsUploadProps = { + totalIndex: number; +}; -export default function SettingsUpload() { - return ( - - Настройки вопроса - - - - - ); -}; \ No newline at end of file +export default function SettingsUpload({ totalIndex }: SettingsUploadProps) { + const { listQuestions } = questionStore(); + + return ( + + Настройки вопроса + { + const clonContent = listQuestions[totalIndex].content; + clonContent.autofill = target.checked; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> + + + + ); +} diff --git a/src/pages/Questions/UploadFile/switchUpload.tsx b/src/pages/Questions/UploadFile/switchUpload.tsx index 783feac7..83d19b2c 100644 --- a/src/pages/Questions/UploadFile/switchUpload.tsx +++ b/src/pages/Questions/UploadFile/switchUpload.tsx @@ -14,13 +14,13 @@ export default function SwitchUpload({ }: Props) { switch (switchState) { case "setting": - return ; + return ; break; case "help": return ; break; case "branching": - return ; + return ; break; default: return <>; diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 2473f36d..c07f095d 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -42,6 +42,7 @@ export interface Question { back: string; placeholder: string; type: string; + autofill: boolean; }; version: number; parent_ids: number[]; @@ -106,6 +107,7 @@ export const createQuestion = (id: number) => { back: "", placeholder: "", type: "single", + autofill: true, variants: [ { answer: "", From 9a2288adaefdc3424caeb3096f30711f8d6e21e7 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 25 Aug 2023 13:27:43 +0300 Subject: [PATCH 3/8] feat: dropdown store logic --- .../AnswerDraggableList/AnswerItem.tsx | 0 .../StrictModeDroppable.tsx | 0 .../AnswerDraggableList/helper.ts | 0 .../AnswerDraggableList/index.tsx | 0 src/pages/Questions/DropDown/DropDown.tsx | 49 +++++++++----- .../Questions/DropDown/settingDropDown.tsx | 64 +++++++++++++------ .../Questions/DropDown/switchDropDown.tsx | 2 +- .../Questions/answerOptions/AnswerOptions.tsx | 2 +- src/stores/questions.ts | 2 + 9 files changed, 81 insertions(+), 38 deletions(-) rename src/pages/Questions/{answerOptions => }/AnswerDraggableList/AnswerItem.tsx (100%) rename src/pages/Questions/{answerOptions => }/AnswerDraggableList/StrictModeDroppable.tsx (100%) rename src/pages/Questions/{answerOptions => }/AnswerDraggableList/helper.ts (100%) rename src/pages/Questions/{answerOptions => }/AnswerDraggableList/index.tsx (100%) diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/AnswerItem.tsx rename to src/pages/Questions/AnswerDraggableList/AnswerItem.tsx diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx b/src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/StrictModeDroppable.tsx rename to src/pages/Questions/AnswerDraggableList/StrictModeDroppable.tsx diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts b/src/pages/Questions/AnswerDraggableList/helper.ts similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/helper.ts rename to src/pages/Questions/AnswerDraggableList/helper.ts diff --git a/src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx b/src/pages/Questions/AnswerDraggableList/index.tsx similarity index 100% rename from src/pages/Questions/answerOptions/AnswerDraggableList/index.tsx rename to src/pages/Questions/AnswerDraggableList/index.tsx diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index 7a06a908..f195f8ff 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -1,5 +1,9 @@ +import { useState } from "react"; import { Box, Typography, Link, useTheme } from "@mui/material"; -import React from "react"; +import { AnswerDraggableList } from "../AnswerDraggableList"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchDropDown from "./switchDropDown"; import ButtonsOptions from "../ButtonsOptions"; @@ -9,35 +13,48 @@ interface Props { } export default function DropDown({ totalIndex }: Props) { + const [switchState, setSwitchState] = useState("setting"); + const { listQuestions } = questionStore(); const theme = useTheme(); - const [switchState, setSwitchState] = React.useState("setting"); + const variants = listQuestions[totalIndex].content.variants; const SSHC = (data: string) => { setSwitchState(data); }; + const addNewAnswer = () => { + const answerNew = variants.slice(); + answerNew.push({ answer: "", answerLong: "", hints: "" }); + + updateQuestionsList(totalIndex, { + content: { ...listQuestions[totalIndex].content, variants: answerNew }, + }); + }; + return ( <> - - Добавьте ответ - + {variants.length === 0 ? ( + + Добавьте ответ + + ) : ( + + )} { - // console.info("I'm a button."); - // }} + onClick={addNewAnswer} > Добавьте ответ diff --git a/src/pages/Questions/DropDown/settingDropDown.tsx b/src/pages/Questions/DropDown/settingDropDown.tsx index 4d708b1f..c8b90169 100644 --- a/src/pages/Questions/DropDown/settingDropDown.tsx +++ b/src/pages/Questions/DropDown/settingDropDown.tsx @@ -1,25 +1,49 @@ -import {Box, Typography} from "@mui/material"; +import { Box, Typography } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomTextField from "@ui_kit/CustomTextField"; + +import { questionStore, updateQuestionsList } from "@root/questions"; + import InfoIcon from "../../../assets/icons/InfoIcon"; -export default function SettingDropDown() { - return( - <> - - - Настройки ответов - +type SettingDropDownProps = { + totalIndex: number; +}; - Текст в выпадающем списке - - - - Настройки вопросов - - - - - - ) -} \ No newline at end of file +export default function SettingDropDown({ totalIndex }: SettingDropDownProps) { + const { listQuestions } = questionStore(); + + return ( + <> + + + + Настройки ответов + + + + Текст в выпадающем списке + + { + const clonContent = listQuestions[totalIndex].content; + clonContent.default = target.value; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> + + + + Настройки вопросов + + + + + + + ); +} diff --git a/src/pages/Questions/DropDown/switchDropDown.tsx b/src/pages/Questions/DropDown/switchDropDown.tsx index 88aa794f..ac7d3b12 100644 --- a/src/pages/Questions/DropDown/switchDropDown.tsx +++ b/src/pages/Questions/DropDown/switchDropDown.tsx @@ -14,7 +14,7 @@ export default function SwitchDropDown({ }: Props) { switch (switchState) { case "setting": - return ; + return ; break; case "help": return ; diff --git a/src/pages/Questions/answerOptions/AnswerOptions.tsx b/src/pages/Questions/answerOptions/AnswerOptions.tsx index a0c82379..c6eff88f 100755 --- a/src/pages/Questions/answerOptions/AnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/AnswerOptions.tsx @@ -2,7 +2,7 @@ import { useState } from "react"; import { Box, Typography, Link, useTheme } from "@mui/material"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchAnswerOptions from "./switchAnswerOptions"; -import { AnswerDraggableList } from "./AnswerDraggableList"; +import { AnswerDraggableList } from "../AnswerDraggableList"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import { questionStore, updateQuestionsList } from "@root/questions"; diff --git a/src/stores/questions.ts b/src/stores/questions.ts index c07f095d..046d3dd9 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -43,6 +43,7 @@ export interface Question { placeholder: string; type: string; autofill: boolean; + default: string; }; version: number; parent_ids: number[]; @@ -108,6 +109,7 @@ export const createQuestion = (id: number) => { placeholder: "", type: "single", autofill: true, + default: "", variants: [ { answer: "", From 96c58dfd1899b3d465bef20b44dbdc3e6da427e2 Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Fri, 25 Aug 2023 14:18:25 +0300 Subject: [PATCH 4/8] fix: bugs --- .../answerOptions/responseSettings.tsx | 28 ++++++++++++------- src/pages/Questions/branchingQuestions.tsx | 2 +- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/pages/Questions/answerOptions/responseSettings.tsx b/src/pages/Questions/answerOptions/responseSettings.tsx index 24410a50..6a465748 100644 --- a/src/pages/Questions/answerOptions/responseSettings.tsx +++ b/src/pages/Questions/answerOptions/responseSettings.tsx @@ -1,23 +1,31 @@ +import { useState, useEffect } from "react"; import { Box, Typography } from "@mui/material"; import CustomCheckbox from "@ui_kit/CustomCheckbox"; 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, updateQuestionsList } from "@root/questions"; +import type { ChangeEvent } from "react"; + interface Props { totalIndex: number; } export default function ResponseSettings({ totalIndex }: Props) { - const params = Number(useParams().quizId); + const [checked, setChecked] = useState(false); const { listQuestions } = questionStore(); - const [checked, setChecked] = React.useState([true, false]); - const handleChange = (event: React.ChangeEvent) => { - setChecked([checked[0], event.target.checked]); + + const handleChange = (event: ChangeEvent) => { + setChecked(event.target.checked); }; + useEffect(() => { + if (listQuestions[totalIndex].content.innerName.length) { + setChecked(true); + } + }, []); + return ( @@ -62,18 +70,18 @@ export default function ResponseSettings({ totalIndex }: Props) { {" "} - {checked[1] && ( + {checked && ( { + text={listQuestions[totalIndex].content.innerName} + onChange={({ target }) => { let clonContent = listQuestions[totalIndex].content; - clonContent.innerName = e.target.value; + clonContent.innerName = target.value; updateQuestionsList(totalIndex, { content: clonContent }); }} /> diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index 92a9ca94..0a798be6 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -165,7 +165,7 @@ export default function BranchingQuestions({ + Date: Mon, 28 Aug 2023 14:16:00 +0300 Subject: [PATCH 8/8] refactor: branch store removed --- src/pages/Questions/ButtonsOptionsAndPict.tsx | 2 -- src/pages/Questions/branchingQuestions.tsx | 24 +++-------------- src/stores/branches.ts | 27 ------------------- 3 files changed, 3 insertions(+), 50 deletions(-) delete mode 100644 src/stores/branches.ts diff --git a/src/pages/Questions/ButtonsOptionsAndPict.tsx b/src/pages/Questions/ButtonsOptionsAndPict.tsx index 7fd1e614..26b64933 100644 --- a/src/pages/Questions/ButtonsOptionsAndPict.tsx +++ b/src/pages/Questions/ButtonsOptionsAndPict.tsx @@ -10,7 +10,6 @@ import DeleteIcon from "../../assets/icons/questionsPage/deleteIcon"; import ImgIcon from "../../assets/icons/questionsPage/imgIcon"; import { useParams } from "react-router-dom"; import { questionStore, removeQuestion, resetSomeField } from "@root/questions"; -import { branchStore } from "@root/branches"; import "./ButtonsOptionsAndPict.css"; @@ -27,7 +26,6 @@ export default function ButtonsOptionsAndPict({ }: Props) { const params = Number(useParams().quizId); const { openedModalSettings } = questionStore(); - const { branch } = branchStore(); const theme = useTheme(); const openedModal = () => { diff --git a/src/pages/Questions/branchingQuestions.tsx b/src/pages/Questions/branchingQuestions.tsx index 0a798be6..ee281397 100644 --- a/src/pages/Questions/branchingQuestions.tsx +++ b/src/pages/Questions/branchingQuestions.tsx @@ -1,4 +1,3 @@ -import { useEffect } from "react"; import { Box, Button, @@ -18,7 +17,6 @@ import { resetSomeField, updateQuestionsList, } from "@root/questions"; -import { branchStore, updateBranchState } from "@root/branches"; import { Select } from "./Select"; import DeleteIcon from "@icons/questionsPage/deleteIcon"; @@ -42,20 +40,8 @@ export default function BranchingQuestions({ totalIndex, }: BranchingQuestionsProps) { const { openedModalSettings, listQuestions } = questionStore(); - const { branch } = branchStore(); const theme = useTheme(); - useEffect(() => { - updateBranchState({ - action: listQuestions[totalIndex].content.rule.show - ? ACTIONS[0] - : ACTIONS[1], - condition: listQuestions[totalIndex].content.rule.or - ? CONDITIONS[0] - : CONDITIONS[1], - }); - }, []); - const handleClose = () => { resetSomeField({ openedModalSettings: "" }); }; @@ -120,7 +106,6 @@ export default function BranchingQuestions({ const clonContent = listQuestions[totalIndex].content; clonContent.rule.show = action === ACTIONS[0]; updateQuestionsList(totalIndex, { content: clonContent }); - updateBranchState({ action }); }} /> @@ -180,7 +165,6 @@ export default function BranchingQuestions({ }; updateQuestionsList(totalIndex, { content: clonContent }); - updateBranchState({ stipulation }); }} sx={{ marginBottom: "15px" }} /> @@ -225,7 +209,6 @@ export default function BranchingQuestions({ updateQuestionsList(totalIndex, { content: clonContent, }); - updateBranchState({ answer }); }} sx={{ marginBottom: "10px", @@ -295,14 +278,13 @@ export default function BranchingQuestions({ { const clonContent = listQuestions[totalIndex].content; clonContent.rule.or = target.value === CONDITIONS[0]; updateQuestionsList(totalIndex, { content: clonContent }); - updateBranchState({ - condition: CONDITIONS[Number(target.value)], - }); }} > {CONDITIONS.map((condition, index) => ( diff --git a/src/stores/branches.ts b/src/stores/branches.ts deleted file mode 100644 index 56d0747e..00000000 --- a/src/stores/branches.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { create } from "zustand"; - -export type Branch = { - action: string; - stipulation: string; - answer: string; - condition: string; -}; - -interface BranchStore { - branch: Branch; -} - -export const branchStore = create()(() => ({ - branch: { - action: "", - stipulation: "", - answer: "", - condition: "", - }, -})); - -export const updateBranchState = (data: Partial) => { - const state = { ...branchStore.getState().branch }; - - branchStore.setState({ branch: { ...state, ...data } }); -};