fix: expanded items moving

src/pages/Questions/DraggableList/QuestionPageCard.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react";
 import {
   Box,
   Checkbox,
@@ -136,8 +135,7 @@ export default function QuestionsPageCard({
 }: Props) {
   const theme = useTheme();
   const { listQuestions } = questionStore();
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const switchState = listQuestions[totalIndex].type;
+  const { type: switchState, expanded: isExpanded } = listQuestions[totalIndex];
 
   return (
     <Paper
@@ -160,6 +158,7 @@ export default function QuestionsPageCard({
           padding: "20px",
         }}
       >
+        <>{isExpanded && console.log(listQuestions[totalIndex])}</>
         <FormControl fullWidth variant="standard" sx={{ p: 0 }}>
           <TextField
             fullWidth
@@ -198,7 +197,11 @@ export default function QuestionsPageCard({
           />
         </FormControl>
 
-        <IconButton onClick={() => setIsExpanded((prev) => !prev)}>
+        <IconButton
+          onClick={() =>
+            updateQuestionsList(totalIndex, { expanded: !isExpanded })
+          }
+        >
           {isExpanded ? <ExpandMoreIcon /> : <ExpandLessIcon fill="#7E2AEA" />}
         </IconButton>
         {isExpanded ? (

src/stores/questions.ts

@@ -24,6 +24,7 @@ export interface Question {
   parent_ids: number[];
   created_at: string;
   updated_at: string;
+  expanded: boolean;
 }
 
 interface QuestionStore {
@@ -81,6 +82,7 @@ export const createQuestion = (id: number) => {
     parent_ids: [0],
     created_at: "",
     updated_at: "",
+    expanded: false,
   });
   questionStore.setState({ listQuestions: newData });
 };