feat: View footer buttons disabled logic
This commit is contained in:
parent
8e6852f38c
commit
ac31202af6
@ -19,19 +19,95 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
|
||||
const [disabledQuestionsId, setDisabledQuestionsId] = useState<Set<string>>(
|
||||
new Set()
|
||||
);
|
||||
const [disablePreviousButton, setDisablePreviousButton] =
|
||||
useState<boolean>(false);
|
||||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||||
const { answers } = useQuizViewStore();
|
||||
const theme = useTheme();
|
||||
|
||||
useEffect(() => {
|
||||
// Логика для аргумента disabled у кнопки "Назад"
|
||||
if (question?.content.rule.parentId === "root") {
|
||||
setDisablePreviousButton(true);
|
||||
} else {
|
||||
setDisablePreviousButton(false);
|
||||
}
|
||||
|
||||
// Логика для аргумента disabled у кнопки "Далее"
|
||||
const nextQuestionId = getNextQuestionId();
|
||||
if (nextQuestionId) {
|
||||
setDisableNextButton(false);
|
||||
} else {
|
||||
const nextQuestion = getQuestionByContentId(
|
||||
question.content.rule.default
|
||||
);
|
||||
if (nextQuestion?.type) {
|
||||
setDisableNextButton(false);
|
||||
} else {
|
||||
setDisableNextButton(true);
|
||||
}
|
||||
}
|
||||
}, [question]);
|
||||
|
||||
const getNextQuestionId = () => {
|
||||
if (answers.length) {
|
||||
const answer = answers.find(
|
||||
({ questionId }) => questionId === question.content.id
|
||||
);
|
||||
|
||||
let readyBeNextQuestion = "";
|
||||
|
||||
question.content.rule.main.forEach(({ next, rules }) => {
|
||||
let longerArray = Math.max(
|
||||
rules[0].answers.length,
|
||||
[answer?.answer].length
|
||||
);
|
||||
|
||||
for (
|
||||
var i = 0;
|
||||
i < longerArray;
|
||||
i++ // Цикл по всем элементам бОльшего массива
|
||||
) {
|
||||
if (rules[0].answers[i] === answer?.answer) {
|
||||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return readyBeNextQuestion;
|
||||
}
|
||||
};
|
||||
|
||||
const followPreviousStep = () => {
|
||||
if (question?.content.rule.parentId !== "root") {
|
||||
const parent = getQuestionByContentId(question?.content.rule.parentId);
|
||||
if (parent) {
|
||||
if (parent?.type) {
|
||||
setCurrentQuestion(parent);
|
||||
} else {
|
||||
enqueueSnackbar("не могу получить предыдущий вопрос");
|
||||
}
|
||||
}
|
||||
|
||||
const nextQuestionId = getNextQuestionId();
|
||||
|
||||
if (nextQuestionId) {
|
||||
const nextQuestion = getQuestionByContentId(nextQuestionId);
|
||||
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
return;
|
||||
} else {
|
||||
enqueueSnackbar("не могу получить последующий вопрос");
|
||||
}
|
||||
} else {
|
||||
enqueueSnackbar("вы находитесь на первом вопросе");
|
||||
const nextQuestion = getQuestionByContentId(
|
||||
question.content.rule.default
|
||||
);
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
} else {
|
||||
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -62,7 +138,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
|
||||
if (readyBeNextQuestion) {
|
||||
const nextQuestion = getQuestionByContentId(readyBeNextQuestion);
|
||||
|
||||
if (nextQuestion) {
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
return;
|
||||
} else {
|
||||
@ -72,7 +148,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
|
||||
const nextQuestion = getQuestionByContentId(
|
||||
question.content.rule.default
|
||||
);
|
||||
if (nextQuestion) {
|
||||
if (nextQuestion?.type) {
|
||||
setCurrentQuestion(nextQuestion);
|
||||
} else {
|
||||
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
|
||||
@ -130,6 +206,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
|
||||
</Typography> */}
|
||||
</Box>
|
||||
<Button
|
||||
disabled={disablePreviousButton}
|
||||
variant="contained"
|
||||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||||
onClick={followPreviousStep}
|
||||
@ -137,6 +214,7 @@ export const Footer = ({ setCurrentQuestion, question }: FooterProps) => {
|
||||
← Назад
|
||||
</Button>
|
||||
<Button
|
||||
disabled={disableNextButton}
|
||||
variant="contained"
|
||||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||||
onClick={followNextStep}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user