fixed issue developer-job-simulation#1

Author: pwhb

package-lock.json

@@ -2,8 +2,10 @@ 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";
 
-export default function App() {
+export default function App()
+{
   const [kanbanColumns, setKanbanColumns] = useState<Record<Column, DraggableTask[]>>({
     Backlog: [],
     "In Progress": [],
@@ -12,45 +14,69 @@ export default function App() {
   });
 
   // Fetch Tasks
-  useEffect(() => {
+  useEffect(() =>
+  {
     // TODO: Pull state from json-server
+    const fetchTasks = async () =>
+    {
+      const data = await fetchKanbanTasks();
+      console.log("tasks", data);
+
+      setKanbanColumns(data);
+    };
+
+    fetchTasks();
     // Hint: You may want to use the fetchTasks function from api/index.tsx
   }, []);
 
   // Hint: You will need these states for dragging and dropping tasks
   const [draggedTaskInfo, setDraggedTaskInfo] = useState<DraggedTaskInfo | null>(null);
   const [hoveredColumn, setHoveredColumn] = useState<Column | null>(null);
 
-  const handleTaskDragStart = (task: Task, column: Column) => {
+  const handleTaskDragStart = (task: Task, column: Column) =>
+  {
     // TODO: Implement functionality for when the drag starts
   };
 
-  const handleTaskDragOver = (e: React.DragEvent, column: Column) => {
+  const handleTaskDragOver = (e: React.DragEvent, column: Column) =>
+  {
     e.preventDefault();
+    console.log("handleTaskDragOver", column, e.target);
+
     // TODO: Implement functionality for when an item is being dragged over a column
     // Hint: Remember to check if the item is being dragged over a new column
   };
 
-  const handleTaskDrop = (column: Column) => {
+  const handleTaskDrop = (column: Column) =>
+  {
+    console.log("handleTaskDrop", 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
   };
 
-  const getTasksForColumn = (column: Column): DraggableTask[] => {
+  const getTasksForColumn = (column: Column): DraggableTask[] =>
+  {
+    // console.log("getTasksForColumn", column);
+
     // TODO: Handle the bug where card dragged over itself shows duplicate
     // Hint: Consider how you can use the dragInfo and overColumn states to prevent this
-    return [{ id: "1", name: "Task 1", isDragging: false }];
+    return kanbanColumns[column];
+    // return [{ id: "1", name: "Task 1", isDragging: false }];
   };
 
-  const handleTaskDragEnd = () => {
+  const handleTaskDragEnd = () =>
+  {
+    console.log("handleTaskDragEnd");
+
     // TODO: Implement functionality for when the drag ends
     // Hint: Remember to handle the case when the item is released back to its current column
   };
 
   return (
     <main className="overflow-x-auto">
-      <h1 className="text-left text-4xl font-bold p-10 pb-0">Codebase Mentor Kanban Board</h1>
-      <div className="flex justify-between p-10 gap-x-4 min-w-max">
+      <h1 className="p-10 pb-0 text-4xl font-bold text-left">Codebase Mentor Kanban Board</h1>
+      <div className="flex gap-x-4 justify-between p-10 min-w-max">
         <KanbanColumn
           title="Backlog"
           tasks={getTasksForColumn("Backlog")}

src/App.tsx

@@ -1,10 +1,15 @@
 const apiUrl = "http://localhost:3001";
 
-export const fetchKanbanTasks = async () => {
+export const fetchKanbanTasks = async () =>
+{
   // TODO: Implement functionality to fetch tasks from the server
+  const res = await fetch(`${apiUrl}/tasks`);
+  const data = await res.json();
+  return data;
 };
 
-export const updateKanbanTasks = async (tasks: any) => {
+export const updateKanbanTasks = async (tasks: any) =>
+{
   // 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
 };

src/api/index.tsx

@@ -24,7 +24,7 @@ export default function KanbanColumn({
       onDragOver={(e) => onTaskDragOver(e, title)}
       onDrop={() => onTaskDrop(title)}
     >
-      <h2 className="font-bold mb-2">{title}</h2>
+      <h2 className="mb-2 font-bold">{title}</h2>
       <ul>
         {tasks.map((task) => (
           <li