fix question card remounting on every id change

src/constants/base.ts

@@ -1,7 +1,7 @@
 import type { QuizQuestionBase } from "../model/questionTypes/shared";
 
 
-export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id"> = {
+export const QUIZ_QUESTION_BASE: Omit<QuizQuestionBase, "id" | "fixedId"> = {
     quizId: 0,
     description: "",
     page: 0,

src/constants/date.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionDate } from "../model/questionTypes/date";
 
-export const QUIZ_QUESTION_DATE: Omit<QuizQuestionDate, "id"> = {
+export const QUIZ_QUESTION_DATE: Omit<QuizQuestionDate, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "date",
   content: {

src/constants/default.ts

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

src/constants/emoji.ts

@@ -3,7 +3,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"> = {
+export const QUIZ_QUESTION_EMOJI: Omit<QuizQuestionEmoji, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "emoji",
   content: {

src/constants/file.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionFile } from "../model/questionTypes/file";
 
-export const QUIZ_QUESTION_FILE: Omit<QuizQuestionFile, "id"> = {
+export const QUIZ_QUESTION_FILE: Omit<QuizQuestionFile, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "file",
   content: {

src/constants/images.ts

@@ -3,7 +3,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"> = {
+export const QUIZ_QUESTION_IMAGES: Omit<QuizQuestionImages, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "images",
   content: {

src/constants/number.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionNumber } from "../model/questionTypes/number";
 
-export const QUIZ_QUESTION_NUMBER: Omit<QuizQuestionNumber, "id"> = {
+export const QUIZ_QUESTION_NUMBER: Omit<QuizQuestionNumber, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "number",
   content: {

src/constants/page.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionPage } from "../model/questionTypes/page";
 
-export const QUIZ_QUESTION_PAGE: Omit<QuizQuestionPage, "id"> = {
+export const QUIZ_QUESTION_PAGE: Omit<QuizQuestionPage, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "page",
   content: {

src/constants/rating.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionRating } from "../model/questionTypes/rating";
 
-export const QUIZ_QUESTION_RATING: Omit<QuizQuestionRating, "id"> = {
+export const QUIZ_QUESTION_RATING: Omit<QuizQuestionRating, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "rating",
   content: {

src/constants/select.ts

@@ -3,7 +3,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"> = {
+export const QUIZ_QUESTION_SELECT: Omit<QuizQuestionSelect, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "select",
   content: {

src/constants/text.ts

@@ -2,7 +2,7 @@ import { QUIZ_QUESTION_BASE } from "./base";
 
 import type { QuizQuestionText } from "../model/questionTypes/text";
 
-export const QUIZ_QUESTION_TEXT: Omit<QuizQuestionText, "id"> = {
+export const QUIZ_QUESTION_TEXT: Omit<QuizQuestionText, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "text",
   content: {

src/constants/variant.ts

@@ -3,7 +3,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"> = {
+export const QUIZ_QUESTION_VARIANT: Omit<QuizQuestionVariant, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "variant",
   content: {

src/constants/varimg.ts

@@ -3,7 +3,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"> = {
+export const QUIZ_QUESTION_VARIMG: Omit<QuizQuestionVarImg, "id" | "fixedId"> = {
   ...QUIZ_QUESTION_BASE,
   type: "varimg",
   content: {

src/model/question/question.ts

@@ -54,6 +54,7 @@ export function rawQuestionToQuestion(rawQuestion: RawQuestion): AnyQuizQuestion
 
     return {
         id: rawQuestion.id,
+        fixedId: rawQuestion.id,
         description: rawQuestion.description,
         page: rawQuestion.page,
         quizId: rawQuestion.quiz_id,

src/model/questionTypes/shared.ts

@@ -49,6 +49,8 @@ export interface ImageQuestionVariant extends QuestionVariant {
 
 export interface QuizQuestionBase {
     id: number;
+    /** fixed id for using it as a key prop */
+    fixedId: number;
     quizId: number;
     title: string;
     description: string;

src/pages/Questions/DraggableList/index.tsx

@@ -36,7 +36,7 @@ export const DraggableList = () => {
                     <Box ref={provided.innerRef} {...provided.droppableProps}>
                         {questions.map((question, index) => (
                             <DraggableListItem
-                                key={question.id}
+                                key={question.fixedId}
                                 question={question}
                                 isDragging={snapshot.isDraggingOver}
                                 index={index}

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

@@ -36,7 +36,7 @@ export const FormDraggableList = () => {
                     <Box ref={provided.innerRef} {...provided.droppableProps}>
                         {questions.map((question, index) => (
                             <FormDraggableListItem
-                                key={question.id}
+                                key={question.fixedId}
                                 question={question}
                                 questionIndex={index}
                                 questionData={question}