inputs receive value from state

remove unused code
This commit is contained in:
nflnkr 2024-02-26 18:56:07 +03:00
parent bf1d150954
commit 312f366501
19 changed files with 86 additions and 277 deletions

@ -1,29 +1,24 @@
import { MessageIcon } from "@icons/messagIcon";
import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { TextareaAutosize } from "@mui/base/TextareaAutosize";
import { import {
Box, Box,
FormControl, FormControl,
IconButton, IconButton,
InputAdornment, InputAdornment,
Popover,
TextField as MuiTextField, TextField as MuiTextField,
TextFieldProps,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
TextFieldProps,
} from "@mui/material"; } from "@mui/material";
import { import {
addQuestionVariant, addQuestionVariant,
deleteQuestionVariant, deleteQuestionVariant,
setQuestionVariantField, setQuestionVariantField,
} from "@root/questions/actions"; } from "@root/questions/actions";
import { enqueueSnackbar } from "notistack";
import type { ChangeEvent, FC, KeyboardEvent, ReactNode } from "react"; import type { ChangeEvent, FC, KeyboardEvent, ReactNode } from "react";
import { useState } from "react";
import { Draggable } from "react-beautiful-dnd"; import { Draggable } from "react-beautiful-dnd";
import type { QuestionVariant } from "../../../model/questionTypes/shared"; import type { QuestionVariant } from "../../../model/questionTypes/shared";
import { useDebouncedCallback } from "use-debounce";
import { enqueueSnackbar } from "notistack";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; const TextField = MuiTextField as unknown as FC<TextFieldProps>;
@ -48,21 +43,6 @@ export const AnswerItem = ({
}: AnswerItemProps) => { }: AnswerItemProps) => {
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(790)); const isTablet = useMediaQuery(theme.breakpoints.down(790));
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const [inputValue, setInputValue] = useState(variant.answer);
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id, "answer", value);
}, 200);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
setIsOpen(true);
};
const handleClose = () => {
setIsOpen(false);
};
return ( return (
<Draggable draggableId={String(index)} index={index}> <Draggable draggableId={String(index)} index={index}>
@ -80,16 +60,20 @@ export const AnswerItem = ({
}} }}
> >
<TextField <TextField
value={inputValue} value={variant.answer}
fullWidth fullWidth
focused={false} focused={false}
placeholder={"Добавьте ответ"} placeholder={"Добавьте ответ"}
multiline={largeCheck} multiline={largeCheck}
onChange={({ target }: ChangeEvent<HTMLInputElement>) => { onChange={({ target }: ChangeEvent<HTMLInputElement>) => {
if (target.value.length <= 1000) { if (target.value.length <= 1000) {
setInputValue(target.value); setQuestionVariantField(
questionId,
variant.id,
"answer",
target.value || " ",
);
} }
setQuestionVariantAnswer(target.value || " ");
}} }}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => { onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (disableKeyDown) { if (disableKeyDown) {

@ -1,15 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionDate } from "../../../model/questionTypes/date"; import type { QuizQuestionDate } from "../../../model/questionTypes/date";
type SettingsDataProps = { type SettingsDataProps = {
@ -22,10 +13,6 @@ export default function SettingsData({ question }: SettingsDataProps) {
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -1,15 +1,7 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionSelect } from "../../../model/questionTypes/select"; import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
type SettingDropDownProps = { type SettingDropDownProps = {
@ -21,17 +13,13 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const debounced = useDebouncedCallback((value) => { const setContentDefault = (value: string) => {
setQuestionInnerName(question.id, value);
}, 200);
const debounceAnswer = useDebouncedCallback((value) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "select") return; if (question.type !== "select") return;
question.content.default = value; question.content.default = value;
}); });
}, 200); };
return ( return (
<> <>
@ -98,9 +86,9 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
</Typography> </Typography>
<CustomTextField <CustomTextField
placeholder={"Выберите вариант"} placeholder={"Выберите вариант"}
text={question.content.default} value={question.content.default}
maxLength={60} maxLength={60}
onChange={({ target }) => debounceAnswer(target.value)} onChange={({ target }) => setContentDefault(target.value)}
/> />
</Box> </Box>
</Box> </Box>
@ -178,7 +166,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) {
<CustomTextField <CustomTextField
placeholder={"Выберите вариант"} placeholder={"Выберите вариант"}
text={question.content.default} text={question.content.default}
onChange={({ target }) => debounceAnswer(target.value)} onChange={({ target }) => setContentDefault(target.value)}
/> />
</Box> </Box>
{/*{question.content.innerNameCheck && (*/} {/*{question.content.innerNameCheck && (*/}

@ -1,15 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji"; import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
type SettingEmojiProps = { type SettingEmojiProps = {
@ -19,14 +10,9 @@ type SettingEmojiProps = {
export default function SettingEmoji({ question }: SettingEmojiProps) { export default function SettingEmoji({ question }: SettingEmojiProps) {
const theme = useTheme(); const theme = useTheme();
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const isTablet = useMediaQuery(theme.breakpoints.down(985));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -77,14 +77,14 @@ export default function QuestionsPageCard({
const isTablet = useMediaQuery(theme.breakpoints.down(1000)); const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setTitle = useDebouncedCallback((title) => { const setTitle = (title: string) => {
const updateQuestionFn = const updateQuestionFn =
question.type === null ? updateUntypedQuestion : updateQuestion; question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, (question) => { updateQuestionFn(question.id, (question) => {
question.title = title; question.title = title;
}); });
}, 200); };
const handleInputFocus = () => { const handleInputFocus = () => {
setIsTextFieldtActive(true); setIsTextFieldtActive(true);
@ -137,7 +137,7 @@ export default function QuestionsPageCard({
> >
<TextField <TextField
placeholder={`Заголовок ${questionIndex + 1} вопроса`} placeholder={`Заголовок ${questionIndex + 1} вопроса`}
defaultValue={question.title} value={question.title}
onChange={({ target }) => { onChange={({ target }) => {
if (target.value.length <= 225) setTitle(target.value); if (target.value.length <= 225) setTitle(target.value);
}} }}

@ -1,15 +1,7 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
type SettingOptionsAndPictProps = { type SettingOptionsAndPictProps = {
@ -24,17 +16,13 @@ export default function SettingOptionsAndPict({
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(680)); const isMobile = useMediaQuery(theme.breakpoints.down(680));
const setReplText = useDebouncedCallback((replText) => { const setReplText = (replText: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "varimg") return; if (question.type !== "varimg") return;
question.content.replText = replText; question.content.replText = replText;
}); });
}, 200); };
const setDescription = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<> <>

@ -1,18 +1,12 @@
import { import {
Box, Box,
Button, Button,
Tooltip,
Typography, Typography,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import FormatIcon1 from "../../../assets/icons/questionsPage/FormatIcon1";
import FormatIcon2 from "../../../assets/icons/questionsPage/FormatIcon2";
import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11"; import ProportionsIcon11 from "../../../assets/icons/questionsPage/ProportionsIcon11";
import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12"; import ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12";
import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21"; import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21";
@ -43,18 +37,6 @@ export default function SettingOpytionsPict({
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const debounced = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
const updateProportions = (proportions: Proportion) => {
updateQuestion(question.id, (question) => {
if (question.type !== "images") return;
question.content.xy = proportions;
});
};
return ( return (
<> <>
<Box <Box

@ -7,14 +7,12 @@ import {
} from "@mui/material"; } from "@mui/material";
import { updateQuestion } from "@root/questions/actions"; import { updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField"; import CustomTextField from "@ui_kit/CustomTextField";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import { useState } from "react"; import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon"; import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "../../../model/questionTypes/text"; import type { QuizQuestionText } from "../../../model/questionTypes/text";
import ButtonsOptions from "../ButtonsOptions";
import SwitchTextField from "./switchTextField";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";
import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict"; import ButtonsOptionsAndPict from "../ButtonsOptionsAndPict";
import SwitchTextField from "./switchTextField";
interface Props { interface Props {
question: QuizQuestionText; question: QuizQuestionText;
@ -32,13 +30,13 @@ export default function OwnTextField({
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const setPlaceholder = useDebouncedCallback((value) => { const setPlaceholder = (value: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "text") return; if (question.type !== "text") return;
question.content.placeholder = value; question.content.placeholder = value;
}); });
}, 200); };
const SSHC = (data: string) => { const SSHC = (data: string) => {
setSwitchState(data); setSwitchState(data);
@ -60,7 +58,7 @@ export default function OwnTextField({
> >
<CustomTextField <CustomTextField
placeholder={"Пример ответа"} placeholder={"Пример ответа"}
text={question.content.placeholder} value={question.content.placeholder}
onChange={({ target }) => setPlaceholder(target.value)} onChange={({ target }) => setPlaceholder(target.value)}
sx={{ sx={{
maxWidth: isFigmaTablte ? "549px" : "640px", maxWidth: isFigmaTablte ? "549px" : "640px",

@ -1,21 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
FormControl,
FormControlLabel,
Radio,
RadioGroup,
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import CheckedIcon from "@ui_kit/RadioCheck";
import CheckIcon from "@ui_kit/RadioIcon";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionText } from "../../../model/questionTypes/text"; import type { QuizQuestionText } from "../../../model/questionTypes/text";
type SettingTextFieldProps = { type SettingTextFieldProps = {
@ -38,10 +23,6 @@ export default function SettingTextField({ question }: SettingTextFieldProps) {
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const debounced = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -17,11 +17,9 @@ import CustomTextField from "@ui_kit/CustomTextField";
import { CopyIcon } from "@icons/questionsPage/CopyIcon"; import { CopyIcon } from "@icons/questionsPage/CopyIcon";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { updateDesireToOpenABranchingModal } from "@root/uiTools/actions";
import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay"; import { MediaSelectionAndDisplay } from "@ui_kit/MediaSelectionAndDisplay";
import { DeleteFunction } from "@utils/deleteFunc"; import { DeleteFunction } from "@utils/deleteFunc";
import { useState } from "react"; import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import type { QuizQuestionPage } from "../../../model/questionTypes/page"; import type { QuizQuestionPage } from "../../../model/questionTypes/page";
type Props = { type Props = {
@ -32,28 +30,18 @@ type Props = {
}; };
export default function PageOptions({ disableInput, question }: Props) { export default function PageOptions({ disableInput, question }: Props) {
const [switchState, setSwitchState] = useState("setting");
const theme = useTheme(); const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(980)); const isTablet = useMediaQuery(theme.breakpoints.down(980));
const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablet = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(780)); const isMobile = useMediaQuery(theme.breakpoints.down(780));
const [openDelete, setOpenDelete] = useState<boolean>(false);
const setText = useDebouncedCallback((value) => { const setText = (value: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "page") return; if (question.type !== "page") return;
question.content.text = value; question.content.text = value;
}); });
}, 200);
const [openDelete, setOpenDelete] = useState<boolean>(false);
const openedModal = () => {
updateDesireToOpenABranchingModal(question.content.id);
};
const SSHC = (data: string) => {
setSwitchState(data);
}; };
return ( return (
@ -76,7 +64,7 @@ export default function PageOptions({ disableInput, question }: Props) {
<CustomTextField <CustomTextField
id="addText" id="addText"
placeholder={"Можно добавить текст"} placeholder={"Можно добавить текст"}
text={question.content.text} value={question.content.text}
onChange={({ target }) => setText(target.value)} onChange={({ target }) => setText(target.value)}
maxLength={50} maxLength={50}
/> />

@ -1,16 +1,5 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box,
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionPage } from "../../../model/questionTypes/page"; import type { QuizQuestionPage } from "../../../model/questionTypes/page";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
type SettingPageOptionsProps = { type SettingPageOptionsProps = {
question: QuizQuestionPage; question: QuizQuestionPage;
@ -22,10 +11,6 @@ export default function SettingPageOptions({
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -1,24 +1,25 @@
import { useState, useEffect, useRef } from "react";
import { useParams } from "react-router-dom";
import { import {
Box, Box,
TextField as MuiTextField,
TextFieldProps,
Typography, Typography,
TextField,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { useDebouncedCallback } from "use-debounce"; import { updateQuestion } from "@root/questions/actions";
import { FC, useLayoutEffect, useRef, useState } from "react";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
import ButtonsOptions from "../ButtonsOptions"; import ButtonsOptions from "../ButtonsOptions";
import SwitchRating from "./switchRating"; import SwitchRating from "./switchRating";
import TropfyIcon from "../../../assets/icons/questionsPage/tropfyIcon";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon"; const TextField = MuiTextField as unknown as FC<TextFieldProps>;
import HeartIcon from "../../../assets/icons/questionsPage/heartIcon";
import LikeIcon from "../../../assets/icons/questionsPage/likeIcon";
import LightbulbIcon from "../../../assets/icons/questionsPage/lightbulbIcon";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
import { updateQuestion } from "@root/questions/actions";
interface Props { interface Props {
question: QuizQuestionRating; question: QuizQuestionRating;
@ -37,43 +38,36 @@ export default function RatingOptions({
setOpenBranchingPage, setOpenBranchingPage,
}: Props) { }: Props) {
const [switchState, setSwitchState] = useState("setting"); const [switchState, setSwitchState] = useState("setting");
const [negativeText, setNegativeText] = useState<string>("");
const [positiveText, setPositiveText] = useState<string>("");
const [negativeTextWidth, setNegativeTextWidth] = useState<number>(0); const [negativeTextWidth, setNegativeTextWidth] = useState<number>(0);
const [positiveTextWidth, setPositiveTextWidth] = useState<number>(0); const [positiveTextWidth, setPositiveTextWidth] = useState<number>(0);
const quizId = Number(useParams().quizId);
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const negativeRef = useRef<HTMLDivElement>(null); const negativeRef = useRef<HTMLDivElement>(null);
const positiveRef = useRef<HTMLDivElement>(null); const positiveRef = useRef<HTMLDivElement>(null);
const debounceNegativeDescription = useDebouncedCallback((value) => { const setNegativeDescription = (value: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "rating") return; if (question.type !== "rating") return;
question.content.ratingNegativeDescription = value.substring(0, 15); question.content.ratingNegativeDescription = value.substring(0, 15);
}); });
}, 200); };
const debouncePositiveDescription = useDebouncedCallback((value) => {
const setPositiveDescription = (value: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
if (question.type !== "rating") return; if (question.type !== "rating") return;
question.content.ratingPositiveDescription = value.substring(0, 15); question.content.ratingPositiveDescription = value.substring(0, 15);
}); });
}, 200); };
useEffect(() => { useLayoutEffect(() => {
setNegativeText(question.content.ratingNegativeDescription);
setPositiveText(question.content.ratingPositiveDescription);
}, []);
useEffect(() => {
setNegativeTextWidth(negativeRef.current?.offsetWidth || 0); setNegativeTextWidth(negativeRef.current?.offsetWidth || 0);
}, [negativeText]); }, [question.content.ratingNegativeDescription]);
useEffect(() => { useLayoutEffect(() => {
setPositiveTextWidth(positiveRef.current?.offsetWidth || 0); setPositiveTextWidth(positiveRef.current?.offsetWidth || 0);
}, [positiveText]); }, [question.content.ratingPositiveDescription]);
const buttonRatingForm: ButtonRatingFrom[] = [ const buttonRatingForm: ButtonRatingFrom[] = [
{ {
@ -221,21 +215,17 @@ export default function RatingOptions({
fontSize: "16px", fontSize: "16px",
}} }}
> >
{negativeText} {question.content.ratingNegativeDescription}
</Typography> </Typography>
<TextField <TextField
defaultValue={question.content.ratingNegativeDescription} value={question.content.ratingNegativeDescription}
value={negativeText}
placeholder="Негативно" placeholder="Негативно"
onChange={({ target }: { target: HTMLInputElement }) => { onChange={({ target }) => {
if (target.value.length <= 15) { if (target.value.length <= 15) {
setNegativeText(target.value); setNegativeDescription(target.value);
debounceNegativeDescription(target.value);
} }
}} }}
onBlur={({ target }: { target: HTMLInputElement }) => onBlur={({ target }) => setNegativeDescription(target.value)}
debounceNegativeDescription(target.value)
}
sx={{ sx={{
width: negativeTextWidth + 10 + "px", width: negativeTextWidth + 10 + "px",
maxWidth: isMobile ? "140px" : "230px", maxWidth: isMobile ? "140px" : "230px",
@ -279,20 +269,17 @@ export default function RatingOptions({
fontSize: "16px", fontSize: "16px",
}} }}
> >
{positiveText} {question.content.ratingPositiveDescription}
</Typography> </Typography>
<TextField <TextField
value={positiveText} value={question.content.ratingPositiveDescription}
placeholder="Позитивно" placeholder="Позитивно"
onChange={({ target }: { target: HTMLInputElement }) => { onChange={({ target }) => {
if (target.value.length <= 15) { if (target.value.length <= 15) {
setPositiveText(target.value); setPositiveDescription(target.value);
debouncePositiveDescription(target.value);
} }
}} }}
onBlur={({ target }: { target: HTMLInputElement }) => onBlur={({ target }) => setPositiveDescription(target.value)}
debouncePositiveDescription(target.value)
}
sx={{ sx={{
width: positiveTextWidth + 10 + "px", width: positiveTextWidth + 10 + "px",
maxWidth: isMobile ? "140px" : "230px", maxWidth: isMobile ? "140px" : "230px",

@ -3,16 +3,12 @@ import {
Box, Box,
ButtonBase, ButtonBase,
Slider, Slider,
Tooltip,
Typography, Typography,
useMediaQuery, useMediaQuery,
useTheme, useTheme,
} from "@mui/material"; } from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; import { updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon"; import FlagIcon from "../../../assets/icons/questionsPage/FlagIcon";
import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini"; import StarIconMini from "../../../assets/icons/questionsPage/StarIconMini";
import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon"; import HashtagIcon from "../../../assets/icons/questionsPage/hashtagIcon";
@ -32,10 +28,6 @@ export default function SettingSlider({ question }: SettingSliderProps) {
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
const buttonRatingForm: ButtonRatingFrom[] = [ const buttonRatingForm: ButtonRatingFrom[] = [
{ name: "star", icon: <StarIconMini color={theme.palette.grey3.main} /> }, { name: "star", icon: <StarIconMini color={theme.palette.grey3.main} /> },
{ name: "trophie", icon: <TropfyIcon color={theme.palette.grey3.main} /> }, { name: "trophie", icon: <TropfyIcon color={theme.palette.grey3.main} /> },

@ -1,15 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number"; import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
type SettingSliderProps = { type SettingSliderProps = {
@ -22,10 +13,6 @@ export default function SettingSlider({ question }: SettingSliderProps) {
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -123,6 +123,9 @@ export default function SwitchQuestionsPage({
/> />
); );
case "result":
return null;
default: default:
notReachable(question); notReachable(question);
} }

@ -1,15 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionFile } from "../../../model/questionTypes/file"; import type { QuizQuestionFile } from "../../../model/questionTypes/file";
type SettingsUploadProps = { type SettingsUploadProps = {
@ -20,10 +11,6 @@ export default function SettingsUpload({ question }: SettingsUploadProps) {
const theme = useTheme(); const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const setInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -1,15 +1,6 @@
import { import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
Box, import { updateQuestion } from "@root/questions/actions";
Tooltip,
Typography,
useMediaQuery,
useTheme,
} from "@mui/material";
import { setQuestionInnerName, updateQuestion } from "@root/questions/actions";
import CustomCheckbox from "@ui_kit/CustomCheckbox"; import CustomCheckbox from "@ui_kit/CustomCheckbox";
import CustomTextField from "@ui_kit/CustomTextField";
import { useDebouncedCallback } from "use-debounce";
import InfoIcon from "../../../assets/icons/InfoIcon";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant"; import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
interface Props { interface Props {
@ -23,10 +14,6 @@ export default function ResponseSettings({ question }: Props) {
const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990));
const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isMobile = useMediaQuery(theme.breakpoints.down(790));
const updateQuestionInnerName = useDebouncedCallback((value) => {
setQuestionInnerName(question.id, value);
}, 200);
return ( return (
<Box <Box
sx={{ sx={{

@ -5,7 +5,6 @@ import CustomTextField from "@ui_kit/CustomTextField";
import SelectableButton from "@ui_kit/SelectableButton"; import SelectableButton from "@ui_kit/SelectableButton";
import UploadBox from "@ui_kit/UploadBox"; import UploadBox from "@ui_kit/UploadBox";
import { useState } from "react"; import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";
import UploadIcon from "../../assets/icons/UploadIcon"; import UploadIcon from "../../assets/icons/UploadIcon";
import { UploadVideoModal } from "./UploadVideoModal"; import { UploadVideoModal } from "./UploadVideoModal";
@ -19,11 +18,11 @@ export default function HelpQuestions({ question }: HelpQuestionsProps) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text"); const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const updateQuestionHint = useDebouncedCallback((value) => { const updateQuestionHint = (value: string) => {
updateQuestion(question.id, (question) => { updateQuestion(question.id, (question) => {
question.content.hint.text = value; question.content.hint.text = value;
}); });
}, 200); };
return ( return (
<Box <Box
@ -60,7 +59,7 @@ export default function HelpQuestions({ question }: HelpQuestionsProps) {
<> <>
<CustomTextField <CustomTextField
placeholder={"Текст консультанта"} placeholder={"Текст консультанта"}
text={question.content.hint.text} value={question.content.hint.text}
onChange={({ target }) => updateQuestionHint(target.value || " ")} onChange={({ target }) => updateQuestionHint(target.value || " ")}
maxLength={100} maxLength={100}
/> />

@ -59,7 +59,7 @@ export default function EditPage({
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { editQuizId } = useQuizStore(); const { editQuizId } = useQuizStore();
const { questions } = useQuestionsStore(); const { questions } = useQuestionsStore();
const { whyCantCreatePublic, showConfirmLeaveModal, nextStep } = useUiTools(); const { showConfirmLeaveModal, nextStep } = useUiTools();
const theme = useTheme(); const theme = useTheme();
const navigate = useNavigate(); const navigate = useNavigate();
const currentStep = useQuizStore((state) => state.currentStep); const currentStep = useQuizStore((state) => state.currentStep);