Update all hooks (Projects, Tasks, Certificates), implement backend for Projects. HomePage on Mentors

src/Pages/internify/mentor/TaskTab.tsx

@@ -1,28 +1,36 @@
-import type { Project, Task } from '../../../lib/mockData';
+import { useProjectTasks, useCreateTask, useDeleteTask } from '../../../hooks/useTasks';
+import type { ProjectDetail } from '../../../types/project.types';
+import type { ProjectTask } from '../../../types/task.types';
 import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
 import { useState } from 'react';
 import CreateTaskModal from './components/CreateTaskDialog';
 import EditTaskModal from './components/EditTaskDialog';
 
-export default function TaskTab({ project }: { project: Project }) {
-
+export default function TaskTab({ project }: { project: ProjectDetail }) {
+  const { tasks, loading, error, refetch } = useProjectTasks(String(project.id));
+  const { remove } = useDeleteTask();
   const [isModalOpen, setIsModalOpen] = useState(false);
   const [editModalOpen, setEditModalOpen] = useState(false);
+  const [selectedTask, setSelectedTask] = useState<ProjectTask | null>(null);
 
-  const handleEditTask = (taskTitle: string) => {
-    console.log('Edit task:', taskTitle);
+  const handleDeleteTask = async (taskId: number) => {
+    const ok = await remove(taskId, String(project.id));
+    if (ok) refetch();
   };
 
-  const handleDeleteTask = (taskTitle: string) => {
-    console.log('Delete task:', taskTitle);
-  };
+  if (loading) return (
+    <div className="flex flex-col gap-3 p-6">
+      {[...Array(3)].map((_, i) => (
+        <div key={i} className="h-12 bg-gray-100 rounded-lg animate-pulse" />
+      ))}
+    </div>
+  );
+  if (error) return <p className="text-red-500 text-sm p-6">{error}</p>;
 
   return (
     <div className="bg-white rounded-xl p-6 shadow-sm border border-gray-100 min-h-[400px]">
-      {/* Header Section */}
       <div className="flex justify-between items-center mb-6">
         <h2 className="text-3xl font-bold text-slate-800 tracking-tight">Tasks</h2>
-
         <button
           onClick={() => setIsModalOpen(true)}
           className="bg-[#C0392B] hover:bg-[#A93226] text-white px-6 py-2.5 rounded-full font-bold text-sm transition-colors shadow-sm"
@@ -30,39 +38,31 @@ export default function TaskTab({ project }: { project: Project }) {
           Add Task
         </button>
       </div>
-
       <hr className="border-gray-200/80 mb-4" />
 
-      {/* Task List Section */}
       <div className="flex flex-col">
-        {project.tasks && project.tasks.length > 0 ? (
-          project.tasks.map((task: Task, idx: number) => (
+        {tasks.length > 0 ? (
+          tasks.map((task, idx) => (
             <div
-              key={idx}
-              className={`flex items-center justify-between py-4 group ${idx < project.tasks.length - 1 ? 'border-b border-gray-100' : ''
-                }`}
+              key={task.id}
+              className={`flex items-center justify-between py-4 group ${
+                idx < tasks.length - 1 ? 'border-b border-gray-100' : ''
+              }`}
             >
-              {/* Task Title & Icon */}
               <div className="flex items-center gap-3 min-w-0">
                 <ClipboardList size={22} className="text-slate-600 shrink-0" />
-                <span className="text-base text-slate-700 font-medium truncate">
-                  {task.title}
-                </span>
+                <span className="text-base text-slate-700 font-medium truncate">{task.title}</span>
               </div>
-
-              {/* Action Buttons (Edit & Delete) */}
               <div className="flex items-center gap-4 text-slate-600 shrink-0">
                 <button
-                  onClick={() => setEditModalOpen(true)}
+                  onClick={() => { setSelectedTask(task); setEditModalOpen(true); }}
                   className="hover:text-blue-600 transition-colors p-1"
-                  title="Edit Task"
                 >
                   <Pencil size={20} />
                 </button>
                 <button
-                  onClick={() => handleDeleteTask(task.title)}
+                  onClick={() => handleDeleteTask(task.id)}
                   className="hover:text-red-600 transition-colors p-1"
-                  title="Delete Task"
                 >
                   <Trash2 size={20} />
                 </button>
@@ -75,18 +75,23 @@ export default function TaskTab({ project }: { project: Project }) {
           </div>
         )}
       </div>
-      {isModalOpen &&
+
+      {isModalOpen && (
         <CreateTaskModal
           isOpen={isModalOpen}
           onClose={() => setIsModalOpen(false)}
+          projectId={String(project.id)}
+          onSuccess={() => { setIsModalOpen(false); refetch(); }}
         />
-      }
-      {editModalOpen &&
+      )}
+      {editModalOpen && selectedTask && (
         <EditTaskModal
           isOpen={editModalOpen}
-          onClose={() => setEditModalOpen(false)}
+          onClose={() => { setEditModalOpen(false); setSelectedTask(null); }}
+          task={selectedTask}
+          onSuccess={() => { setEditModalOpen(false); setSelectedTask(null); refetch(); }}
         />
-      }
+      )}
     </div>
   );
 }