fix: result and contact forms logic

This commit is contained in:
IlyaDoronin 2023-12-16 12:36:35 +03:00
parent 9ce829f98f
commit 3d30563ddb
5 changed files with 38 additions and 72 deletions

@ -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>
);
};