update status and dragging overflow fixed

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^9.0.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -12,6 +13,7 @@
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "antd": "^5.22.3",
+    "axios": "^1.7.9",
     "mobx": "^6.13.5",
     "mobx-react-lite": "^4.0.7",
     "react": "^18.3.1",
@@ -45,6 +47,7 @@
     ]
   },
   "devDependencies": {
+    "@types/axios": "^0.14.4",
     "sass": "^1.81.0"
   }
 }

src/App.tsx

@@ -9,6 +9,7 @@ import { observer } from "mobx-react-lite";
 import { useStore } from "./stores/store";
 import { useEffect } from "react";
 import { toJS } from "mobx";
+import { restrictToWindowEdges } from "@dnd-kit/modifiers";
 
 function App() {
   const { taskStore } = useStore();
@@ -29,19 +30,17 @@ function App() {
     const taskId = active.id as number;
     const newStatus = over.id as Task["taskType"];
 
-    taskStore.tasks = taskStore.tasks.map((task) =>
-      task.id === taskId
-        ? {
-            ...task,
-            taskType: newStatus,
-          }
-        : task
-    );
+    const task = taskStore.tasks.find((t) => t.id === taskId);
+    if (task) {
+      task.taskType = newStatus as Task["taskType"];
+      taskStore.saveTask(task);
+    }
+    console.log(taskStore.tasks);
   }
 
   return (
     <Flex className="App" vertical={true} justify="space-between">
-      <DndContext onDragEnd={handleDragEnd}>
+      <DndContext modifiers={[restrictToWindowEdges]} onDragEnd={handleDragEnd}>
         <TaskLine
           taskLineName="Pending"
           tasks={taskStore.tasks.filter((task) => task.taskType === "Pending")}

src/api/agent.ts

@@ -1,7 +1,7 @@
 import axios, { AxiosResponse } from "axios";
 import { Task } from "../models/Task";
 
-axios.defaults.baseURL = " http://localhost:5000/api";
+axios.defaults.baseURL = "http://localhost:5000/api";
 
 const responseBody = <T>(response: AxiosResponse<T>) => response.data;
 

src/models/TaskStatus.ts

@@ -1,5 +1,5 @@
 export enum TaskStatus {
   Pending = "Pending",
-  InProgress = "In Progress",
+  InProgress = "InProgress",
   Done = "Done",
 }