SQuiz/frontPanel
3
0
Fork 0
Code Issues 18 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

complete replace of old stores

Browse Source
This commit is contained in:
nflnkr 2023-11-20 20:22:13 +03:00
parent bf8a41a3bc
commit 83d314bf48
15 changed files with 344 additions and 404 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/ContactFormPage/ContactFormPage.tsx
View File

@ -1,32 +1,19 @@
import React from "react";
import { Box, Button, IconButton, Typography, Paper, useTheme, Link, SxProps, Theme, TextField } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Box, Button, IconButton, Link, Paper, SxProps, TextField, Theme, Typography, useTheme } from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import React from "react";
import InfoIcon from "../../assets/icons/InfoIcon";
import { OneIcon } from "../../assets/icons/questionsPage/OneIcon";
import AddPlus from "../../assets/icons/questionsPage/addPlus";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import InfoIcon from "../../assets/icons/InfoIcon";
import ButtonSettingForms from "./ButtonSettingForms";
import SwitchContactForm from "./switchContactForm";
import DrawerNewField from "./DrawerParent";
import WindowNewField from "./NewField/WindowNewField";
import WindowMessengers from "./Massengers/WindowMessengers";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import WindowNewField from "./NewField/WindowNewField";
import SwitchContactForm from "./switchContactForm";
export default function ContactFormPage() {
const { listQuizes, updateQuizesList } = quizStore();
const params = Number(useParams().quizId);
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const [activeStep, setActiveStep] = React.useState(4);
const handleBack = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 1);
};
const [drawerNewField, setDrawerNewField] = React.useState(false);
const [drawerMessenger, setDrawerMessenger] = React.useState(false);
@ -139,7 +126,7 @@ export default function ContactFormPage() {
<Button variant="outlined">
<ArrowLeft />
</Button>
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={handleNext}>
<Button variant="contained" sx={{ padding: "10px 20px" }} onClick={incrementCurrentStep}>
Установка квиза
</Button>
</Box>

11
src/pages/InstallQuiz/InstallQuiz.tsx
View File

@ -1,5 +1,4 @@
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import {
Box,
Button,
@ -19,7 +18,6 @@ import {
Tooltip,
useTheme,
} from "@mui/material";
import { quizStore } from "@root/quizes";
import LinkIcon from "../../assets/icons/LinkIcon";
import InfoIcon from "../../assets/icons/InfoIcon";
import ArrowDown from "../../assets/icons/ArrowDownIcon";
@ -43,6 +41,7 @@ import InBodyInstall from "./InBodyInstall";
import AutoOpenInstall from "./AutoOpenInstall";
import VidjetInstall from "./VidjetInstall";
import InstallQzCode from "./InstallQzCode";
import { incrementCurrentStep } from "@root/quizes/actions";
type BackgroundType = "text" | "video";
@ -72,7 +71,6 @@ export default function InstallQuiz() {
];
const [display, setDisplay] = React.useState("1");
const quizId = Number(useParams().quizId);
const handleChange = (event: SelectChangeEvent) => {
setDisplay(event.target.value);
};
@ -88,11 +86,6 @@ export default function InstallQuiz() {
const [backgroundType, setBackgroundType] = useState<BackgroundType>("text");
const theme = useTheme();
const { listQuizes, updateQuizesList } = quizStore();
const handleNext = () => {
updateQuizesList(quizId, { step: listQuizes[quizId].step + 1 });
};
return (
<>
@ -413,7 +406,7 @@ export default function InstallQuiz() {
>
<ArrowLeft />
</Button>
<Button variant="contained" onClick={handleNext}>Запустить рекламу</Button>
<Button variant="contained" onClick={incrementCurrentStep}>Запустить рекламу</Button>
</Box>
<Modal

15
src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx
View File

@ -1,10 +1,9 @@
import { memo } from "react";
import { useParams } from "react-router-dom";
import { Draggable } from "react-beautiful-dnd";
import { Box, ListItem, Typography, useTheme } from "@mui/material";
import QuestionsPageCard from "./QuestionPageCard";
import { updateQuestionsList } from "@root/questions";
import { updateQuestionWithFnOptimistic } from "@root/questions/actions";
import { memo } from "react";
import { Draggable } from "react-beautiful-dnd";
import { AnyQuizQuestion, QuizQuestionBase } from "../../../../model/questionTypes/shared";
import QuestionsPageCard from "./QuestionPageCard";
type FormDraggableListItemProps = {
@ -15,7 +14,6 @@ type FormDraggableListItemProps = {
export default memo(
({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
const quizId = Number(useParams().quizId);
const theme = useTheme();
return (
@ -48,9 +46,8 @@ export default memo(
</Typography>
<Typography
onClick={() => {
updateQuestionsList<QuizQuestionBase>(quizId, questionIndex, {
...questionData,
deleted: false,
updateQuestionWithFnOptimistic(question.id, question => {
question.deleted = false;
});
}}
sx={{

13
src/pages/QuestionsMap/index.tsx
View File

@ -1,16 +1,9 @@
import { Box, Typography, Button, useTheme } from "@mui/material";
import { useParams } from "react-router-dom";
import { Graph } from "./graph";
import { quizStore } from "@root/quizes";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
export const QuestionsMap = () => {
const { listQuizes, updateQuizesList } = quizStore();
const quizId = Number(useParams().quizId);
const quize = listQuizes[quizId];
const theme = useTheme();
return (
@ -28,7 +21,7 @@ export const QuestionsMap = () => {
height: "44px",
marginLeft: "auto",
}}
onClick={() => updateQuizesList(quizId, { step: quize.step - 1 })}
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>
@ -41,7 +34,7 @@ export const QuestionsMap = () => {
background: theme.palette.brightPurple.main,
fontSize: "18px",
}}
onClick={() => updateQuizesList(quizId, { step: quize.step + 1 })}
onClick={incrementCurrentStep}
>
Следующий шаг
</Button>

14
src/pages/Result/Result.tsx
View File

@ -1,19 +1,13 @@
import { useParams } from "react-router-dom";
import { Box, Button, Tooltip, useTheme } from "@mui/material";
import { Box, Button, Tooltip } from "@mui/material";
import CreationFullCard from "./CreationFullCard";
import Info from "../../assets/icons/Info";
import image from "../../assets/Rectangle 110.png";
import { quizStore } from "@root/quizes";
import { incrementCurrentStep } from "@root/quizes/actions";
export const Result = () => {
const { listQuizes, updateQuizesList } = quizStore();
const params = Number(useParams().quizId);
const handleNext = () => {
updateQuizesList(params, { createResult: true });
};
const theme = useTheme();
return (
<Box component="section">
<CreationFullCard
@ -25,7 +19,7 @@ export const Result = () => {
<Button
variant="contained"
sx={{ mr: "15px", minWidth: "258px" }}
onClick={handleNext}
onClick={incrementCurrentStep}
>
Создать результаты
</Button>

27
src/pages/Result/Setting.tsx
View File

@ -1,23 +1,16 @@
import { Box, Button, Typography, useTheme } from "@mui/material";
import { SettingForm } from "./SettingForm";
import IconPlus from "@icons/IconPlus";
import Info from "@icons/Info";
import Plus from "@icons/Plus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import { Box, Button, Typography } from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import CustomWrapper from "@ui_kit/CustomWrapper";
import { DescriptionForm } from "./DescriptionForm/DescriptionForm";
import { ResultListForm } from "./ResultListForm";
import CustomWrapper from "@ui_kit/CustomWrapper";
import Plus from "@icons/Plus";
import Info from "@icons/Info";
import IconPlus from "@icons/IconPlus";
import ArrowLeft from "@icons/questionsPage/arrowLeft";
import React from "react";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import { SettingForm } from "./SettingForm";
export const Setting = () => {
const { listQuizes, updateQuizesList } = quizStore();
const params = Number(useParams().quizId);
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const theme = useTheme();
return (
<Box sx={{ maxWidth: "796px" }}>
<Box sx={{ display: "flex", alignItems: "center", mb: "40px" }}>
@ -104,7 +97,7 @@ export const Setting = () => {
>
<ArrowLeft />
</Button>
<Button variant="contained" sx={{ ml: "10px" }} onClick={handleNext}>
<Button variant="contained" sx={{ ml: "10px" }} onClick={incrementCurrentStep}>
Настроить форму
</Button>
</Typography>

24
src/pages/startPage/extra.tsx
View File

@ -1,25 +1,23 @@
import { Box, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
import React, { ChangeEvent, useState } from "react";
import { Box, Link, Typography, useTheme } from "@mui/material";
import { useCurrentQuiz } from "@root/quizes/hooks";
import CustomTextField from "@ui_kit/CustomTextField";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
import { ChangeEvent, useState } from "react";
export default function Extra() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
const theme = useTheme();
const upMd = useMediaQuery(theme.breakpoints.up("md"));
const upSm = useMediaQuery(theme.breakpoints.up("sm"));
const [isExpanded, setIsExpanded] = useState(false);
const { quiz, updateQuiz } = useCurrentQuiz();
const expandedHC = (bool: boolean) => {
setIsExpanded(bool);
};
const mutationOrgMetaHC = (event: ChangeEvent<HTMLInputElement>) => {
let SPageClone = listQuizes[params].config;
SPageClone.meta = event.target.value;
updateQuizesList(params, { config: SPageClone });
updateQuiz(quiz => {
quiz.config.meta = event.target.value;
});
};
return (
<Box
sx={{
@ -65,7 +63,7 @@ export default function Extra() {
Дополнительно
</Link>
</Box>
{isExpanded && (
{isExpanded && quiz && (
<Box
sx={{
backgroundColor: "transparent",
@ -78,7 +76,7 @@ export default function Extra() {
</Typography>
<CustomTextField
placeholder="Текст-заполнитель — это текст, который "
text={listQuizes[params].config.meta}
text={quiz.config.meta}
onChange={mutationOrgMetaHC}
/>
<Typography

18
src/stores/questions.ts
View File

@ -28,6 +28,7 @@ interface QuestionStore {
let isFirstPartialize = true;
/** @deprecated */
export const questionStore = create<QuestionStore>()(
persist(
devtools(
@ -104,6 +105,8 @@ export const questionStore = create<QuestionStore>()(
}
)
);
/** @deprecated */
export const updateQuestionsList = <T = AnyQuizQuestion>(
quizId: number,
index: number,
@ -117,6 +120,7 @@ export const updateQuestionsList = <T = AnyQuizQuestion>(
questionStore.setState({ listQuestions: questionListClone });
};
/** @deprecated */
export const updateQuestion = <T extends AnyQuizQuestion>(
quizId: number,
questionIndex: number,
@ -132,10 +136,12 @@ export const updateQuestion = <T extends AnyQuizQuestion>(
recipe,
});
/** @deprecated */
export const removeQuestionsByQuizId = (quizId: number) => setProducedState(state => {
delete state.listQuestions[quizId];
}, "removeQuestionsByQuizId");
/** @deprecated */
export const setVariantImageUrl = (
quizId: number,
questionIndex: number,
@ -160,6 +166,7 @@ export const setVariantImageUrl = (
url,
});
/** @deprecated */
export const setVariantOriginalImageUrl = (
quizId: number,
questionIndex: number,
@ -184,6 +191,7 @@ export const setVariantOriginalImageUrl = (
url,
});
/** @deprecated */
export const setPageQuestionPicture = (
quizId: number,
questionIndex: number,
@ -200,6 +208,7 @@ export const setPageQuestionPicture = (
question.content.picture = url;
});
/** @deprecated */
export const setPageQuestionOriginalPicture = (
quizId: number,
questionIndex: number,
@ -214,6 +223,7 @@ export const setPageQuestionOriginalPicture = (
question.content.originalPicture = url;
});
/** @deprecated */
export const setQuestionBackgroundImage = (
quizId: number,
questionIndex: number,
@ -229,6 +239,7 @@ export const setQuestionBackgroundImage = (
question.content.back = url;
})
/** @deprecated */
export const setQuestionOriginalBackgroundImage = (
quizId: number,
questionIndex: number,
@ -242,6 +253,7 @@ export const setQuestionOriginalBackgroundImage = (
question.content.originalBack = url;
})
/** @deprecated */
export const updateQuestionsListDragAndDrop = (
quizId: number,
updatedQuestions: AnyQuizQuestion[]
@ -253,6 +265,7 @@ export const updateQuestionsListDragAndDrop = (
};
/** @deprecated */
export const reorderVariants = (
quizId: number,
questionIndex: number,
@ -274,6 +287,7 @@ export const reorderVariants = (
destinationIndex,
});
/** @deprecated */
export const createQuestion = (
quizId: number,
questionType: QuestionType = "variant",
@ -312,6 +326,7 @@ export const createQuestion = (
}
};
/** @deprecated */
export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
const listQuestions = { ...questionStore.getState()["listQuestions"] };
@ -324,6 +339,7 @@ export const copyQuestion = (quizId: number, copiedQuestionIndex: number) => {
questionStore.setState({ listQuestions });
};
/** @deprecated */
export const removeQuestionForce = (quizId: number, removedId: number) => {
const questionListClone = { ...questionStore.getState()["listQuestions"] };
const removedItemIndex = questionListClone[quizId].findIndex(
@ -333,12 +349,14 @@ export const removeQuestionForce = (quizId: number, removedId: number) => {
questionStore.setState({ listQuestions: questionListClone });
};
/** @deprecated */
export const removeQuestion = (quizId: number, index: number) => {
const questionListClone = { ...questionStore.getState()["listQuestions"] };
questionListClone[quizId][index].deleted = true;
questionStore.setState({ listQuestions: questionListClone });
};
/** @deprecated */
export const findQuestionById = (quizId: number) => {
let found = null;
questionStore

1
src/stores/quizes.ts
View File

@ -65,6 +65,7 @@ export interface Quizes {
}
}
/** @deprecated */
export const quizStore = create<QuizStore>()(
persist(
(set, get) => ({

14
src/stores/quizes/actions.ts
View File

@ -69,20 +69,6 @@ export const setQuizField = <T extends keyof Quiz>(
value,
});
export const updateQuiz = (
quizId: number,
updateFn: (quiz: Quiz) => void,
) => setProducedState(state => {
const quiz = state.quizById[quizId];
if (!quiz) return;
updateFn(quiz);
}, {
type: "updateQuiz",
quizId,
updateFn: updateFn.toString(),
});
export const incrementCurrentStep = () => setProducedState(state => {
state.currentStep = Math.min(
maxQuizSetupSteps, state.currentStep + 1

21
src/ui_kit/Header/Header.tsx
View File

@ -1,28 +1,15 @@
import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import BackArrowIcon from "@icons/BackArrowIcon";
import EyeIcon from "@icons/EyeIcon";
import { Box, Button, Container, FormControl, IconButton, TextField, useMediaQuery, useTheme } from "@mui/material";
import { decrementCurrentStep } from "@root/quizes/actions";
import PenaLogo from "../PenaLogo";
import CustomAvatar from "./Avatar";
import NavMenuItem from "./NavMenuItem";
import PenaLogo from "../PenaLogo";
import { quizStore } from "@root/quizes";
import { useParams } from "react-router-dom";
export default function Header() {
const { listQuizes, updateQuizesList, removeQuiz, createBlank } = quizStore();
const params = Number(useParams().quizId);
const activeStep = listQuizes[params].step;
const theme = useTheme();
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
const handleNext = () => {
updateQuizesList(params, { step: listQuizes[params].step + 1 });
};
const handleBack = () => {
let result = listQuizes[params].step - 1;
updateQuizesList(params, { step: result ? result : 0 });
};
return (
<Container
component="nav"
@ -46,7 +33,7 @@ export default function Header() {
ml: "37px",
}}
>
<IconButton sx={{ p: "6px" }} onClick={() => handleBack()}>
<IconButton sx={{ p: "6px" }} onClick={decrementCurrentStep}>
<BackArrowIcon />
</IconButton>
<FormControl fullWidth variant="standard">

12
src/ui_kit/QuizPreview/QuizPreviewLayout.tsx
View File

@ -1,5 +1,5 @@
import { Box, Button, LinearProgress, Paper, Typography } from "@mui/material";
import { questionStore } from "@root/questions";
import { useQuestionsStore } from "@root/questions/store";
import {
decrementCurrentQuestionIndex,
incrementCurrentQuestionIndex,
@ -7,7 +7,6 @@ import {
} from "@root/quizPreview";
import { AnyQuizQuestion } from "model/questionTypes/shared";
import { useEffect } from "react";
import { useParams } from "react-router-dom";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import Date from "./QuizPreviewQuestionTypes/Date";
import Emoji from "./QuizPreviewQuestionTypes/Emoji";
@ -20,17 +19,16 @@ import Select from "./QuizPreviewQuestionTypes/Select";
import Text from "./QuizPreviewQuestionTypes/Text";
import Variant from "./QuizPreviewQuestionTypes/Variant";
import Varimg from "./QuizPreviewQuestionTypes/Varimg";
import { notReachable } from "../../utils/notReachable";
export default function QuizPreviewLayout() {
const quizId = useParams().quizId ?? 0;
const listQuestions = questionStore((state) => state.listQuestions);
const questions = useQuestionsStore(state => state.questions);
const currentQuizStep = useQuizPreviewStore(
(state) => state.currentQuestionIndex
);
const quizQuestions = listQuestions[quizId] ?? [];
const nonDeletedQuizQuestions = quizQuestions.filter(
const nonDeletedQuizQuestions = questions.filter(
(question) => !question.deleted
);
const maxCurrentQuizStep =
@ -155,6 +153,6 @@ function QuestionPreviewComponent({ question }: {
case "file": return <File question={question} />;
case "page": return <Page question={question} />;
case "rating": return <Rating question={question} />;
default: throw new Error("Unknown question type");
default: notReachable(question);
}
}

39
src/ui_kit/Sidebar.tsx
View File

@ -1,32 +1,27 @@
import { useState } from "react";
import { useParams } from "react-router-dom";
import {
Container,
Box,
useTheme,
List,
Typography,
IconButton,
} from "@mui/material";
import { quizStore } from "@root/quizes";
import MegaphoneIcon from "@icons/MegaphoneIcon";
import QuestionIcon from "@icons/QuestionIcon";
import QuestionsMapIcon from "@icons/QuestionsMapIcon";
import ChartPieIcon from "@icons/ChartPieIcon";
import CollapseMenuIcon from "@icons/CollapseMenuIcon";
import ContactBookIcon from "@icons/ContactBookIcon";
import FlowArrowIcon from "@icons/FlowArrowIcon";
import CollapseMenuIcon from "@icons/CollapseMenuIcon";
import TagIcon from "@icons/TagIcon";
import PencilCircleIcon from "@icons/PencilCircleIcon";
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
import GearIcon from "@icons/GearIcon";
import LayoutIcon from "@icons/LayoutIcon";
import MenuItem from "./MenuItem";
import MegaphoneIcon from "@icons/MegaphoneIcon";
import PencilCircleIcon from "@icons/PencilCircleIcon";
import PuzzlePieceIcon from "@icons/PuzzlePieceIcon";
import QuestionIcon from "@icons/QuestionIcon";
import QuestionsMapIcon from "@icons/QuestionsMapIcon";
import TagIcon from "@icons/TagIcon";
import { quizSetupSteps } from "@model/quizSettings";
import { useQuizStore } from "@root/quizes/store";
import {
Box,
IconButton,
List,
Typography,
useTheme
} from "@mui/material";
import { setCurrentStep } from "@root/quizes/actions";
import { useQuizStore } from "@root/quizes/store";
import { useState } from "react";
import MenuItem from "./MenuItem";
const createQuizMenuItems = [
[LayoutIcon, "Стартовая страница"],

54
src/ui_kit/StartPagePreview/QuizPreviewLayout.tsx
View File

@ -3,24 +3,24 @@ import {
Button,
Paper,
Typography,
useTheme,
useMediaQuery,
useTheme,
} from "@mui/material";
import { useParams } from "react-router-dom";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { quizStore } from "@root/quizes";
export default function QuizPreviewLayout() {
const quizId = Number(useParams().quizId);
const { listQuizes } = quizStore();
const question = listQuizes[quizId];
const theme = useTheme();
const { quiz } = useCurrentQuiz();
const isTablet = useMediaQuery(theme.breakpoints.down(630));
if (!quiz) return null;
const isMediaFileExist =
(question.config.startpage.background.type === "image" &&
question.config.startpage.background.desktop) ||
(question.config.startpage.background.type === "video" &&
question.config.startpage.background.video);
(quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop) ||
(quiz.config.startpage.background.type === "video" &&
quiz.config.startpage.background.video);
return (
<Paper className="quiz-preview-draghandle" sx={{ height: "100%" }}>
@ -28,7 +28,7 @@ export default function QuizPreviewLayout() {
sx={{
display: "flex",
flexDirection:
question.config.startpage.position === "ltr"
quiz.config.startpage.position === "left"
? "row"
: "row-reverse",
flexGrow: 1,
@ -52,10 +52,10 @@ export default function QuizPreviewLayout() {
gap: "20px",
}}
>
{question.config.startpage.background.type === "image" &&
question.config.startpage.background.desktop && (
{quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop && (
<img
src={question.config.startpage.background.desktop}
src={quiz.config.startpage.background.desktop}
style={{
height: "30px",
maxWidth: "50px",
@ -65,7 +65,7 @@ export default function QuizPreviewLayout() {
/>
)}
<Typography sx={{ fontSize: "12px" }}>
{question.config.info.orgname}
{quiz.config.info.orgname}
</Typography>
</Box>
<Box
@ -77,12 +77,12 @@ export default function QuizPreviewLayout() {
justifyContent: "center",
}}
>
<Typography sx={{ fontWeight: "bold" }}>{question.name}</Typography>
<Typography sx={{ fontWeight: "bold" }}>{quiz.name}</Typography>
<Typography sx={{ fontSize: "12px" }}>
{question.config.startpage.description}
{quiz.config.startpage.description}
</Typography>
<Box>
{question.config.startpage.button && (
{quiz.config.startpage.button && (
<Button
variant="contained"
sx={{
@ -90,7 +90,7 @@ export default function QuizPreviewLayout() {
padding: "10px 15px",
}}
>
{question.config.startpage.button}
{quiz.config.startpage.button}
</Button>
)}
</Box>
@ -99,19 +99,19 @@ export default function QuizPreviewLayout() {
<Typography
sx={{ fontSize: "16px", color: theme.palette.brightPurple.main }}
>
{question.config.info.phonenumber}
{quiz.config.info.phonenumber}
</Typography>
<Typography sx={{ fontSize: "12px" }}>
{question.config.info.law}
{quiz.config.info.law}
</Typography>
</Box>
</Box>
{!isTablet && isMediaFileExist && (
<Box sx={{ width: "60%" }}>
{question.config.startpage.background.type === "image" &&
question.config.startpage.background.desktop && (
{quiz.config.startpage.background.type === "image" &&
quiz.config.startpage.background.desktop && (
<img
src={question.config.startpage.background.desktop}
src={quiz.config.startpage.background.desktop}
alt=""
style={{
width: "100%",
@ -120,10 +120,10 @@ export default function QuizPreviewLayout() {
}}
/>
)}
{question.config.startpage.background.type === "video" &&
question.config.startpage.background.video && (
{quiz.config.startpage.background.type === "video" &&
quiz.config.startpage.background.video && (
<video
src={question.config.startpage.background.video}
src={quiz.config.startpage.background.video}
style={{
width: "100%",
height: "100%",

2
src/ui_kit/Stepper.tsx
View File

@ -30,7 +30,7 @@ export default function ProgressMobileStepper({
variant="progress"
steps={maxDisplayQuizSetupSteps}
position="static"
activeStep={activeStep - 1}
activeStep={quizSetupSteps[activeStep].displayStep - 1}
sx={{
width: "100%",
flexGrow: 1,