From 6ea8bdb1a94337547ebf36879a8ed29d19d7bc4d Mon Sep 17 00:00:00 2001 From: IlyaDoronin Date: Thu, 24 Aug 2023 14:09:47 +0300 Subject: [PATCH] feat: questions store hint --- .../Questions/DataOptions/DataOptions.tsx | 106 ++++--- .../Questions/DataOptions/switchData.tsx | 40 +-- src/pages/Questions/DropDown/DropDown.tsx | 105 +++---- .../Questions/DropDown/switchDropDown.tsx | 40 +-- src/pages/Questions/Emoji/Emoji.tsx | 115 ++++---- src/pages/Questions/Emoji/switchEmoji.tsx | 40 +-- .../OptionsAndPicture/OptionsAndPicture.tsx | 12 +- .../switchOptionsAndPict.tsx | 46 +-- .../OptionsPicture/OptionsPicture.tsx | 139 +++++----- .../OptionsPicture/switchOptionsPict.tsx | 40 +-- .../Questions/OwnTextField/OwnTextField.tsx | 79 +++--- .../OwnTextField/switchTextField.tsx | 40 +-- .../Questions/PageOptions/PageOptions.tsx | 8 +- .../PageOptions/switchPageOptions.tsx | 38 +-- .../Questions/RatingOptions/RatingOptions.tsx | 109 +++++--- .../Questions/RatingOptions/switchRating.tsx | 38 +-- .../Questions/SliderOptions/SliderOptions.tsx | 101 ++++--- .../Questions/SliderOptions/switchSlider.tsx | 40 +-- src/pages/Questions/UploadFile/UploadFile.tsx | 262 ++++++++++-------- .../Questions/UploadFile/switchUpload.tsx | 40 +-- .../answerOptions/switchAnswerOptions.tsx | 47 ++-- src/pages/Questions/helpQuestions.tsx | 45 ++- src/stores/questions.ts | 12 + 23 files changed, 857 insertions(+), 685 deletions(-) diff --git a/src/pages/Questions/DataOptions/DataOptions.tsx b/src/pages/Questions/DataOptions/DataOptions.tsx index 824aaf0d..655ea762 100644 --- a/src/pages/Questions/DataOptions/DataOptions.tsx +++ b/src/pages/Questions/DataOptions/DataOptions.tsx @@ -1,56 +1,70 @@ -import {Box, Typography, useTheme} from "@mui/material"; +import { Box, Typography, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import SwitchData from "./switchData"; -import React, {useState} from "react"; +import React, { useState } from "react"; import InfoIcon from "../../../assets/icons/InfoIcon"; import SelectableButton from "@ui_kit/SelectableButton"; type dataType = "calendar" | "mask"; -interface Props{ - totalIndex: number +interface Props { + totalIndex: number; } -export default function DataOptions({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } +export default function DataOptions({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { + setSwitchState(data); + }; - const [dataType, setDataType] = useState("calendar"); - return ( - <> - - - - setDataType("calendar")}> - Использовать календарь - - setDataType("mask")}> - Использовать маску - - - - Пользователю будет предложено выбрать дату - - - - - - - ) -} \ No newline at end of file + const [dataType, setDataType] = useState("calendar"); + return ( + <> + + + setDataType("calendar")} + > + Использовать календарь + + setDataType("mask")} + > + Использовать маску + + + + + Пользователю будет предложено выбрать дату + + + + + + + + ); +} diff --git a/src/pages/Questions/DataOptions/switchData.tsx b/src/pages/Questions/DataOptions/switchData.tsx index 151faf45..f198301c 100644 --- a/src/pages/Questions/DataOptions/switchData.tsx +++ b/src/pages/Questions/DataOptions/switchData.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import HelpQuestions from "../helpQuestions"; import SettingData from "./settingData"; import BranchingQuestions from "../branchingQuestions"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchData({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchData({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/DropDown/DropDown.tsx b/src/pages/Questions/DropDown/DropDown.tsx index a46e67e7..7a06a908 100644 --- a/src/pages/Questions/DropDown/DropDown.tsx +++ b/src/pages/Questions/DropDown/DropDown.tsx @@ -1,60 +1,65 @@ -import {Box, Typography, Link, useTheme} from "@mui/material"; +import { Box, Typography, Link, useTheme } from "@mui/material"; import React from "react"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import SwitchDropDown from "./switchDropDown"; import ButtonsOptions from "../ButtonsOptions"; interface Props { - totalIndex: number + totalIndex: number; } +export default function DropDown({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); -export default function DropDown({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); + const SSHC = (data: string) => { + setSwitchState(data); + }; - const SSHC = (data: string) => { - setSwitchState(data) - } - - return ( - <> - - - Добавьте ответ - - - { - // console.info("I'm a button."); - // }} - > - Добавьте ответ - - или нажмите Enter - - - - - - - ) -} \ No newline at end of file + return ( + <> + + + Добавьте ответ + + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + + или нажмите Enter + + + + + + + + ); +} diff --git a/src/pages/Questions/DropDown/switchDropDown.tsx b/src/pages/Questions/DropDown/switchDropDown.tsx index 1d583e9c..f36d9101 100644 --- a/src/pages/Questions/DropDown/switchDropDown.tsx +++ b/src/pages/Questions/DropDown/switchDropDown.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import HelpQuestions from "../helpQuestions"; import SettingDropDown from "./settingDropDown"; import BranchingQuestions from "../branchingQuestions"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchDropDown({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchDropDown({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/Emoji/Emoji.tsx b/src/pages/Questions/Emoji/Emoji.tsx index 6bfae2d5..d02652c2 100644 --- a/src/pages/Questions/Emoji/Emoji.tsx +++ b/src/pages/Questions/Emoji/Emoji.tsx @@ -1,61 +1,68 @@ -import {Box, Link, Typography, useTheme} from "@mui/material"; +import { Box, Link, Typography, useTheme } from "@mui/material"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import ButtonsOptions from "../ButtonsOptions"; import SwitchEmoji from "./switchEmoji"; import React from "react"; import AddEmoji from "../../../assets/icons/questionsPage/addEmoji"; -interface Props{ - totalIndex: number +interface Props { + totalIndex: number; +} +export default function Emoji({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { + setSwitchState(data); + }; + return ( + <> + + + + + Добавьте ответ + + + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + + или нажмите Enter + + + + + + + + ); } -export default function Emoji({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } - return ( - <> - - - - - Добавьте ответ - - - - - { - // console.info("I'm a button."); - // }} - > - Добавьте ответ - - или нажмите Enter - - - - - - - ) -} \ No newline at end of file diff --git a/src/pages/Questions/Emoji/switchEmoji.tsx b/src/pages/Questions/Emoji/switchEmoji.tsx index b2caf5ee..538fb28d 100644 --- a/src/pages/Questions/Emoji/switchEmoji.tsx +++ b/src/pages/Questions/Emoji/switchEmoji.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import BranchingQuestions from "../branchingQuestions"; import HelpQuestions from "../helpQuestions"; import SettingEmoji from "./settingEmoji"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchEmoji({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchEmoji({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx index c9bbb6a0..da86cfa8 100644 --- a/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx +++ b/src/pages/Questions/OptionsAndPicture/OptionsAndPicture.tsx @@ -18,7 +18,9 @@ export default function OptionsAndPicture({ totalIndex }: Props) { return ( <> - + - - + + ); } diff --git a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx index b47b4b5d..25bf84ba 100644 --- a/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/switchOptionsAndPict.tsx @@ -1,30 +1,32 @@ -import * as React from 'react'; +import * as React from "react"; import BranchingQuestions from "../branchingQuestions"; import SettingOptionsAndPict from "./SettingOptionsAndPict"; import HelpQuestions from "../helpQuestions"; import UploadImage from "../UploadImage"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchOptionsAndPict({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - case 'image': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchOptionsAndPict({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + case "image": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx index 00b497f1..e64c2cf8 100644 --- a/src/pages/Questions/OptionsPicture/OptionsPicture.tsx +++ b/src/pages/Questions/OptionsPicture/OptionsPicture.tsx @@ -1,71 +1,82 @@ -import {Box, Link, Typography, useTheme} from "@mui/material"; +import { Box, Link, Typography, useTheme } from "@mui/material"; import React from "react"; import EnterIcon from "../../../assets/icons/questionsPage/enterIcon"; import AddImage from "../../../assets/icons/questionsPage/addImage"; import ButtonsOptions from "../ButtonsOptions"; import SwitchAnswerOptionsPict from "./switchOptionsPict"; - interface Props { - totalIndex: number - } -export default function OptionsPicture({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - // const [addInput, setAddInput] = React.useState([ - // 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]}; - // ]); - const SSHC = (data: string) => { - setSwitchState(data) - } +interface Props { + totalIndex: number; +} +export default function OptionsPicture({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + // const [addInput, setAddInput] = React.useState([ + // 0: {name: "распутье", variants: ["дорога влево", "дорога вправо"]}; + // ]); + const SSHC = (data: string) => { + setSwitchState(data); + }; - // const createCondition = (name) => { - // addInput([...state, {name: name}]) - // } - // - // const deleteCondition = (index) => { - // - // } - return ( - <> - - - - - Добавьте ответ - - + // const createCondition = (name) => { + // addInput([...state, {name: name}]) + // } + // + // const deleteCondition = (index) => { + // + // } + return ( + <> + + + + + Добавьте ответ + + - - { - // console.info("I'm a button."); - // }} - > - Добавьте ответ - - или нажмите Enter - - - - - - - ) -} \ No newline at end of file + + { + // console.info("I'm a button."); + // }} + > + Добавьте ответ + + + или нажмите Enter + + + + + + + + ); +} diff --git a/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx b/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx index 20c305d8..e21c7bf9 100644 --- a/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/switchOptionsPict.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import BranchingQuestions from "../branchingQuestions"; import SettingOpytionsPict from "./settingOpytionsPict"; import HelpQuestions from "../helpQuestions"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchAnswerOptionsPict({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchAnswerOptionsPict({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/OwnTextField/OwnTextField.tsx b/src/pages/Questions/OwnTextField/OwnTextField.tsx index 570eb3a6..cbb154d4 100644 --- a/src/pages/Questions/OwnTextField/OwnTextField.tsx +++ b/src/pages/Questions/OwnTextField/OwnTextField.tsx @@ -1,4 +1,4 @@ -import {Box, Typography, useTheme} from "@mui/material"; +import { Box, Typography, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import SwitchTextField from "./switchTextField"; import React from "react"; @@ -6,38 +6,47 @@ import CustomTextField from "@ui_kit/CustomTextField"; import InfoIcon from "../../../assets/icons/InfoIcon"; interface Props { - totalIndex: number + totalIndex: number; +} +export default function OwnTextField({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { + setSwitchState(data); + }; + return ( + <> + + + + + Пользователю будет дано поле для ввода значения{" "} + + + + + + + + ); } -export default function OwnTextField({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } - return ( - <> - - - - Пользователю будет дано поле для ввода значения - - - - - - - ) -} \ No newline at end of file diff --git a/src/pages/Questions/OwnTextField/switchTextField.tsx b/src/pages/Questions/OwnTextField/switchTextField.tsx index bc28c816..8094b45a 100644 --- a/src/pages/Questions/OwnTextField/switchTextField.tsx +++ b/src/pages/Questions/OwnTextField/switchTextField.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import BranchingQuestions from "../branchingQuestions"; import HelpQuestions from "../helpQuestions"; import SettingTextField from "./settingTextField"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchTextField({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchTextField({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/PageOptions/PageOptions.tsx b/src/pages/Questions/PageOptions/PageOptions.tsx index 492ca0f2..470de021 100644 --- a/src/pages/Questions/PageOptions/PageOptions.tsx +++ b/src/pages/Questions/PageOptions/PageOptions.tsx @@ -59,8 +59,12 @@ export default function PageOptions({ disableInput, totalIndex }: Props) { - - + + ); } diff --git a/src/pages/Questions/PageOptions/switchPageOptions.tsx b/src/pages/Questions/PageOptions/switchPageOptions.tsx index d760c8bc..cdbe38c5 100644 --- a/src/pages/Questions/PageOptions/switchPageOptions.tsx +++ b/src/pages/Questions/PageOptions/switchPageOptions.tsx @@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions"; import HelpQuestions from "../helpQuestions"; import SettingPageOptions from "./SettingPageOptions"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchPageOptions({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchPageOptions({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/RatingOptions/RatingOptions.tsx b/src/pages/Questions/RatingOptions/RatingOptions.tsx index 88c3df0b..dc792e7e 100644 --- a/src/pages/Questions/RatingOptions/RatingOptions.tsx +++ b/src/pages/Questions/RatingOptions/RatingOptions.tsx @@ -1,47 +1,76 @@ -import {Box, Typography, useTheme} from "@mui/material"; +import { Box, Typography, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import React from "react"; -import Rating from '@mui/material/Rating'; +import Rating from "@mui/material/Rating"; import RatingStar from "../../../assets/icons/questionsPage/ratingStar"; import SwitchRating from "./switchRating"; -interface Props{ - totalIndex: number +interface Props { + totalIndex: number; } -export default function RatingOptions({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } - return ( - <> - - `${value} Heart${value !== 1 ? 's' : ''}`} - precision={1} - icon={} - emptyIcon={} - sx={{display: 'flex', gap: '15px'}} - /> - - Негативно - Позитивно - - - - - - ) -} \ No newline at end of file +export default function RatingOptions({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { + setSwitchState(data); + }; + return ( + <> + + + `${value} Heart${value !== 1 ? "s" : ""}` + } + precision={1} + icon={} + emptyIcon={} + sx={{ display: "flex", gap: "15px" }} + /> + + + Негативно + + + Позитивно + + + + + + + ); +} diff --git a/src/pages/Questions/RatingOptions/switchRating.tsx b/src/pages/Questions/RatingOptions/switchRating.tsx index c4d3aa73..97e8086d 100644 --- a/src/pages/Questions/RatingOptions/switchRating.tsx +++ b/src/pages/Questions/RatingOptions/switchRating.tsx @@ -2,24 +2,26 @@ import BranchingQuestions from "../branchingQuestions"; import HelpQuestions from "../helpQuestions"; import SettingRating from "./settingRating"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchRating({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchRating({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/SliderOptions/SliderOptions.tsx b/src/pages/Questions/SliderOptions/SliderOptions.tsx index a7e282db..86351548 100644 --- a/src/pages/Questions/SliderOptions/SliderOptions.tsx +++ b/src/pages/Questions/SliderOptions/SliderOptions.tsx @@ -1,54 +1,63 @@ -import {Box, Typography, useTheme} from "@mui/material"; +import { Box, Typography, useTheme } from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; import React from "react"; import CustomTextField from "@ui_kit/CustomTextField"; import SwitchSlider from "./switchSlider"; -interface Props{ - totalIndex: number +interface Props { + totalIndex: number; } -export default function SliderOptions({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } +export default function SliderOptions({ totalIndex }: Props) { + const theme = useTheme(); + const [switchState, setSwitchState] = React.useState("setting"); + const SSHC = (data: string) => { + setSwitchState(data); + }; - return ( - <> - - - - Выбор значения из диапазона - - - — - - - - - - Начальное значение - - - - Шаг - - - - - - - - - ) -} \ No newline at end of file + return ( + <> + + + Выбор значения из диапазона + + + — + + + + + + Начальное значение + + + + Шаг + + + + + + + + ); +} diff --git a/src/pages/Questions/SliderOptions/switchSlider.tsx b/src/pages/Questions/SliderOptions/switchSlider.tsx index 3b0fa744..7f9de207 100644 --- a/src/pages/Questions/SliderOptions/switchSlider.tsx +++ b/src/pages/Questions/SliderOptions/switchSlider.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import HelpQuestions from "../helpQuestions"; import BranchingQuestions from "../branchingQuestions"; import SettingSlider from "./settingSlider"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchSlider({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchSlider({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/UploadFile/UploadFile.tsx b/src/pages/Questions/UploadFile/UploadFile.tsx index 43d8c2a2..38774ca1 100644 --- a/src/pages/Questions/UploadFile/UploadFile.tsx +++ b/src/pages/Questions/UploadFile/UploadFile.tsx @@ -1,133 +1,149 @@ -import {Box, FormControl, MenuItem, Select, SelectChangeEvent, Typography, useTheme} from "@mui/material"; +import { + Box, + FormControl, + MenuItem, + Select, + SelectChangeEvent, + Typography, + useTheme, +} from "@mui/material"; import ButtonsOptions from "../ButtonsOptions"; -import React, {useState} from "react"; +import React, { useState } from "react"; import InfoIcon from "../../../assets/icons/InfoIcon"; import ArrowDown from "../../../assets/icons/ArrowDownIcon"; import SwitchUpload from "./switchUpload"; -interface Props{ - totalIndex: number +interface Props { + totalIndex: number; } -export default function UploadFile({totalIndex}: Props) { - const theme = useTheme(); - const [switchState, setSwitchState] = React.useState('setting'); - const SSHC = (data: string) => { - setSwitchState(data) - } +export default function UploadFile({ totalIndex }: Props) { + 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 designTypes = [ + ["Все типы файлов"], + ["Изображения"], + ["Видео"], + ["Аудио"], + ["Документ"], + ]; + const [designType, setDesignType] = useState(designTypes[0][0]); + const handleChange = (event: SelectChangeEvent) => { + setDesignType(event.target.value); + }; - return ( - <> - + + + + } - > - {designTypes.map(type => - - {type[0]} - - )} - - - - - Пользователь может загрузить любой собственный файл - - - - - - - ) -} \ No newline at end of file + {designTypes.map((type) => ( + + {type[0]} + + ))} + + + + + + Пользователь может загрузить любой собственный файл + + + + + + + + ); +} diff --git a/src/pages/Questions/UploadFile/switchUpload.tsx b/src/pages/Questions/UploadFile/switchUpload.tsx index 30017cf3..f067d00a 100644 --- a/src/pages/Questions/UploadFile/switchUpload.tsx +++ b/src/pages/Questions/UploadFile/switchUpload.tsx @@ -1,26 +1,28 @@ -import * as React from 'react'; +import * as React from "react"; import BranchingQuestions from "../branchingQuestions"; import HelpQuestions from "../helpQuestions"; import SettingsUpload from "./settingUpload"; - interface Props { - switchState: string, + switchState: string; + totalIndex: number; } -export default function SwitchUpload({switchState = 'setting' }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchUpload({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/answerOptions/switchAnswerOptions.tsx b/src/pages/Questions/answerOptions/switchAnswerOptions.tsx index 9ffe2890..19bc9855 100644 --- a/src/pages/Questions/answerOptions/switchAnswerOptions.tsx +++ b/src/pages/Questions/answerOptions/switchAnswerOptions.tsx @@ -1,31 +1,32 @@ -import * as React from 'react'; +import * as React from "react"; import UploadImage from "../UploadImage"; import HelpQuestions from "../helpQuestions"; import ResponseSettings from "./responseSettings"; import BranchingQuestions from "../branchingQuestions"; - interface Props { - switchState: string, - totalIndex: number, + switchState: string; + totalIndex: number; } -export default function SwitchAnswerOptions({switchState = 'setting', totalIndex }: Props) { - - switch (switchState) { - case 'setting': - return (); - break; - case 'help': - return (); - break - case 'branching': - return (); - break; - case 'image': - return (); - break; - default: - return (<>) - } -} \ No newline at end of file +export default function SwitchAnswerOptions({ + switchState = "setting", + totalIndex, +}: Props) { + switch (switchState) { + case "setting": + return ; + break; + case "help": + return ; + break; + case "branching": + return ; + break; + case "image": + return ; + break; + default: + return <>; + } +} diff --git a/src/pages/Questions/helpQuestions.tsx b/src/pages/Questions/helpQuestions.tsx index 509ef6b9..dffdf397 100644 --- a/src/pages/Questions/helpQuestions.tsx +++ b/src/pages/Questions/helpQuestions.tsx @@ -12,16 +12,21 @@ import CustomTextField from "@ui_kit/CustomTextField"; import { useState } from "react"; import UploadIcon from "../../assets/icons/UploadIcon"; import UploadBox from "@ui_kit/UploadBox"; +import { questionStore, updateQuestionsList } from "@root/questions"; import type { DragEvent } from "react"; type BackgroundType = "text" | "video"; type BackgroundTypeModal = "linkVideo" | "ownVideo"; -export default function HelpQuestions() { +type HelpQuestionsProps = { + totalIndex: number; +}; + +export default function HelpQuestions({ totalIndex }: HelpQuestionsProps) { const [open, setOpen] = useState(false); - const [video, setVideo] = useState(""); const [backgroundType, setBackgroundType] = useState("text"); + const { listQuestions } = questionStore(); const [backgroundTypeModal, setBackgroundTypeModal] = useState("linkVideo"); const theme = useTheme(); @@ -31,8 +36,10 @@ export default function HelpQuestions() { const videoHC = (fileList: FileList | null) => { if (fileList?.length) { - const file = fileList[0]; - setVideo(URL.createObjectURL(file)); + const clonContent = listQuestions[totalIndex].content; + clonContent.hint.video = URL.createObjectURL(fileList[0]); + clonContent.hint.videoUrl = ""; + updateQuestionsList(totalIndex, { content: clonContent }); handleClose(); } }; @@ -77,7 +84,15 @@ export default function HelpQuestions() { {backgroundType === "text" ? ( <> - + { + let clonContent = listQuestions[totalIndex].content; + clonContent.hint.text = target.value; + updateQuestionsList(totalIndex, { content: clonContent }); + }} + /> ) : ( @@ -88,8 +103,16 @@ export default function HelpQuestions() { onClick={handleOpen} sx={{ justifyContent: "flex-start" }} > - {video ? ( - ) : ( diff --git a/src/stores/questions.ts b/src/stores/questions.ts index 810bf0b0..47bc0ac9 100644 --- a/src/stores/questions.ts +++ b/src/stores/questions.ts @@ -7,6 +7,12 @@ export type Variants = { hints: string; }; +type Hint = { + text: string; + video: string; + videoUrl: string; +}; + export interface Question { id: number; title: string; @@ -17,6 +23,7 @@ export interface Question { page: number; content: { variants: Variants[]; + hint: Hint; large: boolean; multi: boolean; own: boolean; @@ -85,6 +92,11 @@ export const createQuestion = (id: number) => { hints: "", }, ], + hint: { + text: "", + video: "", + videoUrl: "", + }, large: false, multi: false, own: false,