fix some types
remove some ts-ignore's refactor stores
This commit is contained in:
nflnkr
parent
606472d182
commit
af1264a170
@ -1,7 +1,7 @@
|
||||
import { GetQuizDataResponse } from "@model/api/getQuizData";
|
||||
import axios from "axios";
|
||||
|
||||
import type { AxiosError } from "axios";
|
||||
import type { GetDataResponse } from "../model/settingsData";
|
||||
|
||||
let SESSIONS = "";
|
||||
|
||||
@ -19,7 +19,7 @@ export const publicationMakeRequest = ({ url, body }: any) => {
|
||||
};
|
||||
|
||||
export async function getData(quizId: string): Promise<{
|
||||
data: GetDataResponse | null;
|
||||
data: GetQuizDataResponse | null;
|
||||
isRecentlyCompleted: boolean;
|
||||
error?: string;
|
||||
}> {
|
||||
@ -29,7 +29,7 @@ export async function getData(quizId: string): Promise<{
|
||||
: "ef836ff8-35b1-4031-9acf-af5766bac2b2";
|
||||
|
||||
try {
|
||||
const { data, headers } = await axios<GetDataResponse>(
|
||||
const { data, headers } = await axios<GetQuizDataResponse>(
|
||||
`https://s.hbpn.link/answer/settings`,
|
||||
{
|
||||
method: "POST",
|
||||
|
||||
55
src/model/api/getQuizData.ts
Normal file
55
src/model/api/getQuizData.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
|
||||
export interface GetQuizDataResponse {
|
||||
cnt: number;
|
||||
settings: {
|
||||
fp: boolean;
|
||||
rep: boolean;
|
||||
name: string;
|
||||
cfg: string;
|
||||
lim: number;
|
||||
due: number;
|
||||
delay: number;
|
||||
pausable: boolean;
|
||||
};
|
||||
items: {
|
||||
id: number;
|
||||
title: string;
|
||||
desc: string;
|
||||
typ: string;
|
||||
req: boolean;
|
||||
p: number;
|
||||
c: string;
|
||||
}[];
|
||||
}
|
||||
|
||||
export function parseQuizData(quizDataResponse: GetQuizDataResponse, quizId: string): QuizSettings {
|
||||
const items: QuizSettings["items"] = quizDataResponse.items.map((item) => {
|
||||
const content = JSON.parse(item.c);
|
||||
|
||||
return {
|
||||
description: item.desc,
|
||||
id: item.id,
|
||||
page: item.p,
|
||||
required: item.req,
|
||||
title: item.title,
|
||||
type: item.typ,
|
||||
content
|
||||
} as unknown as AnyTypedQuizQuestion;
|
||||
});
|
||||
|
||||
const settings: QuizSettings["settings"] = {
|
||||
qid: quizId,
|
||||
fp: quizDataResponse.settings.fp,
|
||||
rep: quizDataResponse.settings.rep,
|
||||
name: quizDataResponse.settings.name,
|
||||
cfg: JSON.parse(quizDataResponse?.settings.cfg),
|
||||
lim: quizDataResponse.settings.lim,
|
||||
due: quizDataResponse.settings.due,
|
||||
delay: quizDataResponse.settings.delay,
|
||||
pausable: quizDataResponse.settings.pausable
|
||||
};
|
||||
|
||||
return { cnt: quizDataResponse.cnt, settings, items };
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
// import { QuizConfig } from "@model/quizSettings";
|
||||
import { AnyTypedQuizQuestion } from "./questionTypes/shared";
|
||||
|
||||
export type QuizStartpageType = "standard" | "expanded" | "centered" | null;
|
||||
|
||||
@ -9,55 +8,50 @@ export type QuizType = "quiz" | "form";
|
||||
|
||||
export type QuizResultsType = true | null;
|
||||
|
||||
export type QuizTheme =
|
||||
| "StandardTheme"
|
||||
| "StandardDarkTheme"
|
||||
| "PinkTheme"
|
||||
| "PinkDarkTheme"
|
||||
| "BlackWhiteTheme"
|
||||
| "OliveTheme"
|
||||
| "YellowTheme"
|
||||
| "GoldDarkTheme"
|
||||
| "PurpleTheme"
|
||||
| "BlueTheme"
|
||||
| "BlueDarkTheme";
|
||||
|
||||
export type FCField = {
|
||||
text: string
|
||||
innerText: string
|
||||
key: string
|
||||
required: boolean
|
||||
used: boolean
|
||||
}
|
||||
export interface GetDataResponse {
|
||||
cnt: number;
|
||||
text: string;
|
||||
innerText: string;
|
||||
key: string;
|
||||
required: boolean;
|
||||
used: boolean;
|
||||
};
|
||||
|
||||
export type QuizSettings = {
|
||||
items: AnyTypedQuizQuestion[];
|
||||
settings: {
|
||||
qid: string;
|
||||
fp: boolean;
|
||||
rep: boolean;
|
||||
name: string;
|
||||
cfg: string;
|
||||
lim: number;
|
||||
due: number;
|
||||
delay: number;
|
||||
pausable: boolean;
|
||||
cfg: QuizConfig;
|
||||
};
|
||||
items: GetItems[];
|
||||
}
|
||||
|
||||
|
||||
|
||||
export type QuestionsStore = {
|
||||
items: (AnyTypedQuizQuestion)[];
|
||||
settings: Settings;
|
||||
cnt: number;
|
||||
};
|
||||
|
||||
export interface Settings {
|
||||
|
||||
fp: boolean;
|
||||
rep: boolean;
|
||||
name: string;
|
||||
lim: number;
|
||||
due: number;
|
||||
delay: number;
|
||||
pausable: boolean;
|
||||
cfg: QuizConfig
|
||||
}
|
||||
|
||||
export interface QuizConfig {
|
||||
type: QuizType;
|
||||
noStartPage: boolean;
|
||||
startpageType: QuizStartpageType;
|
||||
results: QuizResultsType;
|
||||
haveRoot: string;
|
||||
theme: "StandardTheme" | "StandardDarkTheme" | "PinkTheme" | "PinkDarkTheme" | "BlackWhiteTheme" | "OliveTheme" | "YellowTheme" | "GoldDarkTheme" | "PurpleTheme" | "BlueTheme" | "BlueDarkTheme";
|
||||
theme: QuizTheme;
|
||||
resultInfo: {
|
||||
when: "email" | "";
|
||||
share: boolean;
|
||||
@ -84,7 +78,6 @@ export interface QuizConfig {
|
||||
cycle: boolean;
|
||||
};
|
||||
};
|
||||
|
||||
formContact: {
|
||||
title: string;
|
||||
desc: string;
|
||||
@ -93,7 +86,7 @@ export interface QuizConfig {
|
||||
phone: FCField;
|
||||
text: FCField;
|
||||
address: FCField;
|
||||
button: string
|
||||
button: string;
|
||||
};
|
||||
info: {
|
||||
phonenumber: string;
|
||||
@ -105,26 +98,12 @@ export interface QuizConfig {
|
||||
meta: string;
|
||||
}
|
||||
|
||||
export interface GetItems {
|
||||
id: number;
|
||||
title: string;
|
||||
desc: string;
|
||||
typ: string;
|
||||
req: boolean;
|
||||
p: number;
|
||||
c: string;
|
||||
}
|
||||
|
||||
export interface QuizItems {
|
||||
|
||||
description: string;
|
||||
id: number;
|
||||
page: number;
|
||||
required: boolean;
|
||||
title: string;
|
||||
type: string;
|
||||
content: QuizItemsContent
|
||||
}
|
||||
export interface QuizItemsContent {
|
||||
|
||||
content: unknown;
|
||||
}
|
||||
@ -1,27 +1,34 @@
|
||||
import { Box, Typography, Button, useMediaQuery, TextField, Link, InputAdornment, useTheme } from "@mui/material";
|
||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
||||
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
|
||||
import NameIcon from "@icons/ContactFormIcon/NameIcon";
|
||||
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
|
||||
import TextIcon from "@icons/ContactFormIcon/TextIcon";
|
||||
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";
|
||||
import { useDebouncedCallback } from "use-debounce";
|
||||
import { Box, Button, InputAdornment, Link, TextField as MuiTextField, TextFieldProps, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
|
||||
|
||||
import CustomCheckbox from "@ui_kit/CustomCheckbox";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
import { FC, useRef, useState } from "react";
|
||||
|
||||
import { checkEmptyData } from "./tools/checkEmptyData";
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendFC } from "@api/quizRelase";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { ApologyPage } from "./ApologyPage";
|
||||
import { checkEmptyData } from "./tools/checkEmptyData";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>; // temporary fix ts(2590)
|
||||
|
||||
const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu;
|
||||
const EMAIL_REGEXP = /^(([^<>()[\].,:\s@"]+(\.[^<>()[\].,:\s@"]+)*)|(".+"))@(([^<>()[\].,:\s@"]+\.)+[^<>()[\].,:\s@"]{2,})$/iu;
|
||||
|
||||
type ContactType =
|
||||
| "name"
|
||||
| "email"
|
||||
| "phone"
|
||||
| "text"
|
||||
| "adress";
|
||||
|
||||
type ContactFormProps = {
|
||||
currentQuestion: any;
|
||||
@ -30,14 +37,6 @@ type ContactFormProps = {
|
||||
setShowResultForm: (show: boolean) => 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,
|
||||
@ -58,49 +57,36 @@ export const ContactForm = ({
|
||||
const [fire, setFire] = useState(false)
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(850));
|
||||
|
||||
const followNextForm = () => {
|
||||
setShowContactForm(false);
|
||||
setShowResultForm(true);
|
||||
};
|
||||
const mode = modes;
|
||||
//@ts-ignore
|
||||
const resultQuestion: QuizQuestionResult = items.find((question) => {
|
||||
const resultQuestion: QuizQuestionResult = items.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"
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
);
|
||||
}
|
||||
})!;
|
||||
|
||||
const inputHC = async () => {
|
||||
if (!settings) return;
|
||||
|
||||
const body = {}
|
||||
//@ts-ignore
|
||||
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 (text.length > 0) body.text = text
|
||||
//@ts-ignore
|
||||
if (adress.length > 0) body.adress = adress
|
||||
const body: Partial<Record<ContactType, string>> = {};
|
||||
|
||||
if (name.length > 0) body.name = name;
|
||||
if (email.length > 0) body.email = email;
|
||||
if (phone.length > 0) body.phone = phone;
|
||||
if (text.length > 0) body.text = text;
|
||||
if (adress.length > 0) body.adress = adress;
|
||||
|
||||
if (Object.keys(body).length > 0) {
|
||||
try {
|
||||
await sendFC({
|
||||
questionId: resultQuestion?.id,
|
||||
body: body,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -111,19 +97,19 @@ export const ContactForm = ({
|
||||
}
|
||||
}
|
||||
//@ts-ignore
|
||||
let FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
|
||||
const FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
|
||||
|
||||
let filteredFC: any = {}
|
||||
for (let i in FCcopy) {
|
||||
let field = FCcopy[i]
|
||||
console.log(filteredFC)
|
||||
const filteredFC: any = {};
|
||||
for (const i in FCcopy) {
|
||||
const field = FCcopy[i];
|
||||
console.log(filteredFC);
|
||||
if (field.used) {
|
||||
filteredFC[i] = field
|
||||
filteredFC[i] = field;
|
||||
}
|
||||
}
|
||||
let isWide = Object.keys(filteredFC).length > 2
|
||||
console.log(isWide)
|
||||
const isWide = Object.keys(filteredFC).length > 2;
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
if (!resultQuestion) return <ApologyPage message="не получилось найти результат для этой ветки :(" />
|
||||
|
||||
return (
|
||||
@ -292,13 +278,11 @@ export const ContactForm = ({
|
||||
>
|
||||
<NameplateLogo style={{
|
||||
fontSize: "34px",
|
||||
//@ts-ignore
|
||||
color: mode[settings.cfg.theme] ? "#151515" : "#FFFFFF"
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF"
|
||||
}} />
|
||||
<Typography sx={{
|
||||
fontSize: "20px",
|
||||
//@ts-ignore
|
||||
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
|
||||
}}>
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
@ -316,10 +300,8 @@ const Inputs = ({
|
||||
text, setText,
|
||||
adress, setAdress
|
||||
}: any) => {
|
||||
const { settings, items } = useQuestionsStore()
|
||||
const { settings } = useQuestionsStore()
|
||||
|
||||
console.log("______________________EMAIL_REGEXP.test(email)")
|
||||
console.log(EMAIL_REGEXP.test(email))
|
||||
|
||||
//@ts-ignore
|
||||
const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
|
||||
@ -361,8 +343,9 @@ const Inputs = ({
|
||||
const CustomInput = ({ title, desc, Icon, onChange }: any) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||||
//@ts-ignore
|
||||
return <Box m="15px 0">
|
||||
|
||||
return (
|
||||
<Box m="15px 0">
|
||||
<Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
|
||||
|
||||
<TextField
|
||||
@ -376,4 +359,5 @@ const CustomInput = ({ title, desc, Icon, onChange }: any) => {
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,18 +1,16 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Box, Button, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { useCallback, useMemo, useState } from "react";
|
||||
|
||||
import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
import { getQuestionById } from "@stores/quizData/actions";
|
||||
import { useQuizViewStore } from "@stores/quizView/store";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||||
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
||||
|
||||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
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 { useQuestionsStore } from "@stores/quizData/store";
|
||||
import { useQuizViewStore } from "@stores/quizView/store";
|
||||
|
||||
type FooterProps = {
|
||||
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
|
||||
@ -25,99 +23,17 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
const theme = useTheme();
|
||||
|
||||
const { settings, items } = useQuestionsStore();
|
||||
const { answers } = useQuizViewStore();
|
||||
|
||||
const mode = modes;
|
||||
const answers = useQuizViewStore(state => state.answers);
|
||||
|
||||
const [stepNumber, setStepNumber] = useState(1);
|
||||
const [disablePreviousButton, setDisablePreviousButton] = useState<boolean>(false);
|
||||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||||
|
||||
const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
|
||||
const linear = !items.find(({ content }) => content.rule.parentId === "root");
|
||||
const isLinear = !items.some(({ content }) => content.rule.parentId === "root");
|
||||
|
||||
useEffect(() => {
|
||||
// Логика для аргумента disabled у кнопки "Назад"
|
||||
if (linear) {
|
||||
const questionIndex = items.findIndex(({ id }) => id === question.id);
|
||||
|
||||
const previousQuestion = items[questionIndex - 1];
|
||||
|
||||
if (previousQuestion) {
|
||||
setDisablePreviousButton(false);
|
||||
} else {
|
||||
setDisablePreviousButton(true);
|
||||
}
|
||||
} else {
|
||||
if (question?.content.rule.parentId === "root") {
|
||||
setDisablePreviousButton(true);
|
||||
} else {
|
||||
setDisablePreviousButton(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Логика для аргумента disabled у кнопки "Далее"
|
||||
const answer = answers.find(({ questionId }) => questionId === question.id);
|
||||
|
||||
if ("required" in question.content && question.content.required && answer) {
|
||||
setDisableNextButton(false);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if ("required" in question.content && question.content.required && !answer) {
|
||||
setDisableNextButton(true);
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
if (linear) {
|
||||
return;
|
||||
}
|
||||
|
||||
const nextQuestionId = getNextQuestionId();
|
||||
if (nextQuestionId) {
|
||||
setDisableNextButton(false);
|
||||
} else {
|
||||
const nextQuestion = getQuestionById(question.content.rule.default);
|
||||
|
||||
if (nextQuestion?.type) {
|
||||
setDisableNextButton(false);
|
||||
}
|
||||
}
|
||||
}, [question, answers]);
|
||||
|
||||
const showResult = (nextQuestion: QuizQuestionResult) => {
|
||||
const isEmpty = checkEmptyData({ resultData: nextQuestion })
|
||||
console.log("isEmpty", isEmpty)
|
||||
|
||||
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 getNextQuestionId = () => {
|
||||
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг")
|
||||
console.log(question)
|
||||
console.log("От вот этого /|")
|
||||
const getNextQuestionId = useCallback(() => {
|
||||
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
|
||||
console.log(question);
|
||||
console.log("От вот этого /|");
|
||||
let readyBeNextQuestion = "";
|
||||
|
||||
//вопрос обязателен, анализируем ответ и условия ветвления
|
||||
@ -126,13 +42,13 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
|
||||
|
||||
(question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
|
||||
let longerArray = Math.max(
|
||||
const longerArray = Math.max(
|
||||
rules[0].answers.length,
|
||||
answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
|
||||
);
|
||||
|
||||
for (
|
||||
var i = 0;
|
||||
let i = 0;
|
||||
i < longerArray;
|
||||
i++ // Цикл по всем элементам бОльшего массива
|
||||
) {
|
||||
@ -154,9 +70,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
}
|
||||
|
||||
if (!question.required) {//вопрос не обязателен и не нашли совпадений между ответами и условиями ветвления
|
||||
console.log("вопрос не обязателен ищем дальше")
|
||||
const defaultQ = question.content.rule.default
|
||||
if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ
|
||||
console.log("вопрос не обязателен ищем дальше");
|
||||
const defaultQ = question.content.rule.default;
|
||||
if (defaultQ.length > 1 && defaultQ !== " ") return defaultQ;
|
||||
//Вопросы типа страница, ползунок, своё поле для ввода и дата не могут иметь больше 1 ребёнка. Пользователь не может настроить там дефолт
|
||||
//Кинуть на ребёнка надо даже если там нет дефолта
|
||||
if (
|
||||
@ -164,27 +80,93 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
question?.type === "text" ||
|
||||
question?.type === "number" ||
|
||||
question?.type === "page") && question.content.rule.children.length === 1
|
||||
) return question.content.rule.children[0]
|
||||
) return question.content.rule.children[0];
|
||||
|
||||
|
||||
}
|
||||
//ничё не нашли, ищем резулт
|
||||
console.log("ничё не нашли, ищем резулт ")
|
||||
console.log("ничё не нашли, ищем резулт ");
|
||||
return items.find(q => {
|
||||
console.log('q.type === "result"', q.type === "result")
|
||||
console.log('q.content.rule.parentId', q.content.rule.parentId)
|
||||
//@ts-ignore
|
||||
console.log('question.content.id', question.content.id)
|
||||
//@ts-ignore
|
||||
return q.type === "result" && q.content.rule.parentId === question.content.id
|
||||
})?.id
|
||||
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, items, question]);
|
||||
|
||||
const isPreviousButtonDisabled = useMemo(() => {
|
||||
// Логика для аргумента disabled у кнопки "Назад"
|
||||
if (isLinear) {
|
||||
const questionIndex = items.findIndex(({ id }) => id === question.id);
|
||||
|
||||
const previousQuestion = items[questionIndex - 1];
|
||||
|
||||
return previousQuestion ? false : true;
|
||||
} else {
|
||||
return question?.content.rule.parentId === "root" ? true : false;
|
||||
}
|
||||
}, [items, 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 nextQuestion = getQuestionById(question.content.rule.default);
|
||||
|
||||
if (nextQuestion?.type) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}, [answers, getNextQuestionId, isLinear, question.content, question.id]);
|
||||
|
||||
const showResult = (nextQuestion: QuizQuestionResult) => {
|
||||
if (!settings) return;
|
||||
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 (linear) {
|
||||
setStepNumber(q => q - 1)
|
||||
if (isLinear) {
|
||||
setStepNumber(q => q - 1);
|
||||
|
||||
const questionIndex = items.findIndex(({ id }) => id === question.id);
|
||||
|
||||
@ -210,8 +192,8 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
};
|
||||
|
||||
const followNextStep = () => {
|
||||
if (linear) {
|
||||
setStepNumber(q => q + 1)
|
||||
if (isLinear) {
|
||||
setStepNumber(q => q + 1);
|
||||
|
||||
const questionIndex = items.findIndex(({ id }) => id === question.id);
|
||||
const nextQuestion = items[questionIndex + 1];
|
||||
@ -227,11 +209,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
}
|
||||
|
||||
const nextQuestionId = getNextQuestionId();
|
||||
console.log(nextQuestionId)
|
||||
|
||||
if (nextQuestionId) {
|
||||
const nextQuestion = getQuestionById(nextQuestionId);
|
||||
console.log(nextQuestion)
|
||||
|
||||
if (nextQuestion?.type && nextQuestion.type === "result") {
|
||||
showResult(nextQuestion);
|
||||
@ -242,7 +222,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
} else {
|
||||
enqueueSnackbar("не могу получить последующий вопрос");
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
@ -252,8 +231,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
padding: "15px 0",
|
||||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||||
height: '75px',
|
||||
|
||||
display: "flex"
|
||||
display: "flex",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
@ -272,8 +250,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
{/*):(*/}
|
||||
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
|
||||
{/*)}*/}
|
||||
{linear &&
|
||||
<>
|
||||
{isLinear &&
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
@ -304,7 +281,6 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
{items.filter(q => q.type !== "result").length}
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
}
|
||||
|
||||
<Box
|
||||
@ -338,7 +314,7 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
</Typography> */}
|
||||
</Box>
|
||||
<Button
|
||||
disabled={disablePreviousButton}
|
||||
disabled={isPreviousButtonDisabled}
|
||||
variant="contained"
|
||||
sx={{ fontSize: "16px", padding: "10px 15px", }}
|
||||
onClick={followPreviousStep}
|
||||
@ -348,11 +324,9 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
) : (
|
||||
"← Назад"
|
||||
)}
|
||||
|
||||
|
||||
</Button>
|
||||
<Button
|
||||
disabled={disableNextButton}
|
||||
disabled={isNextButtonDisabled}
|
||||
variant="contained"
|
||||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||||
onClick={followNextStep}
|
||||
@ -362,5 +336,4 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
@ -1,57 +1,41 @@
|
||||
import { useState, useEffect } from "react";
|
||||
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
||||
import { useEffect, useState } from "react";
|
||||
|
||||
import { useQuestionsStore } from "@stores/quizData/store"
|
||||
import { getQuestionById } from "@stores/quizData/actions";
|
||||
|
||||
import { Variant } from "./questions/Variant";
|
||||
import { Images } from "./questions/Images";
|
||||
import { Varimg } from "./questions/Varimg";
|
||||
import { Emoji } from "./questions/Emoji";
|
||||
import { Text } from "./questions/Text";
|
||||
import { Select } from "./questions/Select";
|
||||
import { ContactForm } from "./ContactForm";
|
||||
import { Footer } from "./Footer";
|
||||
import { ResultForm } from "./ResultForm";
|
||||
import { Date } from "./questions/Date";
|
||||
import { Number } from "./questions/Number";
|
||||
import { Emoji } from "./questions/Emoji";
|
||||
import { File } from "./questions/File";
|
||||
import { Images } from "./questions/Images";
|
||||
import { Number } from "./questions/Number";
|
||||
import { Page } from "./questions/Page";
|
||||
import { Rating } from "./questions/Rating";
|
||||
import { Footer } from "./Footer";
|
||||
import { ContactForm } from "./ContactForm";
|
||||
import { ResultForm } from "./ResultForm";
|
||||
import { Select } from "./questions/Select";
|
||||
import { Text } from "./questions/Text";
|
||||
import { Variant } from "./questions/Variant";
|
||||
import { Varimg } from "./questions/Varimg";
|
||||
|
||||
import type { QuestionType } from "@model/questionTypes/shared";
|
||||
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
|
||||
|
||||
import { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
|
||||
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
|
||||
import {modes} from "../../utils/themes/Publication/themePublication";
|
||||
import { QuizQuestionResult } from "@model/questionTypes/result";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
import { notReachable } from "@utils/notReachable";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
|
||||
type QuestionProps = {
|
||||
questions: AnyTypedQuizQuestion[];
|
||||
};
|
||||
|
||||
const QUESTIONS_MAP: any = {
|
||||
variant: Variant,
|
||||
images: Images,
|
||||
varimg: Varimg,
|
||||
emoji: Emoji,
|
||||
text: Text,
|
||||
select: Select,
|
||||
date: Date,
|
||||
number: Number,
|
||||
file: File,
|
||||
page: Page,
|
||||
rating: Rating,
|
||||
};
|
||||
|
||||
export const Question = ({ questions }: QuestionProps) => {
|
||||
const { settings } = useQuestionsStore()
|
||||
const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
export const Question = () => {
|
||||
const theme = useTheme();
|
||||
const settings = useQuestionsStore(state => state.settings);
|
||||
const questions = useQuestionsStore(state => state.items);
|
||||
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
|
||||
const [showContactForm, setShowContactForm] = useState<boolean>(false);
|
||||
const [showResultForm, setShowResultForm] = useState<boolean>(false);
|
||||
const mode = modes;
|
||||
console.log("currentQuestion ", currentQuestion)
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
|
||||
useEffect(() => {
|
||||
|
||||
if (settings?.cfg.haveRoot) {//ветвимся
|
||||
@ -68,10 +52,8 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
|
||||
}, []);
|
||||
|
||||
if (!currentQuestion) return <>не смог отобразить вопрос</>;
|
||||
|
||||
const QuestionComponent =
|
||||
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
|
||||
if (!settings) throw new Error("settings is null");
|
||||
if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";
|
||||
|
||||
return (
|
||||
<Box
|
||||
@ -79,7 +61,6 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
backgroundColor: theme.palette.background.default,
|
||||
height: isMobile ? undefined : "100vh"
|
||||
}}
|
||||
|
||||
>
|
||||
{!showContactForm && !showResultForm && (
|
||||
<Box
|
||||
@ -95,8 +76,8 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
justifyContent: "space-between"
|
||||
}}
|
||||
>
|
||||
<QuestionComponent currentQuestion={currentQuestion} />
|
||||
{mode[settings?.cfg.theme] ? (
|
||||
<QuestionByType question={currentQuestion} />
|
||||
{quizThemes[settings.cfg.theme].isLight ? (
|
||||
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
|
||||
) : (
|
||||
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
|
||||
@ -137,5 +118,23 @@ export const Question = ({ questions }: QuestionProps) => {
|
||||
)}
|
||||
</Box>
|
||||
);
|
||||
|
||||
};
|
||||
|
||||
function QuestionByType({ question }: {
|
||||
question: Exclude<AnyTypedQuizQuestion, QuizQuestionResult>;
|
||||
}) {
|
||||
switch (question.type) {
|
||||
case "variant": return <Variant currentQuestion={question} />;
|
||||
case "images": return <Images currentQuestion={question} />;
|
||||
case "varimg": return <Varimg currentQuestion={question} />;
|
||||
case "emoji": return <Emoji currentQuestion={question} />;
|
||||
case "text": return <Text currentQuestion={question} />;
|
||||
case "select": return <Select currentQuestion={question} />;
|
||||
case "date": return <Date currentQuestion={question} />;
|
||||
case "number": return <Number currentQuestion={question} />;
|
||||
case "file": return <File currentQuestion={question} />;
|
||||
case "page": return <Page currentQuestion={question} />;
|
||||
case "rating": return <Rating currentQuestion={question} />;
|
||||
default: return notReachable(question);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
Button,
|
||||
Typography,
|
||||
useMediaQuery,
|
||||
useTheme,
|
||||
} from "@mui/material";
|
||||
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useCallback, useEffect, useMemo } from "react";
|
||||
import type { QuizQuestionResult } from "../../model/questionTypes/result";
|
||||
|
||||
|
||||
type ResultFormProps = {
|
||||
currentQuestion: any;
|
||||
showContactForm: boolean;
|
||||
@ -29,40 +30,42 @@ export const ResultForm = ({
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const { settings, items } = useQuestionsStore();
|
||||
const mode = modes;
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
const searchResult = (): QuizQuestionResult => {
|
||||
if (Boolean(settings?.cfg.haveRoot)) {
|
||||
const resultQuestion = useMemo(() => {
|
||||
if (settings?.cfg.haveRoot) {
|
||||
//ищём для ветвления
|
||||
return (items.find(
|
||||
(question) =>
|
||||
(question): question is QuizQuestionResult =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === currentQuestion.content.id
|
||||
) ||
|
||||
items.find(
|
||||
(question) =>
|
||||
) || items.find(
|
||||
(question): question is QuizQuestionResult =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line"
|
||||
)) as QuizQuestionResult;
|
||||
));
|
||||
} else {
|
||||
return items.find(
|
||||
(question) =>
|
||||
(question): question is QuizQuestionResult =>
|
||||
question.type === "result" &&
|
||||
question.content.rule.parentId === "line"
|
||||
) as QuizQuestionResult;
|
||||
);
|
||||
}
|
||||
};
|
||||
const resultQuestion = searchResult();
|
||||
}, [currentQuestion.content.id, items, settings?.cfg.haveRoot]);
|
||||
|
||||
const followNextForm = () => {
|
||||
const followNextForm = useCallback(() => {
|
||||
setShowResultForm(false);
|
||||
setShowContactForm(true);
|
||||
};
|
||||
console.log(resultQuestion);
|
||||
if (resultQuestion === null || resultQuestion === undefined) {
|
||||
},[setShowContactForm, setShowResultForm]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!resultQuestion) {
|
||||
followNextForm();
|
||||
return <></>;
|
||||
} else {
|
||||
}
|
||||
}, [followNextForm, resultQuestion]);
|
||||
|
||||
if (!resultQuestion) return null;
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
@ -86,11 +89,8 @@ export const ResultForm = ({
|
||||
}}
|
||||
>
|
||||
{
|
||||
//@ts-ignore
|
||||
!resultQuestion?.content.useImage &&
|
||||
resultQuestion.content.video && (
|
||||
!resultQuestion?.content.useImage && resultQuestion.content.video && (
|
||||
<YoutubeEmbedIframe
|
||||
//@ts-ignore
|
||||
videoUrl={resultQuestion.content.video}
|
||||
containerSX={{
|
||||
width: isMobile ? "100%" : "490px",
|
||||
@ -100,7 +100,6 @@ export const ResultForm = ({
|
||||
)
|
||||
}
|
||||
{
|
||||
//@ts-ignore
|
||||
resultQuestion?.content.useImage && resultQuestion.content.back && (
|
||||
<Box
|
||||
component="img"
|
||||
@ -136,9 +135,7 @@ export const ResultForm = ({
|
||||
</Typography>
|
||||
|
||||
{
|
||||
//@ts-ignore
|
||||
resultQuestion.content.text !== "" &&
|
||||
//@ts-ignore
|
||||
resultQuestion.content.text !== " " && (
|
||||
<Typography
|
||||
sx={{
|
||||
@ -148,7 +145,6 @@ export const ResultForm = ({
|
||||
}}
|
||||
>
|
||||
{
|
||||
//@ts-ignore
|
||||
resultQuestion.content.text
|
||||
}
|
||||
</Typography>
|
||||
@ -176,14 +172,13 @@ export const ResultForm = ({
|
||||
<NameplateLogo
|
||||
style={{
|
||||
fontSize: "34px",
|
||||
color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
|
||||
}}
|
||||
/>
|
||||
<Typography
|
||||
sx={{
|
||||
fontSize: "20px",
|
||||
//@ts-ignore
|
||||
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF",
|
||||
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
|
||||
whiteSpace: "nowrap",
|
||||
}}
|
||||
>
|
||||
@ -230,5 +225,4 @@ export const ResultForm = ({
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,11 +1,12 @@
|
||||
import { Box, Button, ButtonBase, Link, Paper, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import YoutubeEmbedIframe from "./tools/YoutubeEmbedIframe";
|
||||
import { QuizStartpageAlignType, QuizStartpageType } from "@model/quizSettings";
|
||||
import { notReachable } from "../../utils/notReachable";
|
||||
import { useUADevice } from "../../utils/hooks/useUADevice";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
import { NameplateLogo } from "@icons/NameplateLogo";
|
||||
import { modes } from "../../utils/themes/Publication/themePublication";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { QuizStartpageAlignType, QuizStartpageType } from "@model/settingsData";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
|
||||
interface Props {
|
||||
@ -14,15 +15,11 @@ interface Props {
|
||||
|
||||
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
const theme = useTheme();
|
||||
const { settings } = useQuestionsStore()
|
||||
const mode = modes;
|
||||
const { settings } = useQuestionsStore();
|
||||
const { isMobileDevice } = useUADevice();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
|
||||
if (!settings) return null;
|
||||
|
||||
console.log(settings);
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
const handleCopyNumber = () => {
|
||||
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
|
||||
@ -221,7 +218,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
{settings.cfg.info.phonenumber}
|
||||
</Typography>
|
||||
)}
|
||||
<Typography sx={{ width: "100%",
|
||||
<Typography sx={{
|
||||
width: "100%",
|
||||
overflowWrap: "break-word",
|
||||
fontSize: "12px", textAlign: "end",
|
||||
color:
|
||||
@ -240,8 +238,8 @@ export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
|
||||
gap: "15px"
|
||||
}}
|
||||
>
|
||||
<NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (mode[settings.cfg.theme] ? "#151515" : "#FFFFFF") }} />
|
||||
<Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
|
||||
<NameplateLogo style={{ fontSize: "34px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#FFFFFF" : (quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF") }} />
|
||||
<Typography sx={{ fontSize: "20px", color: settings.cfg.startpageType === "expanded" && !isMobile ? "#F5F7FF" : (quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF"), whiteSpace: "nowrap", }}>
|
||||
Сделано на PenaQuiz
|
||||
</Typography>
|
||||
</Box>
|
||||
@ -317,7 +315,7 @@ function QuizPreviewLayoutByType({
|
||||
{backgroundBlock}
|
||||
</Box>
|
||||
</Box>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -1,123 +1,84 @@
|
||||
import { getData } from "@api/quizRelase";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import { Box, ThemeProvider } from "@mui/material";
|
||||
import { setQuizData } from "@stores/quizData/actions";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
import LoadingSkeleton from "@ui_kit/LoadingSkeleton";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Box, Skeleton, ThemeProvider } from "@mui/material";
|
||||
|
||||
import { StartPageViewPublication } from "./StartPageViewPublication";
|
||||
import useSWR from "swr";
|
||||
import { ApologyPage } from "./ApologyPage";
|
||||
import { Question } from "./Question";
|
||||
import { ApologyPage } from "./ApologyPage"
|
||||
|
||||
import { useQuestionsStore } from "@stores/quizData/store"
|
||||
import { getData } from "@api/quizRelase"
|
||||
|
||||
import type { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { useGetSettings } from "../../utils/hooks/useGetSettings";
|
||||
import { themesPublication } from "../../utils/themes/Publication/themePublication";
|
||||
import { StartPageViewPublication } from "./StartPageViewPublication";
|
||||
import { replaceSpacesToEmptyLines } from "./tools/replaceSpacesToEmptyLines";
|
||||
import { parseQuizData } from "@model/api/getQuizData";
|
||||
|
||||
|
||||
const QID =
|
||||
process.env.NODE_ENV === "production" ?
|
||||
import.meta.env.PROD ?
|
||||
window.location.pathname.replace(/\//g, '')
|
||||
:
|
||||
"0bed8483-3016-4bca-b8e0-a72c3146f18b"
|
||||
"0bed8483-3016-4bca-b8e0-a72c3146f18b";
|
||||
|
||||
|
||||
export const ViewPage = () => {
|
||||
const { settings, cnt, items } = useQuestionsStore()
|
||||
console.log("КВИЗ ", settings)
|
||||
console.log("ВОПРОСЫ ", items)
|
||||
|
||||
|
||||
const { isLoading, error } = useSWR(["quizData", QID], params => getQuizData(params[1]), {
|
||||
onSuccess: setQuizData,
|
||||
});
|
||||
const { settings, items, recentlyСompleted } = useQuestionsStore();
|
||||
const [visualStartPage, setVisualStartPage] = useState<boolean>();
|
||||
const [errormessage, setErrormessage] = useState<string>("");
|
||||
|
||||
useEffect(() => {
|
||||
async function get() {
|
||||
try {
|
||||
let data = await getData(QID)
|
||||
|
||||
console.log(data)
|
||||
//@ts-ignore
|
||||
const settings = data.settings
|
||||
|
||||
console.log(data)
|
||||
//@ts-ignore
|
||||
data.settings = {
|
||||
//@ts-ignore
|
||||
qid: QID,
|
||||
fp: settings.fp,
|
||||
rep: settings.rep,
|
||||
name: settings.name,
|
||||
//@ts-ignore
|
||||
cfg: JSON.parse(data?.settings.cfg),
|
||||
lim: settings.lim,
|
||||
due: settings.due,
|
||||
delay: settings.delay,
|
||||
pausable: settings.pausable
|
||||
}
|
||||
console.log(data)
|
||||
//@ts-ignore
|
||||
data.items = data.items.map((item) => {
|
||||
const content = JSON.parse(item.c)
|
||||
return {
|
||||
description: item.desc,
|
||||
id: item.id,
|
||||
page: item.p,
|
||||
required: item.req,
|
||||
title: item.title,
|
||||
type: item.typ,
|
||||
content
|
||||
}
|
||||
}),
|
||||
console.log(data)
|
||||
console.log(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""'))
|
||||
console.log(JSON.parse(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""')).data)
|
||||
|
||||
data = replaceSpacesToEmptyLines(data)
|
||||
|
||||
useQuestionsStore.setState(JSON.parse(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""')).data)
|
||||
|
||||
} catch (e) {
|
||||
|
||||
//@ts-ignore
|
||||
if (e?.response?.status === 423) setErrormessage("квиз не активирован")
|
||||
}
|
||||
}
|
||||
get()
|
||||
}, [])
|
||||
|
||||
|
||||
useEffect(() => {//установка фавиконки
|
||||
if (Object.values(settings).length > 0) {
|
||||
if (!settings) return;
|
||||
|
||||
const link = document.querySelector('link[rel="icon"]');
|
||||
if (link && settings?.cfg.startpage.favIcon) {
|
||||
if (link && settings.cfg.startpage.favIcon) {
|
||||
link.setAttribute("href", settings?.cfg.startpage.favIcon);
|
||||
}
|
||||
|
||||
setVisualStartPage(!settings?.cfg.noStartPage);
|
||||
}
|
||||
setVisualStartPage(!settings.cfg.noStartPage);
|
||||
}, [settings]);
|
||||
|
||||
const questionsCount = items.filter(({ type }) => type !== null && type !== "result").length;
|
||||
|
||||
const filteredQuestions = (
|
||||
items.filter(({ type }) => type) as AnyTypedQuizQuestion[]
|
||||
).sort((previousItem, item) => previousItem.page - item.page);
|
||||
|
||||
|
||||
if (errormessage) return <ApologyPage message={errormessage} />
|
||||
if (visualStartPage === undefined) return <Skeleton sx={{ bgcolor: 'grey', width: "100vw", height: "100vh" }} variant="rectangular" />;
|
||||
if (cnt === 0 || (cnt === 1 && items[0].type === "result")) return <ApologyPage message="Нет созданных вопросов" />
|
||||
return (
|
||||
<ThemeProvider theme={themesPublication?.[settings?.cfg.theme || "StandardTheme"]}>
|
||||
<Box>
|
||||
{
|
||||
visualStartPage ?
|
||||
<StartPageViewPublication setVisualStartPage={setVisualStartPage} />
|
||||
:
|
||||
<Question questions={filteredQuestions} />
|
||||
if (error) {
|
||||
console.log(error);
|
||||
return <ApologyPage message="Что-то пошло не так" />;
|
||||
}
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
if (isLoading || !settings) return <LoadingSkeleton />;
|
||||
if (questionsCount === 0) return <ApologyPage message="Нет созданных вопросов" />;
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={quizThemes[settings.cfg.theme || "StandardTheme"]}>
|
||||
{recentlyСompleted ? (
|
||||
<ApologyPage message="Вы уже прошли этот опрос" />
|
||||
) : (
|
||||
<Box>
|
||||
{visualStartPage ? (
|
||||
<StartPageViewPublication setVisualStartPage={setVisualStartPage} />
|
||||
) : (
|
||||
<Question />
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
</ThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
async function getQuizData(quizId: string) {
|
||||
const response = await getData(quizId);
|
||||
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));
|
||||
|
||||
return JSON.parse(JSON.stringify({ data: quizSettings }).replaceAll(/\\" \\"/g, '""').replaceAll(/" "/g, '""')).data as QuizSettings & { recentlyСompleted: boolean; };
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
import dayjs from "dayjs";
|
||||
import { DatePicker } from "@mui/x-date-pickers";
|
||||
import { Box, Typography, useTheme } from "@mui/material";
|
||||
import { modes } from "../../../utils/themes/Publication/themePublication";
|
||||
|
||||
import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
|
||||
|
||||
@ -9,6 +8,8 @@ import type { QuizQuestionDate } from "../../../model/questionTypes/date";
|
||||
import CalendarIcon from "@icons/CalendarIcon";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
type DateProps = {
|
||||
@ -17,7 +18,6 @@ type DateProps = {
|
||||
|
||||
export const Date = ({ currentQuestion }: DateProps) => {
|
||||
const theme = useTheme();
|
||||
const mode = modes;
|
||||
|
||||
const { settings } = useQuestionsStore();
|
||||
const { answers } = useQuizViewStore();
|
||||
@ -26,6 +26,8 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
)?.answer as string;
|
||||
const [day, month, year] = answer?.split(".") || [];
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>
|
||||
@ -41,7 +43,6 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
>
|
||||
<DatePicker
|
||||
slots={{
|
||||
//@ts-ignore
|
||||
openPickerIcon: () => (
|
||||
<CalendarIcon
|
||||
sx={{
|
||||
@ -72,7 +73,6 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
day: "2-digit",
|
||||
}
|
||||
),
|
||||
//@ts-ignore
|
||||
qid: settings.qid,
|
||||
});
|
||||
|
||||
@ -103,7 +103,7 @@ export const Date = ({ currentQuestion }: DateProps) => {
|
||||
}}
|
||||
sx={{
|
||||
"& .MuiInputBase-root": {
|
||||
backgroundColor: mode[settings.cfg.theme]
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
borderRadius: "10px",
|
||||
|
||||
@ -1,24 +1,23 @@
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
RadioGroup,
|
||||
FormControl,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
useTheme,
|
||||
FormControl,
|
||||
useMediaQuery
|
||||
RadioGroup,
|
||||
Typography,
|
||||
useTheme
|
||||
} from "@mui/material";
|
||||
import { modes } from "../../../utils/themes/Publication/themePublication";
|
||||
|
||||
import { useQuizViewStore, updateAnswer, deleteAnswer } from "@stores/quizView/store";
|
||||
import { deleteAnswer, updateAnswer, useQuizViewStore } from "@stores/quizView/store";
|
||||
|
||||
import RadioCheck from "@ui_kit/RadioCheck";
|
||||
import RadioIcon from "@ui_kit/RadioIcon";
|
||||
|
||||
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { useQuestionsStore } from "@stores/quizData/store"
|
||||
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type { QuizQuestionEmoji } from "../../../model/questionTypes/emoji";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
type EmojiProps = {
|
||||
currentQuestion: QuizQuestionEmoji;
|
||||
@ -26,9 +25,7 @@ type EmojiProps = {
|
||||
|
||||
export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
const theme = useTheme();
|
||||
const mode = modes;
|
||||
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const { settings } = useQuestionsStore()
|
||||
const { answers } = useQuizViewStore();
|
||||
const { answer } =
|
||||
@ -36,6 +33,8 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
) ?? {};
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -45,7 +44,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
({ id }) => answer === id
|
||||
)}
|
||||
onChange={({ target }) =>{
|
||||
console.log(currentQuestion.content.variants[Number(target.value)])
|
||||
updateAnswer(
|
||||
currentQuestion.id,
|
||||
currentQuestion.content.variants[Number(target.value)].answer
|
||||
@ -114,7 +112,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].answer,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -136,7 +133,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -147,7 +143,6 @@ export const Emoji = ({ currentQuestion }: EmojiProps) => {
|
||||
}}
|
||||
|
||||
control={
|
||||
//@ts-ignore
|
||||
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
|
||||
}
|
||||
label={
|
||||
|
||||
@ -23,7 +23,7 @@ type FileProps = {
|
||||
currentQuestion: QuizQuestionFile;
|
||||
};
|
||||
|
||||
export const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
|
||||
const UPLOAD_FILE_DESCRIPTIONS_MAP: Record<
|
||||
UploadFileType,
|
||||
{ title: string; description: string }
|
||||
> = {
|
||||
@ -49,6 +49,8 @@ export const File = ({ currentQuestion }: FileProps) => {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
||||
const uploadFile = async ({ target }: ChangeEvent<HTMLInputElement>) => {
|
||||
if (!settings) return;
|
||||
|
||||
const file = target.files?.[0];
|
||||
if (file) {
|
||||
|
||||
@ -60,7 +62,6 @@ export const File = ({ currentQuestion }: FileProps) => {
|
||||
file: `${file.name}|${URL.createObjectURL(file)}`,
|
||||
name: file.name
|
||||
},
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
@ -32,6 +32,8 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(500));
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -77,7 +79,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].answer,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -98,7 +99,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -138,7 +138,6 @@ export const Images = ({ currentQuestion }: ImagesProps) => {
|
||||
}}
|
||||
value={index}
|
||||
control={
|
||||
//@ts-ignore
|
||||
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
|
||||
}
|
||||
label={variant.answer}
|
||||
|
||||
@ -10,8 +10,9 @@ import { useQuizViewStore, updateAnswer } from "@stores/quizView/store";
|
||||
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { useQuestionsStore } from "@stores/quizData/store"
|
||||
import { modes } from "../../../utils/themes/Publication/themePublication";
|
||||
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
type NumberProps = {
|
||||
currentQuestion: QuizQuestionNumber;
|
||||
@ -28,6 +29,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
|
||||
|
||||
const updateMinRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
|
||||
if (!settings) return null;
|
||||
|
||||
if (crowded) {
|
||||
setMinRange(maxRange);
|
||||
}
|
||||
@ -37,7 +40,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: value,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -50,6 +52,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
|
||||
}, 1000);
|
||||
const updateMaxRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
|
||||
if (!settings) return null;
|
||||
|
||||
if (crowded) {
|
||||
setMaxRange(minRange);
|
||||
}
|
||||
@ -58,7 +62,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: value,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -71,7 +74,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
}, 1000);
|
||||
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
|
||||
|
||||
const mode = modes;
|
||||
const min = window.Number(currentQuestion.content.range.split("—")[0]);
|
||||
const max = window.Number(currentQuestion.content.range.split("—")[1]);
|
||||
const sliderValue = answer || currentQuestion.content.start + "—" + max;
|
||||
@ -88,6 +90,8 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -131,7 +135,6 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
setMaxRange(String(range[1]));
|
||||
}
|
||||
}}
|
||||
//@ts-ignore
|
||||
sx={{
|
||||
color: theme.palette.primary.main,
|
||||
"& .MuiSlider-valueLabel": {
|
||||
@ -156,7 +159,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -190,7 +193,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
@ -214,7 +217,7 @@ export const Number = ({ currentQuestion }: NumberProps) => {
|
||||
borderColor: theme.palette.text.primary,
|
||||
"& .MuiInputBase-input": {
|
||||
textAlign: "center",
|
||||
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -69,6 +69,8 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
({ name }) => name === currentQuestion.content.form
|
||||
);
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -98,7 +100,6 @@ export const Rating = ({ currentQuestion }: RatingProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: String(value),
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
@ -23,6 +23,8 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
) ?? {};
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -38,10 +40,7 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
placeholder={currentQuestion.content.default}
|
||||
activeItemIndex={answer ? Number(answer) : -1}
|
||||
items={currentQuestion.content.variants.map(({ answer }) => answer)}
|
||||
//@ts-ignore
|
||||
colorMain={theme.palette.primary.main}
|
||||
//@ts-ignore
|
||||
color={theme.palette.primary.main}
|
||||
onChange={async(_, value) => {
|
||||
if (value < 0) {
|
||||
deleteAnswer(currentQuestion.id);
|
||||
@ -50,7 +49,6 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -65,7 +63,6 @@ export const Select = ({ currentQuestion }: SelectProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: String(currentQuestion.content.variants[Number(value)].answer),
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
@ -21,12 +21,13 @@ export const Text = ({ currentQuestion }: TextProps) => {
|
||||
const { answer } = answers.find(({ questionId }) => questionId === currentQuestion.id) ?? {};
|
||||
|
||||
const inputHC = useDebouncedCallback(async (text) => {
|
||||
if (!settings) return;
|
||||
|
||||
try {
|
||||
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: text,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
@ -1,37 +1,39 @@
|
||||
import { useEffect } from "react";
|
||||
import {
|
||||
Box,
|
||||
Typography,
|
||||
RadioGroup,
|
||||
FormGroup,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
Checkbox,
|
||||
TextField,
|
||||
FormControlLabel,
|
||||
FormGroup,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
TextField as MuiTextField,
|
||||
Typography,
|
||||
useTheme,
|
||||
TextFieldProps,
|
||||
} from "@mui/material";
|
||||
import { FC, useEffect } from "react";
|
||||
|
||||
import {
|
||||
useQuizViewStore,
|
||||
updateAnswer,
|
||||
deleteAnswer,
|
||||
updateAnswer,
|
||||
updateOwnVariant,
|
||||
deleteOwnVariant,
|
||||
useQuizViewStore
|
||||
} from "@stores/quizView/store";
|
||||
|
||||
import { CheckboxIcon } from "@icons/Checkbox";
|
||||
import RadioCheck from "@ui_kit/RadioCheck";
|
||||
import RadioIcon from "@ui_kit/RadioIcon";
|
||||
import { CheckboxIcon } from "@icons/Checkbox";
|
||||
|
||||
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
|
||||
import type { QuestionVariant } from "../../../model/questionTypes/shared";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { useQuestionsStore } from "@stores/quizData/store"
|
||||
import { modes } from "../../../utils/themes/Publication/themePublication";
|
||||
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import type { QuestionVariant } from "../../../model/questionTypes/shared";
|
||||
import type { QuizQuestionVariant } from "../../../model/questionTypes/variant";
|
||||
import { useQuestionsStore } from "@stores/quizData/store";
|
||||
|
||||
const TextField = MuiTextField as unknown as FC<TextFieldProps>;
|
||||
|
||||
type VariantProps = {
|
||||
stepNumber: number;
|
||||
currentQuestion: QuizQuestionVariant;
|
||||
};
|
||||
|
||||
@ -44,9 +46,8 @@ type VariantItemProps = {
|
||||
};
|
||||
|
||||
export const Variant = ({ currentQuestion }: VariantProps) => {
|
||||
const { settings } = useQuestionsStore()
|
||||
const theme = useTheme();
|
||||
const { answers, ownVariants } = useQuizViewStore();
|
||||
const mode = modes;
|
||||
const { answer } =
|
||||
answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
@ -63,13 +64,12 @@ export const Variant = ({ currentQuestion }: VariantProps) => {
|
||||
}
|
||||
}, []);
|
||||
|
||||
const theme = useTheme();
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Group
|
||||
name={currentQuestion.id}
|
||||
name={currentQuestion.id.toString()}
|
||||
value={currentQuestion.content.variants.findIndex(
|
||||
({ id }) => answer === id
|
||||
)}
|
||||
@ -135,7 +135,8 @@ const VariantItem = ({
|
||||
}: VariantItemProps) => {
|
||||
const { settings } = useQuestionsStore()
|
||||
const theme = useTheme();
|
||||
const mode = modes;
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<FormControlLabel
|
||||
@ -146,9 +147,10 @@ const VariantItem = ({
|
||||
color: theme.palette.text.primary,
|
||||
padding: "15px",
|
||||
border: `1px solid`,
|
||||
borderColor:
|
||||
answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
||||
backgroundColor: mode[settings.cfg.theme]
|
||||
borderColor: answer === variant.id
|
||||
? theme.palette.primary.main
|
||||
: "#9A9AAF",
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight
|
||||
? "white"
|
||||
: theme.palette.background.default,
|
||||
display: "flex",
|
||||
@ -166,18 +168,15 @@ const VariantItem = ({
|
||||
value={index}
|
||||
labelPlacement="start"
|
||||
control={
|
||||
currentQuestion.content.multi ? (
|
||||
currentQuestion.content.multi ?
|
||||
<Checkbox
|
||||
checked={!!answer?.includes(variant.id)}
|
||||
checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
|
||||
icon={<CheckboxIcon />}
|
||||
/>
|
||||
) :
|
||||
//@ts-ignore
|
||||
(<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
|
||||
)
|
||||
:
|
||||
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
|
||||
}
|
||||
//@ts-ignore
|
||||
label={own ? <TextField label="Другое..." /> : variant.answer}
|
||||
onClick={async (event) => {
|
||||
event.preventDefault();
|
||||
@ -193,7 +192,6 @@ const VariantItem = ({
|
||||
body: currentAnswer.includes(variantId)
|
||||
? currentAnswer?.filter((item) => item !== variantId)
|
||||
: [...currentAnswer, variantId],
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -217,7 +215,6 @@ const VariantItem = ({
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].answer,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -233,7 +230,6 @@ const VariantItem = ({
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ import {
|
||||
useTheme,
|
||||
useMediaQuery
|
||||
} from "@mui/material";
|
||||
import { modes } from "../../../utils/themes/Publication/themePublication";
|
||||
|
||||
import gag from "./gag.png"
|
||||
|
||||
@ -20,6 +19,7 @@ import RadioIcon from "@ui_kit/RadioIcon";
|
||||
import type { QuizQuestionVarImg } from "../../../model/questionTypes/varimg";
|
||||
import { enqueueSnackbar } from "notistack";
|
||||
import { sendAnswer } from "@api/quizRelase";
|
||||
import { quizThemes } from "@utils/themes/Publication/themePublication";
|
||||
|
||||
type VarimgProps = {
|
||||
currentQuestion: QuizQuestionVarImg;
|
||||
@ -30,7 +30,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
const { answers } = useQuizViewStore();
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(650));
|
||||
const mode = modes;
|
||||
|
||||
const { answer } =
|
||||
answers.find(
|
||||
({ questionId }) => questionId === currentQuestion.id
|
||||
@ -38,6 +38,9 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
const variant = currentQuestion.content.variants.find(
|
||||
({ id }) => answer === id
|
||||
);
|
||||
|
||||
if (!settings) throw new Error("settings is null");
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
|
||||
@ -70,7 +73,7 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
borderRadius: "5px",
|
||||
padding: "15px",
|
||||
color: theme.palette.text.primary,
|
||||
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
|
||||
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
|
||||
border: `1px solid`,
|
||||
borderColor: answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
|
||||
display: "flex",
|
||||
@ -90,7 +93,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: currentQuestion.content.variants[index].answer,
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -110,7 +112,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
await sendAnswer({
|
||||
questionId: currentQuestion.id,
|
||||
body: "",
|
||||
//@ts-ignore
|
||||
qid: settings.qid
|
||||
})
|
||||
|
||||
@ -121,7 +122,6 @@ export const Varimg = ({ currentQuestion }: VarimgProps) => {
|
||||
}
|
||||
}}
|
||||
control={
|
||||
//@ts-ignore
|
||||
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main}/>} icon={<RadioIcon />} />
|
||||
}
|
||||
label={variant.answer}
|
||||
|
||||
@ -1,9 +1,12 @@
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { useQuestionsStore } from "./store";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
|
||||
|
||||
export const getQuestionById = (questionId: string | null): AnyTypedQuizQuestion | null => {
|
||||
if (questionId === null) return null;
|
||||
//@ts-ignore
|
||||
|
||||
return useQuestionsStore.getState().items.find(q => q.id === questionId || q.content.id === questionId) || null;
|
||||
};
|
||||
|
||||
export const setQuizData = (quizData: QuizSettings) => useQuestionsStore.setState(quizData);
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
|
||||
import { Settings, QuestionsStore } from "@model/settingsData";
|
||||
import { QuizConfig } from "@model/quizSettings";
|
||||
import { QuizSettings } from "@model/settingsData";
|
||||
import { create } from "zustand";
|
||||
import { devtools } from "zustand/middleware";
|
||||
|
||||
const initialState: QuestionsStore = {
|
||||
//@ts-ignore
|
||||
settings: {},
|
||||
//@ts-ignore
|
||||
items: [],
|
||||
cnt: 0
|
||||
|
||||
type QuizDataStore = {
|
||||
settings: QuizSettings["settings"] | null;
|
||||
items: QuizSettings["items"];
|
||||
cnt: QuizSettings["cnt"];
|
||||
recentlyСompleted: boolean;
|
||||
};
|
||||
|
||||
export const useQuestionsStore = create<QuestionsStore>()(
|
||||
const initialState: QuizDataStore = {
|
||||
settings: null,
|
||||
items: [],
|
||||
cnt: 0,
|
||||
recentlyСompleted: false,
|
||||
};
|
||||
|
||||
export const useQuestionsStore = create<QuizDataStore>()(
|
||||
devtools(
|
||||
() => initialState,
|
||||
{
|
||||
name: "QuestionsStore",
|
||||
enabled: process.env.NODE_ENV === "development",
|
||||
trace: process.env.NODE_ENV === "development",
|
||||
actionsBlacklist: "ignored",
|
||||
name: "QuizDataStore",
|
||||
enabled: import.meta.env.DEV,
|
||||
trace: import.meta.env.DEV,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import { QuestionVariant } from "@model/questionTypes/shared";
|
||||
import { produce } from "immer";
|
||||
import { nanoid } from "nanoid";
|
||||
import { create } from "zustand";
|
||||
import { devtools } from "zustand/middleware";
|
||||
|
||||
|
||||
type Answer = {
|
||||
questionId: string;
|
||||
answer: string | string[];
|
||||
@ -9,7 +11,7 @@ type Answer = {
|
||||
|
||||
type OwnVariant = {
|
||||
id: string;
|
||||
variant: any;
|
||||
variant: QuestionVariant;
|
||||
};
|
||||
|
||||
interface QuizViewStore {
|
||||
@ -25,45 +27,48 @@ export const useQuizViewStore = create<QuizViewStore>()(
|
||||
}),
|
||||
{
|
||||
name: "quizView",
|
||||
enabled: import.meta.env.DEV,
|
||||
trace: import.meta.env.DEV,
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
export const updateAnswer = (questionId: string, answer: string | string[]) => {
|
||||
const answers = [...useQuizViewStore.getState().answers];
|
||||
const answerIndex = answers.findIndex(
|
||||
(answer) => questionId === answer.questionId
|
||||
);
|
||||
|
||||
if (answerIndex < 0) {
|
||||
answers.push({ questionId, answer });
|
||||
} else {
|
||||
answers[answerIndex] = { questionId, answer };
|
||||
function setProducedState<A extends string | { type: string; }>(
|
||||
recipe: (state: QuizViewStore) => void,
|
||||
action: A,
|
||||
) {
|
||||
useQuizViewStore.setState(state => produce(state, recipe), false, action);
|
||||
}
|
||||
|
||||
useQuizViewStore.setState({ answers });
|
||||
};
|
||||
export const updateAnswer = (questionId: string, answer: string | string[]) => setProducedState(state => {
|
||||
const index = state.answers.findIndex(answer => questionId === answer.questionId);
|
||||
|
||||
export const deleteAnswer = (questionId: string) => {
|
||||
const answers = [...useQuizViewStore.getState().answers];
|
||||
const filteredItems = answers.filter(
|
||||
(answer) => questionId !== answer.questionId
|
||||
);
|
||||
if (index < 0) {
|
||||
state.answers.push({ questionId, answer });
|
||||
} else {
|
||||
state.answers[index] = { questionId, answer };
|
||||
}
|
||||
}, {
|
||||
type: "updateAnswer",
|
||||
questionId,
|
||||
answer
|
||||
});
|
||||
|
||||
useQuizViewStore.setState({ answers: filteredItems });
|
||||
};
|
||||
export const deleteAnswer = (questionId: string) => useQuizViewStore.setState(state => ({
|
||||
answers: state.answers.filter(answer => questionId !== answer.questionId)
|
||||
}), false, {
|
||||
type: "deleteAnswer",
|
||||
questionId
|
||||
});
|
||||
|
||||
export const updateOwnVariant = (id: string, answer: string) => {
|
||||
const ownVariants = [...useQuizViewStore.getState().ownVariants];
|
||||
const ownVariantIndex = ownVariants.findIndex(
|
||||
(variant) => variant.id === id
|
||||
);
|
||||
export const updateOwnVariant = (id: string, answer: string) => setProducedState(state => {
|
||||
const index = state.ownVariants.findIndex((variant) => variant.id === id);
|
||||
|
||||
if (ownVariantIndex < 0) {
|
||||
ownVariants.push({
|
||||
if (index < 0) {
|
||||
state.ownVariants.push({
|
||||
id,
|
||||
variant: {
|
||||
id: getRandom(),
|
||||
id: nanoid(),
|
||||
answer,
|
||||
extendedText: "",
|
||||
hints: "",
|
||||
@ -71,25 +76,17 @@ export const updateOwnVariant = (id: string, answer: string) => {
|
||||
},
|
||||
});
|
||||
} else {
|
||||
ownVariants[ownVariantIndex].variant.answer = answer;
|
||||
state.ownVariants[index].variant.answer = answer;
|
||||
}
|
||||
}, {
|
||||
type: "updateOwnVariant",
|
||||
id,
|
||||
answer
|
||||
});
|
||||
|
||||
useQuizViewStore.setState({ ownVariants });
|
||||
};
|
||||
|
||||
export const deleteOwnVariant = (id: string) => {
|
||||
const ownVariants = [...useQuizViewStore.getState().ownVariants];
|
||||
|
||||
const filteredOwnVariants = ownVariants.filter(
|
||||
(variant) => variant.id !== id
|
||||
);
|
||||
|
||||
useQuizViewStore.setState({ ownVariants: filteredOwnVariants });
|
||||
};
|
||||
|
||||
function getRandom() {
|
||||
const min = Math.ceil(1000000);
|
||||
const max = Math.floor(10000000);
|
||||
|
||||
return String(Math.floor(Math.random() * (max - min)) + min);
|
||||
}
|
||||
export const deleteOwnVariant = (id: string) => useQuizViewStore.setState(state => ({
|
||||
ownVariants: state.ownVariants.filter((variant) => variant.id !== id)
|
||||
}), false, {
|
||||
type: "deleteOwnVariant",
|
||||
id
|
||||
});
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { FormControlLabel, Checkbox, useTheme, Box, useMediaQuery } from "@mui/material";
|
||||
import { Checkbox, FormControlLabel } from "@mui/material";
|
||||
import React from "react";
|
||||
|
||||
import { CheckboxIcon } from "@icons/Checkbox";
|
||||
@ -15,8 +15,6 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function CustomCheckbox({ label, handleChange, checked, sx, dataCy, colorIcon }: Props) {
|
||||
const theme = useTheme();
|
||||
const isMobile = useMediaQuery(theme.breakpoints.down(790));
|
||||
|
||||
return (
|
||||
<FormControlLabel
|
||||
@ -25,7 +23,6 @@ export default function CustomCheckbox({ label, handleChange, checked, sx, dataC
|
||||
sx={{ padding: "0px 13px 1px 11px" }}
|
||||
disableRipple
|
||||
icon={<CheckboxIcon />}
|
||||
//@ts-ignore
|
||||
checkedIcon={<CheckboxIcon checked color={colorIcon} />}
|
||||
onChange={handleChange}
|
||||
checked={checked}
|
||||
|
||||
17
src/ui_kit/LoadingSkeleton.tsx
Normal file
17
src/ui_kit/LoadingSkeleton.tsx
Normal file
@ -0,0 +1,17 @@
|
||||
import { Skeleton } from "@mui/material";
|
||||
|
||||
|
||||
export default function LoadingSkeleton() {
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
component="div"
|
||||
variant="rectangular"
|
||||
sx={{
|
||||
bgcolor: "grey",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@ -1,7 +1,6 @@
|
||||
import { createTheme } from "@mui/material";
|
||||
import { QuizTheme } from "@model/settingsData";
|
||||
import { Theme, createTheme } from "@mui/material";
|
||||
import themePublic from "./genericPublication";
|
||||
import theme from "../generic";
|
||||
|
||||
|
||||
|
||||
const StandardTheme = createTheme({
|
||||
@ -224,30 +223,16 @@ const BlueDarkTheme = createTheme({
|
||||
}
|
||||
})
|
||||
|
||||
export const modes = {
|
||||
StandardTheme: true,
|
||||
StandardDarkTheme: false,
|
||||
PinkTheme: true,
|
||||
PinkDarkTheme: false,
|
||||
BlackWhiteTheme: true,
|
||||
OliveTheme: true,
|
||||
YellowTheme: true,
|
||||
GoldDarkTheme: false,
|
||||
PurpleTheme: true,
|
||||
BlueTheme: true,
|
||||
BlueDarkTheme: false
|
||||
}
|
||||
|
||||
export const themesPublication = {
|
||||
StandardTheme,
|
||||
StandardDarkTheme,
|
||||
PinkTheme,
|
||||
PinkDarkTheme,
|
||||
BlackWhiteTheme,
|
||||
OliveTheme,
|
||||
YellowTheme,
|
||||
GoldDarkTheme,
|
||||
PurpleTheme,
|
||||
BlueTheme,
|
||||
BlueDarkTheme,
|
||||
}
|
||||
export const quizThemes: Record<QuizTheme, { theme: Theme; isLight: boolean; }> = {
|
||||
StandardTheme: { theme: StandardTheme, isLight: true },
|
||||
StandardDarkTheme: { theme: StandardDarkTheme, isLight: false },
|
||||
PinkTheme: { theme: PinkTheme, isLight: true },
|
||||
PinkDarkTheme: { theme: PinkDarkTheme, isLight: false },
|
||||
BlackWhiteTheme: { theme: BlackWhiteTheme, isLight: true },
|
||||
OliveTheme: { theme: OliveTheme, isLight: true },
|
||||
YellowTheme: { theme: YellowTheme, isLight: true },
|
||||
GoldDarkTheme: { theme: GoldDarkTheme, isLight: false },
|
||||
PurpleTheme: { theme: PurpleTheme, isLight: true },
|
||||
BlueTheme: { theme: BlueTheme, isLight: true },
|
||||
BlueDarkTheme: { theme: BlueDarkTheme, isLight: false },
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user