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 { Box, Typography, Button } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
type ContactFormProps = { type ContactFormProps = {
currentQuestion: AnyTypedQuizQuestion;
showResultForm: boolean; showResultForm: boolean;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
}; };
export const ContactForm = ({ export const ContactForm = ({
currentQuestion,
showResultForm, showResultForm,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
}: ContactFormProps) => { }: ContactFormProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const followNextForm = () => { const followNextForm = () => {
setShowContactForm(false); setShowContactForm(false);
setShowResultForm(true); setShowResultForm(true);
}; };
const resultQuestion = questions.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
);
return ( return (
<Box> <Box>
<Typography>Форма контактов</Typography> <Typography>Форма контактов</Typography>
{!showResultForm && quiz?.config.resultInfo.when === "after" && ( {!showResultForm &&
<Button variant="contained" onClick={followNextForm}> resultQuestion &&
Показать результат quiz?.config.resultInfo.when === "after" && (
</Button> <Button variant="contained" onClick={followNextForm}>
)} Показать результат
</Button>
)}
</Box> </Box>
); );
}; };

@ -17,7 +17,6 @@ type FooterProps = {
question: AnyTypedQuizQuestion; question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
setResultQuestion: (id: string) => void;
}; };
export const Footer = ({ export const Footer = ({
@ -25,7 +24,6 @@ export const Footer = ({
question, question,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
setResultQuestion,
}: FooterProps) => { }: FooterProps) => {
const [disablePreviousButton, setDisablePreviousButton] = const [disablePreviousButton, setDisablePreviousButton] =
useState<boolean>(false); useState<boolean>(false);
@ -103,16 +101,10 @@ export const Footer = ({
type === "result" && content.rule.parentId === question.content.id type === "result" && content.rule.parentId === question.content.id
); );
if (resultQuestion) { if (quiz?.config.resultInfo.when !== "after" && resultQuestion) {
setResultQuestion(resultQuestion.id);
return;
}
if (quiz?.config.resultInfo.when === "after") {
setShowContactForm(true);
} else {
setShowResultForm(true); setShowResultForm(true);
} else {
setShowContactForm(true);
} }
}; };

@ -18,7 +18,6 @@ import { Rating } from "./questions/Rating";
import { Footer } from "./Footer"; import { Footer } from "./Footer";
import { ContactForm } from "./ContactForm"; import { ContactForm } from "./ContactForm";
import { ResultForm } from "./ResultForm"; import { ResultForm } from "./ResultForm";
import { ResultQuestion } from "./ResultQuestion";
import type { QuestionType } from "../../model/question/question"; import type { QuestionType } from "../../model/question/question";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared"; import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
@ -47,7 +46,6 @@ export const Question = ({ questions }: QuestionProps) => {
useState<AnyTypedQuizQuestion>(); useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false); const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false); const [showResultForm, setShowResultForm] = useState<boolean>(false);
const [resultQuestion, setResultQuestion] = useState<string>("");
useEffect(() => { useEffect(() => {
const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || ""); const nextQuestion = getQuestionByContentId(quiz?.config.haveRoot || "");
@ -77,19 +75,12 @@ export const Question = ({ questions }: QuestionProps) => {
margin: "0 auto", margin: "0 auto",
}} }}
> >
{!showContactForm && !showResultForm && !resultQuestion && ( {!showContactForm && !showResultForm && (
<QuestionComponent currentQuestion={currentQuestion} /> <QuestionComponent currentQuestion={currentQuestion} />
)} )}
{resultQuestion && (
<ResultQuestion
resultQuestion={resultQuestion}
setResultQuestion={setResultQuestion}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{showContactForm && ( {showContactForm && (
<ContactForm <ContactForm
currentQuestion={currentQuestion}
showResultForm={showResultForm} showResultForm={showResultForm}
setShowContactForm={setShowContactForm} setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm} setShowResultForm={setShowResultForm}
@ -97,19 +88,19 @@ export const Question = ({ questions }: QuestionProps) => {
)} )}
{showResultForm && ( {showResultForm && (
<ResultForm <ResultForm
currentQuestion={currentQuestion}
showContactForm={showContactForm} showContactForm={showContactForm}
setShowContactForm={setShowContactForm} setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm} setShowResultForm={setShowResultForm}
/> />
)} )}
</Box> </Box>
{!showContactForm && !showResultForm && !resultQuestion && ( {!showContactForm && !showResultForm && (
<Footer <Footer
question={currentQuestion} question={currentQuestion}
setCurrentQuestion={setCurrentQuestion} setCurrentQuestion={setCurrentQuestion}
setShowContactForm={setShowContactForm} setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm} setShowResultForm={setShowResultForm}
setResultQuestion={setResultQuestion}
/> />
)} )}
</Box> </Box>

@ -1,19 +1,30 @@
import { Box, Typography, Button } from "@mui/material"; import { Box, Typography, Button } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks"; import { useCurrentQuiz } from "@root/quizes/hooks";
import { useQuestionsStore } from "@root/questions/store";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
type ResultFormProps = { type ResultFormProps = {
currentQuestion: AnyTypedQuizQuestion;
showContactForm: boolean; showContactForm: boolean;
setShowContactForm: (show: boolean) => void; setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void; setShowResultForm: (show: boolean) => void;
}; };
export const ResultForm = ({ export const ResultForm = ({
currentQuestion,
showContactForm, showContactForm,
setShowContactForm, setShowContactForm,
setShowResultForm, setShowResultForm,
}: ResultFormProps) => { }: ResultFormProps) => {
const quiz = useCurrentQuiz(); const quiz = useCurrentQuiz();
const { questions } = useQuestionsStore();
const resultQuestion = questions.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
);
const followNextForm = () => { const followNextForm = () => {
setShowResultForm(false); setShowResultForm(false);
@ -23,6 +34,7 @@ export const ResultForm = ({
return ( return (
<Box> <Box>
<Typography>Форма результатов</Typography> <Typography>Форма результатов</Typography>
<Typography>{JSON.stringify(resultQuestion)}</Typography>
{!showContactForm && quiz?.config.resultInfo.when !== "after" && ( {!showContactForm && quiz?.config.resultInfo.when !== "after" && (
<Button variant="contained" onClick={followNextForm}> <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>
);
};