From a0c83a4e98766b25a8043deb41117699e8bae277 Mon Sep 17 00:00:00 2001
From: nflnkr <105123049+nflnkr@users.noreply.github.com>
Date: Tue, 13 Feb 2024 16:09:49 +0300
Subject: [PATCH] mirror changes from parallel branches

---
 .../ViewPublicationPage/ResultForm.tsx        |  14 +-
 .../ViewPublicationPage/questions/Number.tsx  | 461 ++++++++++--------
 lib/ui_kit/CustomSlider.tsx                   |  12 +-
 3 files changed, 272 insertions(+), 215 deletions(-)

diff --git a/lib/components/ViewPublicationPage/ResultForm.tsx b/lib/components/ViewPublicationPage/ResultForm.tsx
index 4d17df1..267130a 100644
--- a/lib/components/ViewPublicationPage/ResultForm.tsx
+++ b/lib/components/ViewPublicationPage/ResultForm.tsx
@@ -8,11 +8,11 @@ import {
 import { NameplateLogo } from "@icons/NameplateLogo";
 import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
 
-import { setCurrentQuizStep } from "@stores/quizView";
 import { useQuizData } from "@utils/hooks/useQuizData";
 import { quizThemes } from "@utils/themes/Publication/themePublication";
 import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
 import type { QuizQuestionResult } from "../../model/questionTypes/result";
+import { setCurrentQuizStep } from "@stores/quizView";
 
 
 type ResultFormProps = {
@@ -132,6 +132,7 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                             mt: "15px",
                             gap: "10px",
                             textDecoration: "none",
+                                mb: "5px"
                         }}
                     >
                         <NameplateLogo
@@ -160,14 +161,19 @@ export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
                             display: "flex",
                             justifyContent: "center",
                             alignItems: "center",
-                            p: settings.cfg.resultInfo.showResultForm === "before" ||
+                            p: 
+                            (
+                                settings.cfg.resultInfo.showResultForm === "before" &&
+                                !Boolean(settings.cfg.score)
+                            ) ||
                             (
                                 settings.cfg.resultInfo.showResultForm === "after" &&
                                 resultQuestion.content.redirect
-                            ) ? "20px" : "0",
+                            ) 
+                            ? "20px" : "0",
                         }}
                     >
-                        {settings.cfg.resultInfo.showResultForm === "before" && (
+                        {settings.cfg.resultInfo.showResultForm === "before" && !Boolean(settings.cfg.score) && (
                             <Button
                                 onClick={() => setCurrentQuizStep("contactform")}
                                 variant="contained"
diff --git a/lib/components/ViewPublicationPage/questions/Number.tsx b/lib/components/ViewPublicationPage/questions/Number.tsx
index 782bc46..f227ea7 100644
--- a/lib/components/ViewPublicationPage/questions/Number.tsx
+++ b/lib/components/ViewPublicationPage/questions/Number.tsx
@@ -5,7 +5,7 @@ import { useDebouncedCallback } from "use-debounce";
 import { CustomSlider } from "@ui_kit/CustomSlider";
 import CustomTextField from "@ui_kit/CustomTextField";
 
-import { updateAnswer, useQuizViewStore } from "@stores/quizView";
+import { updateAnswer, useQuizViewStore } from "@stores/quizView/store";
 
 import { sendAnswer } from "@api/quizRelase";
 import { enqueueSnackbar } from "notistack";
@@ -17,237 +17,280 @@ import { useQuizId } from "../../../contexts/QuizIdContext";
 import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
 
 type NumberProps = {
-    currentQuestion: QuizQuestionNumber;
+  currentQuestion: QuizQuestionNumber;
 };
 
 export const Number = ({ currentQuestion }: NumberProps) => {
-    const qid = useQuizId();
-    const { settings } = useQuizData();
-    const [inputValue, setInputValue] = useState<string>("0");
-    const [minRange, setMinRange] = useState<string>("0");
-    const [maxRange, setMaxRange] = useState<string>("100000000000");
-    const theme = useTheme();
-    const { answers } = useQuizViewStore();
+  const qid = useQuizId();
+  const { settings } = useQuizData();
+  const [inputValue, setInputValue] = useState<string>("0");
+  const [minRange, setMinRange] = useState<string>("0");
+  const [maxRange, setMaxRange] = useState<string>("100000000000");
+  const [reversedInputValue, setReversedInputValue] = useState<string>("0");
+  const [reversedMinRange, setReversedMinRange] = useState<string>("0");
+  const [reversedMaxRange, setReversedMaxRange] =
+    useState<string>("100000000000");
+  const theme = useTheme();
+  const { answers } = useQuizViewStore();
 
-    const isMobile = useRootContainerSize() < 650;
-    const min = window.Number(currentQuestion.content.range.split("—")[0]);
-    const max = window.Number(currentQuestion.content.range.split("—")[1]);
+  const isMobile = useRootContainerSize() < 650;
+  const [minBorder, maxBorder] = currentQuestion.content.range
+    .split("—")
+    .map(window.Number);
+  const min = minBorder < maxBorder ? minBorder : maxBorder;
+  const max = minBorder < maxBorder ? maxBorder : minBorder;
+  const reversed = minBorder > maxBorder;
 
-    const sendAnswerToBackend = async (value: string) => {
-        try {
-            await sendAnswer({
-                questionId: currentQuestion.id,
-                body: value,
-                qid,
-            });
+  const sendAnswerToBackend = async (value: string, noUpdate = false) => {
+    try {
+      await sendAnswer({
+        questionId: currentQuestion.id,
+        body: value,
+        qid,
+      });
 
-            updateAnswer(currentQuestion.id, value, 0);
-        } catch (e) {
-            enqueueSnackbar("ответ не был засчитан");
-        }
-    };
+      if (!noUpdate) {
+        updateAnswer(currentQuestion.id, value, 0);
+      }
+    } catch (e) {
+      enqueueSnackbar("ответ не был засчитан");
+    }
+  };
 
-    const updateValueDebounced = useDebouncedCallback(async (value: string) => {
-        const newValue =
-            window.Number(value) < window.Number(minRange)
-                ? minRange
-                : window.Number(value) > window.Number(maxRange)
-                    ? maxRange
-                    : value;
+  const updateValueDebounced = useDebouncedCallback(async (value: string) => {
+    const newValue =
+      window.Number(value) < window.Number(minRange)
+        ? minRange
+        : window.Number(value) > window.Number(maxRange)
+        ? maxRange
+        : value;
 
-        setInputValue(newValue);
-        await sendAnswerToBackend(newValue);
-    }, 1000);
-    const updateMinRangeDebounced = useDebouncedCallback(
-        async (value: string, crowded = false) => {
-            const newMinValue = crowded
-                ? maxRange
-                : window.Number(value.split("—")[0]) < min
-                    ? String(min)
-                    : value.split("—")[0];
+    setInputValue(newValue);
+    await sendAnswerToBackend(newValue);
+  }, 1000);
+  const updateMinRangeDebounced = useDebouncedCallback(
+    async (value: string, crowded = false) => {
+      const newMinValue = crowded
+        ? maxRange
+        : window.Number(value.split("—")[0]) < min
+        ? String(min)
+        : value.split("—")[0];
 
-            setMinRange(newMinValue);
-            await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
-        },
-        1000
-    );
-    const updateMaxRangeDebounced = useDebouncedCallback(
-        async (value: string, crowded = false) => {
-            const newMaxValue = crowded
-                ? minRange
-                : window.Number(value.split("—")[1]) > max
-                    ? String(max)
-                    : value.split("—")[1];
+      setMinRange(newMinValue);
+      await sendAnswerToBackend(`${newMinValue}—${value.split("—")[1]}`);
+    },
+    1000
+  );
+  const updateMaxRangeDebounced = useDebouncedCallback(
+    async (value: string, crowded = false) => {
+      const newMaxValue = crowded
+        ? minRange
+        : window.Number(value.split("—")[1]) > max
+        ? String(max)
+        : value.split("—")[1];
 
-            setMaxRange(newMaxValue);
-            await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
-        },
-        1000
-    );
-    const answer = answers.find(
-        ({ questionId }) => questionId === currentQuestion.id
-    )?.answer as string;
+      setMaxRange(newMaxValue);
+      await sendAnswerToBackend(`${value.split("—")[0]}—${newMaxValue}`);
+    },
+    1000
+  );
+  const answer = answers.find(
+    ({ questionId }) => questionId === currentQuestion.id
+  )?.answer as string;
 
-    const sliderValue = answer || currentQuestion.content.start + "—" + max;
+  const sliderValue = answer || currentQuestion.content.start + "—" + max;
 
-    useEffect(() => {
-        if (answer) {
-            if (answer.includes("—")) {
-                setMinRange(answer.split("—")[0]);
-                setMaxRange(answer.split("—")[1]);
-            } else {
-                setInputValue(answer);
+  useEffect(() => {
+    if (answer) {
+      if (answer.includes("—")) {
+        setMinRange(answer.split("—")[0]);
+        setMaxRange(answer.split("—")[1]);
+      } else {
+        setInputValue(answer);
+      }
+    }
+
+    if (!answer) {
+      setMinRange(String(currentQuestion.content.start));
+      setMaxRange(String(max));
+      setInputValue(String(currentQuestion.content.start));
+    }
+  }, []);
+
+  console.log(1111111111, reversedMinRange, reversedMaxRange);
+
+  return (
+    <Box>
+      <Typography variant="h5" color={theme.palette.text.primary}>
+        {currentQuestion.title}
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          width: "100%",
+          marginTop: "20px",
+          gap: "30px",
+          paddingRight: isMobile ? "10px" : undefined,
+        }}
+      >
+        <CustomSlider
+          value={
+            currentQuestion.content.chooseRange
+              ? sliderValue.split("—").length || 0 > 1
+                ? sliderValue.split("—").map((item) => window.Number(item))
+                : [min, min + 1]
+              : window.Number(sliderValue.split("—")[0])
+          }
+          min={min}
+          max={max}
+          step={currentQuestion.content.step || 1}
+          onChange={(_, value) => {
+            const range = Array.isArray(value)
+              ? `${value[0]}—${value[1]}`
+              : String(value);
+
+            updateAnswer(currentQuestion.id, range, 0);
+          }}
+          onChangeCommitted={async (_, value) => {
+            if (currentQuestion.content.chooseRange && Array.isArray(value)) {
+              if (reversed) {
+                const newMinReversedValue = String(max + min - value[0]);
+                const newMaxReversedValue = String(max + min - value[1]);
+
+                setMinRange(String(value[0]));
+                setMaxRange(String(value[1]));
+                setReversedMinRange(newMinReversedValue);
+                setReversedMaxRange(newMaxReversedValue);
+                await sendAnswerToBackend(
+                  `${newMinReversedValue}—${newMaxReversedValue}`,
+                  true
+                );
+
+                return;
+              }
+
+              setMinRange(String(value[0]));
+              setMaxRange(String(value[1]));
+              await sendAnswerToBackend(`${value[0]}—${value[1]}`);
+
+              return;
             }
-        }
 
-        if (!answer) {
-            setMinRange(String(currentQuestion.content.start));
-            setMaxRange(String(max));
-            setInputValue(String(currentQuestion.content.start));
-        }
-    }, []);
+            setInputValue(String(value));
+            await sendAnswerToBackend(String(value));
+          }}
+          valueLabelFormat={(value) => {
+            if (!reversed) {
+              return value;
+            }
 
-    return (
-        <Box>
-            <Typography variant="h5" color={theme.palette.text.primary}>
-                {currentQuestion.title}
-            </Typography>
-            <Box
-                sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    width: "100%",
-                    marginTop: "20px",
-                    gap: "30px",
-                    paddingRight: isMobile ? "10px" : undefined,
-                }}
-            >
-                <CustomSlider
-                    value={
-                        currentQuestion.content.chooseRange
-                            ? sliderValue.split("—").length || 0 > 1
-                                ? sliderValue.split("—").map((item) => window.Number(item))
-                                : [min, min + 1]
-                            : window.Number(sliderValue.split("—")[0])
-                    }
-                    min={min}
-                    max={max}
-                    step={currentQuestion.content.step || 1}
-                    onChange={(_, value) => {
-                        const range = Array.isArray(value)
-                            ? `${value[0]}—${value[1]}`
-                            : String(value);
+            const [minSliderBorder, maxSliderBorder] = sliderValue
+              .split("—")
+              .map(window.Number);
 
-                        updateAnswer(currentQuestion.id, range, 0);
-                    }}
-                    onChangeCommitted={async (_, value) => {
-                        if (currentQuestion.content.chooseRange && Array.isArray(value)) {
-                            setMinRange(String(value[0]));
-                            setMaxRange(String(value[1]));
-                            await sendAnswerToBackend(`${value[0]}—${value[1]}`);
+            if (value === minSliderBorder) {
+              return max + min - minSliderBorder;
+            }
 
-                            return;
-                        }
+            return max + min - maxSliderBorder;
+          }}
+          //@ts-ignore
+          sx={{
+            color: theme.palette.primary.main,
+            "& .MuiSlider-valueLabel": {
+              background: theme.palette.primary.main,
+            },
+          }}
+        />
 
-                        setInputValue(String(value));
-                        await sendAnswerToBackend(String(value));
-                    }}
-                    //@ts-ignore
-                    sx={{
-                        color: theme.palette.primary.main,
-                        "& .MuiSlider-valueLabel": {
-                            background: theme.palette.primary.main,
-                        },
-                    }}
-                />
+        {!currentQuestion.content.chooseRange && (
+          <CustomTextField
+            placeholder="0"
+            value={inputValue}
+            onChange={({ target }) => {
+              const value = target.value.replace(/\D/g, "");
+              setInputValue(value);
+              updateValueDebounced(value);
+            }}
+            sx={{
+              maxWidth: "80px",
+              borderColor: theme.palette.text.primary,
+              "& .MuiInputBase-input": {
+                textAlign: "center",
+                backgroundColor: quizThemes[settings.cfg.theme].isLight
+                  ? "white"
+                  : theme.palette.background.default,
+              },
+            }}
+          />
+        )}
 
-                {!currentQuestion.content.chooseRange && (
-                    <CustomTextField
-                        placeholder="0"
-                        value={inputValue}
-                        onChange={({ target }) => {
-                            const value = target.value.replace(/\D/g, "");
-                            setInputValue(value);
-                            updateValueDebounced(value);
-                        }}
-                        sx={{
-                            maxWidth: "80px",
-                            borderColor: theme.palette.text.primary,
-                            "& .MuiInputBase-input": {
-                                textAlign: "center",
-                                backgroundColor: quizThemes[settings.cfg.theme].isLight
-                                    ? "white"
-                                    : theme.palette.background.default,
-                            },
-                        }}
-                    />
-                )}
+        {currentQuestion.content.chooseRange && (
+          <Box
+            sx={{
+              display: "flex",
+              gap: "15px",
+              alignItems: "center",
+              "& .MuiFormControl-root": { width: "auto" },
+            }}
+          >
+            <CustomTextField
+              placeholder="0"
+              value={reversed ? String(reversedMinRange) : minRange}
+              onChange={({ target }) => {
+                const newValue = target.value.replace(/\D/g, "");
+                setMinRange(newValue);
 
-                {currentQuestion.content.chooseRange && (
-                    <Box
-                        sx={{
-                            display: "flex",
-                            gap: "15px",
-                            alignItems: "center",
-                            "& .MuiFormControl-root": { width: "auto" },
-                        }}
-                    >
-                        <CustomTextField
-                            placeholder="0"
-                            value={minRange}
-                            onChange={({ target }) => {
-                                const newValue = target.value.replace(/\D/g, "");
-                                setMinRange(newValue);
+                if (window.Number(newValue) >= window.Number(maxRange)) {
+                  updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
 
-                                if (window.Number(newValue) >= window.Number(maxRange)) {
-                                    updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
+                  return;
+                }
 
-                                    return;
-                                }
+                updateMinRangeDebounced(`${newValue}—${maxRange}`);
+              }}
+              sx={{
+                maxWidth: "80px",
+                borderColor: theme.palette.text.primary,
+                "& .MuiInputBase-input": {
+                  textAlign: "center",
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
+                    ? "white"
+                    : theme.palette.background.default,
+                },
+              }}
+            />
+            <Typography color={theme.palette.text.primary}>до</Typography>
+            <CustomTextField
+              placeholder="0"
+              value={reversed ? String(reversedMaxRange) : maxRange}
+              onChange={({ target }) => {
+                const newValue = target.value.replace(/\D/g, "");
+                setMaxRange(newValue);
 
-                                updateMinRangeDebounced(`${newValue}—${maxRange}`);
-                            }}
-                            sx={{
-                                maxWidth: "80px",
-                                borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
-                                    textAlign: "center",
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
-                                        ? "white"
-                                        : theme.palette.background.default,
-                                },
-                            }}
-                        />
-                        <Typography color={theme.palette.text.primary}>до</Typography>
-                        <CustomTextField
-                            placeholder="0"
-                            value={maxRange}
-                            onChange={({ target }) => {
-                                const newValue = target.value.replace(/\D/g, "");
-                                setMaxRange(newValue);
+                if (window.Number(newValue) <= window.Number(minRange)) {
+                  updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
 
-                                if (window.Number(newValue) <= window.Number(minRange)) {
-                                    updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
+                  return;
+                }
 
-                                    return;
-                                }
-
-                                updateMaxRangeDebounced(`${minRange}—${newValue}`);
-                            }}
-                            sx={{
-                                maxWidth: "80px",
-                                borderColor: theme.palette.text.primary,
-                                "& .MuiInputBase-input": {
-                                    textAlign: "center",
-                                    backgroundColor: quizThemes[settings.cfg.theme].isLight
-                                        ? "white"
-                                        : theme.palette.background.default,
-                                },
-                            }}
-                        />
-                    </Box>
-                )}
-            </Box>
-        </Box>
-    );
+                updateMaxRangeDebounced(`${minRange}—${newValue}`);
+              }}
+              sx={{
+                maxWidth: "80px",
+                borderColor: theme.palette.text.primary,
+                "& .MuiInputBase-input": {
+                  textAlign: "center",
+                  backgroundColor: quizThemes[settings.cfg.theme].isLight
+                    ? "white"
+                    : theme.palette.background.default,
+                },
+              }}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
 };
diff --git a/lib/ui_kit/CustomSlider.tsx b/lib/ui_kit/CustomSlider.tsx
index 7f508fd..e59391b 100644
--- a/lib/ui_kit/CustomSlider.tsx
+++ b/lib/ui_kit/CustomSlider.tsx
@@ -1,5 +1,7 @@
 import { Slider, SxProps, Theme, useTheme } from "@mui/material";
 
+import type { ReactNode } from "react";
+
 type CustomSliderProps = {
   defaultValue?: number;
   value?: number | number[];
@@ -8,7 +10,11 @@ type CustomSliderProps = {
   step?: number;
   sx?: SxProps<Theme>;
   onChange?: (_: Event, value: number | number[]) => void;
-  onChangeCommitted?: (_: React.SyntheticEvent | Event, value: number | number[]) => void;
+  onChangeCommitted?: (
+    _: React.SyntheticEvent | Event,
+    value: number | number[]
+  ) => void;
+  valueLabelFormat?: (value: number, index: number) => ReactNode;
 };
 
 export const CustomSlider = ({
@@ -19,6 +25,7 @@ export const CustomSlider = ({
   step,
   onChange,
   onChangeCommitted,
+  valueLabelFormat,
   sx,
 }: CustomSliderProps) => {
   // const handleChange = ({ type }: Event, newValue: number | number[]) => {
@@ -39,6 +46,7 @@ export const CustomSlider = ({
       onChange={onChange}
       valueLabelDisplay="on"
       onChangeCommitted={onChangeCommitted}
+      valueLabelFormat={valueLabelFormat}
       onMouseDown={(e) => e.stopPropagation()}
       data-cy="slider"
       sx={{
@@ -73,7 +81,7 @@ export const CustomSlider = ({
         "& .MuiSlider-track": {
           height: "12px",
         },
-          ...sx
+        ...sx,
       }}
     />
   );