Merge branch 'number-errors' into delete-modal

src/pages/Questions/SliderOptions/SliderOptions.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { Box, Typography, useMediaQuery, useTheme } from "@mui/material";
 import ButtonsOptions from "../ButtonsOptions";
 import CustomNumberField from "@ui_kit/CustomNumberField";
@@ -16,6 +16,38 @@ export default function SliderOptions({ question }: Props) {
   const isMobile = useMediaQuery(theme.breakpoints.down(790));
   const [switchState, setSwitchState] = useState("setting");
   const [stepError, setStepError] = useState("");
+  const [startError, setStartError] = useState<boolean>(false);
+  const [minError, setMinError] = useState<boolean>(false);
+  const [maxError, setMaxError] = useState<boolean>(false);
+
+  useEffect(() => {
+    const min = Number(question.content.range.split("—")[0]);
+    const max = Number(question.content.range.split("—")[1]);
+    const start = Number(question.content.start);
+
+    if (start < min || start > max) {
+      setStartError(true);
+    }
+
+    if (start >= min && start <= max) {
+      setStartError(false);
+    }
+  }, [question.content.range, question.content.start]);
+
+  useEffect(() => {
+    const min = Number(question.content.range.split("—")[0]);
+    const max = Number(question.content.range.split("—")[1]);
+    const step = Number(question.content.step);
+    const range = max - min;
+
+    if (range % step) {
+      setStepError(
+        `Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`
+      );
+    } else {
+      setStepError("");
+    }
+  }, [question]);
 
   const SSHC = (data: string) => {
     setSwitchState(data);
@@ -44,42 +76,43 @@ export default function SliderOptions({ question }: Props) {
             marginRight: isMobile ? "10px" : "0px",
           }}
         >
-          <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}>
+          <Typography
+            sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D" }}
+          >
             Выбор значения из диапазона
           </Typography>
-          <Box sx={{ width: "100%", display: "flex", alignItems: "center", gap: isMobile ? "9px" : "20px" }}>
+          <Box
+            sx={{
+              width: "100%",
+              display: "flex",
+              alignItems: "center",
+              gap: isMobile ? "9px" : "20px",
+            }}
+          >
             <CustomNumberField
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"0"}
               min={0}
               max={99999999999}
               value={question.content.range.split("—")[0]}
+              emptyError={minError}
               onChange={({ target }) => {
-                updateQuestion(question.id, (question) => {
-                  if (question.type !== "number") return;
-
-                  question.content.range = `${target.value}—${question.content.range.split("—")[1]}`;
-                });
-              }}
-              onBlur={({ target }) => {
-                const start = question.content.start;
                 const min = Number(target.value);
                 const max = Number(question.content.range.split("—")[1]);
 
+                updateQuestion(question.id, (question) => {
+                  if (question.type !== "number") return;
+
+                  question.content.range = `${target.value}—${
+                    question.content.range.split("—")[1]
+                  }`;
+                });
+
                 if (min >= max) {
-                  updateQuestion(question.id, (question) => {
+                  setMinError(true);
-                    if (question.type !== "number") return;
+                } else {
-
+                  setMinError(false);
-                    question.content.range = `${max - 1 >= 0 ? max - 1 : 0}—${question.content.range.split("—")[1]}`;
+                  setMaxError(false);
-                  });
-                }
-
-                if (start < min) {
-                  updateQuestion(question.id, (question) => {
-                    if (question.type !== "number") return;
-
-                    question.content.start = min;
-                  });
                 }
               }}
             />
@@ -90,35 +123,30 @@ export default function SliderOptions({ question }: Props) {
               min={0}
               max={100000000000}
               value={question.content.range.split("—")[1]}
+              emptyError={maxError}
               onChange={({ target }) => {
+                const min = Number(question.content.range.split("—")[0]);
+                const max = Number(target.value);
+
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
 
-                  question.content.range = `${question.content.range.split("—")[0]}—${target.value}`;
+                  question.content.range = `${
+                    question.content.range.split("—")[0]
+                  }—${target.value}`;
                 });
+
+                if (max <= min) {
+                  setMaxError(true);
+                } else {
+                  setMaxError(false);
+                  setMinError(false);
+                }
               }}
               onBlur={({ target }) => {
-                const start = question.content.start;
                 const step = question.content.step;
                 const min = Number(question.content.range.split("—")[0]);
                 const max = Number(target.value);
-                const range = max - min;
-
-                if (max <= min) {
-                  updateQuestion(question.id, (question) => {
-                    if (question.type !== "number") return;
-
-                    question.content.range = `${min}—${min + 1 >= 100 ? 100 : min + 1}`;
-                  });
-                }
-
-                if (start > max) {
-                  updateQuestion(question.id, (question) => {
-                    if (question.type !== "number") return;
-
-                    question.content.start = max;
-                  });
-                }
 
                 if (step > max) {
                   updateQuestion(question.id, (question) => {
@@ -126,12 +154,6 @@ export default function SliderOptions({ question }: Props) {
 
                     question.content.step = min;
                   });
-
-                  if (range % step) {
-                    setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                  } else {
-                    setStepError("");
-                  }
                 }
               }}
             />
@@ -147,15 +169,21 @@ export default function SliderOptions({ question }: Props) {
           }}
         >
           <Box sx={{ width: "100%" }}>
-            <Typography sx={{ fontWeight: "500", fontSize: "18px", color: "#4D4D4D", mb: isMobile ? "10px" : "14px" }}>
+            <Typography
+              sx={{
+                fontWeight: "500",
+                fontSize: "18px",
+                color: "#4D4D4D",
+                mb: isMobile ? "10px" : "14px",
+              }}
+            >
               Начальное значение
             </Typography>
             <CustomNumberField
               sx={{ maxWidth: "310px", width: "100%" }}
               placeholder={"50"}
-              min={Number(question.content.range.split("—")[0])}
-              max={Number(question.content.range.split("—")[1])}
               value={String(question.content.start)}
+              emptyError={startError}
               onChange={({ target }) => {
                 updateQuestion(question.id, (question) => {
                   if (question.type !== "number") return;
@@ -178,8 +206,8 @@ export default function SliderOptions({ question }: Props) {
             </Typography>
             <CustomNumberField
               sx={{ maxWidth: "310px", width: "100%" }}
-              min={0}
+              min={Number(question.content.range.split("—")[0])}
-              max={100}
+              max={Number(question.content.range.split("—")[1])}
               placeholder={"1"}
               error={stepError}
               value={String(question.content.step)}
@@ -191,9 +219,7 @@ export default function SliderOptions({ question }: Props) {
                 });
               }}
               onBlur={({ target }) => {
-                const min = Number(question.content.range.split("—")[0]);
                 const max = Number(question.content.range.split("—")[1]);
-                const range = max - min;
                 const step = Number(target.value);
 
                 if (step > max) {
@@ -203,18 +229,16 @@ export default function SliderOptions({ question }: Props) {
                     question.content.step = max;
                   });
                 }
-
-                if (range % step) {
-                  setStepError(`Шаг должен делить без остатка диапазон ${max} - ${min} = ${max - min}`);
-                } else {
-                  setStepError("");
-                }
               }}
             />
           </Box>
         </Box>
       </Box>
-      <ButtonsOptions switchState={switchState} SSHC={SSHC} question={question} />
+      <ButtonsOptions
+        switchState={switchState}
+        SSHC={SSHC}
+        question={question}
+      />
       <SwitchSlider switchState={switchState} question={question} />
     </>
   );

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -18,21 +18,29 @@ export const Number = ({ currentQuestion }: NumberProps) => {
   const [maxRange, setMaxRange] = useState<string>("100000000000");
   const theme = useTheme();
   const { answers } = useQuizViewStore();
-  const updateMinRangeDebounced = useDebouncedCallback((value, crowded = false) => {
+  const updateMinRangeDebounced = useDebouncedCallback(
-    if (crowded) {
+    (value, crowded = false) => {
-      setMinRange(maxRange);
+      if (crowded) {
-    }
+        setMinRange(maxRange);
+      }
 
-    updateAnswer(currentQuestion.content.id, value);
+      updateAnswer(currentQuestion.content.id, value);
-  }, 1000);
+    },
-  const updateMaxRangeDebounced = useDebouncedCallback((value, crowded = false) => {
+    1000
-    if (crowded) {
+  );
-      setMaxRange(minRange);
+  const updateMaxRangeDebounced = useDebouncedCallback(
-    }
+    (value, crowded = false) => {
+      if (crowded) {
+        setMaxRange(minRange);
+      }
 
-    updateAnswer(currentQuestion.content.id, value);
+      updateAnswer(currentQuestion.content.id, value);
-  }, 1000);
+    },
-  const answer = answers.find(({ questionId }) => questionId === currentQuestion.content.id)?.answer as string;
+    1000
+  );
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.content.id
+  )?.answer as string;
 
   const min = window.Number(currentQuestion.content.range.split("—")[0]);
   const max = window.Number(currentQuestion.content.range.split("—")[1]);

src/ui_kit/CustomNumberField.tsx

@@ -9,6 +9,7 @@ interface CustomNumberFieldProps {
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
   error?: string;
+  emptyError?: boolean;
   value: string;
   sx?: SxProps<Theme>;
   min?: number;
@@ -20,6 +21,7 @@ export default function CustomNumberField({
   value,
   sx,
   error,
+  emptyError,
   onChange,
   onKeyDown,
   onBlur,
@@ -57,6 +59,7 @@ export default function CustomNumberField({
       placeholder={placeholder}
       sx={sx}
       error={error}
+      emptyError={emptyError}
       onChange={onInputChange}
       onKeyDown={onKeyDown}
       onBlur={onInputBlur}

src/ui_kit/CustomTextField.tsx

@@ -7,6 +7,7 @@ interface CustomTextFieldProps {
   placeholder: string;
   value?: string;
   error?: string;
+  emptyError?: boolean;
   onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
@@ -25,6 +26,7 @@ export default function CustomTextField({
   text,
   sx,
   error,
+  emptyError,
   InputProps,
   maxLength = 200,
 }: CustomTextFieldProps) {
@@ -62,7 +64,7 @@ export default function CustomTextField({
         value={inputValue}
         placeholder={placeholder}
         onChange={handleInputChange}
-        error={!!error}
+        error={!!error || emptyError}
         label={error}
         onFocus={handleInputFocus}
         onBlur={handleInputBlur}