478 lines
17 KiB
TypeScript
478 lines
17 KiB
TypeScript
import { Box, Typography, useTheme } from "@mui/material";
|
||
import { useEffect, useState } from "react";
|
||
import { useDebouncedCallback } from "use-debounce";
|
||
|
||
import { CustomSlider } from "@ui_kit/CustomSlider";
|
||
import CustomTextField from "@ui_kit/CustomTextField";
|
||
|
||
import { useQuizViewStore } from "@stores/quizView";
|
||
|
||
import { sendAnswer } from "@api/quizRelase";
|
||
import { enqueueSnackbar } from "notistack";
|
||
import type { QuizQuestionNumber } from "@model/questionTypes/number";
|
||
|
||
import { useQuizData } from "@contexts/QuizDataContext";
|
||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||
import { useRootContainerSize } from "@contexts/RootContainerWidthContext";
|
||
|
||
import type { ChangeEvent, SyntheticEvent } from "react";
|
||
|
||
type NumberProps = {
|
||
currentQuestion: QuizQuestionNumber;
|
||
};
|
||
|
||
export const Number = ({ currentQuestion }: NumberProps) => {
|
||
const { settings, quizId, preview } = 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(state => state.answers);
|
||
const deleteAnswer = useQuizViewStore(state => state.deleteAnswer);
|
||
const updateAnswer = useQuizViewStore(state => state.updateAnswer);
|
||
const [isSending, setIsSending] = useState<boolean>(false);
|
||
|
||
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;
|
||
|
||
useEffect(() => {
|
||
console.log("reversed:", reversed);
|
||
}, [reversed]);
|
||
|
||
const sendAnswerToBackend = async (value: string, noUpdate = false) => {
|
||
setIsSending(true);
|
||
try {
|
||
await sendAnswer({
|
||
questionId: currentQuestion.id,
|
||
body: value,
|
||
qid: quizId,
|
||
preview
|
||
});
|
||
|
||
if (!noUpdate) {
|
||
updateAnswer(currentQuestion.id, value, 0);
|
||
}
|
||
} catch (e) {
|
||
enqueueSnackbar("ответ не был засчитан");
|
||
}
|
||
|
||
setIsSending(false);
|
||
};
|
||
|
||
const updateValueDebounced = useDebouncedCallback(async (value: string) => {
|
||
if (reversed) {
|
||
const newValue =
|
||
window.Number(value) < window.Number(min)
|
||
? String(min)
|
||
: window.Number(value) > window.Number(max)
|
||
? String(max)
|
||
: value;
|
||
|
||
setReversedInputValue(newValue);
|
||
updateAnswer(
|
||
currentQuestion.id,
|
||
String(max + min - window.Number(newValue)),
|
||
0
|
||
);
|
||
await sendAnswerToBackend(String(window.Number(newValue)), true);
|
||
|
||
return;
|
||
}
|
||
|
||
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) => {
|
||
if (reversed) {
|
||
const newMinRange = crowded
|
||
? window.Number(value.split("—")[1])
|
||
: max + min - window.Number(value.split("—")[0]) < min
|
||
? min
|
||
: max + min - window.Number(value.split("—")[0]);
|
||
|
||
const newMinValue =
|
||
window.Number(value.split("—")[0]) > max
|
||
? String(max)
|
||
: value.split("—")[0];
|
||
|
||
setReversedMinRange(
|
||
crowded ? String(max + min - window.Number(newMinValue)) : newMinValue
|
||
);
|
||
updateAnswer(
|
||
currentQuestion.id,
|
||
`${newMinRange}—${value.split("—")[1]}`,
|
||
0
|
||
);
|
||
await sendAnswerToBackend(
|
||
`${newMinValue}—${value.split("—")[1]}`,
|
||
true
|
||
);
|
||
|
||
return;
|
||
}
|
||
|
||
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) => {
|
||
if (reversed) {
|
||
const newMaxRange = crowded
|
||
? window.Number(value.split("—")[1])
|
||
: max + min - window.Number(value.split("—")[1]) > max
|
||
? max
|
||
: max + min - window.Number(value.split("—")[1]);
|
||
|
||
const newMaxValue =
|
||
window.Number(value.split("—")[1]) < min
|
||
? String(min)
|
||
: value.split("—")[1];
|
||
|
||
setReversedMaxRange(
|
||
crowded ? String(max + min - window.Number(newMaxValue)) : newMaxValue
|
||
);
|
||
updateAnswer(
|
||
currentQuestion.id,
|
||
`${value.split("—")[0]}—${newMaxRange}`,
|
||
0
|
||
);
|
||
await sendAnswerToBackend(
|
||
`${value.split("—")[0]}—${newMaxValue}`,
|
||
true
|
||
);
|
||
|
||
return;
|
||
}
|
||
|
||
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;
|
||
|
||
const sliderValue =
|
||
answer ||
|
||
(reversed
|
||
? max + min - currentQuestion.content.start + "—" + max
|
||
: currentQuestion.content.start + "—" + max);
|
||
|
||
useEffect(() => {
|
||
if (answer) {
|
||
if (answer.includes("—")) {
|
||
if (reversed) {
|
||
setReversedMinRange(
|
||
String(max + min - window.Number(answer.split("—")[0]))
|
||
);
|
||
setReversedMaxRange(
|
||
String(max + min - window.Number(answer.split("—")[1]))
|
||
);
|
||
} else {
|
||
setMinRange(answer.split("—")[0]);
|
||
setMaxRange(answer.split("—")[1]);
|
||
}
|
||
} else {
|
||
if (reversed) {
|
||
setReversedInputValue(String(max + min - window.Number(answer)));
|
||
} else {
|
||
setInputValue(answer);
|
||
}
|
||
}
|
||
}
|
||
|
||
if (!answer) {
|
||
setMinRange(String(currentQuestion.content.start));
|
||
setMaxRange(String(max));
|
||
|
||
if (currentQuestion.content.chooseRange) {
|
||
setReversedMinRange(String(currentQuestion.content.start));
|
||
setReversedMaxRange(String(min));
|
||
}
|
||
|
||
setReversedInputValue(String(currentQuestion.content.start));
|
||
setInputValue(String(currentQuestion.content.start));
|
||
}
|
||
}, []);
|
||
|
||
const onSliderChange = (_: Event, value: number | number[]) => {
|
||
const range = Array.isArray(value)
|
||
? `${value[0]}—${value[1]}`
|
||
: String(value);
|
||
|
||
updateAnswer(currentQuestion.id, range, 0);
|
||
};
|
||
|
||
const onChangeCommitted = async (
|
||
_: Event | SyntheticEvent<Element, Event>,
|
||
value: number | number[]
|
||
) => {
|
||
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 (reversed) {
|
||
setReversedInputValue(String(max + min - window.Number(value)));
|
||
} else {
|
||
setInputValue(String(value));
|
||
}
|
||
|
||
await sendAnswerToBackend(String(value));
|
||
};
|
||
|
||
const changeValueLabelFormat = (value: number) => {
|
||
if (!reversed) {
|
||
return value;
|
||
}
|
||
|
||
const [minSliderBorder, maxSliderBorder] = sliderValue
|
||
.split("—")
|
||
.map(window.Number);
|
||
|
||
if (value === minSliderBorder) {
|
||
return max + min - minSliderBorder;
|
||
}
|
||
|
||
return max + min - maxSliderBorder;
|
||
};
|
||
|
||
const onInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||
const value = target.value.replace(/\D/g, "");
|
||
|
||
if (reversed) {
|
||
setReversedInputValue(value);
|
||
} else {
|
||
setInputValue(value);
|
||
}
|
||
|
||
updateValueDebounced(value);
|
||
};
|
||
|
||
const onMinInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||
const newValue = target.value.replace(/\D/g, "");
|
||
|
||
if (reversed) {
|
||
setReversedMinRange(newValue);
|
||
|
||
if (window.Number(newValue) <= window.Number(reversedMaxRange)) {
|
||
const value = max + min - window.Number(reversedMaxRange);
|
||
updateMinRangeDebounced(`${value}—${value}`, true);
|
||
|
||
return;
|
||
}
|
||
|
||
updateMinRangeDebounced(
|
||
`${newValue}—${max + min - window.Number(reversedMaxRange)}`
|
||
);
|
||
|
||
return;
|
||
}
|
||
|
||
setMinRange(newValue);
|
||
|
||
if (window.Number(newValue) >= window.Number(maxRange)) {
|
||
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
|
||
|
||
return;
|
||
}
|
||
|
||
updateMinRangeDebounced(`${newValue}—${maxRange}`);
|
||
};
|
||
|
||
const onMaxInputChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||
const newValue = target.value.replace(/\D/g, "");
|
||
|
||
if (reversed) {
|
||
setReversedMaxRange(newValue);
|
||
|
||
if (window.Number(newValue) >= window.Number(reversedMinRange)) {
|
||
const value = max + min - window.Number(reversedMinRange);
|
||
updateMaxRangeDebounced(`${value}—${value}`, true);
|
||
|
||
return;
|
||
}
|
||
|
||
updateMaxRangeDebounced(
|
||
`${max + min - window.Number(reversedMinRange)}—${newValue}`
|
||
);
|
||
|
||
return;
|
||
}
|
||
|
||
setMaxRange(newValue);
|
||
|
||
if (window.Number(newValue) <= window.Number(minRange)) {
|
||
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
|
||
|
||
return;
|
||
}
|
||
|
||
updateMaxRangeDebounced(`${minRange}—${newValue}`);
|
||
};
|
||
|
||
return (
|
||
<Box>
|
||
<Typography
|
||
variant="h5"
|
||
color={theme.palette.text.primary}
|
||
sx={{ wordBreak: "break-word" }}
|
||
>
|
||
{currentQuestion.title}
|
||
</Typography>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
flexDirection: "column",
|
||
width: "100%",
|
||
marginTop: "20px",
|
||
gap: "30px",
|
||
padding: "0 30px",
|
||
}}
|
||
>
|
||
<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={onSliderChange}
|
||
onChangeCommitted={onChangeCommitted}
|
||
valueLabelFormat={changeValueLabelFormat}
|
||
sx={{
|
||
color: theme.palette.primary.main,
|
||
"& .MuiSlider-valueLabel": {
|
||
background: theme.palette.primary.main,
|
||
borderRadius: "8px",
|
||
minWidth: "60px",
|
||
height: "36px"
|
||
},
|
||
}}
|
||
/>
|
||
|
||
{!currentQuestion.content.chooseRange && (
|
||
<CustomTextField
|
||
placeholder="0"
|
||
value={reversed ? reversedInputValue : inputValue}
|
||
onChange={onInputChange}
|
||
sx={{
|
||
maxWidth: "80px",
|
||
borderColor: theme.palette.text.primary,
|
||
"& .MuiOutlinedInput-root": { background: "transparent" },
|
||
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
borderColor: "#9A9AAF"
|
||
},
|
||
}}
|
||
/>
|
||
)}
|
||
|
||
{currentQuestion.content.chooseRange && (
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
gap: "15px",
|
||
alignItems: "center",
|
||
"& .MuiFormControl-root": { width: "auto" },
|
||
}}
|
||
>
|
||
<CustomTextField
|
||
placeholder="0"
|
||
value={reversed ? String(reversedMinRange) : minRange}
|
||
onChange={onMinInputChange}
|
||
sx={{
|
||
maxWidth: "80px",
|
||
borderColor: theme.palette.text.primary,
|
||
"& .MuiOutlinedInput-root": { background: "transparent" },
|
||
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
borderColor: "#9A9AAF"
|
||
},
|
||
}}
|
||
/>
|
||
<Typography color={theme.palette.text.primary}>до</Typography>
|
||
<CustomTextField
|
||
placeholder="0"
|
||
value={reversed ? String(reversedMaxRange) : maxRange}
|
||
onChange={onMaxInputChange}
|
||
sx={{
|
||
maxWidth: "80px",
|
||
"& .MuiOutlinedInput-root": { background: "transparent" },
|
||
"& .MuiInputBase-input": { textAlign: "center", zIndex: 1 },
|
||
"& .MuiOutlinedInput-notchedOutline": {
|
||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||
? "white"
|
||
: theme.palette.background.default,
|
||
borderColor: "#9A9AAF"
|
||
},
|
||
}}
|
||
/>
|
||
</Box>
|
||
)}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|