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

Merge branch 'backend-integration' into branching

Browse Source
This commit is contained in:
Nastya 2023-11-29 18:55:03 +03:00
commit a169dd0a49
39 changed files with 718 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/api/question.ts
View File

@ -5,15 +5,14 @@ import { GetQuestionListRequest, GetQuestionListResponse } from "@model/question
import { EditQuestionRequest, EditQuestionResponse } from "@model/question/edit";
import { DeleteQuestionRequest, DeleteQuestionResponse } from "@model/question/delete";
import { CopyQuestionRequest, CopyQuestionResponse } from "@model/question/copy";
import { QUIZ_QUESTION_VARIANT } from "../constants/variant";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
function createQuestion(body?: Partial<CreateQuestionRequest>) {
function createQuestion(body: CreateQuestionRequest) {
return makeRequest<CreateQuestionRequest, RawQuestion>({
url: `${baseUrl}/question/create`,
body: { ...defaultCreateQuestionBody, ...body },
body,
method: "POST",
});
}
@ -64,16 +63,6 @@ export const questionApi = {
};
const defaultCreateQuestionBody: CreateQuestionRequest = {
"quiz_id": 0,
"title": "",
"description": "",
"type": "variant",
"required": true,
"page": 0,
"content": JSON.stringify(QUIZ_QUESTION_VARIANT.content),
};
const defaultGetQuestionListBody: GetQuestionListRequest = {
"limit": 100,
"offset": 0,

3
src/api/quiz.ts
View File

@ -10,6 +10,7 @@ import { RawQuiz } from "model/quiz/quiz";
const baseUrl = process.env.NODE_ENV === "production" ? "/squiz" : "https://squiz.pena.digital/squiz";
const imagesUrl = process.env.NODE_ENV === "production" ? "/squizstorer" : "https://squiz.pena.digital/squizstorer";
function createQuiz(body?: Partial<CreateQuizRequest>) {
return makeRequest<CreateQuizRequest, RawQuiz>({
@ -69,7 +70,7 @@ function addQuizImages(quizId: number, image: Blob) {
formData.append("image", image);
return makeRequest<FormData, never>({
url: `${baseUrl}/quiz/putImages`,
url: `${imagesUrl}/quiz/putImages`,
body: formData,
method: "PUT",
});

4
src/constants/default.ts
View File

@ -1,5 +1,5 @@
import { QuestionType } from "@model/question/question";
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { QUIZ_QUESTION_DATE } from "./date";
import { QUIZ_QUESTION_EMOJI } from "./emoji";
import { QUIZ_QUESTION_FILE } from "./file";
@ -13,7 +13,7 @@ import { QUIZ_QUESTION_VARIANT } from "./variant";
import { QUIZ_QUESTION_VARIMG } from "./varimg";
export const defaultQuestionByType: Record<QuestionType, Omit<AnyQuizQuestion, "id" | "backendId">> = {
export const defaultQuestionByType: Record<QuestionType, Omit<AnyTypedQuizQuestion, "id" | "backendId">> = {
"date": QUIZ_QUESTION_DATE,
"emoji": QUIZ_QUESTION_EMOJI,
"file": QUIZ_QUESTION_FILE,

3
src/constants/emoji.ts
View File

@ -18,7 +18,8 @@ export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id" | "backendId"> =
id: nanoid(),
answer: "",
extendedText: "",
hints: ""
hints: "",
originalImageUrl: "",
},
],
},

2
src/constants/select.ts
View File

@ -13,6 +13,6 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id" | "backendId">
innerNameCheck: false,
innerName: "",
default: "",
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "", originalImageUrl: "" }],
},
};

2
src/constants/variant.ts
View File

@ -14,6 +14,6 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id" | "backendId"
innerNameCheck: false,
required: false,
innerName: "",
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "", originalImageUrl: "" }],
},
};

12
src/model/question/create.ts
View File

@ -5,15 +5,15 @@ export interface CreateQuestionRequest {
/** id of quiz for what question is creating */
quiz_id: number;
/** title of question. max length 512 */
title?: string;
title: string;
/** description of question. html/text */
description?: string;
description: string;
/** type of question. allow only text, select, file, variant, images, varimg, emoji, date, number, page, rating */
type?: QuestionType;
type: QuestionType;
/** set true if user MUST answer this question */
required?: boolean;
required: boolean;
/** page of question */
page?: number;
page: number;
/** json serialized of question content settings */
content?: string;
content: string;
}

4
src/model/question/edit.ts
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { QuestionType } from "./question";
@ -16,7 +16,7 @@ export interface EditQuestionResponse {
updated: number;
}
export function questionToEditQuestionRequest(question: AnyQuizQuestion): EditQuestionRequest {
export function questionToEditQuestionRequest(question: AnyTypedQuizQuestion): EditQuestionRequest {
return {
id: question.backendId,
title: question.title,

2
src/model/question/getList.ts
View File

@ -24,5 +24,5 @@ export interface GetQuestionListRequest {
export interface GetQuestionListResponse {
count: number;
items: RawQuestion[];
items: RawQuestion[] | null;
}

6
src/model/question/question.ts
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { defaultQuestionByType } from "../../constants/default";
import { nanoid } from "nanoid";
@ -44,7 +44,7 @@ export interface RawQuestion {
updated_at: string;
}
export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyQuizQuestion {
export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyTypedQuizQuestion {
let content = defaultQuestionByType[rawQuestion.type].content;
try {
@ -67,5 +67,5 @@ export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyQuizQuestion
deleted: false,
deleteTimeoutId: 0,
content,
} as AnyQuizQuestion;
} as AnyTypedQuizQuestion;
}

4
src/model/questionTypes/images.ts
View File

@ -1,7 +1,7 @@
import type {
ImageQuestionVariant,
QuestionBranchingRule,
QuestionHint,
QuestionVariant,
QuizQuestionBase
} from "./shared";
@ -25,7 +25,7 @@ export interface QuizQuestionImages extends QuizQuestionBase {
/** Чекбокс "Необязательный вопрос" */
required: boolean;
/** Варианты (картинки) */
variants: ImageQuestionVariant[];
variants: QuestionVariant[];
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string;

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

@ -43,12 +43,9 @@ export type QuestionVariant = {
hints: string;
/** Дополнительное поле для текста, emoji, ссылки на картинку */
extendedText: string;
};
export interface ImageQuestionVariant extends QuestionVariant {
/** Оригинал изображения (до кропа) */
originalImageUrl: string;
}
};
export interface QuizQuestionBase {
backendId: number;
@ -58,7 +55,7 @@ export interface QuizQuestionBase {
title: string;
description: string;
page: number;
type?: QuestionType;
type?: QuestionType | null;
expanded: boolean;
openedModalSettings: boolean;
required: boolean;
@ -73,11 +70,17 @@ export interface QuizQuestionBase {
};
}
// export interface QuizQuestionInitial extends QuizQuestionBase {
// type: "nonselected";
// }
export interface UntypedQuizQuestion {
type: null;
id: string;
quizId: number;
title: string;
description: string;
expanded: boolean;
deleted: boolean;
}
export type AnyQuizQuestion =
export type AnyTypedQuizQuestion =
| QuizQuestionVariant
| QuizQuestionImages
| QuizQuestionVarImg
@ -89,13 +92,12 @@ export type AnyQuizQuestion =
| QuizQuestionFile
| QuizQuestionPage
| QuizQuestionRating;
// | QuizQuestionInitial;
type FilterQuestionsWithVariants<T> = T extends {
content: { variants: QuestionVariant[] | ImageQuestionVariant[]; };
content: { variants: QuestionVariant[]; };
} ? T : never;
export type QuizQuestionsWithVariants = FilterQuestionsWithVariants<AnyQuizQuestion>;
export type QuizQuestionsWithVariants = FilterQuestionsWithVariants<AnyTypedQuizQuestion>;
export const createBranchingRuleMain: (targetId:string, parentId:string) => QuestionBranchingRuleMain = (targetId, parentId) => ({
@ -111,9 +113,5 @@ export const createQuestionVariant: () => QuestionVariant = () => ({
answer: "",
extendedText: "",
hints: "",
});
export const createQuestionImageVariant: () => ImageQuestionVariant = () => ({
...createQuestionVariant(),
originalImageUrl: "",
});

4
src/model/questionTypes/varimg.ts
View File

@ -1,7 +1,7 @@
import type {
ImageQuestionVariant,
QuestionBranchingRule,
QuestionHint,
QuestionVariant,
QuizQuestionBase
} from "./shared";
@ -16,7 +16,7 @@ export interface QuizQuestionVarImg extends QuizQuestionBase {
innerName: string;
/** Чекбокс "Необязательный вопрос" */
required: boolean;
variants: ImageQuestionVariant[];
variants: QuestionVariant[];
hint: QuestionHint;
rule: QuestionBranchingRule;
back: string;

14
src/pages/Questions/AnswerDraggableList/AnswerItem.tsx
View File

@ -16,14 +16,14 @@ import { addQuestionVariant, deleteQuestionVariant, setQuestionVariantField } fr
import type { KeyboardEvent, ReactNode } from "react";
import { useState } from "react";
import { Draggable } from "react-beautiful-dnd";
import type { QuestionVariant } from "../../../model/questionTypes/shared";
import { useDebouncedCallback } from "use-debounce";
import type { ImageQuestionVariant, QuestionVariant } from "../../../model/questionTypes/shared";
type AnswerItemProps = {
index: number;
questionId: string;
variant: QuestionVariant | ImageQuestionVariant;
variant: QuestionVariant;
largeCheck: boolean;
additionalContent?: ReactNode;
additionalMobile?: ReactNode;
@ -42,6 +42,10 @@ export const AnswerItem = ({
const [isOpen, setIsOpen] = useState(false);
const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
const setQuestionVariantAnswer = useDebouncedCallback((value) => {
setQuestionVariantField(questionId, variant.id, "answer", value);
}, 200);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
setIsOpen(true);
@ -72,8 +76,8 @@ export const AnswerItem = ({
focused={false}
placeholder={"Добавьте ответ"}
multiline={largeCheck}
onChange={({ target }: React.ChangeEvent<HTMLInputElement>) => {
setQuestionVariantField(questionId, variant.id, "answer", target.value)
onChange={({ target }) => {
setQuestionVariantAnswer(target.value);
}}
onKeyDown={(event: KeyboardEvent<HTMLInputElement>) => {
if (event.code === "Enter" && !largeCheck) {
@ -120,7 +124,7 @@ export const AnswerItem = ({
style={{ margin: "10px" }}
placeholder="Подсказка для этого ответа"
value={variant.hints}
onChange={e => setQuestionVariantField(questionId, variant.id, "hints", e.target.value)}
onChange={e => setQuestionVariantAnswer(e.target.value)}
onKeyDown={(
event: KeyboardEvent<HTMLTextAreaElement>
) => event.stopPropagation()}

6
src/pages/Questions/AnswerDraggableList/index.tsx
View File

@ -3,14 +3,14 @@ import { reorderQuestionVariants } from "@root/questions/actions";
import { type ReactNode } from "react";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import type { ImageQuestionVariant, QuestionVariant, QuizQuestionsWithVariants } from "../../../model/questionTypes/shared";
import type { QuestionVariant, QuizQuestionsWithVariants } from "../../../model/questionTypes/shared";
import { AnswerItem } from "./AnswerItem";
type AnswerDraggableListProps = {
question: QuizQuestionsWithVariants;
additionalContent?: (variant: QuestionVariant | ImageQuestionVariant, index: number) => ReactNode;
additionalMobile?: (variant: QuestionVariant | ImageQuestionVariant, index: number) => ReactNode;
additionalContent?: (variant: QuestionVariant, index: number) => ReactNode;
additionalMobile?: (variant: QuestionVariant, index: number) => ReactNode;
};
export const AnswerDraggableList = ({

4
src/pages/Questions/ButtonsOptions.tsx
View File

@ -18,13 +18,13 @@ import Branching from "../../assets/icons/questionsPage/branching";
import Clue from "../../assets/icons/questionsPage/clue";
import { HideIcon } from "../../assets/icons/questionsPage/hideIcon";
import SettingIcon from "../../assets/icons/questionsPage/settingIcon";
import type { AnyQuizQuestion } from "../../model/questionTypes/shared";
import type { AnyTypedQuizQuestion } from "../../model/questionTypes/shared";
interface Props {
switchState: string;
SSHC: (data: string) => void;
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion;
sx?: SxProps;
}

33
src/pages/Questions/DraggableList/ChooseAnswerModal.tsx
View File

@ -1,3 +1,4 @@
import { QuestionType } from "@model/question/question";
import {
Box,
Button,
@ -11,19 +12,19 @@ import {
Typography,
useTheme,
} from "@mui/material";
import { useState } from "react";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
import { changeQuestionType } from "@root/questions/actions";
import type { RefObject } from "react";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";
import { useState } from "react";
import type { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../model/questionTypes/shared";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
type ChooseAnswerModalProps = {
open: boolean;
onClose: () => void;
anchorRef: RefObject<HTMLDivElement>;
question: AnyQuizQuestion;
switchState: string;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionType: QuestionType | null;
};
export const ChooseAnswerModal = ({
@ -31,7 +32,7 @@ export const ChooseAnswerModal = ({
onClose,
anchorRef,
question,
switchState,
questionType,
}: ChooseAnswerModalProps) => {
const [openModal, setOpenModal] = useState<boolean>(false);
const [selectedValue, setSelectedValue] = useState<QuestionType>("text");
@ -54,7 +55,7 @@ export const ChooseAnswerModal = ({
<MenuItem
key={value}
sx={{ display: "flex", gap: "10px" }}
{...(value !== switchState && {
{...(value !== questionType && {
onClick: () => {
onClose();
setOpenModal(true);
@ -66,7 +67,7 @@ export const ChooseAnswerModal = ({
<Typography
sx={{
color:
value === switchState
value === questionType
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
}}
@ -114,17 +115,9 @@ export const ChooseAnswerModal = ({
<Button
variant="contained"
sx={{ minWidth: "150px" }}
onClick={() => { // TODO
// setOpenModal(false);
// const question = { ...listQuestions[quizId][totalIndex] };
// removeQuestionForce(quizId, question.id);
// createQuestion(quizId, selectedValue, totalIndex);
// updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
// title: question.title,
// expanded: question.expanded,
// });
onClick={() => {
setOpenModal(false);
changeQuestionType(question.id, selectedValue);
}}
>
Подтвердить

4
src/pages/Questions/DraggableList/DraggableListItem.tsx
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ListItem, Typography, useTheme } from "@mui/material";
import { memo } from "react";
import { Draggable } from "react-beautiful-dnd";
@ -6,7 +6,7 @@ import QuestionsPageCard from "./QuestionPageCard";
type Props = {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
isDragging: boolean;
index: number;
};

28
src/pages/Questions/DraggableList/QuestionPageCard.tsx
View File

@ -29,18 +29,20 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { copyQuestion, createQuestion, deleteQuestion, toggleExpandQuestion, updateQuestion } from "@root/questions/actions";
import { copyQuestion, createUntypedQuestion, deleteQuestion, toggleExpandQuestion, updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { useDebouncedCallback } from "use-debounce";
import { ReactComponent as PlusIcon } from "../../../assets/icons/plus.svg";
import type { AnyQuizQuestion } from "../../../model/questionTypes/shared";
import type { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../model/questionTypes/shared";
import SwitchQuestionsPage from "../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import TypeQuestions from "../TypeQuestions";
import { QuestionType } from "@model/question/question";
interface Props {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
isDragging: boolean;
}
@ -54,7 +56,9 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
const anchorRef = useRef(null);
const setTitle = useDebouncedCallback((title) => {
updateQuestion(question.id, question => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
@ -109,7 +113,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
switchState={question.type}
questionType={question.type}
/>
</Box>
),
@ -138,7 +142,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
fontSize: "18px",
lineHeight: "21px",
py: 0,
paddingLeft: question.type.length === 0 ? 0 : "18px",
paddingLeft: question.type === null ? 0 : "18px",
},
"data-cy": "quiz-question-title",
}}
@ -291,11 +295,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
borderRadius: "12px",
}}
>
{/* {question.type === "nonselected" ? (
{question.type === null ? (
<TypeQuestions question={question} />
) : ( */}
) : (
<SwitchQuestionsPage question={question} />
{/* )} */}
)}
</Box>
)}
</Paper>
@ -311,7 +315,7 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
}}
>
<Box
onClick={() => createQuestion(question.quizId)}
onClick={() => createUntypedQuestion(question.quizId)}
sx={{
display: plusVisible && !isDragging ? "flex" : "none",
width: "100%",
@ -339,8 +343,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
);
}
const IconAndrom = (isExpanded: boolean, switchState: string) => {
switch (switchState) {
const IconAndrom = (isExpanded: boolean, questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return (
<Answer

22
src/pages/Questions/DraggableList/index.tsx
View File

@ -1,29 +1,13 @@
import { questionApi } from "@api/question";
import { devlog } from "@frontend/kitui";
import { Box } from "@mui/material";
import { reorderQuestions, setQuestions } from "@root/questions/actions";
import { useQuestionsStore } from "@root/questions/store";
import { useCurrentQuiz } from "@root/quizes/hooks";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import { reorderQuestions } from "@root/questions/actions";
import { useQuestions } from "@root/questions/hooks";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import useSWR from "swr";
import DraggableListItem from "./DraggableListItem";
export const DraggableList = () => {
const quiz = useCurrentQuiz();
const { isLoading } = useSWR(["questions", quiz?.backendId], ([, id]) => questionApi.getList({ quiz_id: id }), {
onSuccess: setQuestions,
onError: error => {
const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
devlog("Error getting question list", error);
enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
}
});
const questions = useQuestionsStore(state => state.questions);
const { questions, isLoading } = useQuestions();
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);

25
src/pages/Questions/Form/FormDraggableList/ChooseAnswerModal.tsx
View File

@ -1,3 +1,4 @@
import { QuestionType } from "@model/question/question";
import {
Box,
Button,
@ -11,20 +12,19 @@ import {
Typography,
useTheme,
} from "@mui/material";
import { useState } from "react";
import { BUTTON_TYPE_QUESTIONS } from "../../TypeQuestions";
import { QuestionType } from "@model/question/question";
import { updateQuestion } from "@root/questions/actions";
import { changeQuestionType } from "@root/questions/actions";
import type { RefObject } from "react";
import type { AnyQuizQuestion } from "../../../../model/questionTypes/shared";
import { useState } from "react";
import type { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import { BUTTON_TYPE_QUESTIONS } from "../../TypeQuestions";
type ChooseAnswerModalProps = {
open: boolean;
onClose: () => void;
anchorRef: RefObject<HTMLDivElement>;
question: AnyQuizQuestion;
switchState: string;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionType: QuestionType | null;
};
export const ChooseAnswerModal = ({
@ -32,7 +32,7 @@ export const ChooseAnswerModal = ({
onClose,
anchorRef,
question,
switchState,
questionType,
}: ChooseAnswerModalProps) => {
const [openModal, setOpenModal] = useState<boolean>(false);
const [selectedValue, setSelectedValue] = useState<QuestionType>("text");
@ -55,7 +55,7 @@ export const ChooseAnswerModal = ({
<MenuItem
key={value}
sx={{ display: "flex", gap: "10px" }}
{...(value !== switchState && {
{...(value !== questionType && {
onClick: () => {
onClose();
setOpenModal(true);
@ -67,7 +67,7 @@ export const ChooseAnswerModal = ({
<Typography
sx={{
color:
value === switchState
value === questionType
? theme.palette.brightPurple.main
: theme.palette.grey2.main,
}}
@ -117,10 +117,7 @@ export const ChooseAnswerModal = ({
sx={{ minWidth: "150px" }}
onClick={() => {
setOpenModal(false);
updateQuestion(question.id, question => {
question.type = selectedValue;
});
changeQuestionType(question.id, selectedValue)
}}
>
Подтвердить

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

@ -2,18 +2,17 @@ import { Box, ListItem, Typography, useTheme } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import { memo } from "react";
import { Draggable } from "react-beautiful-dnd";
import { AnyQuizQuestion, QuizQuestionBase } from "../../../../model/questionTypes/shared";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import QuestionsPageCard from "./QuestionPageCard";
type FormDraggableListItemProps = {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
questionData: QuizQuestionBase;
};
export default memo(
({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
({ question, questionIndex }: FormDraggableListItemProps) => {
const theme = useTheme();
return (
@ -24,7 +23,7 @@ export default memo(
{...(questionIndex !== 0 ? provided.draggableProps : {})}
sx={{ userSelect: "none", padding: 0 }}
>
{questionData.deleted ? (
{question.deleted ? (
<Box
{...provided.dragHandleProps}
sx={{

26
src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx
View File

@ -12,18 +12,20 @@ import Page from "@icons/questionsPage/page";
import RatingIcon from "@icons/questionsPage/rating";
import Slider from "@icons/questionsPage/slider";
import { Box, InputAdornment, Paper } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import { updateQuestion, updateUntypedQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
import { useRef, useState } from "react";
import type { DraggableProvidedDragHandleProps } from "react-beautiful-dnd";
import { useDebouncedCallback } from "use-debounce";
import type { AnyQuizQuestion } from "../../../../model/questionTypes/shared";
import type { AnyTypedQuizQuestion, UntypedQuizQuestion } from "../../../../model/questionTypes/shared";
import SwitchQuestionsPage from "../../SwitchQuestionsPage";
import { ChooseAnswerModal } from "./ChooseAnswerModal";
import FormTypeQuestions from "../FormTypeQuestions";
import { QuestionType } from "@model/question/question";
interface Props {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
questionIndex: number;
draggableProps: DraggableProvidedDragHandleProps | null | undefined;
}
@ -37,7 +39,9 @@ export default function QuestionsPageCard({
const anchorRef = useRef(null);
const setTitle = useDebouncedCallback((title) => {
updateQuestion(question.id, question => {
const updateQuestionFn = question.type === null ? updateUntypedQuestion : updateQuestion;
updateQuestionFn(question.id, question => {
question.title = title;
});
}, 200);
@ -86,7 +90,7 @@ export default function QuestionsPageCard({
onClose={() => setOpen(false)}
anchorRef={anchorRef}
question={question}
switchState={question.type}
questionType={question.type}
/>
</Box>
),
@ -103,19 +107,19 @@ export default function QuestionsPageCard({
),
}}
/>
{/* {question.type === "" ? (
<FormTypeQuestions totalIndex={totalIndex} />
) : ( */}
{question.type === null ? (
<FormTypeQuestions question={question} />
) : (
<SwitchQuestionsPage question={question} />
{/* )} */}
)}
</Box>
</Paper>
</>
);
}
const IconAndrom = (switchState: string) => {
switch (switchState) {
const IconAndrom = (questionType: QuestionType | null) => {
switch (questionType) {
case "variant":
return <Answer color="#9A9AAF" sx={{ height: "22px", width: "20px" }} />;
case "images":

23
src/pages/Questions/Form/FormDraggableList/index.tsx
View File

@ -1,29 +1,13 @@
import { Box } from "@mui/material";
import { reorderQuestions } from "@root/questions/actions";
import { useQuestions } from "@root/questions/hooks";
import type { DropResult } from "react-beautiful-dnd";
import { DragDropContext, Droppable } from "react-beautiful-dnd";
import FormDraggableListItem from "./FormDraggableListItem";
import { useQuestionsStore } from "@root/questions/store";
import { reorderQuestions, setQuestions } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import useSWR from "swr";
import { questionApi } from "@api/question";
import { devlog } from "@frontend/kitui";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
export const FormDraggableList = () => {
const quiz = useCurrentQuiz();
useSWR(["questions", quiz?.backendId], ([, id]) => questionApi.getList({ quiz_id: id }), {
onSuccess: setQuestions,
onError: error => {
const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
devlog("Error getting question list", error);
enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
}
});
const questions = useQuestionsStore(state => state.questions);
const { questions } = useQuestions();
const onDragEnd = ({ destination, source }: DropResult) => {
if (destination) reorderQuestions(source.index, destination.index);
@ -39,7 +23,6 @@ export const FormDraggableList = () => {
key={question.id}
question={question}
questionIndex={index}
questionData={question}
/>
))}
{provided.placeholder}

7
src/pages/Questions/Form/FormQuestionsPage.tsx
View File

@ -1,11 +1,11 @@
import { Box, Button, Typography, useTheme } from "@mui/material";
import { incrementCurrentStep } from "@root/quizes/actions";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
import { createPortal } from "react-dom";
import AddAnswer from "../../../assets/icons/questionsPage/addAnswer";
import ArrowLeft from "../../../assets/icons/questionsPage/arrowLeft";
import { FormDraggableList } from "./FormDraggableList";
import { collapseAllQuestions, createQuestion } from "@root/questions/actions";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
@ -68,7 +68,7 @@ export default function FormQuestionsPage() {
},
}}
onClick={() => {
createQuestion(quiz.backendId);
createUntypedQuestion(quiz.backendId);
}}
data-cy="create-question"
>
@ -89,6 +89,7 @@ export default function FormQuestionsPage() {
<Button
variant="outlined"
sx={{ padding: "10px 20px", borderRadius: "8px", height: "44px" }}
onClick={decrementCurrentStep}
>
<ArrowLeft />
</Button>

31
src/pages/Questions/Form/FormTypeQuestions.tsx
View File

@ -1,23 +1,20 @@
import { useState } from "react";
import { Box } from "@mui/material";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import ButtonsOptions from "../ButtonsOptions";
import SwitchAnswerOptions from "../answerOptions/switchAnswerOptions";
import { BUTTON_TYPE_QUESTIONS } from "../TypeQuestions";
import Answer from "../../../assets/icons/questionsPage/answer";
import Input from "../../../assets/icons/questionsPage/input";
import DropDown from "../../../assets/icons/questionsPage/drop_down";
import Date from "../../../assets/icons/questionsPage/date";
import Slider from "../../../assets/icons/questionsPage/slider";
import Download from "../../../assets/icons/questionsPage/download";
import DropDown from "../../../assets/icons/questionsPage/drop_down";
import Input from "../../../assets/icons/questionsPage/input";
import Slider from "../../../assets/icons/questionsPage/slider";
import type {
AnyQuizQuestion,
} from "../../../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";
import { updateQuestion } from "@root/questions/actions";
import { createTypedQuestion } from "@root/questions/actions";
import type {
UntypedQuizQuestion
} from "../../../model/questionTypes/shared";
type ButtonTypeQuestion = {
@ -60,11 +57,10 @@ const BUTTON_TYPE_SHORT_QUESTIONS: ButtonTypeQuestion[] = [
];
interface Props {
question: AnyQuizQuestion;
question: UntypedQuizQuestion;
}
export default function FormTypeQuestions({ question }: Props) {
const [switchState, setSwitchState] = useState("");
return (
<Box>
@ -83,22 +79,13 @@ export default function FormTypeQuestions({ question }: Props) {
<QuestionsMiniButton
key={title}
onClick={() => {
updateQuestion(question.id, question => {
question.type = questionType;
})
createTypedQuestion(question.id, questionType);
}}
icon={icon}
text={title}
/>
))}
</Box>
<ButtonsOptions
switchState={switchState}
SSHC={setSwitchState}
question={question}
/>
{/* TODO конфликт типов */}
{/* <SwitchAnswerOptions switchState={switchState} question={question} /> */}
</Box>
);
}

4
src/pages/Questions/QuestionsPage.tsx
View File

@ -7,7 +7,7 @@ import {
useMediaQuery,
useTheme,
} from "@mui/material";
import { collapseAllQuestions, createQuestion } from "@root/questions/actions";
import { collapseAllQuestions, createUntypedQuestion } from "@root/questions/actions";
import { decrementCurrentStep, incrementCurrentStep } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import QuizPreview from "@ui_kit/QuizPreview/QuizPreview";
@ -66,7 +66,7 @@ export default function QuestionsPage() {
>
<IconButton
onClick={() => {
createQuestion(quiz.backendId);
createUntypedQuestion(quiz.backendId);
}}
sx={{
position: "fixed",

7
src/pages/Questions/SwitchQuestionsPage.tsx
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import DataOptions from "./DataOptions/DataOptions";
import DropDown from "./DropDown/DropDown";
import Emoji from "./Emoji/Emoji";
@ -10,10 +10,11 @@ import RatingOptions from "./RatingOptions/RatingOptions";
import SliderOptions from "./SliderOptions/SliderOptions";
import UploadFile from "./UploadFile/UploadFile";
import AnswerOptions from "./answerOptions/AnswerOptions";
import { notReachable } from "../../utils/notReachable";
interface Props {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion;
}
export default function SwitchQuestionsPage({ question }: Props) {
@ -53,6 +54,6 @@ export default function SwitchQuestionsPage({ question }: Props) {
return <RatingOptions question={question} />;
default:
return <></>;
notReachable(question)
}
}

12
src/pages/Questions/TypeQuestions.tsx
View File

@ -1,4 +1,6 @@
import { QuestionType } from "@model/question/question";
import { Box } from "@mui/material";
import { createTypedQuestion } from "@root/questions/actions";
import QuestionsMiniButton from "@ui_kit/QuestionsMiniButton";
import Answer from "../../assets/icons/questionsPage/answer";
import Date from "../../assets/icons/questionsPage/date";
@ -11,14 +13,12 @@ import OptionsPict from "../../assets/icons/questionsPage/options_pict";
import Page from "../../assets/icons/questionsPage/page";
import RatingIcon from "../../assets/icons/questionsPage/rating";
import Slider from "../../assets/icons/questionsPage/slider";
import { updateQuestion } from "@root/questions/actions";
import type {
AnyQuizQuestion,
UntypedQuizQuestion,
} from "../../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";
interface Props {
question: AnyQuizQuestion;
question: UntypedQuizQuestion;
}
type ButtonTypeQuestion = {
@ -42,9 +42,7 @@ export default function TypeQuestions({ question }: Props) {
<QuestionsMiniButton
key={title}
dataCy={`select-questiontype-${value}`}
onClick={() => updateQuestion(question.id, question => {
question.type = value;
})}
onClick={() => createTypedQuestion(question.id, value)}
icon={icon}
text={title}
/>

4
src/pages/Questions/UploadImage/index.tsx
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography, useTheme } from "@mui/material";
import { openCropModal } from "@root/cropModal";
import { closeImageUploadModal, openImageUploadModal } from "@root/imageUploadModal";
@ -11,7 +11,7 @@ import { UploadImageModal } from "./UploadImageModal";
type UploadImageProps = {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion;
};
export default function UploadImage({ question }: UploadImageProps) {

338
src/pages/Questions/branchingQuestions.tsx Normal file
View File

@ -0,0 +1,338 @@
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import {
Box,
Button,
Chip,
FormControl,
FormControlLabel,
IconButton,
Link,
Modal,
Radio,
RadioGroup,
Tooltip,
Typography,
useTheme,
} from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { useEffect, useRef, useState } from "react";
import { Select } from "./Select";
type BranchingQuestionsProps = {
question: AnyTypedQuizQuestion;
};
const ACTIONS = ["Показать", "Скрыть"];
const STIPULATIONS = ["Условие 1", "Условие 2", "Условие 3"];
const ANSWERS = ["Ответ 1", "Ответ 2", "Ответ 3"];
const CONDITIONS = [
"Все условия обязательны",
"Обязательно хотя бы одно условие",
];
export default function BranchingQuestions({
question,
}: BranchingQuestionsProps) {
const theme = useTheme();
const [title, setTitle] = useState<string>("");
const [titleInputWidth, setTitleInputWidth] = useState<number>(0);
const titleRef = useRef<HTMLDivElement>(null);
useEffect(() => {
setTitleInputWidth(titleRef.current?.offsetWidth || 0);
}, [title]);
const handleClose = () => {
updateQuestion(question.id, question => {
question.openedModalSettings = false;
});
};
return (
<>
<Modal open={question.openedModalSettings} onClose={handleClose}>
<Box
sx={{
position: "absolute",
overflow: "hidden",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)",
maxWidth: "620px",
width: "100%",
bgcolor: "background.paper",
borderRadius: "12px",
boxShadow: 24,
p: 0,
}}
>
<Box
sx={{
boxSizing: "border-box",
background: "#F2F3F7",
height: "70px",
padding: "0 25px",
display: "flex",
alignItems: "center",
}}
>
<Box sx={{ color: "#9A9AAF" }}>
<Typography component="span">(</Typography>
<Box sx={{ display: "inline" }}>
<Typography
ref={titleRef}
sx={{
position: "absolute",
opacity: 0,
zIndex: "-100",
whiteSpace: "pre",
}}
>
{title}
</Typography>
<input
type="text"
value={title}
placeholder="Заголовок вопроса"
onChange={({ target }) => setTitle(target.value)}
style={{
width: titleInputWidth ? titleInputWidth : 170,
outline: "none",
background: "transparent",
border: "none",
fontSize: "18px",
minWidth: "50px",
maxWidth: "500px",
fontFamily: "Rubik",
transition: ".2s",
}}
/>
</Box>
<Typography component="span">)</Typography>
</Box>
<Tooltip
title="Настройте условия, при которых данный вопрос будет отображаться в квизе."
placement="top"
>
<Box>
<InfoIcon />
</Box>
</Tooltip>
</Box>
<Box
sx={{
padding: "20px",
display: "flex",
flexDirection: "column",
gap: "30px",
}}
>
<Box
sx={{
display: "flex",
gap: "20px",
alignItems: "center",
}}
>
<Select
items={ACTIONS}
activeItemIndex={question.content.rule.show ? 0 : 1}
sx={{ maxWidth: "140px" }}
onChange={(action) => {
updateQuestion(question.id, question => {
question.content.rule.show = action === ACTIONS[0];
});
}}
/>
<Typography sx={{ color: theme.palette.grey2.main }}>
если в ответе на вопрос
</Typography>
</Box>
{question.content.rule.reqs.map((request, index) => (
<Box
key={index}
sx={{
padding: "20px",
borderRadius: "8px",
height: "100%",
bgcolor: "#F2F3F7",
}}
>
<Box
sx={{
display: "flex",
justifyContent: "space-between",
alignItems: "center",
pb: "5px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
Условие 1
</Typography>
<IconButton
sx={{ borderRadius: "6px", padding: "2px" }}
onClick={() => {
updateQuestion(question.id, question => {
question.content.rule.reqs.splice(index, 1);
});
}}
>
<DeleteIcon color={"#4D4D4D"} />
</IconButton>
</Box>
<Select
empty
activeItemIndex={request.id ? Number(request.id) : -1}
items={STIPULATIONS}
onChange={(stipulation) => {
updateQuestion(question.id, question => {
question.content.rule.reqs[index].id = String(
STIPULATIONS.findIndex((item) => item.includes(stipulation))
);
});
}}
sx={{ marginBottom: "15px" }}
/>
{request.id && (
<>
<Box
sx={{
display: "flex",
alignItems: "center",
pb: "10px",
}}
>
<Typography sx={{ color: "#4D4D4D", fontWeight: "500" }}>
Дан ответ
</Typography>
<Typography sx={{ color: "#7E2AEA", pl: "10px" }}>
(Укажите один или несколько вариантов)
</Typography>
</Box>
<Select
empty
activeItemIndex={-1}
items={ANSWERS}
onChange={(answer) => {
const answerItemIndex = ANSWERS.findIndex(
(answerItem) => answerItem === answer
);
updateQuestion(question.id, question => {
const vars = question.content.rule.reqs[index].vars;
if (vars.includes(answerItemIndex)) {
vars.push(answerItemIndex);
}
});
}}
sx={{
marginBottom: "10px",
".MuiSelect-select.MuiInputBase-input": {
color: "transparent",
},
}}
/>
<Box
sx={{
display: "flex",
gap: "10px",
}}
>
{question.content.rule.reqs[index].vars.map(
(item, varIndex) => (
<Chip
key={varIndex}
label={ANSWERS[item]}
variant="outlined"
onDelete={() => {
updateQuestion(question.id, question => {
const vars = question.content.rule.reqs[index].vars;
const removedItemIndex = vars.findIndex((varItem) => varItem === item);
if (removedItemIndex === -1) return;
vars.splice(removedItemIndex, 1);
});
}}
/>
)
)}
</Box>
</>
)}
</Box>
))}
<Box
sx={{
display: "flex",
flexDirection: "column",
alignItems: "baseline",
}}
>
<Link
variant="body2"
sx={{
color: theme.palette.brightPurple.main,
marginBottom: "10px",
}}
onClick={() => {
updateQuestion(question.id, question => {
question.content.rule.reqs.push({ id: "", vars: [] });
});
}}
>
Добавить условие
</Link>
<FormControl>
<RadioGroup
aria-labelledby="demo-controlled-radio-buttons-group"
value={question.content.rule.or ? 1 : 0}
onChange={(_, value) => {
updateQuestion(question.id, question => {
question.content.rule.or = Boolean(Number(value));
});
}}
>
{CONDITIONS.map((condition, index) => (
<FormControlLabel
key={index}
sx={{ color: theme.palette.grey2.main }}
value={index}
control={
<Radio
checkedIcon={<RadioCheck />}
icon={<RadioIcon />}
/>
}
label={condition}
/>
))}
</RadioGroup>
</FormControl>
</Box>
<Box sx={{ display: "flex", justifyContent: "end", gap: "10px" }}>
<Button
variant="outlined"
onClick={handleClose}
sx={{ width: "100%", maxWidth: "130px" }}
>
Отмена
</Button>
<Button
variant="contained"
sx={{ width: "100%", maxWidth: "130px" }}
onClick={handleClose}
>
Готово
</Button>
</Box>
</Box>
</Box>
</Modal>
</>
);
}

4
src/pages/Questions/helpQuestions.tsx
View File

@ -1,4 +1,4 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion } from "@model/questionTypes/shared";
import { Box, ButtonBase, Typography } from "@mui/material";
import { updateQuestion } from "@root/questions/actions";
import CustomTextField from "@ui_kit/CustomTextField";
@ -13,7 +13,7 @@ import { UploadVideoModal } from "./UploadVideoModal";
type BackgroundType = "text" | "video";
type HelpQuestionsProps = {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion;
};
export default function HelpQuestions({ question }: HelpQuestionsProps) {

6
src/pages/startPage/StartPage.tsx
View File

@ -29,6 +29,7 @@ import { useEffect, useState } from "react";
import { Link, useNavigate } from "react-router-dom";
import useSWR from "swr";
import { SidebarMobile } from "./Sidebar/SidebarMobile";
import { cleanQuestions } from "@root/questions/actions";
export default function StartPage() {
@ -56,7 +57,10 @@ export default function StartPage() {
if (editQuizId === null) navigate("/list");
}, [navigate, editQuizId]);
useEffect(() => () => resetEditConfig(), []);
useEffect(() => () => {
resetEditConfig();
cleanQuestions();
}, []);
return (
<>

12
src/stores/questions.ts
View File

@ -2,7 +2,7 @@ import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import type {
AnyQuizQuestion
AnyTypedQuizQuestion
} from "../model/questionTypes/shared";
import { QuestionType } from "@model/question/question";
@ -23,7 +23,7 @@ import { QUIZ_QUESTION_VARIMG } from "../constants/varimg";
setAutoFreeze(false);
interface QuestionStore {
listQuestions: Record<string, AnyQuizQuestion[]>;
listQuestions: Record<string, AnyTypedQuizQuestion[]>;
}
let isFirstPartialize = true;
@ -107,7 +107,7 @@ export const questionStore = create<QuestionStore>()(
);
/** @deprecated */
export const updateQuestionsList = <T = AnyQuizQuestion>(
export const updateQuestionsList = <T = AnyTypedQuizQuestion>(
quizId: number,
index: number,
data: Partial<T>
@ -121,7 +121,7 @@ export const updateQuestionsList = <T = AnyQuizQuestion>(
};
/** @deprecated */
export const updateQuestion = <T extends AnyQuizQuestion>(
export const updateQuestion = <T extends AnyTypedQuizQuestion>(
quizId: number,
questionIndex: number,
recipe: (question: T) => void,
@ -256,7 +256,7 @@ export const setQuestionOriginalBackgroundImage = (
/** @deprecated */
export const updateQuestionsListDragAndDrop = (
quizId: number,
updatedQuestions: AnyQuizQuestion[]
updatedQuestions: AnyTypedQuizQuestion[]
) => {
const questionListClone = { ...questionStore.getState()["listQuestions"] };
questionStore.setState({
@ -361,7 +361,7 @@ export const findQuestionById = (quizId: number) => {
let found = null;
questionStore
.getState()
["listQuestions"][quizId].some((quiz: AnyQuizQuestion, index: number) => {
["listQuestions"][quizId].some((quiz: AnyTypedQuizQuestion, index: number) => {
if (quiz.backendId === quizId) {
found = { quiz, index };
return true;

223
src/stores/questions/actions.ts
View File

@ -2,28 +2,39 @@ import { questionApi } from "@api/question";
import { devlog } from "@frontend/kitui";
import { questionToEditQuestionRequest } from "@model/question/edit";
import { QuestionType, RawQuestion, rawQuestionToQuestion } from "@model/question/question";
import { AnyQuizQuestion, ImageQuestionVariant, QuestionVariant, createQuestionImageVariant, createQuestionVariant } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion, QuestionVariant, UntypedQuizQuestion, createQuestionVariant } from "@model/questionTypes/shared";
import { defaultQuestionByType } from "../../constants/default";
import { produce } from "immer";
import { nanoid } from "nanoid";
import { enqueueSnackbar } from "notistack";
import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
import { notReachable } from "../../utils/notReachable";
import { RequestQueue } from "../../utils/requestQueue";
import { QuestionsStore, useQuestionsStore } from "./store";
import { nanoid } from "nanoid";
export const setQuestions = (questions: RawQuestion[] | null) => setProducedState(state => {
const untypedQuestions = state.questions.filter(q => q.type === null);
state.questions = questions?.map(rawQuestionToQuestion) ?? [];
state.questions.push(...untypedQuestions);
}, {
type: "setQuestions",
questions,
});
const addQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
state.questions.push(question);
export const createUntypedQuestion = (quizId: number) => setProducedState(state => {
state.questions.push({
id: nanoid(),
quizId,
type: null,
title: "",
description: "",
deleted: false,
expanded: true,
});
}, {
type: "addQuestion",
question,
type: "createUntypedQuestion",
quizId,
});
const removeQuestion = (questionId: string) => setProducedState(state => {
@ -36,9 +47,33 @@ const removeQuestion = (questionId: string) => setProducedState(state => {
questionId,
});
export const updateUntypedQuestion = (
questionId: string,
updateFn: (question: UntypedQuizQuestion) => void,
) => {
setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question) return;
if (question.type !== null) throw new Error("Cannot update typed question, use 'updateQuestion' instead");
updateFn(question);
}, {
type: "updateUntypedQuestion",
questionId,
updateFn: updateFn.toString(),
});
};
export const cleanQuestions = () => setProducedState(state => {
state.questions = [];
}, {
type: "cleanQuestions",
});
const setQuestionBackendId = (questionId: string, backendId: number) => setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null) throw new Error("Cannot set backend id for untyped question");
question.backendId = backendId;
}, {
@ -56,6 +91,10 @@ export const reorderQuestions = (
setProducedState(state => {
const [removed] = state.questions.splice(sourceIndex, 1);
state.questions.splice(destinationIndex, 0, removed);
}, {
type: "reorderQuestions",
sourceIndex,
destinationIndex,
});
};
@ -64,32 +103,66 @@ export const toggleExpandQuestion = (questionId: string) => setProducedState(sta
if (!question) return;
question.expanded = !question.expanded;
}, {
type: "toggleExpandQuestion",
questionId,
});
export const collapseAllQuestions = () => setProducedState(state => {
state.questions.forEach(question => question.expanded = false);
}, "collapseAllQuestions");
const REQUEST_DEBOUNCE = 200;
const requestQueue = new RequestQueue();
let requestTimeoutId: ReturnType<typeof setTimeout>;
export const updateQuestion = (
questionId: string,
updateFn: (question: AnyTypedQuizQuestion) => void,
) => {
setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null) throw new Error("Cannot update untyped question, use 'updateUntypedQuestion' instead");
updateFn(question);
}, {
type: "updateQuestion",
questionId,
updateFn: updateFn.toString(),
});
clearTimeout(requestTimeoutId);
requestTimeoutId = setTimeout(() => {
requestQueue.enqueue(async () => {
const q = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!q) return;
if (q.type === null) throw new Error("Cannot send update request for untyped question");
const response = await questionApi.edit(questionToEditQuestionRequest(q));
setQuestionBackendId(questionId, response.updated);
}).catch(error => {
if (isAxiosCanceledError(error)) return;
devlog("Error editing question", { error, questionId });
enqueueSnackbar("Не удалось сохранить вопрос");
});
}, REQUEST_DEBOUNCE);
};
export const addQuestionVariant = (questionId: string) => {
updateQuestion(questionId, question => {
switch (question.type) {
case "variant":
case "emoji":
case "select":
question.content.variants.push(createQuestionVariant());
break;
case "images":
case "varimg":
question.content.variants.push(createQuestionImageVariant());
question.content.variants.push(createQuestionVariant());
break;
case "text":
case "date":
case "number":
case "file":
case "page":
case "rating":
throw new Error(`Cannot add variant to question of type "${question.type}"`);
default: notReachable(question);
default: throw new Error(`Cannot add variant to question of type "${question.type}"`);
}
});
};
@ -122,25 +195,6 @@ export const setQuestionVariantField = (
});
};
export const setQuestionImageVariantField = (
questionId: string,
variantId: string,
field: keyof ImageQuestionVariant,
value: ImageQuestionVariant[keyof ImageQuestionVariant],
) => {
updateQuestion(questionId, question => {
if (!("variants" in question.content)) return;
const variantIndex = question.content.variants.findIndex(variant => variant.id === variantId);
if (variantIndex === -1) return;
const variant = question.content.variants[variantIndex];
if (!("originalImageUrl" in variant)) return;
variant[field] = value;
});
};
export const reorderQuestionVariants = (
questionId: string,
sourceIndex: number,
@ -192,7 +246,7 @@ export const setVariantImageUrl = (
if (!("variants" in question.content)) return;
const variant = question.content.variants.find(variant => variant.id === variantId);
if (!variant || !("originalImageUrl" in variant)) return;
if (!variant) return;
if (variant.extendedText === url) return;
@ -211,8 +265,8 @@ export const setVariantOriginalImageUrl = (
const variant = question.content.variants.find(
variant => variant.id === variantId
) as ImageQuestionVariant | undefined;
if (!variant || !("originalImageUrl" in variant)) return;
) as QuestionVariant | undefined;
if (!variant) return;
if (variant.originalImageUrl === url) return;
@ -260,51 +314,46 @@ export const setQuestionInnerName = (
});
};
const REQUEST_DEBOUNCE = 200;
const requestQueue = new RequestQueue();
let requestTimeoutId: ReturnType<typeof setTimeout>;
export const updateQuestion = (
export const changeQuestionType = (
questionId: string,
updateFn: (question: AnyQuizQuestion) => void,
type: QuestionType,
) => {
setProducedState(state => {
const question = state.questions.find(q => q.id === questionId);
if (!question) return;
updateFn(question);
}, {
type: "updateQuestion",
questionId,
updateFn: updateFn.toString(),
updateQuestion(questionId, question => {
question.type = type;
question.content = defaultQuestionByType[type].content;
});
clearTimeout(requestTimeoutId);
requestTimeoutId = setTimeout(() => {
requestQueue.enqueue(async () => {
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
const response = await questionApi.edit(questionToEditQuestionRequest(question));
setQuestionBackendId(questionId, response.updated);
}).catch(error => {
if (isAxiosCanceledError(error)) return;
devlog("Error editing question", { error, questionId });
enqueueSnackbar("Не удалось сохранить вопрос");
});
}, REQUEST_DEBOUNCE);
};
export const createQuestion = async (quizId: number, type: QuestionType = "variant") => requestQueue.enqueue(async () => {
export const createTypedQuestion = async (
questionId: string,
type: QuestionType,
) => requestQueue.enqueue(async () => {
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
if (question.type !== null) throw new Error("Cannot upgrade already typed question");
try {
const question = await questionApi.create({
quiz_id: quizId,
const createdQuestion = await questionApi.create({
quiz_id: question.quizId,
type,
title: question.title,
description: question.description,
page: 0,
required: true,
content: JSON.stringify(defaultQuestionByType[type].content),
});
addQuestion(rawQuestionToQuestion(question));
setProducedState(state => {
const questionIndex = state.questions.findIndex(q => q.id === questionId);
if (questionIndex !== -1) state.questions.splice(
questionIndex,
1,
rawQuestionToQuestion(createdQuestion)
);
}, {
type: "createTypedQuestion",
question,
});
} catch (error) {
devlog("Error creating question", error);
enqueueSnackbar("Не удалось создать вопрос");
@ -315,6 +364,11 @@ export const deleteQuestion = async (questionId: string) => requestQueue.enqueue
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null) {
removeQuestion(questionId);
return;
}
try {
await questionApi.delete(question.backendId);
@ -329,6 +383,21 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
const question = useQuestionsStore.getState().questions.find(q => q.id === questionId);
if (!question) return;
if (question.type === null) {
const copiedQuestion = structuredClone(question);
copiedQuestion.id = nanoid();
setProducedState(state => {
state.questions.push(copiedQuestion);
}, {
type: "copyQuestion",
questionId,
quizId,
});
return;
}
try {
const { updated: newQuestionId } = await questionApi.copy(question.backendId, quizId);
@ -340,7 +409,7 @@ export const copyQuestion = async (questionId: string, quizId: number) => reques
state.questions.push(copiedQuestion);
}, {
type: "copyQuestion",
questionId: questionId,
questionId,
quizId,
});
} catch (error) {

25
src/stores/questions/hooks.ts Normal file
View File

@ -0,0 +1,25 @@
import { questionApi } from "@api/question";
import { devlog } from "@frontend/kitui";
import { isAxiosError } from "axios";
import { enqueueSnackbar } from "notistack";
import useSWR from "swr";
import { setQuestions } from "./actions";
import { useQuestionsStore } from "./store";
import { useCurrentQuiz } from "@root/quizes/hooks";
export function useQuestions() {
const quiz = useCurrentQuiz();
const { isLoading, error, isValidating } = useSWR(["questions", quiz?.backendId], ([, id]) => questionApi.getList({ quiz_id: id }), {
onSuccess: setQuestions,
onError: error => {
const message = isAxiosError<string>(error) ? (error.response?.data ?? "") : "";
devlog("Error getting question list", error);
enqueueSnackbar(`Не удалось получить вопросы. ${message}`);
}
});
const questions = useQuestionsStore(state => state.questions);
return { questions, isLoading, error, isValidating };
}

4
src/stores/questions/store.ts
View File

@ -1,10 +1,10 @@
import { AnyQuizQuestion } from "@model/questionTypes/shared";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "@model/questionTypes/shared";
import { create } from "zustand";
import { devtools } from "zustand/middleware";
export type QuestionsStore = {
questions: AnyQuizQuestion[];
questions: (AnyTypedQuizQuestion | UntypedQuizQuestion);
openedModalSettingsId: string | null;
dragQuestionId: string | null;
};

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

@ -3,13 +3,13 @@ import { devlog, getMessageFromFetchError } from "@frontend/kitui";
import { quizToEditQuizRequest } from "@model/quiz/edit";
import { Quiz, RawQuiz, rawQuizToQuiz } from "@model/quiz/quiz";
import { QuizConfig, maxQuizSetupSteps } from "@model/quizSettings";
import { createQuestion } from "@root/questions/actions";
import { produce } from "immer";
import { enqueueSnackbar } from "notistack";
import { NavigateFunction } from "react-router-dom";
import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
import { RequestQueue } from "../../utils/requestQueue";
import { QuizStore, useQuizStore } from "./store";
import { createUntypedQuestion } from "@root/questions/actions";
export const setEditQuizId = (quizId: number | null) => setProducedState(state => {
@ -22,7 +22,7 @@ export const setEditQuizId = (quizId: number | null) => setProducedState(state =
export const resetEditConfig = () => setProducedState(state => {
state.editQuizId = null;
state.currentStep = 0;
});
}, "resetEditConfig");
export const setQuizes = (quizes: RawQuiz[] | null) => setProducedState(state => {
state.quizes = quizes?.map(rawQuizToQuiz) ?? [];
@ -73,6 +73,9 @@ export const decrementCurrentStep = () => setProducedState(state => {
export const setCurrentStep = (step: number) => setProducedState(state => {
state.currentStep = Math.max(0, Math.min(maxQuizSetupSteps - 1, step));
}, {
type: "setCurrentStep",
step,
});
export const setQuizType = (
@ -148,7 +151,7 @@ export const createQuiz = async (navigate: NavigateFunction) => requestQueue.enq
setEditQuizId(quiz.backendId);
navigate("/edit");
await createQuestion(rawQuiz.id);
await createUntypedQuestion(rawQuiz.id);
} catch (error) {
devlog("Error creating quiz", error);

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

@ -5,7 +5,7 @@ import {
incrementCurrentQuestionIndex,
useQuizPreviewStore,
} from "@root/quizPreview";
import { AnyQuizQuestion } from "model/questionTypes/shared";
import { AnyTypedQuizQuestion, UntypedQuizQuestion } from "model/questionTypes/shared";
import { useEffect } from "react";
import ArrowLeft from "../../assets/icons/questionsPage/arrowLeft";
import Date from "./QuizPreviewQuestionTypes/Date";
@ -139,8 +139,10 @@ export default function QuizPreviewLayout() {
}
function QuestionPreviewComponent({ question }: {
question: AnyQuizQuestion;
question: AnyTypedQuizQuestion | UntypedQuizQuestion;
}) {
if (question.type === null) return null;
switch (question.type) {
case "variant": return <Variant question={question} />;
case "images": return <Images question={question} />;