diff --git a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx index 3b1bfd92..67dcba5a 100644 --- a/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx +++ b/src/pages/Questions/AnswerDraggableList/AnswerItem.tsx @@ -1,29 +1,24 @@ -import { MessageIcon } from "@icons/messagIcon"; import { PointsIcon } from "@icons/questionsPage/PointsIcon"; import { DeleteIcon } from "@icons/questionsPage/deleteIcon"; -import { TextareaAutosize } from "@mui/base/TextareaAutosize"; import { Box, FormControl, IconButton, InputAdornment, - Popover, TextField as MuiTextField, + TextFieldProps, useMediaQuery, useTheme, - TextFieldProps, } from "@mui/material"; import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField, } from "@root/questions/actions"; +import { enqueueSnackbar } from "notistack"; import type { ChangeEvent, FC, KeyboardEvent, ReactNode } from "react"; -import { useState } from "react"; import { Draggable } from "react-beautiful-dnd"; import type { QuestionVariant } from "../../../model/questionTypes/shared"; -import { useDebouncedCallback } from "use-debounce"; -import { enqueueSnackbar } from "notistack"; const TextField = MuiTextField as unknown as FC; @@ -48,21 +43,6 @@ export const AnswerItem = ({ }: AnswerItemProps) => { const theme = useTheme(); const isTablet = useMediaQuery(theme.breakpoints.down(790)); - const [isOpen, setIsOpen] = useState(false); - const [anchorEl, setAnchorEl] = useState(null); - const [inputValue, setInputValue] = useState(variant.answer); - const setQuestionVariantAnswer = useDebouncedCallback((value) => { - setQuestionVariantField(questionId, variant.id, "answer", value); - }, 200); - - const handleClick = (event: React.MouseEvent) => { - setAnchorEl(event.currentTarget); - setIsOpen(true); - }; - - const handleClose = () => { - setIsOpen(false); - }; return ( @@ -80,16 +60,20 @@ export const AnswerItem = ({ }} > ) => { if (target.value.length <= 1000) { - setInputValue(target.value); + setQuestionVariantField( + questionId, + variant.id, + "answer", + target.value || " ", + ); } - setQuestionVariantAnswer(target.value || " "); }} onKeyDown={(event: KeyboardEvent) => { if (disableKeyDown) { diff --git a/src/pages/Questions/DataOptions/settingData.tsx b/src/pages/Questions/DataOptions/settingData.tsx index 2ac9b07a..dfb7382f 100644 --- a/src/pages/Questions/DataOptions/settingData.tsx +++ b/src/pages/Questions/DataOptions/settingData.tsx @@ -1,15 +1,6 @@ -import { - Box, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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"; type SettingsDataProps = { @@ -22,10 +13,6 @@ export default function SettingsData({ question }: SettingsDataProps) { const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( { - setQuestionInnerName(question.id, value); - }, 200); - - const debounceAnswer = useDebouncedCallback((value) => { + const setContentDefault = (value: string) => { updateQuestion(question.id, (question) => { if (question.type !== "select") return; question.content.default = value; }); - }, 200); + }; return ( <> @@ -98,9 +86,9 @@ export default function SettingDropDown({ question }: SettingDropDownProps) { debounceAnswer(target.value)} + onChange={({ target }) => setContentDefault(target.value)} /> @@ -178,7 +166,7 @@ export default function SettingDropDown({ question }: SettingDropDownProps) { debounceAnswer(target.value)} + onChange={({ target }) => setContentDefault(target.value)} /> {/*{question.content.innerNameCheck && (*/} diff --git a/src/pages/Questions/Emoji/settingEmoji.tsx b/src/pages/Questions/Emoji/settingEmoji.tsx index 24de22c9..0fa8f138 100644 --- a/src/pages/Questions/Emoji/settingEmoji.tsx +++ b/src/pages/Questions/Emoji/settingEmoji.tsx @@ -1,15 +1,6 @@ -import { - Box, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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"; type SettingEmojiProps = { @@ -19,14 +10,9 @@ type SettingEmojiProps = { export default function SettingEmoji({ question }: SettingEmojiProps) { const theme = useTheme(); const isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); - const isTablet = useMediaQuery(theme.breakpoints.down(985)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( { + const setTitle = (title: string) => { const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion; updateQuestionFn(question.id, (question) => { question.title = title; }); - }, 200); + }; const handleInputFocus = () => { setIsTextFieldtActive(true); @@ -137,7 +137,7 @@ export default function QuestionsPageCard({ > { if (target.value.length <= 225) setTitle(target.value); }} diff --git a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx index 31e77cb5..1b3e432d 100644 --- a/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx +++ b/src/pages/Questions/OptionsAndPicture/SettingOptionsAndPict.tsx @@ -1,15 +1,7 @@ -import { - Box, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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 { QuizQuestionVarImg } from "../../../model/questionTypes/varimg"; type SettingOptionsAndPictProps = { @@ -24,17 +16,13 @@ export default function SettingOptionsAndPict({ const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(680)); - const setReplText = useDebouncedCallback((replText) => { + const setReplText = (replText: string) => { updateQuestion(question.id, (question) => { if (question.type !== "varimg") return; question.content.replText = replText; }); - }, 200); - - const setDescription = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); + }; return ( <> diff --git a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx index 4a7c04b6..fb21f1c1 100644 --- a/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx +++ b/src/pages/Questions/OptionsPicture/settingOpytionsPict.tsx @@ -1,18 +1,12 @@ import { Box, Button, - Tooltip, Typography, useMediaQuery, useTheme, } from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { updateQuestion } from "@root/questions/actions"; 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 ProportionsIcon12 from "../../../assets/icons/questionsPage/ProportionsIcon12"; import ProportionsIcon21 from "../../../assets/icons/questionsPage/ProportionsIcon21"; @@ -43,18 +37,6 @@ export default function SettingOpytionsPict({ const isMobile = useMediaQuery(theme.breakpoints.down(790)); 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 ( <> { + const setPlaceholder = (value: string) => { updateQuestion(question.id, (question) => { if (question.type !== "text") return; question.content.placeholder = value; }); - }, 200); + }; const SSHC = (data: string) => { setSwitchState(data); @@ -60,7 +58,7 @@ export default function OwnTextField({ > setPlaceholder(target.value)} sx={{ maxWidth: isFigmaTablte ? "549px" : "640px", diff --git a/src/pages/Questions/OwnTextField/settingTextField.tsx b/src/pages/Questions/OwnTextField/settingTextField.tsx index 9f4b5960..42686c6c 100644 --- a/src/pages/Questions/OwnTextField/settingTextField.tsx +++ b/src/pages/Questions/OwnTextField/settingTextField.tsx @@ -1,21 +1,6 @@ -import { - Box, - FormControl, - FormControlLabel, - Radio, - RadioGroup, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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"; type SettingTextFieldProps = { @@ -38,10 +23,6 @@ export default function SettingTextField({ question }: SettingTextFieldProps) { const isMobile = useMediaQuery(theme.breakpoints.down(790)); const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); - const debounced = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( (false); - const setText = useDebouncedCallback((value) => { + const setText = (value: string) => { updateQuestion(question.id, (question) => { if (question.type !== "page") return; question.content.text = value; }); - }, 200); - - const [openDelete, setOpenDelete] = useState(false); - - const openedModal = () => { - updateDesireToOpenABranchingModal(question.content.id); - }; - - const SSHC = (data: string) => { - setSwitchState(data); }; return ( @@ -76,7 +64,7 @@ export default function PageOptions({ disableInput, question }: Props) { setText(target.value)} maxLength={50} /> diff --git a/src/pages/Questions/PageOptions/SettingPageOptions.tsx b/src/pages/Questions/PageOptions/SettingPageOptions.tsx index 3b374395..a5cb8233 100644 --- a/src/pages/Questions/PageOptions/SettingPageOptions.tsx +++ b/src/pages/Questions/PageOptions/SettingPageOptions.tsx @@ -1,16 +1,5 @@ -import { - 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 { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; import type { QuizQuestionPage } from "../../../model/questionTypes/page"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; type SettingPageOptionsProps = { question: QuizQuestionPage; @@ -22,10 +11,6 @@ export default function SettingPageOptions({ const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( ; interface Props { question: QuizQuestionRating; @@ -37,43 +38,36 @@ export default function RatingOptions({ setOpenBranchingPage, }: Props) { const [switchState, setSwitchState] = useState("setting"); - const [negativeText, setNegativeText] = useState(""); - const [positiveText, setPositiveText] = useState(""); const [negativeTextWidth, setNegativeTextWidth] = useState(0); const [positiveTextWidth, setPositiveTextWidth] = useState(0); - const quizId = Number(useParams().quizId); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); const negativeRef = useRef(null); const positiveRef = useRef(null); - const debounceNegativeDescription = useDebouncedCallback((value) => { + const setNegativeDescription = (value: string) => { updateQuestion(question.id, (question) => { if (question.type !== "rating") return; question.content.ratingNegativeDescription = value.substring(0, 15); }); - }, 200); - const debouncePositiveDescription = useDebouncedCallback((value) => { + }; + + const setPositiveDescription = (value: string) => { updateQuestion(question.id, (question) => { if (question.type !== "rating") return; question.content.ratingPositiveDescription = value.substring(0, 15); }); - }, 200); + }; - useEffect(() => { - setNegativeText(question.content.ratingNegativeDescription); - setPositiveText(question.content.ratingPositiveDescription); - }, []); - - useEffect(() => { + useLayoutEffect(() => { setNegativeTextWidth(negativeRef.current?.offsetWidth || 0); - }, [negativeText]); + }, [question.content.ratingNegativeDescription]); - useEffect(() => { + useLayoutEffect(() => { setPositiveTextWidth(positiveRef.current?.offsetWidth || 0); - }, [positiveText]); + }, [question.content.ratingPositiveDescription]); const buttonRatingForm: ButtonRatingFrom[] = [ { @@ -221,21 +215,17 @@ export default function RatingOptions({ fontSize: "16px", }} > - {negativeText} + {question.content.ratingNegativeDescription} { + onChange={({ target }) => { if (target.value.length <= 15) { - setNegativeText(target.value); - debounceNegativeDescription(target.value); + setNegativeDescription(target.value); } }} - onBlur={({ target }: { target: HTMLInputElement }) => - debounceNegativeDescription(target.value) - } + onBlur={({ target }) => setNegativeDescription(target.value)} sx={{ width: negativeTextWidth + 10 + "px", maxWidth: isMobile ? "140px" : "230px", @@ -279,20 +269,17 @@ export default function RatingOptions({ fontSize: "16px", }} > - {positiveText} + {question.content.ratingPositiveDescription} { + onChange={({ target }) => { if (target.value.length <= 15) { - setPositiveText(target.value); - debouncePositiveDescription(target.value); + setPositiveDescription(target.value); } }} - onBlur={({ target }: { target: HTMLInputElement }) => - debouncePositiveDescription(target.value) - } + onBlur={({ target }) => setPositiveDescription(target.value)} sx={{ width: positiveTextWidth + 10 + "px", maxWidth: isMobile ? "140px" : "230px", diff --git a/src/pages/Questions/RatingOptions/settingRating.tsx b/src/pages/Questions/RatingOptions/settingRating.tsx index cb37e5b8..966b9d21 100644 --- a/src/pages/Questions/RatingOptions/settingRating.tsx +++ b/src/pages/Questions/RatingOptions/settingRating.tsx @@ -3,16 +3,12 @@ import { Box, ButtonBase, Slider, - Tooltip, Typography, useMediaQuery, useTheme, } from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { updateQuestion } from "@root/questions/actions"; 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 StarIconMini from "../../../assets/icons/questionsPage/StarIconMini"; 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 isWrappColumn = useMediaQuery(theme.breakpoints.down(980)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - const buttonRatingForm: ButtonRatingFrom[] = [ { name: "star", icon: }, { name: "trophie", icon: }, diff --git a/src/pages/Questions/SliderOptions/settingSlider.tsx b/src/pages/Questions/SliderOptions/settingSlider.tsx index 4ad01637..045bc1a0 100644 --- a/src/pages/Questions/SliderOptions/settingSlider.tsx +++ b/src/pages/Questions/SliderOptions/settingSlider.tsx @@ -1,15 +1,6 @@ -import { - Box, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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"; type SettingSliderProps = { @@ -22,10 +13,6 @@ export default function SettingSlider({ question }: SettingSliderProps) { const isFigmaTablte = useMediaQuery(theme.breakpoints.down(990)); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( ); + case "result": + return null; + default: notReachable(question); } diff --git a/src/pages/Questions/UploadFile/settingUpload.tsx b/src/pages/Questions/UploadFile/settingUpload.tsx index 21a468fa..4bfdece1 100644 --- a/src/pages/Questions/UploadFile/settingUpload.tsx +++ b/src/pages/Questions/UploadFile/settingUpload.tsx @@ -1,15 +1,6 @@ -import { - Box, - Tooltip, - Typography, - useMediaQuery, - useTheme, -} from "@mui/material"; -import { setQuestionInnerName, updateQuestion } from "@root/questions/actions"; +import { Box, Typography, useMediaQuery, useTheme } from "@mui/material"; +import { updateQuestion } from "@root/questions/actions"; 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"; type SettingsUploadProps = { @@ -20,10 +11,6 @@ export default function SettingsUpload({ question }: SettingsUploadProps) { const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(790)); - const setInnerName = useDebouncedCallback((value) => { - setQuestionInnerName(question.id, value); - }, 200); - return ( { - setQuestionInnerName(question.id, value); - }, 200); - return ( ("text"); - const updateQuestionHint = useDebouncedCallback((value) => { + const updateQuestionHint = (value: string) => { updateQuestion(question.id, (question) => { question.content.hint.text = value; }); - }, 200); + }; return ( updateQuestionHint(target.value || " ")} maxLength={100} /> diff --git a/src/pages/startPage/EditPage.tsx b/src/pages/startPage/EditPage.tsx index f810181d..83dd3801 100755 --- a/src/pages/startPage/EditPage.tsx +++ b/src/pages/startPage/EditPage.tsx @@ -59,7 +59,7 @@ export default function EditPage({ const quiz = useCurrentQuiz(); const { editQuizId } = useQuizStore(); const { questions } = useQuestionsStore(); - const { whyCantCreatePublic, showConfirmLeaveModal, nextStep } = useUiTools(); + const { showConfirmLeaveModal, nextStep } = useUiTools(); const theme = useTheme(); const navigate = useNavigate(); const currentStep = useQuizStore((state) => state.currentStep);