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

fix some types

Browse Source 
remove some ts-ignore's
refactor stores
This commit is contained in:
nflnkr 2024-01-30 19:49:33 +03:00
parent 606472d182
commit af1264a170
25 changed files with 2061 additions and 2122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/api/quizRelase.ts
View File

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

89
src/model/settingsData.ts
View File

@ -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 {
description: string;
id: number;
page: number;
required: boolean;
title: string;
type: string;
content: unknown;
}

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

@ -1,379 +1,363 @@
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;
showResultForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
currentQuestion: any;
showResultForm: boolean;
setShowContactForm: (show: boolean) => void;
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,
setShowContactForm,
setShowResultForm,
currentQuestion,
showResultForm,
setShowContactForm,
setShowResultForm,
}: ContactFormProps) => {
const theme = useTheme();
const { settings, items } = useQuestionsStore()
const theme = useTheme();
const { settings, items } = useQuestionsStore()
const [ready, setReady] = useState(false)
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [text, setText] = useState("")
const [adress, setAdress] = useState("")
const [ready, setReady] = useState(false)
const [name, setName] = useState("")
const [email, setEmail] = useState("")
const [phone, setPhone] = useState("")
const [text, setText] = useState("")
const [adress, setAdress] = useState("")
const fireOnce = useRef(true)
const [fire, setFire] = useState(false)
const isMobile = useMediaQuery(theme.breakpoints.down(850));
const fireOnce = useRef(true)
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) => {
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 resultQuestion: QuizQuestionResult = items.find((question): question is QuizQuestionResult => {
if (settings?.cfg.haveRoot) { //ветвимся
return (
question.type === "result" &&
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: 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,
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
}
}
}
);
const inputHC = async () => {
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
if (Object.keys(body).length > 0) {
try {
await sendFC({
questionId: resultQuestion?.id,
body: body,
//@ts-ignore
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
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;
}
}
}
//@ts-ignore
let FCcopy: any = settings?.cfg.formContact.fields || settings?.cfg.formContact;
const isWide = Object.keys(filteredFC).length > 2;
let filteredFC: any = {}
for (let i in FCcopy) {
let field = FCcopy[i]
console.log(filteredFC)
if (field.used) {
filteredFC[i] = field
}
}
let isWide = Object.keys(filteredFC).length > 2
console.log(isWide)
if (!settings) throw new Error("settings is null");
if (!resultQuestion) return <ApologyPage message="не получилось найти результат для этой ветки :(" />
if (!resultQuestion) return <ApologyPage message="не получилось найти результат для этой ветки :(" />
return (
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.palette.background.default,
height: "100vh",
overflow: "auto",
"&::-webkit-scrollbar": { width: "0", display: "none", msOverflowStyle: "none" },
scrollbarWidth: "none",
msOverflowStyle: "none"
}}
>
<Box
sx={{
width: isWide && !isMobile ? "100%" : (isMobile ? undefined : "530px"),
borderRadius: "4px",
height: "90vh",
display: isWide && !isMobile ? "flex" : undefined
}}
>
return (
<Box
sx={{
width: isWide && !isMobile ? "100%" : undefined,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
borderRight: isWide && !isMobile ? "1px solid gray" : undefined
display: "flex",
alignItems: "center",
justifyContent: "center",
backgroundColor: theme.palette.background.default,
height: "100vh",
overflow: "auto",
"&::-webkit-scrollbar": { width: "0", display: "none", msOverflowStyle: "none" },
scrollbarWidth: "none",
msOverflowStyle: "none"
}}
>
<Typography
sx={{
textAlign: "center",
m: "20px 0",
fontSize: "28px",
color: theme.palette.text.primary
}}
>
{settings?.cfg.formContact.title || "Заполните форму, чтобы получить результаты теста"}
</Typography>
{
settings?.cfg.formContact.desc &&
<Typography
sx={{
color: theme.palette.text.primary,
textAlign: "center",
m: "20px 0",
fontSize: "18px"
}}
>
{settings?.cfg.formContact.desc}
</Typography>
}
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
backgroundColor: theme.palette.background.default,
p: "30px"
}}>
<Box
sx={{
display: "flex",
flexDirection: "column",
my: "20px"
}}
>
<Inputs
name={name} setName={setName}
email={email} setEmail={setEmail}
phone={phone} setPhone={setPhone}
text={text} setText={setText}
adress={adress} setAdress={setAdress}
/>
</Box>
{
// resultQuestion &&
// 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
enqueueSnackbar("Данные успешно отправлены")
} catch (e) {
enqueueSnackbar("повторите попытку позже")
}
if ((settings?.cfg.resultInfo.showResultForm === "after" || settings?.cfg.resultInfo.when === "email") && !checkEmptyData({ resultData: resultQuestion })) {
setShowContactForm(false)
setShowResultForm(true)
}
} else {
enqueueSnackbar("Пожалуйста, заполните поля")
}
}
setFire(false)
} else {
enqueueSnackbar("введена некорректная почта")
}
<Box
sx={{
width: isWide && !isMobile ? "100%" : (isMobile ? undefined : "530px"),
borderRadius: "4px",
height: "90vh",
display: isWide && !isMobile ? "flex" : undefined
}}
>
{settings?.cfg.formContact?.button || "Получить результаты"}
</Button>
)}
>
<Box
sx={{
width: isWide && !isMobile ? "100%" : undefined,
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
borderRight: isWide && !isMobile ? "1px solid gray" : undefined
}}
>
<Typography
sx={{
textAlign: "center",
m: "20px 0",
fontSize: "28px",
color: theme.palette.text.primary
}}
>
{settings?.cfg.formContact.title || "Заполните форму, чтобы получить результаты теста"}
<Box
sx={{
display: "flex",
mt: "20px",
width: isMobile ? "300px" : "450px",
}}
>
<CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} />
<Typography sx={{ color: theme.palette.text.primary }}>
С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных </Link>
&ensp;и&ensp;
<Link href={"https://shub.pena.digital/docs/privacy"} target="_blank"> Политикой конфиденциальности </Link>
&ensp;ознакомлен
</Typography>
</Typography>
{
settings?.cfg.formContact.desc &&
<Typography
sx={{
color: theme.palette.text.primary,
textAlign: "center",
m: "20px 0",
fontSize: "18px"
}}
>
{settings?.cfg.formContact.desc}
</Typography>
}
</Box>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
mt: "20px",
gap: "15px"
}}
>
<NameplateLogo style={{
fontSize: "34px",
//@ts-ignore
color: mode[settings.cfg.theme] ? "#151515" : "#FFFFFF"
}} />
<Typography sx={{
fontSize: "20px",
//@ts-ignore
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
}}>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
</Box >
</Box >
);
<Box
sx={{
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
backgroundColor: theme.palette.background.default,
p: "30px"
}}>
<Box
sx={{
display: "flex",
flexDirection: "column",
my: "20px"
}}
>
<Inputs
name={name} setName={setName}
email={email} setEmail={setEmail}
phone={phone} setPhone={setPhone}
text={text} setText={setText}
adress={adress} setAdress={setAdress}
/>
</Box>
{
// resultQuestion &&
// 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
enqueueSnackbar("Данные успешно отправлены")
} catch (e) {
enqueueSnackbar("повторите попытку позже")
}
if ((settings?.cfg.resultInfo.showResultForm === "after" || settings?.cfg.resultInfo.when === "email") && !checkEmptyData({ resultData: resultQuestion })) {
setShowContactForm(false)
setShowResultForm(true)
}
} else {
enqueueSnackbar("Пожалуйста, заполните поля")
}
}
setFire(false)
} else {
enqueueSnackbar("введена некорректная почта")
}
}}
>
{settings?.cfg.formContact?.button || "Получить результаты"}
</Button>
)}
<Box
sx={{
display: "flex",
mt: "20px",
width: isMobile ? "300px" : "450px",
}}
>
<CustomCheckbox label="" handleChange={({ target }) => { setReady(target.checked) }} checked={ready} colorIcon={theme.palette.primary.main} />
<Typography sx={{ color: theme.palette.text.primary }}>
С&ensp;
<Link href={"https://shub.pena.digital/ppdd"} target="_blank">
Положением об обработке персональных данных </Link>
&ensp;и&ensp;
<Link href={"https://shub.pena.digital/docs/privacy"} target="_blank"> Политикой конфиденциальности </Link>
&ensp;ознакомлен
</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
mt: "20px",
gap: "15px"
}}
>
<NameplateLogo style={{
fontSize: "34px",
color: quizThemes[settings.cfg.theme].isLight ? "#151515" : "#FFFFFF"
}} />
<Typography sx={{
fontSize: "20px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF", whiteSpace: "nowrap"
}}>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
</Box >
</Box >
);
};
const Inputs = ({
name, setName,
email, setEmail,
phone, setPhone,
text, setText,
adress, setAdress
name, setName,
email, setEmail,
phone, setPhone,
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
//@ts-ignore
const FC: any = settings?.cfg.formContact.fields || settings?.cfg.formContact
//@ts-ignore
const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
//@ts-ignore
const Email = <CustomInput
//@ts-ignore
const Name = <CustomInput onChange={({ target }) => setName(target.value)} id={name} title={FC["name"].innerText || "Введите имя"} desc={FC["name"].text || "имя"} Icon={NameIcon} />
//@ts-ignore
const Email = <CustomInput
error = {!EMAIL_REGEXP.test(email)}
label={!EMAIL_REGEXP.test(email) ? "" : "Некорректная почта"}
//@ts-ignore
onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
//@ts-ignore
const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
//@ts-ignore
const Text = <CustomInput onChange={({ target }) => setText(target.value)} id={text} title={FC["text"].innerText || "Введите фамилию"} desc={FC["text"].text || "фамилию"} Icon={TextIcon} />
//@ts-ignore
const Adress = <CustomInput onChange={({ target }) => setAdress(target.value)} id={adress} title={FC["address"].innerText || "Введите адрес"} desc={FC["address"].text || "адрес"} Icon={AddressIcon} />
error = {!EMAIL_REGEXP.test(email)}
label={!EMAIL_REGEXP.test(email) ? "" : "Некорректная почта"}
//@ts-ignore
onChange={({ target }) => setEmail(target.value)} id={email} title={FC["email"].innerText || "Введите Email"} desc={FC["email"].text || "Email"} Icon={EmailIcon} />
//@ts-ignore
const Phone = <CustomInput onChange={({ target }) => setPhone(target.value)} id={phone} title={FC["phone"].innerText || "Введите номер телефона"} desc={FC["phone"].text || "номер телефона"} Icon={PhoneIcon} />
//@ts-ignore
const Text = <CustomInput onChange={({ target }) => setText(target.value)} id={text} title={FC["text"].innerText || "Введите фамилию"} desc={FC["text"].text || "фамилию"} Icon={TextIcon} />
//@ts-ignore
const Adress = <CustomInput onChange={({ target }) => setAdress(target.value)} id={adress} title={FC["address"].innerText || "Введите адрес"} desc={FC["address"].text || "адрес"} Icon={AddressIcon} />
//@ts-ignore
if (Object.values(FC).some((data) => data.used)) {
return <>
{FC["name"].used ? Name : <></>}
{FC["email"].used ? Email : <></>}
{FC["phone"].used ? Phone : <></>}
{FC["text"].used ? Text : <></>}
{FC["address"].used ? Adress : <></>}
</>
} else {
return <>
{Name}
{Email}
{Phone}
</>
}
//@ts-ignore
if (Object.values(FC).some((data) => data.used)) {
return <>
{FC["name"].used ? Name : <></>}
{FC["email"].used ? Email : <></>}
{FC["phone"].used ? Phone : <></>}
{FC["text"].used ? Text : <></>}
{FC["address"].used ? Adress : <></>}
</>
} else {
return <>
{Name}
{Email}
{Phone}
</>
}
}
const CustomInput = ({ title, desc, Icon, onChange }: any) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
//@ts-ignore
return <Box m="15px 0">
<Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(600));
<TextField
onChange={onChange}
sx={{
width: isMobile ? "300px" : "350px",
}}
placeholder={desc}
InputProps={{
startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
}}
/>
</Box>
return (
<Box m="15px 0">
<Typography mb="7px" color={theme.palette.text.primary}>{title}</Typography>
<TextField
onChange={onChange}
sx={{
width: isMobile ? "300px" : "350px",
}}
placeholder={desc}
InputProps={{
startAdornment: <InputAdornment position="start"><Icon color="gray" /></InputAdornment>,
}}
/>
</Box>
)
}

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

@ -1,322 +1,298 @@
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;
question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
question: AnyTypedQuizQuestion;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
};
export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setShowResultForm }: FooterProps) => {
const theme = useTheme();
const theme = useTheme();
const { settings, items } = useQuestionsStore();
const { answers } = useQuizViewStore();
const { settings, items } = useQuestionsStore();
const answers = useQuizViewStore(state => state.answers);
const mode = modes;
const [stepNumber, setStepNumber] = useState(1);
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 isLinear = !items.some(({ content }) => content.rule.parentId === "root");
const isMobileMini = useMediaQuery(theme.breakpoints.down(382));
const linear = !items.find(({ content }) => content.rule.parentId === "root");
const getNextQuestionId = useCallback(() => {
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг");
console.log(question);
console.log("От вот этого /|");
let readyBeNextQuestion = "";
useEffect(() => {
// Логика для аргумента disabled у кнопки "Назад"
if (linear) {
const questionIndex = items.findIndex(({ id }) => id === question.id);
//вопрос обязателен, анализируем ответ и условия ветвления
if (answers.length) {
const answer = answers.find(({ questionId }) => questionId === 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);
}
}
(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
);
// Логика для аргумента disabled у кнопки "Далее"
const answer = answers.find(({ questionId }) => questionId === question.id);
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; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
if ("required" in question.content && question.content.required && answer) {
setDisableNextButton(false);
return;
}
return;
}
if (String(rules[0].answers[i]) === answer?.answer) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
}
}
});
if ("required" in question.content && question.content.required && !answer) {
setDisableNextButton(true);
if (readyBeNextQuestion) return readyBeNextQuestion;
}
return;
}
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];
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); //после+пустая
//ничё не нашли, ищем резулт
console.log("ничё не нашли, ищем резулт ");
return items.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, 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 {
setShowContactForm(true); //после+заполнена = показать ФК
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);
const getNextQuestionId = () => {
console.log("Смотрим какой вопрос будет дальше. Что у нас сегодня вкусненького? Щя покажу от какого вопроса мы ищем следующий шаг")
console.log(question)
console.log("От вот этого /|")
let readyBeNextQuestion = "";
if ("required" in question.content && question.content.required && answer) {
return false;
}
//вопрос обязателен, анализируем ответ и условия ветвления
if (answers.length) {
const answer = answers.find(({ questionId }) => questionId === question.id);
if ("required" in question.content && question.content.required && !answer) {
return true;
}
if (isLinear) {
return false;
}
(question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
let longerArray = Math.max(
rules[0].answers.length,
answer?.answer && Array.isArray(answer?.answer) ? answer?.answer.length : [answer?.answer].length
);
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
return false;
} else {
const nextQuestion = getQuestionById(question.content.rule.default);
for (
var i = 0;
i < longerArray;
i++ // Цикл по всем эле­мен­там бОльшего массива
) {
if (Array.isArray(answer?.answer)) {
if (answer?.answer.find((item) => String(item === rules[0].answers[i]))) {
readyBeNextQuestion = next; // Ес­ли хоть один эле­мент от­ли­ча­ет­ся, мас­си­вы не рав­ны
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 (isLinear) {
setStepNumber(q => q - 1);
const questionIndex = items.findIndex(({ id }) => id === question.id);
const previousQuestion = items[questionIndex - 1];
if (previousQuestion) {
setCurrentQuestion(previousQuestion);
}
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 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
};
const followPreviousStep = () => {
if (linear) {
setStepNumber(q => q - 1)
const questionIndex = items.findIndex(({ id }) => id === question.id);
const previousQuestion = items[questionIndex - 1];
if (previousQuestion) {
setCurrentQuestion(previousQuestion);
}
return;
}
if (question?.content.rule.parentId !== "root") {
const parent = getQuestionById(question?.content.rule.parentId);
if (parent?.type) {
setCurrentQuestion(parent);
} else {
enqueueSnackbar("не могу получить предыдущий вопрос");
}
} else {
enqueueSnackbar("вы находитесь на первом вопросе");
}
};
const followNextStep = () => {
if (linear) {
setStepNumber(q => q + 1)
const questionIndex = items.findIndex(({ id }) => id === question.id);
const nextQuestion = items[questionIndex + 1];
if (nextQuestion && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
} else {
//@ts-ignore
showResult(items.find(q => q.content.rule.parentId === "line"));
}
return;
}
const nextQuestionId = getNextQuestionId();
console.log(nextQuestionId)
if (nextQuestionId) {
const nextQuestion = getQuestionById(nextQuestionId);
console.log(nextQuestion)
if (nextQuestion?.type && nextQuestion.type === "result") {
showResult(nextQuestion);
} else {
//@ts-ignore
setCurrentQuestion(nextQuestion);
}
} else {
enqueueSnackbar("не могу получить последующий вопрос");
}
};
return (
<Box
sx={{
position: "relative",
padding: "15px 0",
borderTop: `1px solid ${theme.palette.grey[400]}`,
height: '75px',
display: "flex"
}}
>
<Box
sx={{
width: "100%",
maxWidth: "1000px",
padding: "0 10px",
margin: "0 auto",
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
{/*{mode[settings.cfg.theme] ? (*/}
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{linear &&
<>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
color: theme.palette.text.primary,
}}
>
<Typography>Шаг</Typography>
<Typography
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
borderRadius: "50%",
width: "30px",
height: "30px",
color: "#FFF",
background: theme.palette.primary.main,
}}
>
{stepNumber}
</Typography>
<Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{items.filter(q => q.type !== "result").length}
</Typography>
</Box>
</>
}
if (question?.content.rule.parentId !== "root") {
const parent = getQuestionById(question?.content.rule.parentId);
if (parent?.type) {
setCurrentQuestion(parent);
} else {
enqueueSnackbar("не могу получить предыдущий вопрос");
}
} else {
enqueueSnackbar("вы находитесь на первом вопросе");
}
};
const followNextStep = () => {
if (isLinear) {
setStepNumber(q => q + 1);
const questionIndex = items.findIndex(({ id }) => id === question.id);
const nextQuestion = items[questionIndex + 1];
if (nextQuestion && nextQuestion.type !== "result") {
setCurrentQuestion(nextQuestion);
} else {
//@ts-ignore
showResult(items.find(q => q.content.rule.parentId === "line"));
}
return;
}
const nextQuestionId = getNextQuestionId();
if (nextQuestionId) {
const nextQuestion = getQuestionById(nextQuestionId);
if (nextQuestion?.type && nextQuestion.type === "result") {
showResult(nextQuestion);
} else {
//@ts-ignore
setCurrentQuestion(nextQuestion);
}
} else {
enqueueSnackbar("не могу получить последующий вопрос");
}
};
return (
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
// color: theme.palette.grey1.main,
}}
sx={{
position: "relative",
padding: "15px 0",
borderTop: `1px solid ${theme.palette.grey[400]}`,
height: '75px',
display: "flex",
}}
>
{/* <Typography>Шаг</Typography>
<Box
sx={{
width: "100%",
maxWidth: "1000px",
padding: "0 10px",
margin: "0 auto",
display: "flex",
alignItems: "center",
gap: "10px",
}}
>
{/*{mode[settings.cfg.theme] ? (*/}
{/* <NameplateLogoFQ style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*):(*/}
{/* <NameplateLogoFQDark style={{ fontSize: "34px", width:"200px", height:"auto" }} />*/}
{/*)}*/}
{isLinear &&
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
color: theme.palette.text.primary,
}}
>
<Typography>Шаг</Typography>
<Typography
sx={{
display: "flex",
justifyContent: "center",
alignItems: "center",
fontWeight: "bold",
borderRadius: "50%",
width: "30px",
height: "30px",
color: "#FFF",
background: theme.palette.primary.main,
}}
>
{stepNumber}
</Typography>
<Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{items.filter(q => q.type !== "result").length}
</Typography>
</Box>
}
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "10px",
marginRight: "auto",
// color: theme.palette.grey1.main,
}}
>
{/* <Typography>Шаг</Typography>
<Typography
sx={{
display: "flex",
@ -331,36 +307,33 @@ export const Footer = ({ setCurrentQuestion, question, setShowContactForm, setSh
}}
>
{stepNumber} */}
{/* </Typography> */}
{/* <Typography>Из</Typography>
{/* </Typography> */}
{/* <Typography>Из</Typography>
<Typography sx={{ fontWeight: "bold" }}>
{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>
</Box>
</Box>
<Button
disabled={disablePreviousButton}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px",}}
onClick={followPreviousStep}
>
{isMobileMini ? (
"←"
) : (
"← Назад"
)}
</Button>
<Button
disabled={disableNextButton}
variant="contained"
sx={{ fontSize: "16px", padding: "10px 15px" }}
onClick={followNextStep}
>
Далее →
</Button>
</Box>
</Box>
);
);
};

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

@ -1,141 +1,140 @@
import { useState, useEffect } from "react";
import {Box, useMediaQuery, useTheme} from "@mui/material";
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 { NameplateLogoFQ } from "@icons/NameplateLogoFQ";
import { NameplateLogoFQDark } from "@icons/NameplateLogoFQDark";
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[];
};
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 isMobile = useMediaQuery(theme.breakpoints.down(650));
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,
};
useEffect(() => {
export const Question = ({ questions }: QuestionProps) => {
const { settings } = useQuestionsStore()
const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down(650));
const [currentQuestion, setCurrentQuestion] = useState<AnyTypedQuizQuestion>();
const [showContactForm, setShowContactForm] = useState<boolean>(false);
const [showResultForm, setShowResultForm] = useState<boolean>(false);
const mode = modes;
console.log("currentQuestion ", currentQuestion)
useEffect(() => {
if (settings?.cfg.haveRoot) {//ветвимся
const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");
if (settings?.cfg.haveRoot) {//ветвимся
const nextQuestion = getQuestionById(settings?.cfg.haveRoot || "");
if (nextQuestion?.type) {
setCurrentQuestion(nextQuestion);
return;
}
if (nextQuestion?.type) {
setCurrentQuestion(nextQuestion);
return;
}
} else {//идём прямо
setCurrentQuestion(questions[0]);
}
} else {//идём прямо
setCurrentQuestion(questions[0]);
}
}, []);
}, []);
if (!settings) throw new Error("settings is null");
if (!currentQuestion || currentQuestion.type === "result") return "не смог отобразить вопрос";
if (!currentQuestion) return <>не смог отобразить вопрос</>;
const QuestionComponent =
QUESTIONS_MAP[currentQuestion.type as Exclude<QuestionType, "nonselected">];
return (
<Box
sx={{
backgroundColor: theme.palette.background.default,
height: isMobile ? undefined : "100vh"
}}
>
{!showContactForm && !showResultForm && (
return (
<Box
sx={{
height: "calc(100vh - 75px)",
width: "100%",
maxWidth: "1440px",
padding: "40px 25px 20px",
margin: "0 auto",
overflow: "auto",
display: "flex",
flexDirection: "column",
justifyContent: "space-between"
}}
sx={{
backgroundColor: theme.palette.background.default,
height: isMobile ? undefined : "100vh"
}}
>
<QuestionComponent currentQuestion={currentQuestion} />
{mode[settings?.cfg.theme] ? (
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
) : (
<NameplateLogoFQDark style={{ fontSize: "34px", width: "200px", height: "auto" }} />
)}
{!showContactForm && !showResultForm && (
<Box
sx={{
height: "calc(100vh - 75px)",
width: "100%",
maxWidth: "1440px",
padding: "40px 25px 20px",
margin: "0 auto",
overflow: "auto",
display: "flex",
flexDirection: "column",
justifyContent: "space-between"
}}
>
<QuestionByType question={currentQuestion} />
{quizThemes[settings.cfg.theme].isLight ? (
<NameplateLogoFQ style={{ fontSize: "34px", width: "200px", height: "auto" }} />
) : (
<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}
/>
)}
</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}
/>
)}
</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);
}
}

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

@ -1,234 +1,228 @@
import {
Box,
Typography,
Button,
useMediaQuery,
useTheme,
Box,
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;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
currentQuestion: any;
showContactForm: boolean;
setShowContactForm: (show: boolean) => void;
setShowResultForm: (show: boolean) => void;
};
export const ResultForm = ({
currentQuestion,
showContactForm,
setShowContactForm,
setShowResultForm,
currentQuestion,
showContactForm,
setShowContactForm,
setShowResultForm,
}: ResultFormProps) => {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { settings, items } = useQuestionsStore();
const mode = modes;
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const { settings, items } = useQuestionsStore();
if (!settings) throw new Error("settings is null");
const searchResult = (): QuizQuestionResult => {
if (Boolean(settings?.cfg.haveRoot)) {
//ищём для ветвления
return (items.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
) ||
items.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === "line"
)) as QuizQuestionResult;
} else {
return items.find(
(question) =>
question.type === "result" &&
question.content.rule.parentId === "line"
) as QuizQuestionResult;
}
};
const resultQuestion = searchResult();
const resultQuestion = useMemo(() => {
if (settings?.cfg.haveRoot) {
//ищём для ветвления
return (items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === currentQuestion.content.id
) || items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
));
} else {
return items.find(
(question): question is QuizQuestionResult =>
question.type === "result" &&
question.content.rule.parentId === "line"
);
}
}, [currentQuestion.content.id, items, settings?.cfg.haveRoot]);
const followNextForm = useCallback(() => {
setShowResultForm(false);
setShowContactForm(true);
},[setShowContactForm, setShowResultForm]);
useEffect(() => {
if (!resultQuestion) {
followNextForm();
}
}, [followNextForm, resultQuestion]);
if (!resultQuestion) return null;
const followNextForm = () => {
setShowResultForm(false);
setShowContactForm(true);
};
console.log(resultQuestion);
if (resultQuestion === null || resultQuestion === undefined) {
followNextForm();
return <></>;
} else {
return (
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "space-between",
height: "100vh",
width: "100vw",
pt: "28px",
overflow: "auto",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "start",
width: isMobile ? "100%" : "490px",
padding: isMobile ? "0 16px" : undefined,
}}
>
{
//@ts-ignore
!resultQuestion?.content.useImage &&
resultQuestion.content.video && (
<YoutubeEmbedIframe
//@ts-ignore
videoUrl={resultQuestion.content.video}
containerSX={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
/>
)
}
{
//@ts-ignore
resultQuestion?.content.useImage && resultQuestion.content.back && (
<Box
component="img"
src={resultQuestion.content.back}
sx={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
></Box>
)
}
{resultQuestion.description !== "" &&
resultQuestion.description !== " " && (
<Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{resultQuestion.description}
</Typography>
)}
<Typography
sx={{
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{resultQuestion.title}
</Typography>
{
//@ts-ignore
resultQuestion.content.text !== "" &&
//@ts-ignore
resultQuestion.content.text !== " " && (
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{
//@ts-ignore
resultQuestion.content.text
}
</Typography>
)
}
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "center",
mt: "15px",
gap: "10px",
}}
>
<NameplateLogo
style={{
fontSize: "34px",
color: mode[settings.cfg.theme] ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{
fontSize: "20px",
//@ts-ignore
color: mode[settings.cfg.theme] ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
<Box
sx={{
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%",
flexDirection: "column",
display: "flex",
justifyContent: "center",
alignItems: "center",
p: "20px",
justifyContent: "space-between",
height: "100vh",
width: "100vw",
pt: "28px",
overflow: "auto",
}}
>
{settings?.cfg.resultInfo.showResultForm === "before" && (
<Button
onClick={followNextForm}
variant="contained"
>
<Box
sx={{
p: "10px 20px",
width: "210px",
height: "50px",
display: "flex",
flexDirection: "column",
alignItems: "start",
width: isMobile ? "100%" : "490px",
padding: isMobile ? "0 16px" : undefined,
}}
>
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
)}
{settings?.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && (
<Button
href={resultQuestion.content.redirect}
variant="contained"
sx={{ p: "10px 20px", width: "210px", height: "50px" }}
>
{
!resultQuestion?.content.useImage && resultQuestion.content.video && (
<YoutubeEmbedIframe
videoUrl={resultQuestion.content.video}
containerSX={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
/>
)
}
{
resultQuestion?.content.useImage && resultQuestion.content.back && (
<Box
component="img"
src={resultQuestion.content.back}
sx={{
width: isMobile ? "100%" : "490px",
height: isMobile ? "100%" : "280px",
}}
></Box>
)
}
{resultQuestion.description !== "" &&
resultQuestion.description !== " " && (
<Typography
sx={{
fontSize: "23px",
fontWeight: 700,
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{resultQuestion.description}
</Typography>
)}
<Typography
sx={{
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{resultQuestion.content.hint.text || "Перейти на сайт"}
</Button>
)}
</Box>
{resultQuestion.title}
</Typography>
{
resultQuestion.content.text !== "" &&
resultQuestion.content.text !== " " && (
<Typography
sx={{
fontSize: "18px",
m: "20px 0",
color: theme.palette.text.primary,
}}
>
{
resultQuestion.content.text
}
</Typography>
)
}
</Box>
<Box width="100%">
<Box
sx={{
display: "flex",
width: "100%",
justifyContent: "end",
px: "20px",
}}
>
<Box
sx={{
display: "flex",
alignItems: "center",
mt: "15px",
gap: "10px",
}}
>
<NameplateLogo
style={{
fontSize: "34px",
color: quizThemes[settings.cfg.theme].isLight ? "#000000" : "#F5F7FF",
}}
/>
<Typography
sx={{
fontSize: "20px",
color: quizThemes[settings.cfg.theme].isLight ? "#4D4D4D" : "#F5F7FF",
whiteSpace: "nowrap",
}}
>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
<Box
sx={{
boxShadow: "0 0 15px 0 rgba(0,0,0,.08)",
width: "100%",
flexDirection: "column",
display: "flex",
justifyContent: "center",
alignItems: "center",
p: "20px",
}}
>
{settings?.cfg.resultInfo.showResultForm === "before" && (
<Button
onClick={followNextForm}
variant="contained"
sx={{
p: "10px 20px",
width: "210px",
height: "50px",
}}
>
{resultQuestion.content.hint.text || "Узнать подробнее"}
</Button>
)}
{settings?.cfg.resultInfo.showResultForm === "after" &&
resultQuestion.content.redirect && (
<Button
href={resultQuestion.content.redirect}
variant="contained"
sx={{ p: "10px 20px", width: "210px", height: "50px" }}
>
{resultQuestion.content.hint.text || "Перейти на сайт"}
</Button>
)}
</Box>
</Box>
</Box>
</Box>
);
}
};

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

@ -1,473 +1,471 @@
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 {
setVisualStartPage: (a: boolean) => void;
setVisualStartPage: (a: boolean) => void;
}
export const StartPageViewPublication = ({ setVisualStartPage }: Props) => {
const theme = useTheme();
const { settings } = useQuestionsStore()
const mode = modes;
const { isMobileDevice } = useUADevice();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const theme = useTheme();
const { settings } = useQuestionsStore();
const { isMobileDevice } = useUADevice();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
if (!settings) return null;
if (!settings) throw new Error("settings is null");
console.log(settings);
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
};
const handleCopyNumber = () => {
navigator.clipboard.writeText(settings.cfg.info.phonenumber);
};
const background =
settings.cfg.startpage.background.type === "image" ? (
settings.cfg.startpage.background.desktop ? (
<img
src={settings.cfg.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
overflow: "hidden",
}}
/>
) : null
) : settings.cfg.startpage.background.type === "video" ? (
settings.cfg.startpage.background.video ? (
<YoutubeEmbedIframe
videoUrl={settings.cfg.startpage.background.video}
containerSX={{
width:
settings.cfg.startpageType === "centered"
? "550px"
: settings.cfg.startpageType === "expanded"
? "100vw"
: "100%",
height:
settings.cfg.startpageType === "centered"
? "275px"
: settings.cfg.startpageType === "expanded"
? "100vh"
: "100%",
borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
overflow: "hidden",
"& iframe": {
width: "100%",
height: "100%",
transform:
settings.cfg.startpageType === "centered"
? ""
: settings.cfg.startpageType === "expanded"
? "scale(1.5)"
: "scale(2.4)",
},
}}
/>
) : null
) : null;
return (
<Paper
className="settings-preview-draghandle"
sx={{
height: "100vh",
width: "100vw",
background:
settings.cfg.startpageType === "expanded" && !isMobile
? settings.cfg.startpage.position === "left"
? "linear-gradient(90deg,#272626,transparent)"
: settings.cfg.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: theme.palette.background.default,
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
}}
>
<QuizPreviewLayoutByType
quizHeaderBlock={
<Box p={settings.cfg.startpageType === "standard" ? "" : "16px"}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo && (
const background =
settings.cfg.startpage.background.type === "image" ? (
settings.cfg.startpage.background.desktop ? (
<img
src={settings.cfg.startpage.logo}
style={{
height: "37px",
maxWidth: "43px",
objectFit: "cover",
}}
alt=""
src={settings.cfg.startpage.background.desktop}
alt=""
style={{
width: "100%",
height: "100%",
objectFit: "cover",
overflow: "hidden",
}}
/>
)}
<Typography
sx={{
fontSize: "14px",
color: settings.cfg.startpageType === "expanded"
&& !isMobile ? "white" : theme.palette.text.primary
}}
>{settings.cfg.info.orgname}</Typography>
</Box>
<Link mb="16px" href={settings.cfg.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.site}
</Typography>
</Link>
</Box>
}
quizMainBlock={
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems:
settings.cfg.startpageType === "centered"
? "center"
: settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center"
? "center"
: "start"
: "start",
mt: "28px",
width: "100%",
}}
>
<Typography
sx={{
fontWeight: "bold",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign: settings.cfg.startpageType === "centered" ? "center" : "-moz-initial",
color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
}}
>
{settings.name}
</Typography>
<Typography
sx={{
fontSize: "16px",
m: "16px 0",
overflowWrap: "break-word",
width: "100%",
textAlign: settings.cfg.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{settings.cfg.startpage.description}
</Typography>
<Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
}}
onClick={() => setVisualStartPage(false)}
>
{settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
) : null
) : settings.cfg.startpage.background.type === "video" ? (
settings.cfg.startpage.background.video ? (
<YoutubeEmbedIframe
videoUrl={settings.cfg.startpage.background.video}
containerSX={{
width:
settings.cfg.startpageType === "centered"
? "550px"
: settings.cfg.startpageType === "expanded"
? "100vw"
: "100%",
height:
settings.cfg.startpageType === "centered"
? "275px"
: settings.cfg.startpageType === "expanded"
? "100vh"
: "100%",
borderRadius: settings.cfg.startpageType === "centered" ? "10px" : "0",
overflow: "hidden",
"& iframe": {
width: "100%",
height: "100%",
transform:
settings.cfg.startpageType === "centered"
? ""
: settings.cfg.startpageType === "expanded"
? "scale(1.5)"
: "scale(2.4)",
},
}}
/>
) : null
) : null;
<Box
sx={{
mt: "46px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
flexDirection: isMobile ? "column" : "row"
}}
>
<Box sx={{ maxWidth: "300px" }}>
{settings.cfg.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
)}
<Typography sx={{ width: "100%",
overflowWrap: "break-word",
fontSize: "12px", textAlign: "end",
color:
settings.cfg.startpageType === "expanded" && !isMobile
? "white"
: theme.palette.text.primary,
}}>
{settings.cfg.info.law}
</Typography>
</Box>
return (
<Paper
className="settings-preview-draghandle"
sx={{
height: "100vh",
width: "100vw",
background:
settings.cfg.startpageType === "expanded" && !isMobile
? settings.cfg.startpage.position === "left"
? "linear-gradient(90deg,#272626,transparent)"
: settings.cfg.startpage.position === "center"
? "linear-gradient(180deg,transparent,#272626)"
: "linear-gradient(270deg,#272626,transparent)"
: theme.palette.background.default,
<Box
sx={{
display: "flex",
alignItems: "center",
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", }}>
Сделано на PenaQuiz
</Typography>
</Box>
</Box>
</>
}
backgroundBlock={background}
startpageType={settings.cfg.startpageType}
alignType={settings.cfg.startpage.position}
/>
</Paper>
);
color: settings.cfg.startpageType === "expanded" ? "white" : "black",
}}
>
<QuizPreviewLayoutByType
quizHeaderBlock={
<Box p={settings.cfg.startpageType === "standard" ? "" : "16px"}>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "20px",
mb: "7px",
}}
>
{settings.cfg.startpage.logo && (
<img
src={settings.cfg.startpage.logo}
style={{
height: "37px",
maxWidth: "43px",
objectFit: "cover",
}}
alt=""
/>
)}
<Typography
sx={{
fontSize: "14px",
color: settings.cfg.startpageType === "expanded"
&& !isMobile ? "white" : theme.palette.text.primary
}}
>{settings.cfg.info.orgname}</Typography>
</Box>
<Link mb="16px" href={settings.cfg.info.site}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.site}
</Typography>
</Link>
</Box>
}
quizMainBlock={
<>
<Box
sx={{
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems:
settings.cfg.startpageType === "centered"
? "center"
: settings.cfg.startpageType === "expanded"
? settings.cfg.startpage.position === "center"
? "center"
: "start"
: "start",
mt: "28px",
width: "100%",
}}
>
<Typography
sx={{
fontWeight: "bold",
fontSize: "26px",
fontStyle: "normal",
fontStretch: "normal",
lineHeight: "1.2",
overflowWrap: "break-word",
width: "100%",
textAlign: settings.cfg.startpageType === "centered" ? "center" : "-moz-initial",
color: settings.cfg.startpageType === "expanded" && !isMobile ? "white" : theme.palette.text.primary
}}
>
{settings.name}
</Typography>
<Typography
sx={{
fontSize: "16px",
m: "16px 0",
overflowWrap: "break-word",
width: "100%",
textAlign: settings.cfg.startpageType === "centered" ? "center" : "-moz-initial",
}}
>
{settings.cfg.startpage.description}
</Typography>
<Box width={settings.cfg.startpageType === "standard" ? "100%" : "auto"}>
<Button
variant="contained"
sx={{
fontSize: "16px",
padding: "10px 15px",
width: settings.cfg.startpageType === "standard" ? "100%" : "auto",
}}
onClick={() => setVisualStartPage(false)}
>
{settings.cfg.startpage.button.trim() ? settings.cfg.startpage.button : "Пройти тест"}
</Button>
</Box>
</Box>
<Box
sx={{
mt: "46px",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
width: "100%",
flexDirection: isMobile ? "column" : "row"
}}
>
<Box sx={{ maxWidth: "300px" }}>
{settings.cfg.info.clickable ? (
isMobileDevice ? (
<Link href={`tel:${settings.cfg.info.phonenumber}`}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</Link>
) : (
<ButtonBase onClick={handleCopyNumber}>
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
</ButtonBase>
)
) : (
<Typography sx={{ fontSize: "16px", color: theme.palette.primary.main }}>
{settings.cfg.info.phonenumber}
</Typography>
)}
<Typography sx={{
width: "100%",
overflowWrap: "break-word",
fontSize: "12px", textAlign: "end",
color:
settings.cfg.startpageType === "expanded" && !isMobile
? "white"
: theme.palette.text.primary,
}}>
{settings.cfg.info.law}
</Typography>
</Box>
<Box
sx={{
display: "flex",
alignItems: "center",
gap: "15px"
}}
>
<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>
</Box>
</>
}
backgroundBlock={background}
startpageType={settings.cfg.startpageType}
alignType={settings.cfg.startpage.position}
/>
</Paper>
);
};
function QuizPreviewLayoutByType({
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
quizHeaderBlock,
quizMainBlock,
backgroundBlock,
startpageType,
alignType,
}: {
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
quizHeaderBlock: JSX.Element;
quizMainBlock: JSX.Element;
backgroundBlock: JSX.Element | null;
startpageType: QuizStartpageType;
alignType: QuizStartpageAlignType;
}) {
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
function StartPageMobile() {
return (
<Box
sx={{
display: "flex",
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "80%"
}}
>
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
width: "100%"
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)
}
switch (startpageType) {
case null:
case "standard": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
function StartPageMobile() {
return (
<Box
sx={{
display: "flex",
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined,
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: isMobile ? "100%" : "40%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: isMobile ? "80%" : undefined
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
width: isMobile ? "100%" : "60%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)}
</>
);
}
case "expanded": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 3,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
position: "absolute",
zIndex: -1,
left: 0,
top: 0,
height: "100%",
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)
}
</>
);
}
case "centered": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
overflow: "hidden",
}}
>
{quizHeaderBlock}
{backgroundBlock && (
<Box
sx={{
width: "60%",
overflow: "hidden",
display: "flex",
justifyContent: "center"
}}
flexDirection: "column-reverse",
flexGrow: 1,
justifyContent: "flex-end",
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: "80%"
}}
>
{backgroundBlock}
{quizHeaderBlock}
<Box
sx={{
height: "80%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
width: "100%"
}}
>
{quizMainBlock}
</Box>
</Box>
<Box
sx={{
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box>
)
}
</>
);
);
}
switch (startpageType) {
case null:
case "standard": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
display: "flex",
flexDirection: alignType === "left" ? (isMobile ? "column-reverse" : "row") : "row-reverse",
flexGrow: 1,
justifyContent: isMobile ? "flex-end" : undefined,
height: "100vh",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: isMobile ? "100%" : "40%",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "flex-start",
p: "25px",
height: isMobile ? "80%" : undefined
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
width: isMobile ? "100%" : "60%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)}
</>
);
}
case "expanded": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
position: "relative",
display: "flex",
justifyContent: startpageAlignTypeToJustifyContent[alignType],
flexGrow: 1,
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
}}
>
<Box
sx={{
width: "40%",
position: "relative",
padding: "16px",
zIndex: 3,
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: alignType === "center" ? "center" : "start",
}}
>
{quizHeaderBlock}
{quizMainBlock}
</Box>
<Box
sx={{
position: "absolute",
zIndex: -1,
left: 0,
top: 0,
height: "100%",
width: "100%",
overflow: "hidden",
}}
>
{backgroundBlock}
</Box>
</Box>
)
}
</>
);
}
case "centered": {
return (
<>
{isMobile ? (
<StartPageMobile />
) : (
<Box
sx={{
padding: "16px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
alignItems: "center",
height: "100%",
"&::-webkit-scrollbar": { width: 0 },
overflow: "hidden",
}}
>
{quizHeaderBlock}
{backgroundBlock && (
<Box
sx={{
width: "60%",
overflow: "hidden",
display: "flex",
justifyContent: "center"
}}
>
{backgroundBlock}
</Box>
)}
{quizMainBlock}
</Box>
)
}
</>
);
}
default:
notReachable(startpageType);
}
default:
notReachable(startpageType);
}
}
const startpageAlignTypeToJustifyContent: Record<QuizStartpageAlignType, "start" | "center" | "end"> = {
left: "start",
center: "center",
right: "end",
left: "start",
center: "center",
right: "end",
};

171
src/pages/ViewPublicationPage/index.tsx
View File

@ -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" ?
window.location.pathname.replace(/\//g, '')
:
"0bed8483-3016-4bca-b8e0-a72c3146f18b"
import.meta.env.PROD ?
window.location.pathname.replace(/\//g, '')
:
"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>();
useEffect(() => {//установка фавиконки
if (!settings) return;
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
const link = document.querySelector('link[rel="icon"]');
if (link && settings.cfg.startpage.favIcon) {
link.setAttribute("href", settings?.cfg.startpage.favIcon);
}
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)
setVisualStartPage(!settings.cfg.noStartPage);
}, [settings]);
useQuestionsStore.setState(JSON.parse(JSON.stringify({data: data}).replaceAll(/\\\" \\\"/g, '""').replaceAll(/\" \"/g, '""')).data)
const questionsCount = items.filter(({ type }) => type !== null && type !== "result").length;
} catch (e) {
//@ts-ignore
if (e?.response?.status === 423) setErrormessage("квиз не активирован")
}
if (error) {
console.log(error);
return <ApologyPage message="Что-то пошло не так" />;
}
get()
}, [])
if (isLoading || !settings) return <LoadingSkeleton />;
if (questionsCount === 0) return <ApologyPage message="Нет созданных вопросов" />;
useEffect(() => {//установка фавиконки
if (Object.values(settings).length > 0) {
const link = document.querySelector('link[rel="icon"]');
if (link && settings?.cfg.startpage.favIcon) {
link.setAttribute("href", settings?.cfg.startpage.favIcon);
}
setVisualStartPage(!settings?.cfg.noStartPage);
}
}, [settings]);
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} />
}
</Box>
</ThemeProvider>
);
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; };
}

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

@ -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",

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

@ -1,24 +1,23 @@
import {
Box,
Typography,
RadioGroup,
FormControlLabel,
Radio,
useTheme,
FormControl,
useMediaQuery
Box,
FormControl,
FormControlLabel,
Radio,
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={

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

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

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

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

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

@ -10,218 +10,221 @@ 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;
currentQuestion: QuizQuestionNumber;
};
export const Number = ({ currentQuestion }: NumberProps) => {
const { settings } = useQuestionsStore()
const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100000000000");
const theme = useTheme();
const { answers } = useQuizViewStore();
const { settings } = useQuestionsStore()
const [minRange, setMinRange] = useState<string>("0");
const [maxRange, setMaxRange] = useState<string>("100000000000");
const theme = useTheme();
const { answers } = useQuizViewStore();
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const isMobile = useMediaQuery(theme.breakpoints.down(650));
const updateMinRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
if (crowded) {
setMinRange(maxRange);
}
const updateMinRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
if (!settings) return null;
try {
if (crowded) {
setMinRange(maxRange);
}
await sendAnswer({
questionId: currentQuestion.id,
body: value,
//@ts-ignore
qid: settings.qid
})
try {
updateAnswer(currentQuestion.id, value);
await sendAnswer({
questionId: currentQuestion.id,
body: value,
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
updateAnswer(currentQuestion.id, value);
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
}, 1000);
const updateMaxRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
if (crowded) {
setMaxRange(minRange);
}
try {
}, 1000);
const updateMaxRangeDebounced = useDebouncedCallback(async (value, crowded = false) => {
if (!settings) return null;
await sendAnswer({
questionId: currentQuestion.id,
body: value,
//@ts-ignore
qid: settings.qid
})
if (crowded) {
setMaxRange(minRange);
}
try {
updateAnswer(currentQuestion.id, value);
await sendAnswer({
questionId: currentQuestion.id,
body: value,
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
updateAnswer(currentQuestion.id, value);
}, 1000);
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
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;
}, 1000);
const answer = answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string;
useEffect(() => {
if (answer) {
setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);
}
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;
if (!answer) {
setMinRange(String(currentQuestion.content.start));
setMaxRange(String(max));
}
}, []);
useEffect(() => {
if (answer) {
setMinRange(answer.split("—")[0]);
setMaxRange(answer.split("—")[1]);
}
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
paddingRight: isMobile ? "10px" : undefined
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={async (_, value) => {
if (!answer) {
setMinRange(String(currentQuestion.content.start));
setMaxRange(String(max));
}
}, []);
if (!settings) throw new Error("settings is null");
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Box
sx={{
display: "flex",
flexDirection: "column",
width: "100%",
marginTop: "20px",
gap: "30px",
paddingRight: isMobile ? "10px" : undefined
}}
>
<CustomSlider
value={
currentQuestion.content.chooseRange
? sliderValue.split("—").length || 0 > 1
? sliderValue.split("—").map((item) => window.Number(item))
: [min, min + 1]
: window.Number(sliderValue.split("—")[0])
}
min={min}
max={max}
step={currentQuestion.content.step || 1}
onChange={async (_, value) => {
const range = String(value).replace(",", "—").replace (/\D/, '');
const range = String(value).replace(",", "—").replace (/\D/, '');
updateAnswer(currentQuestion.id, range);
updateMinRangeDebounced(range, true);
updateAnswer(currentQuestion.id, range);
updateMinRangeDebounced(range, true);
}}
onChangeCommitted={(_, value) => {
if (currentQuestion.content.chooseRange) {
const range = value as number[];
}}
onChangeCommitted={(_, value) => {
if (currentQuestion.content.chooseRange) {
const range = value as number[];
setMinRange(String(range[0]));
setMaxRange(String(range[1]));
}
}}
//@ts-ignore
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,
}
}}
/>
setMinRange(String(range[0]));
setMaxRange(String(range[1]));
}
}}
sx={{
color: theme.palette.primary.main,
"& .MuiSlider-valueLabel": {
background: theme.palette.primary.main,
}
}}
/>
{!currentQuestion.content.chooseRange && (
<CustomTextField
placeholder="0"
value={answer}
onChange={async ({ target }) => {
updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
? String(max)
: window.Number(target.value) < min
? String(min)
: target.value, true);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
},
}}
/>
)}
{!currentQuestion.content.chooseRange && (
<CustomTextField
placeholder="0"
value={answer}
onChange={async ({ target }) => {
updateMinRangeDebounced(window.Number(target.value.replace (/\D/, '')) > max
? String(max)
: window.Number(target.value) < min
? String(min)
: target.value, true);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
},
}}
/>
)}
{currentQuestion.content.chooseRange && (
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={minRange}
onChange={({ target }) => {
setMinRange(target.value.replace (/\D/, ''));
{currentQuestion.content.chooseRange && (
<Box
sx={{
display: "flex",
gap: "15px",
alignItems: "center",
"& .MuiFormControl-root": { width: "auto" },
}}
>
<CustomTextField
placeholder="0"
value={minRange}
onChange={({ target }) => {
setMinRange(target.value.replace (/\D/, ''));
if (window.Number(target.value) >= window.Number(maxRange)) {
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
if (window.Number(target.value) >= window.Number(maxRange)) {
updateMinRangeDebounced(`${maxRange}—${maxRange}`, true);
return;
}
return;
}
updateMinRangeDebounced(`${target.value}—${maxRange}`);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={maxRange}
onChange={({ target }) => {
setMaxRange(target.value.replace (/\D/, ''));
updateMinRangeDebounced(`${target.value}—${maxRange}`);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
},
}}
/>
<Typography color={theme.palette.text.primary}>до</Typography>
<CustomTextField
placeholder="0"
value={maxRange}
onChange={({ target }) => {
setMaxRange(target.value.replace (/\D/, ''));
if (window.Number(target.value) <= window.Number(minRange)) {
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
if (window.Number(target.value) <= window.Number(minRange)) {
updateMaxRangeDebounced(`${minRange}—${minRange}`, true);
return;
}
return;
}
updateMaxRangeDebounced(`${minRange}—${target.value}`);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
},
}}
/>
</Box>
)}
</Box>
</Box>
);
updateMaxRangeDebounced(`${minRange}—${target.value}`);
}}
sx={{
maxWidth: "80px",
borderColor: theme.palette.text.primary,
"& .MuiInputBase-input": {
textAlign: "center",
backgroundColor: quizThemes[settings.cfg.theme].isLight ? "white" : theme.palette.background.default,
},
}}
/>
</Box>
)}
</Box>
</Box>
);
};

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

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

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

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

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

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

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

@ -1,249 +1,245 @@
import { useEffect } from "react";
import {
Box,
Typography,
RadioGroup,
FormGroup,
FormControlLabel,
Radio,
Checkbox,
TextField,
useTheme,
Box,
Checkbox,
FormControlLabel,
FormGroup,
Radio,
RadioGroup,
TextField as MuiTextField,
Typography,
useTheme,
TextFieldProps,
} from "@mui/material";
import { FC, useEffect } from "react";
import {
useQuizViewStore,
updateAnswer,
deleteAnswer,
updateOwnVariant,
deleteOwnVariant,
deleteAnswer,
updateAnswer,
updateOwnVariant,
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;
currentQuestion: QuizQuestionVariant;
};
type VariantItemProps = {
currentQuestion: QuizQuestionVariant;
variant: QuestionVariant;
answer: string | string[] | undefined;
index: number;
own?: boolean;
currentQuestion: QuizQuestionVariant;
variant: QuestionVariant;
answer: string | string[] | undefined;
index: number;
own?: boolean;
};
export const Variant = ({ currentQuestion }: VariantProps) => {
const { settings } = useQuestionsStore()
const { answers, ownVariants } = useQuizViewStore();
const mode = modes;
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
const ownVariant = ownVariants.find(
(variant) => variant.id === currentQuestion.id
);
const theme = useTheme();
const { answers, ownVariants } = useQuizViewStore();
const { answer } =
answers.find(
({ questionId }) => questionId === currentQuestion.id
) ?? {};
const ownVariant = ownVariants.find(
(variant) => variant.id === currentQuestion.id
);
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
const Group = currentQuestion.content.multi ? FormGroup : RadioGroup;
useEffect(() => {
if (!ownVariant) {
updateOwnVariant(currentQuestion.id, "");
}
}, []);
useEffect(() => {
if (!ownVariant) {
updateOwnVariant(currentQuestion.id, "");
}
}, []);
const theme = useTheme();
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex" }}>
<Group
name={currentQuestion.id}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
)}
sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
flexBasis: "100%",
marginTop: "20px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
width: "100%",
gap: "20px",
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<VariantItem
key={variant.id}
currentQuestion={currentQuestion}
variant={variant}
answer={answer}
index={index}
/>
))}
{currentQuestion.content.own && ownVariant && (
<VariantItem
own
currentQuestion={currentQuestion}
variant={ownVariant.variant}
answer={answer}
index={currentQuestion.content.variants.length + 2}
/>
)}
</Box>
</Group>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
</Box>
</Box>
);
return (
<Box>
<Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
<Box sx={{ display: "flex" }}>
<Group
name={currentQuestion.id.toString()}
value={currentQuestion.content.variants.findIndex(
({ id }) => answer === id
)}
sx={{
display: "flex",
flexWrap: "wrap",
flexDirection: "row",
justifyContent: "space-between",
flexBasis: "100%",
marginTop: "20px",
}}
>
<Box
sx={{
display: "flex",
flexDirection: "row",
flexWrap: "wrap",
width: "100%",
gap: "20px",
}}
>
{currentQuestion.content.variants.map((variant, index) => (
<VariantItem
key={variant.id}
currentQuestion={currentQuestion}
variant={variant}
answer={answer}
index={index}
/>
))}
{currentQuestion.content.own && ownVariant && (
<VariantItem
own
currentQuestion={currentQuestion}
variant={ownVariant.variant}
answer={answer}
index={currentQuestion.content.variants.length + 2}
/>
)}
</Box>
</Group>
{currentQuestion.content.back && currentQuestion.content.back !== " " && (
<Box sx={{ maxWidth: "400px", width: "100%", height: "300px" }}>
<img
key={currentQuestion.id}
src={currentQuestion.content.back}
style={{ width: "100%", height: "100%", objectFit: "cover" }}
alt=""
/>
</Box>
)}
</Box>
</Box>
);
};
const VariantItem = ({
currentQuestion,
variant,
answer,
index,
own = false,
currentQuestion,
variant,
answer,
index,
own = false,
}: VariantItemProps) => {
const { settings } = useQuestionsStore()
const theme = useTheme();
const mode = modes;
const { settings } = useQuestionsStore()
const theme = useTheme();
return (
<FormControlLabel
key={variant.id}
sx={{
margin: "0",
borderRadius: "12px",
color: theme.palette.text.primary,
padding: "15px",
border: `1px solid`,
borderColor:
answer === variant.id ? theme.palette.primary.main : "#9A9AAF",
backgroundColor: mode[settings.cfg.theme]
? "white"
: theme.palette.background.default,
display: "flex",
maxWidth: "685px",
maxHeight: "85px",
justifyContent: "space-between",
width: "100%",
"&.MuiFormControl-root": {
width: "100%",
},
"& .MuiFormControlLabel-label": {
wordBreak: "break-word"
}
}}
value={index}
labelPlacement="start"
control={
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 />} />
)
}
//@ts-ignore
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
event.preventDefault();
const variantId = currentQuestion.content.variants[index].id;
if (!settings) throw new Error("settings is null");
if (currentQuestion.content.multi) {
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
return (
<FormControlLabel
key={variant.id}
sx={{
margin: "0",
borderRadius: "12px",
color: theme.palette.text.primary,
padding: "15px",
border: `1px solid`,
borderColor: answer === variant.id
? theme.palette.primary.main
: "#9A9AAF",
backgroundColor: quizThemes[settings.cfg.theme].isLight
? "white"
: theme.palette.background.default,
display: "flex",
maxWidth: "685px",
maxHeight: "85px",
justifyContent: "space-between",
width: "100%",
"&.MuiFormControl-root": {
width: "100%",
},
"& .MuiFormControlLabel-label": {
wordBreak: "break-word"
}
}}
value={index}
labelPlacement="start"
control={
currentQuestion.content.multi ?
<Checkbox
checked={!!answer?.includes(variant.id)}
checkedIcon={<CheckboxIcon checked color={theme.palette.primary.main} />}
icon={<CheckboxIcon />}
/>
:
<Radio checkedIcon={<RadioCheck color={theme.palette.primary.main} />} icon={<RadioIcon />} />
}
label={own ? <TextField label="Другое..." /> : variant.answer}
onClick={async (event) => {
event.preventDefault();
const variantId = currentQuestion.content.variants[index].id;
try {
if (currentQuestion.content.multi) {
const currentAnswer = typeof answer !== "string" ? answer || [] : [];
await sendAnswer({
questionId: currentQuestion.id,
body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
//@ts-ignore
qid: settings.qid
})
try {
updateAnswer(
currentQuestion.id,
currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId]
);
await sendAnswer({
questionId: currentQuestion.id,
body: currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId],
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
updateAnswer(
currentQuestion.id,
currentAnswer.includes(variantId)
? currentAnswer?.filter((item) => item !== variantId)
: [...currentAnswer, variantId]
);
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
return;
}
return;
}
try {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].answer,
//@ts-ignore
qid: settings.qid
})
await sendAnswer({
questionId: currentQuestion.id,
body: currentQuestion.content.variants[index].answer,
qid: settings.qid
})
updateAnswer(currentQuestion.id, variantId);
updateAnswer(currentQuestion.id, variantId);
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
if (answer === variantId) {
try {
if (answer === variantId) {
try {
await sendAnswer({
questionId: currentQuestion.id,
body: "",
//@ts-ignore
qid: settings.qid
})
await sendAnswer({
questionId: currentQuestion.id,
body: "",
qid: settings.qid
})
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
deleteAnswer(currentQuestion.id);
}
}}
} catch (e) {
enqueueSnackbar("ответ не был засчитан")
}
deleteAnswer(currentQuestion.id);
}
}}
/>
);
/>
);
};

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

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

7
src/stores/quizData/actions.ts
View File

@ -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 => {
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);

32
src/stores/quizData/store.ts
View File

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

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

@ -1,95 +1,92 @@
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[];
questionId: string;
answer: string | string[];
};
type OwnVariant = {
id: string;
variant: any;
id: string;
variant: QuestionVariant;
};
interface QuizViewStore {
answers: Answer[];
ownVariants: OwnVariant[];
answers: Answer[];
ownVariants: OwnVariant[];
}
export const useQuizViewStore = create<QuizViewStore>()(
devtools(
(set, get) => ({
answers: [],
ownVariants: [],
}),
{
name: "quizView",
}
)
devtools(
(set, get) => ({
answers: [],
ownVariants: [],
}),
{
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 };
}
useQuizViewStore.setState({ answers });
};
export const deleteAnswer = (questionId: string) => {
const answers = [...useQuizViewStore.getState().answers];
const filteredItems = answers.filter(
(answer) => questionId !== answer.questionId
);
useQuizViewStore.setState({ answers: filteredItems });
};
export const updateOwnVariant = (id: string, answer: string) => {
const ownVariants = [...useQuizViewStore.getState().ownVariants];
const ownVariantIndex = ownVariants.findIndex(
(variant) => variant.id === id
);
if (ownVariantIndex < 0) {
ownVariants.push({
id,
variant: {
id: getRandom(),
answer,
extendedText: "",
hints: "",
originalImageUrl: "",
},
});
} else {
ownVariants[ownVariantIndex].variant.answer = 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);
function setProducedState<A extends string | { type: string; }>(
recipe: (state: QuizViewStore) => void,
action: A,
) {
useQuizViewStore.setState(state => produce(state, recipe), false, action);
}
export const updateAnswer = (questionId: string, answer: string | string[]) => setProducedState(state => {
const index = state.answers.findIndex(answer => questionId === answer.questionId);
if (index < 0) {
state.answers.push({ questionId, answer });
} else {
state.answers[index] = { questionId, answer };
}
}, {
type: "updateAnswer",
questionId,
answer
});
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) => setProducedState(state => {
const index = state.ownVariants.findIndex((variant) => variant.id === id);
if (index < 0) {
state.ownVariants.push({
id,
variant: {
id: nanoid(),
answer,
extendedText: "",
hints: "",
originalImageUrl: "",
},
});
} else {
state.ownVariants[index].variant.answer = answer;
}
}, {
type: "updateOwnVariant",
id,
answer
});
export const deleteOwnVariant = (id: string) => useQuizViewStore.setState(state => ({
ownVariants: state.ownVariants.filter((variant) => variant.id !== id)
}), false, {
type: "deleteOwnVariant",
id
});

5
src/ui_kit/CustomCheckbox.tsx
View File

@ -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
View 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%",
}}
/>
);
}

45
src/utils/themes/Publication/themePublication.ts
View File

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