SQuiz/frontAnswerer
2
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor component hierarchy

Browse Source 
move logic to dedicated hook
use quizId from context, not from settings
add ErrorBoundaryFallback component
This commit is contained in:
nflnkr 2024-02-08 16:42:31 +03:00
parent ba547dcb55
commit e4d9018962
30 changed files with 685 additions and 793 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/App.tsx
View File

@ -1,20 +1,22 @@
import { Box } from "@mui/material";
import { useEffect, useState } from "react";
import { startTransition, useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import QuizAnswerer from "./QuizAnswerer";
import { QuizIdContext } from "./contexts/QuizIdContext";
import { RootContainerWidthContext } from "./contexts/RootContainerWidthContext";
const defaultQuizId = "ef836ff8-35b1-4031-9acf-af5766bac2b2";
const defaultQuizId = "45ef7f9c-784d-4e58-badb-f6b337f08ba0";
export default function App() {
const quizId = useParams().quizId ?? defaultQuizId;
const [rootContainerSize, setRootContainerSize] = useState<number>(Infinity);
const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
useEffect(() => {
const handleWindowResize = () => {
startTransition(() => {
setRootContainerSize(window.innerWidth);
});
};
window.addEventListener("resize", handleWindowResize);

8
src/QuizAnswerer.tsx
View File

@ -2,6 +2,7 @@ import { CssBaseline, ThemeProvider } from "@mui/material";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterMoment } from "@mui/x-date-pickers/AdapterMoment";
import { ruRU } from '@mui/x-date-pickers/locales';
import ErrorBoundaryFallback from "@ui_kit/ErrorBoundaryFallback";
import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
import { handleComponentError } from "@utils/handleComponentError";
import moment from "moment";
@ -9,8 +10,7 @@ import { SnackbarProvider } from 'notistack';
import { Suspense } from "react";
import { ErrorBoundary } from "react-error-boundary";
import { SWRConfig } from "swr";
import { ApologyPage } from "./pages/ViewPublicationPage/ApologyPage";
import { ViewPage } from "./pages/ViewPublicationPage/ViewPublicationPage";
import ViewPublicationPage from "./pages/ViewPublicationPage/ViewPublicationPage";
import lightTheme from "./utils/themes/light";
@ -32,11 +32,11 @@ export default function QuizAnswerer() {
>
<CssBaseline />
<ErrorBoundary
fallback={<ApologyPage message="Что-то пошло не так" />}
FallbackComponent={ErrorBoundaryFallback}
onError={handleComponentError}
>
<Suspense fallback={<LoadingSkeleton />}>
<ViewPage />
<ViewPublicationPage />
</Suspense>
</ErrorBoundary>
</SnackbarProvider>

10
src/WidgetApp.tsx
View File

@ -1,5 +1,5 @@
import { Box } from "@mui/material";
import { useEffect, useRef, useState } from "react";
import { startTransition, useEffect, useRef, useState } from "react";
import QuizAnswerer from "./QuizAnswerer";
import { QuizIdContext } from "./contexts/QuizIdContext";
import { RootContainerWidthContext } from "./contexts/RootContainerWidthContext";
@ -10,14 +10,14 @@ interface Props {
}
export default function WidgetApp({ quizId }: Props) {
const [rootContainerSize, setRootContainerSize] = useState<number>(Infinity);
const [rootContainerSize, setRootContainerSize] = useState<number>(() => window.innerWidth);
const rootContainerRef = useRef<HTMLDivElement>(null);
useEffect(() => {
const handleWindowResize = () => {
if (!rootContainerRef.current) return;
setRootContainerSize(rootContainerRef.current.clientWidth);
startTransition(() => {
if (rootContainerRef.current) setRootContainerSize(rootContainerRef.current.clientWidth);
});
};
window.addEventListener("resize", handleWindowResize);

33
src/api/quizRelase.ts
View File

@ -8,7 +8,6 @@ let SESSIONS = "";
export const publicationMakeRequest = ({ url, body }: any) => {
console.log(body);
return axios(url, {
//@ts-ignore
data: body,
headers: {
"X-Sessionkey": SESSIONS,
@ -23,30 +22,27 @@ export async function getData(quizId: string): Promise<{
isRecentlyCompleted: boolean;
error?: string;
}> {
const QID =
process.env.NODE_ENV === "production"
? window.location.pathname.replace(/\//g, "")
: "ef836ff8-35b1-4031-9acf-af5766bac2b2";
try {
const { data, headers } = await axios<GetQuizDataResponse>(
`https://s.hbpn.link/answer/settings`,
{
method: "POST",
// headers,
data: JSON.stringify({
headers: {
"Content-Type": "application/json",
},
data: {
quiz_id: quizId,
limit: 100,
page: 0,
need_config: true,
}),
},
}
);
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
if (typeof sessions[QID] === "number") {
if (typeof sessions[quizId] === "number") {
// unix время. Если меньше суток прошло - выводить ошибку, иначе пустить дальше
if (Date.now() - sessions[QID] < 86400000) {
if (Date.now() - sessions[quizId] < 86400000) {
return { data, isRecentlyCompleted: true };
}
}
@ -103,21 +99,6 @@ export function sendFile({ questionId, body, qid }: any) {
});
}
const fields = [
"name",
"email",
"phone",
"adress",
"telegram",
"wechat",
"viber",
"vk",
"skype",
"whatsup",
"messenger",
"text",
];
//форма контактов
export function sendFC({ questionId, body, qid }: any) {
const formData = new FormData();

3
src/model/api/getQuizData.ts
View File

@ -24,7 +24,7 @@ export interface GetQuizDataResponse {
}[];
}
export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: string): Omit<QuizSettings, "recentlyCompleted"> {
export function parseQuizData(quizDataResponse: GetQuizDataResponse): Omit<QuizSettings, "recentlyCompleted"> {
const items: QuizSettings["questions"] = quizDataResponse.items.map((item) => {
const content = JSON.parse(item.c);
@ -40,7 +40,6 @@ export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: str
});
const settings: QuizSettings["settings"] = {
qid: quizId,
fp: quizDataResponse.settings.fp,
rep: quizDataResponse.settings.rep,
name: quizDataResponse.settings.name,

20
src/model/questionTypes/shared.ts
View File

@ -1,3 +1,4 @@
import { nanoid } from "nanoid";
import type { QuizQuestionDate } from "./date";
import type { QuizQuestionEmoji } from "./emoji";
import type { QuizQuestionFile } from "./file";
@ -5,24 +6,23 @@ import type { QuizQuestionImages } from "./images";
import type { QuizQuestionNumber } from "./number";
import type { QuizQuestionPage } from "./page";
import type { QuizQuestionRating } from "./rating";
import type { QuizQuestionResult } from "./result";
import type { QuizQuestionSelect } from "./select";
import type { QuizQuestionText } from "./text";
import type { QuizQuestionVariant } from "./variant";
import type { QuizQuestionVarImg } from "./varimg";
import type { QuizQuestionResult } from "./result";
import { nanoid } from "nanoid";
export interface QuestionBranchingRuleMain {
next: string;
or: boolean;
rules: {
question: string; //id родителя (пока что)
answers: string[]
}[]
answers: string[];
}[];
}
export interface QuestionBranchingRule {
children: string[],
export interface QuestionBranchingRule {
children: string[];
//список условий
main: QuestionBranchingRuleMain[];
parentId: string | null | "root";
@ -85,7 +85,6 @@ export interface QuizQuestionBase {
};
}
export type AnyTypedQuizQuestion =
| QuizQuestionVariant
| QuizQuestionImages
@ -100,7 +99,7 @@ export type AnyTypedQuizQuestion =
| QuizQuestionRating
| QuizQuestionResult;
export type RealTypedQuizQuestion = Exclude<AnyTypedQuizQuestion, QuizQuestionResult>;
type FilterQuestionsWithVariants<T> = T extends {
content: { variants: QuestionVariant[]; };
@ -109,14 +108,15 @@ type FilterQuestionsWithVariants<T> = T extends {
export type QuizQuestionsWithVariants = FilterQuestionsWithVariants<AnyTypedQuizQuestion>;
export const createBranchingRuleMain: (targetId:string, parentId:string) => QuestionBranchingRuleMain = (targetId, parentId) => ({
export const createBranchingRuleMain: (targetId: string, parentId: string) => QuestionBranchingRuleMain = (targetId, parentId) => ({
next: targetId,
or: false,
rules: [{
question: parentId,
answers: [] as string[],
}]
})
});
export const createQuestionVariant: () => QuestionVariant = () => ({
id: nanoid(),
answer: "",

3
src/model/settingsData.ts
View File

@ -8,6 +8,8 @@ export type QuizType = "quiz" | "form";
export type QuizResultsType = true | null;
export type QuizStep = "startpage" | "question" | "contactform";
export type QuizTheme =
| "StandardTheme"
| "StandardDarkTheme"
@ -32,7 +34,6 @@ export type FCField = {
export type QuizSettings = {
questions: AnyTypedQuizQuestion[];
settings: {
qid: string;
fp: boolean;
rep: boolean;
name: string;

17
src/pages/ViewPublicationPage/ApologyPage.tsx
View File

@ -1,22 +1,25 @@
import { Box, Typography } from "@mui/material";
export const ApologyPage = ({message}:{message: string}) => {
type Props = {
message: string;
};
export const ApologyPage = ({ message }: Props) => {
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100vh"
height: "100%",
}}
>
<Typography
sx={{
textAlign: "center"
}}
>{message || "что-то пошло не так"}</Typography>
>{message || "Что-то пошло не так"}</Typography>
</Box>
)
}
);
};

210
src/pages/ViewPublicationPage/ContactForm.tsx
View File

@ -11,69 +11,25 @@ import { FC, useRef, useState } from "react";
import { sendFC } from "@api/quizRelase";
import { NameplateLogo } from "@icons/NameplateLogo";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { ApologyPage } from "./ApologyPage";
import { checkEmptyData } from "./tools/checkEmptyData";
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
type ContactFormProps = {
currentQuestion: any;
showResultForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
type Props = {
currentQuestion: AnyTypedQuizQuestion;
onShowResult: () => void;
};
const icons = [
{
type: "name",
icon: NameIcon,
defaultText: "Введите имя",
defaultTitle: "имя",
backendName: "name",
},
{
type: "email",
icon: EmailIcon,
defaultText: "Введите Email",
defaultTitle: "Email",
backendName: "email",
},
{
type: "phone",
icon: PhoneIcon,
defaultText: "Введите номер телефона",
defaultTitle: "номер телефона",
backendName: "phone",
},
{
type: "text",
icon: TextIcon,
defaultText: "Введите фамилию",
defaultTitle: "фамилию",
backendName: "adress",
},
{
type: "address",
icon: AddressIcon,
defaultText: "Введите адрес",
defaultTitle: "адрес",
backendName: "adress",
},
];
export const ContactForm = ({
currentQuestion,
showResultForm,
setShowContactForm,
setShowResultForm,
}: ContactFormProps) => {
export const ContactForm = ({ currentQuestion, onShowResult }: Props) => {
const theme = useTheme();
const qid = useQuizId();
const { settings, questions } = useQuizData();
const [ready, setReady] = useState(false);
@ -87,78 +43,103 @@ export const ContactForm = ({
const [fire, setFire] = useState(false);
const isMobile = useRootContainerSize() < 850;
const followNextForm = () => {
setShowContactForm(false);
setShowResultForm(true);
};
//@ts-ignore
const resultQuestion: QuizQuestionResult = questions.find((question) => {
const resultQuestion = currentQuestion.type === "result"
? currentQuestion
: questions.find((question): question is QuizQuestionResult => {
if (settings?.cfg.haveRoot) {
//ветвимся
return (
question.type === "result" &&
//@ts-ignore
question.content.rule.parentId === currentQuestion.content.id
);
} else {
// не ветвимся
return (
question.type === "result" && question.content.rule.parentId === "line"
);
}
});
if (!resultQuestion) throw new Error("Result question not found");
const inputHC = async () => {
//@ts-ignore
const FC = settings?.cfg.formContact.fields || settings?.cfg.formContact;
const body = {};
//@ts-ignore
const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
const body = {} as any;
if (name.length > 0) body.name = name;
//@ts-ignore
if (email.length > 0) body.email = email;
//@ts-ignore
if (phone.length > 0) body.phone = phone;
//@ts-ignore
if (adress.length > 0) body.address = adress;
//@ts-ignore
if (text.length > 0) body.customs = { [FC.text.text || "Фамилия"]: text };
if (Object.keys(body).length > 0) {
try {
await sendFC({
questionId: resultQuestion?.id,
questionId: currentQuestion.id,
body: body,
qid: settings.qid,
qid,
});
const sessions = JSON.parse(localStorage.getItem("sessions") || "{}");
localStorage.setItem(
"sessions",
JSON.stringify({ ...sessions, [settings.qid]: new Date().getTime() })
JSON.stringify({ ...sessions, [qid]: new Date().getTime() })
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
}
};
//@ts-ignore
let FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
let filteredFC: any = {};
for (let i in FCcopy) {
let field = FCcopy[i];
const FCcopy: any = settings.cfg.formContact.fields || settings.cfg.formContact;
const filteredFC: any = {};
for (const i in FCcopy) {
const field = FCcopy[i];
console.log(filteredFC);
if (field.used) {
filteredFC[i] = field;
}
}
let isWide = Object.keys(filteredFC).length > 2;
const isWide = Object.keys(filteredFC).length > 2;
if (!resultQuestion)
return (
<ApologyPage message="не получилось найти результат для этой ветки :(" />
async function handleShowResultsClick() {
//@ts-ignore
const FC: any = settings.cfg.formContact.fields || settings.cfg.formContact;
if (FC["email"].used !== EMAIL_REGEXP.test(email)) {
return enqueueSnackbar("введена некорректная почта");
}
//почта валидна
setFire(true);
if (fireOnce.current) {
if (
name.length === 0
&& email.length === 0
&& phone.length === 0
&& text.length === 0
&& adress.length === 0
) return enqueueSnackbar("Пожалуйста, заполните поля");
try {
await inputHC();
fireOnce.current = false;
const sessions: any = JSON.parse(
localStorage.getItem("sessions") || "{}"
);
sessions[qid] = Date.now();
localStorage.setItem(
"sessions",
JSON.stringify(sessions)
);
enqueueSnackbar("Данные успешно отправлены");
} catch (e) {
enqueueSnackbar("повторите попытку позже");
}
onShowResult();
}
setFire(false);
}
return (
<Box
@ -167,7 +148,7 @@ export const ContactForm = ({
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.palette.background.default,
height: "100vh",
height: "100%",
overflow: "auto",
"&::-webkit-scrollbar": {
width: "0",
@ -204,10 +185,10 @@ export const ContactForm = ({
color: theme.palette.text.primary,
}}
>
{settings?.cfg.formContact.title ||
{settings.cfg.formContact.title ||
"Заполните форму, чтобы получить результаты теста"}
</Typography>
{settings?.cfg.formContact.desc && (
{settings.cfg.formContact.desc && (
<Typography
sx={{
color: theme.palette.text.primary,
@ -216,7 +197,7 @@ export const ContactForm = ({
fontSize: "18px",
}}
>
{settings?.cfg.formContact.desc}
{settings.cfg.formContact.desc}
</Typography>
)}
</Box>
@ -254,64 +235,13 @@ export const ContactForm = ({
{
// resultQuestion &&
// settings?.cfg.resultInfo.when === "after" &&
// settings.cfg.resultInfo.when === "after" &&
<Button
disabled={!(ready && !fire)}
variant="contained"
onClick={async () => {
//@ts-ignore
const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
if (FC["email"].used === EMAIL_REGEXP.test(email)) {
//почта валидна
setFire(true);
if (fireOnce.current) {
if (
name.length > 0 ||
email.length > 0 ||
phone.length > 0 ||
text.length > 0 ||
adress.length > 0
) {
try {
await inputHC();
fireOnce.current = false;
const QID =
process.env.NODE_ENV === "production"
? window.location.pathname.replace(/\//g, "")
: "ef836ff8-35b1-4031-9acf-af5766bac2b2";
const sessions: any = JSON.parse(
localStorage.getItem("sessions") || "{}"
);
sessions[QID] = Date.now();
localStorage.setItem(
"sessions",
JSON.stringify(sessions)
);
enqueueSnackbar("Данные успешно отправлены");
} catch (e) {
enqueueSnackbar("повторите попытку позже");
}
if (
settings?.cfg.resultInfo.showResultForm === "after" &&
!checkEmptyData({ resultData: resultQuestion })
) {
setShowContactForm(false);
setShowResultForm(true);
}
} else {
enqueueSnackbar("Пожалуйста, заполните поля");
}
}
setFire(false);
} else {
enqueueSnackbar("введена некорректная почта");
}
}}
onClick={handleShowResultsClick}
>
{settings?.cfg.formContact?.button || "Получить результаты"}
{settings.cfg.formContact?.button || "Получить результаты"}
</Button>
}
@ -391,7 +321,7 @@ const Inputs = ({
const { settings } = useQuizData();
// @ts-ignore
const FC = settings?.cfg.formContact.fields || settings?.cfg.formContact;
const FC = settings.cfg.formContact.fields || settings.cfg.formContact;
if (!FC) return null;

249
src/pages/ViewPublicationPage/Footer.tsx
View File

@ -1,228 +1,17 @@
import { Box, Button, Typography, useTheme } from "@mui/material";
import { useCallback, useMemo, useState } from "react";
import { Box, Typography, useTheme } from "@mui/material";
import { ReactNode } from "react";
import { enqueueSnackbar } from "notistack";
import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
import { checkEmptyData } from "./tools/checkEmptyData";
import type { QuizQuestionResult } from "@model/questionTypes/result";
import { useQuizViewStore } from "@stores/quizView/store";
import { useQuizData } from "@utils/hooks/useQuizData";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
type FooterProps = {
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
stepNumber: number | null;
nextButton: ReactNode;
prevButton: ReactNode;
};
export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setShowResultForm }: FooterProps) => {
export const Footer = ({ stepNumber, nextButton, prevButton }: FooterProps) => {
const theme = useTheme();
const { settings, questions } = useQuizData();
const answers = useQuizViewStore(state => state.answers);
const [stepNumber, setStepNumber] = useState(1);
const isMobileMini = useRootContainerSize() < 382;
const isLinear = !questions.some(({ content }) => content.rule.parentId === "root");
const getNextQuestionId = useCallback(() => {
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
console.log(question);
console.log("От вот этого /|");
let readyBeNextQuestion = "";
//вопрос обязателен, анализируем ответ и условия ветвления
if (answers.length) {
const answer = answers.find(({ questionId }) => questionId === question.id);
(question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
const longerArray = Math.max(
rules[0].answers.length,
answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
);
for (
let i = 0;
i < longerArray;
i++ // Цикл по всем эле­мен­там бОльшего массива
) {
if (Array.isArray(answer?.answer)) {
if (answer?.answer.find((item) => String(item === rules[0].answers[i]))) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
return;
}
if (String(rules[0].answers[i]) === answer?.answer) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
}
});
if (readyBeNextQuestion) return readyBeNextQuestion;
}
if (!question.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
console.log("вопрос не обязателен ищем дальше");
const defaultQ = question.content.rule.default;
if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
(question?.type === "date" ||
question?.type === "text" ||
question?.type === "number" ||
question?.type === "page") && question.content.rule.children.length === 1
) return question.content.rule.children[0];
}
//ничё не нашли, ищем резулт
console.log("ничё не нашли, ищем резулт ");
return questions.find(q => {
console.log('q.type === "result"', q.type === "result");
console.log('q.content.rule.parentId', q.content.rule.parentId);
console.log('question.content.id', question.content.id);
return q.type === "result" && q.content.rule.parentId === question.content.id;
})?.id;
}, [answers, questions, question]);
const isPreviousButtonDisabled = useMemo(() => {
// Логика для аргумента disabled у кнопки "Назад"
if (isLinear) {
const questionIndex = questions.findIndex(({ id }) => id === question.id);
const previousQuestion = questions[questionIndex - 1];
return previousQuestion ? false : true;
} else {
return question?.content.rule.parentId === "root" ? true : false;
}
}, [questions, isLinear, question?.content.rule.parentId, question.id]);
const isNextButtonDisabled = useMemo(() => {
// Логика для аргумента disabled у кнопки "Далее"
const answer = answers.find(({ questionId }) => questionId === question.id);
if ("required" in question.content && question.content.required && answer) {
return false;
}
if ("required" in question.content && question.content.required && !answer) {
return true;
}
if (isLinear) {
return false;
}
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
return false;
} else {
const questionId = question.content.rule.default;
const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
if (nextQuestion?.type) {
return false;
}
}
}, [answers, getNextQuestionId, isLinear, question.content, question.id]);
const showResult = (nextQuestion: QuizQuestionResult) => {
if (!nextQuestion) return;
const isEmpty = checkEmptyData({ resultData: nextQuestion });
if (nextQuestion) {
if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "before") {
if (isEmpty) {
setShowContactForm(true); //до+пустая = кидать на ФК
} else {
setShowResultForm(true); //до+заполнена = показать
}
}
if (nextQuestion && settings?.cfg.resultInfo.showResultForm === "after") {
if (isEmpty) {
setShowContactForm(true); //после+пустая
} else {
setShowContactForm(true); //после+заполнена = показать ФК
}
}
}
};
const followPreviousStep = () => {
if (isLinear) {
setStepNumber(q => q - 1);
const questionIndex = questions.findIndex(({ id }) => id === question.id);
const previousQuestion = questions[questionIndex - 1];
if (previousQuestion) {
setCurrentQuestion(previousQuestion);
}
return;
}
if (question?.content.rule.parentId !== "root") {
const questionId = question?.content.rule.parentId;
const parent = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
if (parent?.type) {
setCurrentQuestion(parent);
} else {
enqueueSnackbar("не могу получить предыдущий вопрос");
}
} else {
enqueueSnackbar("вы находитесь на первом вопросе");
}
};
const followNextStep = () => {
if (isLinear) {
setStepNumber(q => q + 1);
const questionIndex = questions.findIndex(({ id }) => id === question.id);
const nextQuestion = questions[questionIndex + 1];
if (nextQuestion && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
} else {
//@ts-ignore
showResult(questions.find(q => q.content.rule.parentId === "line"));
}
return;
}
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
const nextQuestion = questions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId) || null;
if (nextQuestion?.type && nextQuestion.type === "result") {
showResult(nextQuestion);
} else {
//@ts-ignore
setCurrentQuestion(nextQuestion);
}
} else {
enqueueSnackbar("не могу получить последующий вопрос");
}
};
const { questions } = useQuizData();
return (
<Box
@ -250,7 +39,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{isLinear &&
{stepNumber !== null &&
<Box
sx={{
display: "flex",
@ -313,26 +102,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
{questions.length}
</Typography> */}
</Box>
<Button
disabled={isPreviousButtonDisabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px", }}
onClick={followPreviousStep}
>
{isMobileMini ? (
"←"
) : (
"← Назад"
)}
</Button>
<Button
disabled={isNextButtonDisabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={followNextStep}
>
Далее →
</Button>
{prevButton}
{nextButton}
</Box>
</Box>
);

98
src/pages/ViewPublicationPage/Question.tsx
View File

@ -1,9 +1,6 @@
import { Box, useTheme } from "@mui/material";
import { useEffect, useState } from "react";
import { ContactForm } from "./ContactForm";
import { Footer } from "./Footer";
import { ResultForm } from "./ResultForm";
import { Date } from "./questions/Date";
import { Emoji } from "./questions/Emoji";
import { File } from "./questions/File";
@ -16,52 +13,40 @@ import { Text } from "./questions/Text";
import { Variant } from "./questions/Variant";
import { Varimg } from "./questions/Varimg";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
import type { RealTypedQuizQuestion } from "../../model/questionTypes/shared";
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
import { QuizQuestionResult } from "@model/questionTypes/result";
import { useQuizData } from "@utils/hooks/useQuizData";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { ReactNode } from "react";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
export const Question = () => {
type Props = {
currentQuestion: RealTypedQuizQuestion;
currentQuestionStepNumber: number | null;
nextButton: ReactNode;
prevButton: ReactNode;
};
export const Question = ({
currentQuestion,
currentQuestionStepNumber,
nextButton,
prevButton,
}: Props) => {
const theme = useTheme();
const { settings, questions } = useQuizData();
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false);
const { settings } = useQuizData();
const isMobile = useRootContainerSize() < 650;
useEffect(() => {
if (settings?.cfg.haveRoot) {//ветвимся
const questionId = settings?.cfg.haveRoot || "";
const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
if (nextQuestion?.type) {
setCurrentQuestion(nextQuestion);
return;
}
} else {//идём прямо
setCurrentQuestion(questions[0]);
}
}, []);
if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";
return (
<Box
sx={{
<Box sx={{
backgroundColor: theme.palette.background.default,
height: isMobile ? undefined : "100vh"
}}
>
{!showContactForm && !showResultForm && (
<Box
sx={{
height: "calc(100vh - 75px)",
height: isMobile ? undefined : "100%"
}}>
<Box sx={{
height: "calc(100% - 75px)",
width: "100%",
maxWidth: "1440px",
padding: "40px 25px 20px",
@ -70,8 +55,7 @@ export const Question = () => {
display: "flex",
flexDirection: "column",
justifyContent: "space-between"
}}
>
}}>
<QuestionByType question={currentQuestion} />
{quizThemes[settings.cfg.theme].isLight ? (
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
@ -79,45 +63,17 @@ export const Question = () => {
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
)}
</Box>
)}
{showResultForm && settings?.cfg.resultInfo.showResultForm === "before" && (
<ResultForm
currentQuestion={currentQuestion}
showContactForm={showContactForm}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{showContactForm && (
<ContactForm
currentQuestion={currentQuestion}
showResultForm={showResultForm}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{showResultForm && settings?.cfg.resultInfo.showResultForm === "after" && (
<ResultForm
currentQuestion={currentQuestion}
showContactForm={showContactForm}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
/>
)}
{!showContactForm && !showResultForm && (
<Footer
question={currentQuestion}
setCurrentQuestion={setCurrentQuestion}
setShowContactForm={setShowContactForm}
setShowResultForm={setShowResultForm}
stepNumber={currentQuestionStepNumber}
prevButton={prevButton}
nextButton={nextButton}
/>
)}
</Box>
);
};
function QuestionByType({ question }: {
question: Exclude<AnyTypedQuizQuestion, QuizQuestionResult>;
question: RealTypedQuizQuestion;
}) {
switch (question.type) {
case "variant": return <Variant currentQuestion={question} />;
@ -131,6 +87,6 @@ function QuestionByType({ question }: {
case "file": return <File currentQuestion={question} />;
case "page": return <Page currentQuestion={question} />;
case "rating": return <Rating currentQuestion={question} />;
default: return notReachable(question);
default: notReachable(question);
}
}

59
src/pages/ViewPublicationPage/ResultForm.tsx
View File

@ -8,62 +8,21 @@ import {
import { NameplateLogo } from "@icons/NameplateLogo";
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
import { setCurrentQuizStep } from "@stores/quizView/store";
import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useCallback, useEffect, useMemo } from "react";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import type { QuizQuestionResult } from "../../model/questionTypes/result";
type ResultFormProps = {
currentQuestion: any;
showContactForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
resultQuestion: QuizQuestionResult;
};
export const ResultForm = ({
currentQuestion,
showContactForm,
setShowContactForm,
setShowResultForm,
}: ResultFormProps) => {
export const ResultForm = ({ resultQuestion }: ResultFormProps) => {
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
const { settings, questions } = useQuizData();
const resultQuestion = useMemo(() => {
if (settings?.cfg.haveRoot) {
//ищём для ветвления
return (questions.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
) || questions.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
));
} else {
return questions.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
);
}
}, [currentQuestion.content.id, questions, settings?.cfg.haveRoot]);
const followNextForm = useCallback(() => {
setShowResultForm(false);
setShowContactForm(true);
}, [setShowContactForm, setShowResultForm]);
useEffect(() => {
if (!resultQuestion) {
followNextForm();
}
}, [followNextForm, resultQuestion]);
if (!resultQuestion) return null;
const { settings } = useQuizData();
return (
<Box
@ -72,7 +31,7 @@ export const ResultForm = ({
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
height: "100vh",
height: "100%",
width: "100vw",
pt: "28px",
overflow: "auto",
@ -197,9 +156,9 @@ export const ResultForm = ({
p: "20px",
}}
>
{settings?.cfg.resultInfo.showResultForm === "before" && (
{settings.cfg.resultInfo.showResultForm === "before" && (
<Button
onClick={followNextForm}
onClick={() => setCurrentQuizStep("contactform")}
variant="contained"
sx={{
p: "10px 20px",
@ -210,7 +169,7 @@ export const ResultForm = ({
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
)}
{settings?.cfg.resultInfo.showResultForm === "after" &&
{settings.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && (
<Button
href={resultQuestion.content.redirect}

19
src/pages/ViewPublicationPage/StartPageViewPublication.tsx
View File

@ -8,13 +8,10 @@ import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { setCurrentQuizStep } from "@stores/quizView/store";
interface Props {
setVisualStartPage: (a: boolean) => void;
}
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
export const StartPageViewPublication = () => {
const theme = useTheme();
const { settings } = useQuizData();
const { isMobileDevice } = useUADevice();
@ -52,8 +49,6 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
height:
settings.cfg.startpageType === "centered"
? "275px"
: settings.cfg.startpageType === "expanded"
? "100vh"
: "100%",
borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
overflow: "hidden",
@ -76,8 +71,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
<Paper
className="settings-preview-draghandle"
sx={{
height: "100vh",
width: "100vw",
height: "100%",
width: "100%",
background:
settings.cfg.startpageType === "expanded" && !isMobile
? settings.cfg.startpage.position === "left"
@ -180,7 +175,7 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
padding: "10px 15px",
width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
}}
onClick={() => setVisualStartPage(false)}
onClick={() => setCurrentQuizStep("question")}
>
{settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
</Button>
@ -277,7 +272,7 @@ function QuizPreviewLayoutByType({
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
height: "100vh",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
@ -333,7 +328,7 @@ function QuizPreviewLayoutByType({
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined,
height: "100vh",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>

106
src/pages/ViewPublicationPage/ViewPublicationPage.tsx
View File

@ -1,43 +1,99 @@
import { Box, ThemeProvider } from "@mui/material";
import { Button, ThemeProvider } from "@mui/material";
import { useQuizViewStore } from "@stores/quizView/store";
import { useQuestionFlowControl } from "@utils/hooks/useQuestionFlowControl";
import { useQuizData } from "@utils/hooks/useQuizData";
import { notReachable } from "@utils/notReachable";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useEffect, useState } from "react";
import { ApologyPage } from "./ApologyPage";
import { ReactElement, useEffect } from "react";
import { useRootContainerSize } from "../../contexts/RootContainerWidthContext";
import { ContactForm } from "./ContactForm";
import { Question } from "./Question";
import { ResultForm } from "./ResultForm";
import { StartPageViewPublication } from "./StartPageViewPublication";
export const ViewPage = () => {
const { settings, questions, recentlyCompleted } = useQuizData();
const [visualStartPage, setVisualStartPage] = useState<boolean>();
export default function ViewPublicationPage() {
const { settings, recentlyCompleted } = useQuizData();
let currentQuizStep = useQuizViewStore(state => state.currentQuizStep);
const isMobileMini = useRootContainerSize() < 382;
const {
currentQuestion,
currentQuestionStepNumber,
isNextButtonDisabled,
isPreviousButtonDisabled,
moveToPrevQuestion,
moveToNextQuestion,
showResultAfterContactForm,
} = useQuestionFlowControl();
useEffect(() => {
useEffect(function setFaviconAndTitle() {
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings?.cfg.startpage.favIcon);
link.setAttribute("href", settings.cfg.startpage.favIcon);
}
document.title = settings.name;
setVisualStartPage(!settings.cfg.noStartPage);
}, [settings]);
const questionsCount = questions.filter(({ type }) => type !== null && type !== "result").length;
if (questionsCount === 0) return <ApologyPage message="Нет созданных вопросов" />;
let quizStepElement: ReactElement;
if (recentlyCompleted) throw new Error("Quiz already completed");
if (currentQuizStep === "startpage" && settings.cfg.noStartPage) currentQuizStep = "question";
switch (currentQuizStep) {
case "startpage": {
quizStepElement = <StartPageViewPublication />;
break;
}
case "question": {
if (currentQuestion.type === "result") {
quizStepElement = <ResultForm resultQuestion={currentQuestion} />;
break;
}
quizStepElement = (
<Question
currentQuestion={currentQuestion}
currentQuestionStepNumber={currentQuestionStepNumber}
prevButton={
<Button
disabled={isPreviousButtonDisabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToPrevQuestion}
>
{isMobileMini ? "←" : "← Назад"}
</Button>
}
nextButton={
<Button
disabled={isNextButtonDisabled}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={moveToNextQuestion}
>
Далее →
</Button>
}
/>
);
break;
}
case "contactform": {
quizStepElement = (
<ContactForm
currentQuestion={currentQuestion}
onShowResult={showResultAfterContactForm}
/>
);
break;
}
default: notReachable(currentQuizStep);
}
return (
<ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"]}>
{recentlyCompleted ? (
<ApologyPage message="Вы уже прошли этот опрос" />
) : (
<Box>
{visualStartPage ? (
<StartPageViewPublication setVisualStartPage={setVisualStartPage} />
) : (
<Question />
)}
</Box>
)}
<ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"].theme}>
{quizStepElement}
</ThemeProvider>
);
};
}

5
src/pages/ViewPublicationPage/questions/Date.tsx
View File

@ -11,6 +11,7 @@ import { sendAnswer } from "@api/quizRelase";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizData } from "@utils/hooks/useQuizData";
import { useQuizId } from "../../../contexts/QuizIdContext";
type DateProps = {
currentQuestion: QuizQuestionDate;
@ -18,7 +19,7 @@ type DateProps = {
export const Date = ({ currentQuestion }: DateProps) => {
const theme = useTheme();
const qid = useQuizId();
const { settings } = useQuizData();
const { answers } = useQuizViewStore();
const answer = answers.find(
@ -61,7 +62,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: moment(date).format("YYYY.MM.DD"),
qid: settings.qid,
qid,
});
updateAnswer(

9
src/pages/ViewPublicationPage/questions/Emoji.tsx
View File

@ -16,8 +16,8 @@ import RadioIcon from "@ui_kit/RadioIcon";
import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../../contexts/QuizIdContext";
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
import { useQuizData } from "@utils/hooks/useQuizData";
type EmojiProps = {
currentQuestion: QuizQuestionEmoji;
@ -25,8 +25,7 @@ type EmojiProps = {
export const Emoji = ({ currentQuestion }: EmojiProps) => {
const theme = useTheme();
const { settings } = useQuizData();
const qid = useQuizId();
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
@ -110,7 +109,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].extendedText + " " + currentQuestion.content.variants[index].answer,
qid: settings.qid
qid,
});
updateAnswer(
@ -131,7 +130,7 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
qid,
});
} catch (e) {

13
src/pages/ViewPublicationPage/questions/File.tsx
View File

@ -14,10 +14,10 @@ import UploadIcon from "@icons/UploadIcon";
import { sendAnswer, sendFile } from "@api/quizRelase";
import Info from "@icons/Info";
import type { UploadFileType } from "@model/questionTypes/file";
import { useQuizData } from "@utils/hooks/useQuizData";
import { enqueueSnackbar } from "notistack";
import type { DragEvent } from "react";
import { useState, type ChangeEvent } from "react";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionFile } from "../../../model/questionTypes/file";
@ -117,9 +117,8 @@ const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
export const File = ({ currentQuestion }: FileProps) => {
const theme = useTheme();
const { settings } = useQuizData();
const { answers } = useQuizViewStore();
const qid = useQuizId();
const [statusModal, setStatusModal] = useState<"errorType" | "errorSize" | "picture" | "video" | "audio" | "document" | "">("");
const answer = answers.find(
@ -148,16 +147,14 @@ export const File = ({ currentQuestion }: FileProps) => {
file: file,
name: file.name
},
qid: settings.qid
qid,
});
console.log(data);
await sendAnswer({
questionId: currentQuestion.id,
//@ts-ignore
body: `https://storage.yandexcloud.net/squizanswer/${settings.qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
//@ts-ignore
qid: settings.qid
body: `https://storage.yandexcloud.net/squizanswer/${qid}/${currentQuestion.id}/${data.data.fileIDMap[currentQuestion.id]}`,
qid,
});
updateAnswer(

8
src/pages/ViewPublicationPage/questions/Images.tsx
View File

@ -12,8 +12,8 @@ import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@utils/hooks/useQuizData";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionImages } from "../../../model/questionTypes/images";
@ -22,7 +22,7 @@ type ImagesProps = {
};
export const Images = ({ currentQuestion }: ImagesProps) => {
const { settings } = useQuizData();
const qid = useQuizId();
const { answers } = useQuizViewStore();
const theme = useTheme();
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer;
@ -74,7 +74,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: settings.qid
qid,
});
updateAnswer(
@ -94,7 +94,7 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
qid,
});
} catch (e) {

5
src/pages/ViewPublicationPage/questions/Number.tsx
View File

@ -13,6 +13,7 @@ import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
type NumberProps = {
@ -20,6 +21,7 @@ type NumberProps = {
};
export const Number = ({ currentQuestion }: NumberProps) => {
const qid = useQuizId();
const { settings } = useQuizData();
const [inputValue, setInputValue] = useState<string>("0");
const [minRange, setMinRange] = useState<string>("0");
@ -36,8 +38,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: value,
//@ts-ignore
qid: settings.qid,
qid,
});
updateAnswer(currentQuestion.id, value);

6
src/pages/ViewPublicationPage/questions/Page.tsx
View File

@ -1,7 +1,5 @@
import { Box, Typography, useTheme } from "@mui/material";
import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
import type { QuizQuestionPage } from "../../../model/questionTypes/page";
import YoutubeEmbedIframe from "../tools/YoutubeEmbedIframe";
@ -11,8 +9,6 @@ type PageProps = {
export const Page = ({ currentQuestion }: PageProps) => {
const theme = useTheme();
const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
return (
<Box>
@ -46,7 +42,7 @@ export const Page = ({ currentQuestion }: PageProps) => {
<YoutubeEmbedIframe
containerSX={{
width: "100%",
height: "calc( 100vh - 270px)",
height: "calc(100% - 270px)",
maxHeight: "80vh",
objectFit: "contain",
}}

6
src/pages/ViewPublicationPage/questions/Rating.tsx
View File

@ -16,8 +16,8 @@ import LikeIcon from "@icons/questionsPage/likeIcon";
import TropfyIcon from "@icons/questionsPage/tropfyIcon";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@utils/hooks/useQuizData";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionRating } from "../../../model/questionTypes/rating";
@ -57,7 +57,7 @@ const buttonRatingForm = [
];
export const Rating = ({ currentQuestion }: RatingProps) => {
const { settings } = useQuizData();
const qid = useQuizId();
const { answers } = useQuizViewStore();
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
@ -98,7 +98,7 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: String(value) + " из " + currentQuestion.content.steps,
qid: settings.qid
qid,
});
updateAnswer(currentQuestion.id, String(value));

15
src/pages/ViewPublicationPage/questions/Select.tsx
View File

@ -2,12 +2,12 @@ import { Box, Typography, useTheme } from "@mui/material";
import { Select as SelectComponent } from "../tools//Select";
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/store";
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView/store";
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuizData } from "@utils/hooks/useQuizData";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../../contexts/QuizIdContext";
import type { QuizQuestionSelect } from "../../../model/questionTypes/select";
type SelectProps = {
currentQuestion: QuizQuestionSelect;
@ -15,8 +15,7 @@ type SelectProps = {
export const Select = ({ currentQuestion }: SelectProps) => {
const theme = useTheme();
const { settings } = useQuizData();
const qid = useQuizId();
const { answers } = useQuizViewStore();
const { answer } =
answers.find(
@ -47,7 +46,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
qid,
});
} catch (e) {
@ -61,7 +60,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: String(currentQuestion.content.variants[Number(value)].answer),
qid: settings.qid
qid,
});
updateAnswer(currentQuestion.id, String(value));

12
src/pages/ViewPublicationPage/questions/Text.tsx
View File

@ -2,13 +2,13 @@ import { Box, Typography, useTheme } from "@mui/material";
import CustomTextField from "@ui_kit/CustomTextField";
import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
import { updateAnswer, useQuizViewStore } from "@stores/quizView/store";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { enqueueSnackbar } from "notistack";
import { useDebouncedCallback } from "use-debounce";
import { useQuizData } from "@utils/hooks/useQuizData";
import { useQuizId } from "../../../contexts/QuizIdContext";
import type { QuizQuestionText } from "../../../model/questionTypes/text";
type TextProps = {
currentQuestion: QuizQuestionText;
@ -16,7 +16,7 @@ type TextProps = {
export const Text = ({ currentQuestion }: TextProps) => {
const theme = useTheme();
const { settings } = useQuizData();
const qid = useQuizId();
const { answers } = useQuizViewStore();
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
@ -26,7 +26,7 @@ export const Text = ({ currentQuestion }: TextProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: text,
qid: settings.qid
qid,
});

15
src/pages/ViewPublicationPage/questions/Variant.tsx
View File

@ -30,6 +30,7 @@ import { enqueueSnackbar } from "notistack";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
import { useQuizData } from "@utils/hooks/useQuizData";
import { useQuizId } from "../../../contexts/QuizIdContext";
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
@ -135,8 +136,9 @@ const VariantItem = ({
index,
own = false,
}: VariantItemProps) => {
const { settings } = useQuizData();
const theme = useTheme();
const { settings } = useQuizData();
const qid = useQuizId();
return (
<FormControlLabel
@ -186,13 +188,12 @@ const VariantItem = ({
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
qid: settings.qid
qid,
});
updateAnswer(
@ -201,21 +202,18 @@ const VariantItem = ({
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId]
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан");
}
return;
}
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].answer,
qid: settings.qid
qid,
});
updateAnswer(currentQuestion.id, variantId);
@ -230,7 +228,7 @@ const VariantItem = ({
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
qid,
});
} catch (e) {
@ -239,7 +237,6 @@ const VariantItem = ({
deleteAnswer(currentQuestion.id);
}
}}
/>
);
};

6
src/pages/ViewPublicationPage/questions/Varimg.tsx
View File

@ -16,6 +16,7 @@ import BlankImage from "@icons/BlankImage";
import { useQuizData } from "@utils/hooks/useQuizData";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import { enqueueSnackbar } from "notistack";
import { useQuizId } from "../../../contexts/QuizIdContext";
import { useRootContainerSize } from "../../../contexts/RootContainerWidthContext";
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
@ -26,6 +27,7 @@ type VarimgProps = {
export const Varimg = ({ currentQuestion }: VarimgProps) => {
const { settings } = useQuizData();
const { answers } = useQuizViewStore();
const qid = useQuizId();
const theme = useTheme();
const isMobile = useRootContainerSize() < 650;
@ -89,7 +91,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: `${currentQuestion.content.variants[index].answer} <img style="width:100%; max-width:250px; max-height:250px" src="${currentQuestion.content.variants[index].extendedText}"/>`,
qid: settings.qid
qid,
});
updateAnswer(
@ -108,7 +110,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
qid,
});
} catch (e) {

27
src/pages/ViewPublicationPage/tools/checkEmptyData.ts
View File

@ -1,17 +1,16 @@
import { QuizQuestionResult } from "@model/questionTypes/result"
import { QuizQuestionResult } from "@model/questionTypes/result";
export const checkEmptyData = ({ resultData }: { resultData: QuizQuestionResult }) => {
let check = true
export const isResultQuestionEmpty = (resultQuestion: QuizQuestionResult) => {
if (
(resultData.title.length > 0 && resultData.title !== " ") ||
(resultData.description.length > 0 && resultData.description !== " ") ||
(resultData.content.back.length > 0 && resultData.content.back !== " ") ||
(resultData.content.originalBack.length > 0 && resultData.content.originalBack !== " ") ||
(resultData.content.innerName.length > 0 && resultData.content.innerName !== " ") ||
(resultData.content.text.length > 0 && resultData.content.text !== " ") ||
(resultData.content.video.length > 0 && resultData.content.video !== " ") ||
(resultData.content.hint.text.length > 0 && resultData.content.hint.text !== " " )
) check = false
return check
}
(resultQuestion.title.length > 0 && resultQuestion.title !== " ")
|| (resultQuestion.description.length > 0 && resultQuestion.description !== " ")
|| (resultQuestion.content.back.length > 0 && resultQuestion.content.back !== " ")
|| (resultQuestion.content.originalBack.length > 0 && resultQuestion.content.originalBack !== " ")
|| (resultQuestion.content.innerName.length > 0 && resultQuestion.content.innerName !== " ")
|| (resultQuestion.content.text.length > 0 && resultQuestion.content.text !== " ")
|| (resultQuestion.content.video.length > 0 && resultQuestion.content.video !== " ")
|| (resultQuestion.content.hint.text.length > 0 && resultQuestion.content.hint.text !== " ")
) return false;
return true;
};

10
src/stores/quizView/store.ts
View File

@ -4,6 +4,7 @@ import { nanoid } from "nanoid";
import { create } from "zustand";
import { devtools } from "zustand/middleware";
import type { Moment } from "moment";
import { QuizStep } from "@model/settingsData";
type Answer = {
questionId: string;
@ -18,6 +19,7 @@ type OwnVariant = {
interface QuizViewStore {
answers: Answer[];
ownVariants: OwnVariant[];
currentQuizStep: QuizStep;
}
export const useQuizViewStore = create<QuizViewStore>()(
@ -25,6 +27,7 @@ export const useQuizViewStore = create<QuizViewStore>()(
(set, get) => ({
answers: [],
ownVariants: [],
currentQuizStep: "startpage",
}),
{
name: "quizView",
@ -94,3 +97,10 @@ export const deleteOwnVariant = (id: string) => useQuizViewStore.setState(state
type: "deleteOwnVariant",
id
});
export const setCurrentQuizStep = (currentQuizStep: QuizStep) => useQuizViewStore.setState({
currentQuizStep
}, false, {
type: "setCurrentQuizStep",
currentQuizStep
});

27
src/ui_kit/ErrorBoundaryFallback.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Box, Typography } from "@mui/material";
import { FallbackProps } from "react-error-boundary";
export default function ErrorBoundaryFallback({ error }: FallbackProps) {
let message = "Что-то пошло не так";
if (error.message === "No questions found") message = "Нет созданных вопросов";
if (error.message === "Quiz already completed") message = "Вы уже прошли этот опрос";
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
height: "100%",
}}
>
<Typography
sx={{
textAlign: "center",
}}
>{message}</Typography>
</Box>
);
}

213
src/utils/hooks/useQuestionFlowControl.ts Normal file
View File

@ -0,0 +1,213 @@
import { QuizQuestionResult } from "@model/questionTypes/result";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { setCurrentQuizStep, useQuizViewStore } from "@stores/quizView/store";
import { useCallback, useDebugValue, useMemo, useState } from "react";
import { isResultQuestionEmpty } from "../../pages/ViewPublicationPage/tools/checkEmptyData";
import { useQuizData } from "./useQuizData";
import { devlog } from "@frontend/kitui";
export function useQuestionFlowControl() {
const { settings, questions } = useQuizData();
const isLinear = questions.every(({ content }) => content.rule.parentId !== "root");
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>(getFirstQuestion);
const answers = useQuizViewStore(state => state.answers);
const questionIndex = isLinear ? questions.indexOf(currentQuestion) : null;
const currentQuestionStepNumber = questionIndex && questionIndex + 1;
function getFirstQuestion() {
if (questions.length === 0) throw new Error("No questions found");
if (settings.cfg.haveRoot) {
const nextQuestion = questions.find(
question => question.id === settings.cfg.haveRoot || question.content.id === settings.cfg.haveRoot
);
if (!nextQuestion) throw new Error("Root question not found");
return nextQuestion;
}
return questions[0];
}
const nextQuestionId = useMemo(() => {
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
console.log(currentQuestion);
console.log("От вот этого /|");
let readyBeNextQuestion = "";
//вопрос обязателен, анализируем ответ и условия ветвления
if (answers.length) {
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id);
currentQuestion.content.rule.main.forEach(({ next, rules }) => {
const longerArray = Math.max(
rules[0].answers.length,
answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
);
for (let i = 0; i < longerArray; i++) {
if (Array.isArray(answer?.answer)) {
if (answer?.answer.find((item) => String(item === rules[0].answers[i]))) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
return;
}
if (String(rules[0].answers[i]) === answer?.answer) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
}
});
if (readyBeNextQuestion) return readyBeNextQuestion;
}
if (!currentQuestion.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
console.log("вопрос не обязателен ищем дальше");
const defaultNextQuestion = currentQuestion.content.rule.default;
if (defaultNextQuestion.length > 1 && defaultNextQuestion !== " ") return defaultNextQuestion;
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
//Кинуть на ребёнка надо даже если там нет дефолта
if (
["date", "page", "text", "number"].includes(currentQuestion.type)
&& currentQuestion.content.rule.children.length === 1
) return currentQuestion.content.rule.children[0];
}
//ничё не нашли, ищем резулт
console.log("ничё не нашли, ищем резулт ");
return questions.find(q => {
return q.type === "result" && q.content.rule.parentId === currentQuestion.content.id;
})?.id;
}, [answers, currentQuestion, questions]);
const nextQuestion = questions.find(q => q.id === nextQuestionId || q.content.id === nextQuestionId);
const resultQuestion = useMemo(() => {
if (currentQuestion.type === "result") return currentQuestion;
if (settings.cfg.haveRoot) return questions.find((question): question is QuizQuestionResult => {
return question.type === "result" && question.content.rule.parentId === currentQuestion.content.id;
});
return questions.find((question): question is QuizQuestionResult => {
return question.type === "result" && question.content.rule.parentId === "line";
});
}, [currentQuestion, questions, settings.cfg.haveRoot]);
const showResult = useCallback((resultQuestion: QuizQuestionResult) => {
if (settings.cfg.resultInfo.showResultForm === "before" && !isResultQuestionEmpty(resultQuestion)) {
return setCurrentQuestion(resultQuestion);
}
setCurrentQuizStep("contactform");
}, [settings.cfg.resultInfo.showResultForm]);
const showResultAfterContactForm = useCallback(() => {
if (settings.cfg.resultInfo.showResultForm === "before") return;
if (!resultQuestion) throw new Error("Result question not found");
if (isResultQuestionEmpty(resultQuestion)) {
devlog("Result question is empty");
return;
}
setCurrentQuizStep("question");
setCurrentQuestion(resultQuestion);
}, [resultQuestion, settings.cfg.resultInfo.showResultForm]);
const moveToPrevQuestionLinear = useCallback(() => {
if (questionIndex === null) return;
const question = questions[questionIndex - 1];
if (question && question.type !== "result") {
setCurrentQuestion(question);
}
}, [questionIndex, questions]);
const moveToNextQuestionLinear = useCallback(() => {
if (questionIndex === null) return;
const question = questions[questionIndex + 1];
if (question && question.type !== "result") {
return setCurrentQuestion(question);
}
if (!resultQuestion) throw new Error("Result question not found");
showResult(resultQuestion);
}, [questionIndex, questions, resultQuestion, showResult]);
const moveToPrevQuestionBranching = useCallback(() => {
if (currentQuestion.content.rule.parentId === "root") throw new Error("No question to go back to");
const questionId = currentQuestion.content.rule.parentId;
const parent = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
if (!parent || parent.type === "result") throw new Error("Parent question not found");
setCurrentQuestion(parent);
}, [currentQuestion.content.rule.parentId, questions]);
const moveToNextQuestionBranching = useCallback(() => {
if (!nextQuestion) throw new Error("Next question not found");
if (nextQuestion.type === "result") {
showResult(nextQuestion);
} else {
setCurrentQuestion(nextQuestion);
}
}, [nextQuestion, showResult]);
const isPreviousButtonDisabled = useMemo(() => {
if (isLinear) {
const questionIndex = questions.findIndex(({ id }) => id === currentQuestion.id);
const previousQuestion = questions[questionIndex - 1];
return previousQuestion ? false : true;
} else {
return currentQuestion.content.rule.parentId === "root" ? true : false;
}
}, [questions, isLinear, currentQuestion.content.rule.parentId, currentQuestion.id]);
const isNextButtonDisabled = useMemo(() => {
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id);
if ("required" in currentQuestion.content && currentQuestion.content.required) {
return !answer;
}
if (isLinear) return false;
if (nextQuestion) {
return false;
} else {
const questionId = currentQuestion.content.rule.default;
const nextQuestion = questions.find(q => q.id === questionId || q.content.id === questionId) || null;
if (nextQuestion?.type) return false;
}
return true;
}, [answers, currentQuestion.content, currentQuestion.id, isLinear, nextQuestion, questions]);
useDebugValue({
isLinear,
currentQuestion,
nextQuestion: questions.find(q => q.content.id === nextQuestionId),
resultQuestion,
});
return {
currentQuestion,
currentQuestionStepNumber,
isNextButtonDisabled,
isPreviousButtonDisabled,
moveToPrevQuestion: isLinear ? moveToPrevQuestionLinear : moveToPrevQuestionBranching,
moveToNextQuestion: isLinear ? moveToNextQuestionLinear : moveToNextQuestionBranching,
showResultAfterContactForm,
};
}

4
src/utils/hooks/useQuizData.ts
View File

@ -1,7 +1,6 @@
import { getData } from "@api/quizRelase";
import { parseQuizData } from "@model/api/getQuizData";
import { QuizSettings } from "@model/settingsData";
import { enqueueSnackbar } from "notistack";
import useSWR from "swr";
import { useQuizId } from "../../contexts/QuizIdContext";
import { replaceSpacesToEmptyLines } from "../../pages/ViewPublicationPage/tools/replaceSpacesToEmptyLines";
@ -21,14 +20,13 @@ async function getQuizData(quizId: string) {
const quizDataResponse = response.data;
if (response.error) {
enqueueSnackbar(response.error);
throw new Error(response.error);
}
if (!quizDataResponse) {
throw new Error("Quiz not found");
}
const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse, quizId));
const quizSettings = replaceSpacesToEmptyLines(parseQuizData(quizDataResponse));
return JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings;
}