Merge branch 'view-number-logic' into startpage-preview-fix

src/pages/Questions/SliderOptions/settingSlider.tsx

@@ -49,7 +49,7 @@ export default function SettingSlider({ question }: SettingSliderProps) {
                         height: isMobile ? "100%" : "auto",
                         alignItems: isMobile ? "flex-start" : "center",
                     }}
-                    label={"Выбор диапозона (два ползунка)"}
+                    label={"Выбор диапазона (два ползунка)"}
                     checked={question.content.chooseRange}
                     handleChange={({ target }) => {
                         updateQuestion(question.id, question => {

src/pages/ViewPublicationPage/questions/Number.tsx

@@ -1,5 +1,6 @@
-import { useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Box, Typography, Slider, useTheme } from "@mui/material";
+import { useDebouncedCallback } from "use-debounce";
 
 import CustomTextField from "@ui_kit/CustomTextField";
 
@@ -12,8 +13,30 @@ type NumberProps = {
 };
 
 export const Number = ({ currentQuestion }: NumberProps) => {
+  const [minRange, setMinRange] = useState<string>("0");
+  const [maxRange, setMaxRange] = useState<string>("100");
   const theme = useTheme();
   const { answers } = useQuizViewStore();
+  const updateMinRangeDebounced = useDebouncedCallback(
+    (value, crowded = false) => {
+      if (crowded) {
+        setMinRange(maxRange);
+      }
+
+      updateAnswer(currentQuestion.content.id, value);
+    },
+    1000
+  );
+  const updateMaxRangeDebounced = useDebouncedCallback(
+    (value, crowded = false) => {
+      if (crowded) {
+        setMaxRange(minRange);
+      }
+
+      updateAnswer(currentQuestion.content.id, value);
+    },
+    1000
+  );
   const { answer } =
     answers.find(
       ({ questionId }) => questionId === currentQuestion.content.id
@@ -23,6 +46,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
   const max = window.Number(currentQuestion.content.range.split("—")[1]);
 
   useEffect(() => {
+    console.log("ans", currentQuestion.content.start);
+    if (answer) {
+      setMinRange(answer.split("—")[0]);
+      setMaxRange(answer.split("—")[1]);
+    }
     if (!answer) {
       updateAnswer(
         currentQuestion.content.id,
@@ -31,8 +59,11 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           : String(currentQuestion.content.start),
         false
       );
+
+      setMinRange(String(currentQuestion.content.start));
+      setMaxRange(String(max));
     }
-  }, [answer]);
+  }, []);
 
   return (
     <Box>
@@ -48,11 +79,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
         {!currentQuestion.content.chooseRange && (
           <CustomTextField
             placeholder="0"
-            value={
-              currentQuestion.content.chooseRange
-                ? answer?.split("—")[0]
-                : answer
-            }
+            value={answer}
             onChange={({ target }) => {
               updateAnswer(
                 currentQuestion.content.id,
@@ -79,21 +106,17 @@ export const Number = ({ currentQuestion }: NumberProps) => {
           >
             <CustomTextField
               placeholder="0"
-              value={
-                currentQuestion.content.chooseRange
-                  ? answer?.split("—")[0]
-                  : answer
-              }
+              value={minRange}
               onChange={({ target }) => {
-                updateAnswer(
-                  currentQuestion.content.id,
-                  window.Number(target.value) >
-                    window.Number(answer?.split("—")[1])
-                    ? `${answer?.split("—")[1]}—${answer?.split("—")[1]}`
-                    : window.Number(target.value) < min
-                    ? `${min}—${answer?.split("—")[1]}`
-                    : `${target.value}—${answer?.split("—")[1]}`
-                );
+                setMinRange(target.value);
+
+                if (window.Number(target.value) >= window.Number(maxRange)) {
+                  updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
+
+                  return;
+                }
+
+                updateMinRangeDebounced(`${target.value}—${maxRange}`);
               }}
               sx={{
                 maxWidth: "80px",
@@ -102,17 +125,17 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             />
             <CustomTextField
               placeholder="0"
-              value={answer?.split("—")[1]}
+              value={maxRange}
               onChange={({ target }) => {
-                updateAnswer(
-                  currentQuestion.content.id,
-                  window.Number(target.value) > max
-                    ? `${answer?.split("—")[0]}—${max}`
-                    : window.Number(target.value) <
-                      window.Number(answer?.split("—")[0])
-                    ? `${answer?.split("—")[0]}—${answer?.split("—")[0]}`
-                    : `${answer?.split("—")[0]}—${target.value}`
-                );
+                setMaxRange(target.value);
+
+                if (window.Number(target.value) <= window.Number(minRange)) {
+                  updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
+
+                  return;
+                }
+
+                updateMaxRangeDebounced(`${minRange}—${target.value}`);
               }}
               sx={{
                 maxWidth: "80px",
@@ -138,10 +161,16 @@ export const Number = ({ currentQuestion }: NumberProps) => {
             marginTop: "25px",
           }}
           onChange={(_, value) => {
-            updateAnswer(
-              currentQuestion.content.id,
-              String(value).replace(",", "—")
-            );
+            const range = String(value).replace(",", "—");
+            updateAnswer(currentQuestion.content.id, range);
+          }}
+          onChangeCommitted={(_, value) => {
+            if (currentQuestion.content.chooseRange) {
+              const range = value as number[];
+
+              setMinRange(String(range[0]));
+              setMaxRange(String(range[1]));
+            }
           }}
         />
       </Box>