fixed developer-job-simulation#3

api.rest

@@ -0,0 +1,20 @@
+@base = http://localhost:3001
+
+###
+GET {{base}}/tasks 
+
+###
+POST {{base}}/tasks 
+Content-Type: application/json
+
+{
+    "nilar": "win htut"
+}
+
+###
+PUT {{base}}/tasks 
+Content-Type: application/json
+
+{
+    "nilar": "win htut"
+}

db.json

@@ -1,11 +1,31 @@
 {
   "tasks": {
     "Backlog": [
-      { "id": "task1", "name": "Write specs" },
-      { "id": "task2", "name": "Design mockups" }
+      {
+        "id": "task2",
+        "name": "Design mockups"
+      },
+      {
+        "id": "task3",
+        "name": "Develop features"
+      }
     ],
-    "In Progress": [{ "id": "task3", "name": "Develop features" }],
-    "In Review": [{ "id": "task4", "name": "Test application" }],
-    "Done": [{ "id": "task5", "name": "Deploy application" }]
+    "In Progress": [],
+    "In Review": [
+      {
+        "id": "task1",
+        "name": "Write specs"
+      }
+    ],
+    "Done": [
+      {
+        "id": "task4",
+        "name": "Test application"
+      },
+      {
+        "id": "task5",
+        "name": "Deploy application"
+      }
+    ]
   }
-}
+}

src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import "./App.css";
 import KanbanColumn from "./components/KanbanColumn";
 import { Column, DraggableTask, DraggedTaskInfo, Task } from "./types";
-import { fetchKanbanTasks } from "./api";
+import { fetchKanbanTasks, updateKanbanTasks } from "./api";
 
 export default function App()
 {
@@ -57,7 +57,7 @@ export default function App()
 
   const handleTaskDrop = (column: Column) =>
   {
-  
+
     // TODO: Implement functionality for when the item is dropped
     // Hint: Make sure to handle the cases when the item is dropped in the same column or in a new column
   };
@@ -72,16 +72,18 @@ export default function App()
     // return [{ id: "1", name: "Task 1", isDragging: false }];
   };
 
-  const handleTaskDragEnd = () =>
+  const handleTaskDragEnd = async () =>
   {
     console.log("handleTaskDragEnd");
-    const originalColumns = { ...kanbanColumns };
-
-    originalColumns[draggedTaskInfo!.column] = originalColumns[draggedTaskInfo!.column].filter(task => task.id !== draggedTaskInfo?.task.id);
-    originalColumns[hoveredColumn!].push(draggedTaskInfo!.task);
+    const newColumns = { ...kanbanColumns };
 
+    newColumns[draggedTaskInfo!.column] = newColumns[draggedTaskInfo!.column].filter(task => task.id !== draggedTaskInfo?.task.id);
+    newColumns[hoveredColumn!].push(draggedTaskInfo!.task);
 
-    setKanbanColumns(originalColumns);
+    const data = await updateKanbanTasks(newColumns);
+    console.log("updateKanbanTasks: " + data);
+
+    setKanbanColumns(newColumns);
 
 
     // TODO: Implement functionality for when the drag ends

src/api/index.tsx

@@ -10,6 +10,15 @@ export const fetchKanbanTasks = async () =>
 
 export const updateKanbanTasks = async (tasks: any) =>
 {
+  const res = await fetch(`${apiUrl}/tasks`, {
+    method: "PUT",
+    headers: {
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify(tasks)
+  });
+  const data = await res.json();
+  return data;
   // TODO: Save the new order of the items when tasks are modified to the server
   // Hint: You may want to use the fetch API with a "PUT" method
 };