fix conflicts

src/api/question.ts

@@ -1,10 +1,11 @@
 import { makeRequest } from "@frontend/kitui";
 import { CreateQuestionRequest } from "model/question/create";
 import { RawQuestion } from "model/question/question";
-import { GetQuestionListRequest, GetQuestionListResponse } from "model/question/getList";
+import { GetQuestionListRequest, GetQuestionListResponse } from "@model/question/getList";
-import { EditQuestionRequest, EditQuestionResponse } from "model/question/edit";
+import { EditQuestionRequest, EditQuestionResponse } from "@model/question/edit";
-import { DeleteQuestionRequest, DeleteQuestionResponse } from "model/question/delete";
+import { DeleteQuestionRequest, DeleteQuestionResponse } from "@model/question/delete";
-import { CopyQuestionRequest, CopyQuestionResponse } from "model/question/copy";
+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";
@@ -70,16 +71,11 @@ const defaultCreateQuestionBody: CreateQuestionRequest = {
     "type": "variant",
     "required": true,
     "page": 0,
-    "content": "string",
+    "content": JSON.stringify(QUIZ_QUESTION_VARIANT.content),
 };
 
 const defaultGetQuestionListBody: GetQuestionListRequest = {
     "limit": 0,
     "offset": 0,
-    "from": 0,
+    "type": "",
-    "to": 0,
-    "search": "string",
-    "type": "string",
-    "deleted": true,
-    "required": true,
 };

src/constants/emoji.ts

@@ -1,6 +1,7 @@
 import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionEmoji } from "../model/questionTypes/emoji";
+import { nanoid } from "nanoid";
 
 export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
   ...QUIZ_QUESTION_BASE,
@@ -14,6 +15,7 @@ export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id"> = {
     required: false,
     variants: [
       {
+        id: nanoid(),
         answer: "",
         extendedText: "",
         hints: ""

src/constants/images.ts

@@ -1,6 +1,7 @@
 import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionImages } from "../model/questionTypes/images";
+import { nanoid } from "nanoid";
 
 export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
   ...QUIZ_QUESTION_BASE,
@@ -17,6 +18,7 @@ export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id"> = {
     required: false,
     variants: [
       {
+        id: nanoid(),
         answer: "",
         extendedText: "",
         originalImageUrl: "",

src/constants/select.ts

@@ -1,6 +1,7 @@
 import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionSelect } from "../model/questionTypes/select";
+import { nanoid } from "nanoid";
 
 export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
   ...QUIZ_QUESTION_BASE,
@@ -12,6 +13,6 @@ export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id"> = {
     innerNameCheck: false,
     innerName: "",
     default: "",
-    variants: [{ answer: "", extendedText: "", hints: "" }],
+    variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
   },
 };

src/constants/variant.ts

@@ -1,6 +1,7 @@
 import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionVariant } from "../model/questionTypes/variant";
+import { nanoid } from "nanoid";
 
 export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
   ...QUIZ_QUESTION_BASE,
@@ -13,6 +14,6 @@ export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id"> = {
     innerNameCheck: false,
     required: false,
     innerName: "",
-    variants: [{ answer: "", extendedText: "", hints: "" }],
+    variants: [{ id: nanoid(), answer: "", extendedText: "", hints: "" }],
   },
 };

src/constants/varimg.ts

@@ -1,6 +1,7 @@
 import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionVarImg } from "../model/questionTypes/varimg";
+import { nanoid } from "nanoid";
 
 export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
   ...QUIZ_QUESTION_BASE,
@@ -11,7 +12,7 @@ export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id"> = {
     innerNameCheck: false,
     innerName: "",
     required: false,
-    variants: [{ answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
+    variants: [{ id: nanoid(), answer: "", hints: "", extendedText: "", originalImageUrl: "" }],
     largeCheck: false,
     replText: "",
   },

src/model/question/edit.ts

@@ -9,6 +9,7 @@ export interface EditQuestionRequest {
     type?: QuestionType;
     required?: boolean;
     page?: number;
+    content: AnyQuizQuestion["content"];
 }
 
 export interface EditQuestionResponse {
@@ -23,5 +24,6 @@ export function questionToEditQuestionRequest(question: AnyQuizQuestion): EditQu
         type: question.type,
         required: question.required,
         page: question.page,
+        content: question.content,
     };
 }

src/model/question/getList.ts

@@ -1,4 +1,4 @@
-import { RawQuestion } from "./question";
+import { QuestionType, RawQuestion } from "./question";
 
 
 export interface GetQuestionListRequest {
@@ -13,7 +13,7 @@ export interface GetQuestionListRequest {
     /** string for fulltext search in titles of questions */
     search?: string;
     /** allow only - text, select, file, variant, images, varimg, emoji, date, number, page, rating or empty string */
-    type?: string;
+    type: "" | QuestionType;
     /** get deleted quizes */
     deleted?: boolean;
     /** get only require questions */

src/pages/Questions/AnswerDraggableList/AnswerItem.tsx

@@ -43,7 +43,7 @@ export const AnswerItem = ({
     const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
     const setQuestionVariantAnswer = useDebouncedCallback((value) => {
-    setQuestionVariantField(questionId, variant.id,"answer", value);
+        setQuestionVariantField(questionId, variant.id, "answer", value);
     }, 1000);
 
     const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {

src/pages/Questions/DraggableList/DraggableListItem.tsx

@@ -1,8 +1,8 @@
+import { AnyQuizQuestion } from "@model/questionTypes/shared";
 import { Box, ListItem, Typography, useTheme } from "@mui/material";
 import { memo } from "react";
 import { Draggable } from "react-beautiful-dnd";
 import QuestionsPageCard from "./QuestionPageCard";
-import { AnyQuizQuestion } from "@model/questionTypes/shared";
 
 
 type Props = {
@@ -22,7 +22,7 @@ function DraggableListItem({ question, isDragging, index }: Props) {
                     {...provided.draggableProps}
                     sx={{ userSelect: "none", padding: 0 }}
                 >
-                    {/* questionData.deleted TODO */ true ? (
+                    {question.deleted ? (
                         <Box
                             {...provided.dragHandleProps}
                             sx={{

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -1,17 +1,3 @@
-import {
-    Box,
-    Checkbox,
-    FormControl,
-    FormControlLabel,
-    IconButton,
-    InputAdornment,
-    Paper,
-    TextField,
-    useMediaQuery,
-    useTheme,
-} from "@mui/material";
-import { useRef, useState } from "react";
-import { useDebouncedCallback } from "use-debounce";
 import { CrossedEyeIcon } from "@icons/CrossedEyeIcon";
 import { ArrowDownIcon } from "@icons/questionsPage/ArrowDownIcon";
 import { CopyIcon } from "@icons/questionsPage/CopyIcon";
@@ -31,8 +17,22 @@ import Page from "@icons/questionsPage/page";
 import RatingIcon from "@icons/questionsPage/rating";
 import Slider from "@icons/questionsPage/slider";
 import ExpandLessIcon from "@mui/icons-material/ExpandLess";
-import { copyQuestion, createQuestion, deleteQuestion, toggleExpandQuestion } from "@root/questions/actions";
+import {
+    Box,
+    Checkbox,
+    FormControl,
+    FormControlLabel,
+    IconButton,
+    InputAdornment,
+    Paper,
+    TextField,
+    useMediaQuery,
+    useTheme,
+} from "@mui/material";
+import { copyQuestion, createQuestion, deleteQuestion, toggleExpandQuestion, updateQuestionWithFnOptimistic } 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 SwitchQuestionsPage from "../SwitchQuestionsPage";
@@ -52,8 +52,11 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
     const isTablet = useMediaQuery(theme.breakpoints.down(1000));
     const isMobile = useMediaQuery(theme.breakpoints.down(790));
     const anchorRef = useRef(null);
-    const debounced = useDebouncedCallback((title) => { // TODO update title
+
-        // updateQuestionsList<QuizQuestionInitial>(quizId, totalIndex, { title });
+    const setTitle = useDebouncedCallback((title) => {
+        updateQuestionWithFnOptimistic(question.id, question => {
+            question.title = title;
+        });
     }, 200);
 
     return (
@@ -88,8 +91,8 @@ export default function QuestionsPageCard({ question, draggableProps, isDragging
                     >
                         <TextField
                             defaultValue={question.title}
-                            placeholder={"Заголовок вопроса"}
+                            placeholder={"Заголовок вопроса2"}
-                            onChange={({ target }) => debounced(target.value)}
+                            onChange={({ target }) => setTitle(target.value)}
                             InputProps={{
                                 startAdornment: (
                                     <Box>

src/pages/Questions/Form/FormDraggableList/ChooseAnswerModal.tsx

@@ -1,38 +1,29 @@
-import { useState } from "react";
-import { useParams } from "react-router-dom";
 import {
     Box,
-  Typography,
-  Popper,
-  Grow,
-  Paper,
-  MenuList,
-  MenuItem,
-  ClickAwayListener,
-  Modal,
     Button,
+    ClickAwayListener,
+    Grow,
+    MenuItem,
+    MenuList,
+    Modal,
+    Paper,
+    Popper,
+    Typography,
     useTheme,
 } from "@mui/material";
-
+import { useState } from "react";
-import {
-  questionStore,
-  updateQuestionsList,
-  removeQuestionForce,
-  createQuestion,
-} from "@root/questions";
 import { BUTTON_TYPE_QUESTIONS } from "../../TypeQuestions";
-
-import type { RefObject } from "react";
-import type {
-  QuizQuestionBase,
-} from "../../../../model/questionTypes/shared";
 import { QuestionType } from "@model/question/question";
+import { updateQuestionWithFnOptimistic } from "@root/questions/actions";
+import type { RefObject } from "react";
+import type { AnyQuizQuestion } from "../../../../model/questionTypes/shared";
+
 
 type ChooseAnswerModalProps = {
     open: boolean;
     onClose: () => void;
     anchorRef: RefObject<HTMLDivElement>;
-  totalIndex: number;
+    question: AnyQuizQuestion;
     switchState: string;
 };
 
@@ -40,13 +31,11 @@ export const ChooseAnswerModal = ({
     open,
     onClose,
     anchorRef,
-  totalIndex,
+    question,
     switchState,
 }: ChooseAnswerModalProps) => {
     const [openModal, setOpenModal] = useState<boolean>(false);
     const [selectedValue, setSelectedValue] = useState<QuestionType>("text");
-  const quizId = Number(useParams().quizId);
-  const { listQuestions } = questionStore();
     const theme = useTheme();
 
     return (
@@ -129,12 +118,8 @@ export const ChooseAnswerModal = ({
                             onClick={() => {
                                 setOpenModal(false);
 
-                const question = { ...listQuestions[quizId][totalIndex] };
+                                updateQuestionWithFnOptimistic(question.id, question => {
-
+                                    question.type = selectedValue;
-                removeQuestionForce(quizId, question.id);
-                createQuestion(quizId, selectedValue, totalIndex);
-                updateQuestionsList<QuizQuestionBase>(quizId, totalIndex, {
-                  expanded: question.expanded,
                                 });
                             }}
                         >

src/pages/Questions/Form/FormDraggableList/FormDraggableListItem.tsx

@@ -2,30 +2,28 @@ 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 { AnyQuizQuestion, QuizQuestionBase } from "../../../../model/questionTypes/shared";
 
-import { QuizQuestionBase } from "../../../../model/questionTypes/shared";
 
 type FormDraggableListItemProps = {
-  index: number;
+    question: AnyQuizQuestion;
-  isDragging: boolean;
+    questionIndex: number;
     questionData: QuizQuestionBase;
 };
 
 export default memo(
-  ({ index, isDragging, questionData }: FormDraggableListItemProps) => {
+    ({ question, questionIndex, questionData }: FormDraggableListItemProps) => {
         const quizId = Number(useParams().quizId);
         const theme = useTheme();
 
         return (
-      <Draggable draggableId={String(index)} index={index}>
+            <Draggable draggableId={String(questionIndex)} index={questionIndex}>
                 {(provided) => (
                     <ListItem
                         ref={provided.innerRef}
-            {...(index !== 0 ? provided.draggableProps : {})}
+                        {...(questionIndex !== 0 ? provided.draggableProps : {})}
                         sx={{ userSelect: "none", padding: 0 }}
                     >
                         {questionData.deleted ? (
@@ -50,7 +48,7 @@ export default memo(
                                 </Typography>
                                 <Typography
                                     onClick={() => {
-                    updateQuestionsList<QuizQuestionBase>(quizId, index, {
+                                        updateQuestionsList<QuizQuestionBase>(quizId, questionIndex, {
                                             ...questionData,
                                             deleted: false,
                                         });
@@ -75,8 +73,9 @@ export default memo(
                                 }}
                             >
                                 <QuestionsPageCard
-                  key={index}
+                                    key={questionIndex}
                                     question={question}
+                                    questionIndex={questionIndex}
                                     draggableProps={provided.dragHandleProps}
                                 />
                             </Box>

src/pages/Questions/Form/FormDraggableList/QuestionPageCard.tsx

@@ -24,11 +24,13 @@ import { ChooseAnswerModal } from "./ChooseAnswerModal";
 
 interface Props {
     question: AnyQuizQuestion;
+    questionIndex: number;
     draggableProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
 export default function QuestionsPageCard({
     question,
+    questionIndex,
     draggableProps,
 }: Props) {
     const [open, setOpen] = useState<boolean>(false);
@@ -64,7 +66,7 @@ export default function QuestionsPageCard({
                     }}
                 >
                     <CustomTextField
-                        placeholder={`Заголовок ${totalIndex + 1} вопроса`}
+                        placeholder={`Заголовок ${questionIndex + 1} вопроса`}
                         text={question.title}
                         onChange={({ target }) => setTitle(target.value)}
                         sx={{ margin: "20px", width: "auto" }}
@@ -90,7 +92,7 @@ export default function QuestionsPageCard({
                             ),
                             endAdornment: (
                                 <Box {...draggableProps}>
-                                    {totalIndex !== 0 && (
+                                    {questionIndex !== 0 && (
                                         <InputAdornment position="start">
                                             <PointsIcon
                                                 style={{ color: "#9A9AAF", fontSize: "30px" }}

src/pages/Questions/Form/FormDraggableList/index.tsx

@@ -3,10 +3,26 @@ 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 } from "@root/questions/actions";
+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?.id], ([, 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 onDragEnd = ({ destination, source }: DropResult) => {
@@ -16,13 +32,13 @@ export const FormDraggableList = () => {
     return (
         <DragDropContext onDragEnd={onDragEnd}>
             <Droppable droppableId="droppable-list">
-                {(provided, snapshot) => (
+                {(provided) => (
                     <Box ref={provided.innerRef} {...provided.droppableProps}>
                         {questions.map((question, index) => (
                             <FormDraggableListItem
-                                key={index}
+                                key={question.id}
-                                index={index}
+                                question={question}
-                                isDragging={snapshot.isDraggingOver}
+                                questionIndex={index}
                                 questionData={question}
                             />
                         ))}

src/pages/startPage/StartPageSettings.tsx

@@ -839,7 +839,6 @@ export default function StartPageSettings() {
                             quiz.config.startpage.background.video = "https://youtu.be/dbaPkCiLPKQ";
                         });
                         incrementCurrentStep();
-                        // TODO create new question
                     }}
                 >
                     Настроить вопросы

src/stores/questions/actions.ts

@@ -5,7 +5,7 @@ import { QuestionType, RawQuestion, rawQuestionToQuestion } from "@model/questio
 import { AnyQuizQuestion, ImageQuestionVariant, QuestionVariant, createQuestionImageVariant, createQuestionVariant } from "@model/questionTypes/shared";
 import { produce } from "immer";
 import { enqueueSnackbar } from "notistack";
-import { notReachable } from "utils/notReachable";
+import { notReachable } from "../../utils/notReachable";
 import { isAxiosCanceledError } from "../../utils/isAxiosCanceledError";
 import { QuestionsStore, useQuestionsStore } from "./store";
 
@@ -25,6 +25,13 @@ const setQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
     question,
 });
 
+const addQuestion = (question: AnyQuizQuestion) => setProducedState(state => {
+    state.questions.push(question);
+}, {
+    type: "addQuestion",
+    question,
+});
+
 const removeQuestion = (questionId: number) => setProducedState(state => {
     const index = state.questions.findIndex(q => q.id === questionId);
     state.questions.splice(index, 1);
@@ -322,7 +329,7 @@ export const createQuestion = async (quizId: number, type: QuestionType = "varia
             type,
         });
 
-        setQuestion(rawQuestionToQuestion(question));
+        addQuestion(rawQuestionToQuestion(question));
     } catch (error) {
         devlog("Error creating question", error);
         enqueueSnackbar("Не удалось создать вопрос");

src/stores/quizes/actions.ts

@@ -13,6 +13,9 @@ import { createQuestion } from "@root/questions/actions";
 
 export const setEditQuizId = (quizId: number | null) => setProducedState(state => {
     state.editQuizId = quizId;
+}, {
+    type: "setEditQuizId",
+    quizId,
 });
 
 export const resetEditConfig = () => setProducedState(state => {