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 { 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>
|
|
||||||
);
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user