get data from database

src/App.tsx

@@ -7,23 +7,33 @@ import { DndContext, DragEndEvent } from "@dnd-kit/core";
 import { Flex } from "antd";
 import { observer } from "mobx-react-lite";
 import { useStore } from "./stores/store";
+import { useEffect } from "react";
+import { toJS } from "mobx";
 
 function App() {
   const { taskStore } = useStore();
 
+  useEffect(() => {
+    taskStore.loadTasks();
+  }, [taskStore]);
+
+  // taskStore.tasks.forEach((task) => console.log(task));
+
+  console.log(toJS(taskStore.tasks));
+
   function handleDragEnd(event: DragEndEvent) {
     const { active, over } = event;
 
     if (!over) return;
 
     const taskId = active.id as number;
-    const newStatus = over.id as Task["status"];
+    const newStatus = over.id as Task["taskType"];
 
     taskStore.tasks = taskStore.tasks.map((task) =>
       task.id === taskId
         ? {
             ...task,
-            status: newStatus,
+            taskType: newStatus,
           }
         : task
     );
@@ -34,20 +44,18 @@ function App() {
       <DndContext onDragEnd={handleDragEnd}>
         <TaskLine
           taskLineName="Pending"
-          tasks={taskStore.tasks.filter(
-            (task) => task.status === TaskStatus.Pending
-          )}
+          tasks={taskStore.tasks.filter((task) => task.taskType === "Pending")}
         />
         <TaskLine
           taskLineName="In Progress"
           tasks={taskStore.tasks.filter(
-            (task) => task.status === TaskStatus.InProgress
+            (task) => task.taskType === TaskStatus.InProgress
           )}
         />
         <TaskLine
           taskLineName="Done"
           tasks={taskStore.tasks.filter(
-            (task) => task.status === TaskStatus.Done
+            (task) => task.taskType === TaskStatus.Done
           )}
         />
       </DndContext>

src/api/agent.ts

@@ -23,6 +23,7 @@ const Tasks = {
 
 const agent = {
   Tasks,
+  responseBody,
 };
 
 export default agent;

src/features/Task/Task.component.tsx

@@ -44,7 +44,7 @@ const Task = ({ task }: Props) => {
           }
         }}
       >
-        <p className="task-text">{task.status} </p>
+        <p className="task-text">{task.text} </p>
         <div className="buttons">
           <Button
             data-no-drag

src/features/TaskLine/TaskLine.component.tsx

@@ -31,7 +31,7 @@ const TaskLine = ({ taskLineName, tasks }: Props) => {
       <h3 className="tasklist-name">{taskLineName}</h3>
       <Flex justify="flex-start" className="taskline">
         {tasks.map((task) => (
-          <Task task={task} />
+          <Task key={task.id} task={task} />
         ))}
         {taskLineName === "Pending" && <CreateTask />}
       </Flex>

src/index.tsx

@@ -8,6 +8,7 @@ import { store, StoreContext } from "./stores/store";
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );
+
 root.render(
   <React.StrictMode>
     <StoreContext.Provider value={store}>

src/models/Task.ts

@@ -2,7 +2,7 @@ import { TaskStatus } from "./TaskStatus";
 
 export type Task = {
   id: number;
-  title: string ;
-  text: string ;
-  status: TaskStatus;
-};
+  title: string;
+  text: string;
+  taskType: TaskStatus;
+};

src/stores/taskStore.ts

@@ -1,4 +1,4 @@
-import { makeAutoObservable, runInAction } from "mobx";
+import { makeAutoObservable, runInAction, toJS } from "mobx";
 import { Task } from "../models/Task";
 import { TaskStatus } from "../models/TaskStatus";
 import agent from "../api/agent";
@@ -16,13 +16,19 @@ export default class TaskStore {
   loadTasks = async () => {
     try {
       const tasks = await agent.Tasks.list();
+      console.log("Fetched tasks:", tasks);
       runInAction(() => {
-        tasks.forEach((task) => this.tasks.push(task));
+        tasks.forEach((task) => {
+          // Check for duplicates
+          if (!this.tasks.find((t) => t.id === task.id)) {
+            this.tasks.push(task);
+          }
+        });
+        console.log("Tasks in store after loading:", toJS(this.tasks));
       });
     } catch (error) {
       console.log(error);
     }
-    console.log(this.tasks);
   };
 
   openModal = () => {
@@ -44,9 +50,9 @@ export default class TaskStore {
         id: this.tasks.length + 1,
         title: task.title,
         text: task.text,
-        status: TaskStatus.Pending, // Default status
+        taskType: TaskStatus.Pending, // Default status
       };
-      this.tasks.push(newTask);
+      runInAction(() => this.tasks.push(newTask));
     }
 
     this.selectedTask = null;