fix: result and contact forms logic
This commit is contained in:
parent
9ce829f98f
commit
3d30563ddb
@ -1,33 +1,47 @@
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { useQuestionsStore } from "@root/questions/store";
|
||||
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
|
||||
type ContactFormProps = {
|
||||
currentQuestion: AnyTypedQuizQuestion;
|
||||
showResultForm: boolean;
|
||||
setShowContactForm: (show: boolean) => void;
|
||||
setShowResultForm: (show: boolean) => void;
|
||||
};
|
||||
|
||||
export const ContactForm = ({
|
||||
currentQuestion,
|
||||
showResultForm,
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
}: ContactFormProps) => {
|
||||
const quiz = useCurrentQuiz();
|
||||
const { questions } = useQuestionsStore();
|
||||
|
||||
const followNextForm = () => {
|
||||
setShowContactForm(false);
|
||||
setShowResultForm(true);
|
||||
};
|
||||
|
||||
const resultQuestion = questions.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id
|
||||
);
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography>Форма контактов</Typography>
|
||||
{!showResultForm && quiz?.config.resultInfo.when === "after" && (
|
||||
<Button variant="contained" onClick={followNextForm}>
|
||||
Показать результат
|
||||
</Button>
|
||||
)}
|
||||
{!showResultForm &&
|
||||
resultQuestion &&
|
||||
quiz?.config.resultInfo.when === "after" && (
|
||||
<Button variant="contained" onClick={followNextForm}>
|
||||
Показать результат
|
||||
</Button>
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
@ -17,7 +17,6 @@ type FooterProps = {
|
||||
question: AnyTypedQuizQuestion;
|
||||
setShowContactForm: (show: boolean) => void;
|
||||
setShowResultForm: (show: boolean) => void;
|
||||
setResultQuestion: (id: string) => void;
|
||||
};
|
||||
|
||||
export const Footer = ({
|
||||
@ -25,7 +24,6 @@ export const Footer = ({
|
||||
question,
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
setResultQuestion,
|
||||
}: FooterProps) => {
|
||||
const [disablePreviousButton, setDisablePreviousButton] =
|
||||
useState<boolean>(false);
|
||||
@ -103,16 +101,10 @@ export const Footer = ({
|
||||
type === "result" && content.rule.parentId === question.content.id
|
||||
);
|
||||
|
||||
if (resultQuestion) {
|
||||
setResultQuestion(resultQuestion.id);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (quiz?.config.resultInfo.when === "after") {
|
||||
setShowContactForm(true);
|
||||
} else {
|
||||
if (quiz?.config.resultInfo.when !== "after" && resultQuestion) {
|
||||
setShowResultForm(true);
|
||||
} else {
|
||||
setShowContactForm(true);
|
||||
}
|
||||
};
|
||||
|
||||
|
@ -18,7 +18,6 @@ import { Rating } from "./questions/Rating";
|
||||
import { Footer } from "./Footer";
|
||||
import { ContactForm } from "./ContactForm";
|
||||
import { ResultForm } from "./ResultForm";
|
||||
import { ResultQuestion } from "./ResultQuestion";
|
||||
|
||||
import type { QuestionType } from "../../model/question/question";
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
@ -47,7 +46,6 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
useState<AnyTypedQuizQuestion>();
|
||||
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
||||
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
||||
const [resultQuestion, setResultQuestion] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
|
||||
@ -77,19 +75,12 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
margin: "0 auto",
|
||||
}}
|
||||
>
|
||||
{!showContactForm && !showResultForm && !resultQuestion && (
|
||||
{!showContactForm && !showResultForm && (
|
||||
<QuestionComponent currentQuestion={currentQuestion} />
|
||||
)}
|
||||
{resultQuestion && (
|
||||
<ResultQuestion
|
||||
resultQuestion={resultQuestion}
|
||||
setResultQuestion={setResultQuestion}
|
||||
setShowContactForm={setShowContactForm}
|
||||
setShowResultForm={setShowResultForm}
|
||||
/>
|
||||
)}
|
||||
{showContactForm && (
|
||||
<ContactForm
|
||||
currentQuestion={currentQuestion}
|
||||
showResultForm={showResultForm}
|
||||
setShowContactForm={setShowContactForm}
|
||||
setShowResultForm={setShowResultForm}
|
||||
@ -97,19 +88,19 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
)}
|
||||
{showResultForm && (
|
||||
<ResultForm
|
||||
currentQuestion={currentQuestion}
|
||||
showContactForm={showContactForm}
|
||||
setShowContactForm={setShowContactForm}
|
||||
setShowResultForm={setShowResultForm}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
{!showContactForm && !showResultForm && !resultQuestion && (
|
||||
{!showContactForm && !showResultForm && (
|
||||
<Footer
|
||||
question={currentQuestion}
|
||||
setCurrentQuestion={setCurrentQuestion}
|
||||
setShowContactForm={setShowContactForm}
|
||||
setShowResultForm={setShowResultForm}
|
||||
setResultQuestion={setResultQuestion}
|
||||
/>
|
||||
)}
|
||||
</Box>
|
||||
|
@ -1,19 +1,30 @@
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { useQuestionsStore } from "@root/questions/store";
|
||||
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
|
||||
type ResultFormProps = {
|
||||
currentQuestion: AnyTypedQuizQuestion;
|
||||
showContactForm: boolean;
|
||||
setShowContactForm: (show: boolean) => void;
|
||||
setShowResultForm: (show: boolean) => void;
|
||||
};
|
||||
|
||||
export const ResultForm = ({
|
||||
currentQuestion,
|
||||
showContactForm,
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
}: ResultFormProps) => {
|
||||
const quiz = useCurrentQuiz();
|
||||
const { questions } = useQuestionsStore();
|
||||
const resultQuestion = questions.find(
|
||||
(question) =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id
|
||||
);
|
||||
|
||||
const followNextForm = () => {
|
||||
setShowResultForm(false);
|
||||
@ -23,6 +34,7 @@ export const ResultForm = ({
|
||||
return (
|
||||
<Box>
|
||||
<Typography>Форма результатов</Typography>
|
||||
<Typography>{JSON.stringify(resultQuestion)}</Typography>
|
||||
{!showContactForm && quiz?.config.resultInfo.when !== "after" && (
|
||||
<Button variant="contained" onClick={followNextForm}>
|
||||
Показать форму контактов
|
||||
|
@ -1,43 +0,0 @@
|
||||
import { Box, Typography, Button } from "@mui/material";
|
||||
|
||||
import { useCurrentQuiz } from "@root/quizes/hooks";
|
||||
import { useQuestionsStore } from "@root/questions/store";
|
||||
|
||||
type ResultQuestionProps = {
|
||||
resultQuestion: string;
|
||||
setResultQuestion: (id: string) => void;
|
||||
setShowContactForm: (show: boolean) => void;
|
||||
setShowResultForm: (show: boolean) => void;
|
||||
};
|
||||
|
||||
export const ResultQuestion = ({
|
||||
resultQuestion,
|
||||
setResultQuestion,
|
||||
setShowContactForm,
|
||||
setShowResultForm,
|
||||
}: ResultQuestionProps) => {
|
||||
const quiz = useCurrentQuiz();
|
||||
const { questions } = useQuestionsStore();
|
||||
|
||||
const followNextForm = () => {
|
||||
setResultQuestion("");
|
||||
|
||||
if (quiz?.config.resultInfo.when === "after") {
|
||||
setShowContactForm(true);
|
||||
} else {
|
||||
setShowResultForm(true);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography>Вопрос результат</Typography>
|
||||
<Typography>
|
||||
{JSON.stringify(questions.find(({ id }) => id === resultQuestion))}
|
||||
</Typography>
|
||||
<Button variant="contained" onClick={followNextForm}>
|
||||
Далее
|
||||
</Button>
|
||||
</Box>
|
||||
);
|
||||
};
|
Loading…
Reference in New Issue
Block a user