Day view page fetch task from backend

blotztask-ui/src/app/task-dayview/page.tsx

@@ -1,62 +1,44 @@
 'use client';
 
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
-import { Checkbox } from '@/components/ui/checkbox';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+// import { Checkbox } from '@/components/ui/checkbox';
 import { useEffect, useState } from 'react';
 import { z } from 'zod';
-import { taskDto } from './models/taskDto';
 import { TaskDTO, taskDTOSchema } from './schema/schema';
 import { Button } from '@/components/ui/button';
 import { TaskForm } from './components/form';
 import { H1, H5 } from '@/components/ui/heading-with-anchor';
+import { fetchTaskItemsDueToday } from '@/services/taskService';
 
-// Define mock data
-const mockTasks: taskDto[] = [
-  {
-    id: 1,
-    title: 'Complete project report',
-    description: 'Finalize the project report and submit it to the manager.',
-    isDone: false,
-    createdAt: '2024-07-20T08:30:00Z',
-    updatedAt: '2024-07-20T08:30:00Z',
-  },
-  {
-    id: 2,
-    title: 'Meeting with the team',
-    description: 'Discuss the project milestones and deadlines with the team.',
-    isDone: false,
-    createdAt: '2024-07-21T10:00:00Z',
-    updatedAt: '2024-07-21T10:00:00Z',
-  },
-];
-
-const validatedTasks = z.array(taskDTOSchema).parse(mockTasks);
-
-// Simulate a database read for tasks.
 export default function Dayview() {
-  const [tasks, setTasks] = useState<TaskDTO[]>(validatedTasks);
+  const [tasks, setTasks] = useState<TaskDTO[]>([]);
 
   //add a state for add task button deciding to hide or show the form
   const [isFormVisible, setIsFormVisible] = useState(false);
 
-  const handleCheckboxChange = (taskId) => {
-    setTasks((prevTasks) =>
-      prevTasks.map((t) => {
-        if (t.id === taskId) {
-          return { ...t, isDone: !t.isDone };
-        }
-        return t;
-      })
-    );
-  };
+//   const handleCheckboxChange = (taskId) => {
+//     setTasks((prevTasks) =>
+//       prevTasks.map((t) => {
+//         if (t.id === taskId) {
+//           return { ...t, isDone: !t.isDone };
+//         }
+//         return t;
+//       })
+//     );
+//   };
 
   const toggleFormVisibility = () => {
     setIsFormVisible(!isFormVisible);
   };
 
-  useEffect(() => {
-    // Simulate fetching tasks
+  const loadTasks = async () => {
+    const data = await fetchTaskItemsDueToday();
+    const validatedTasks = z.array(taskDTOSchema).parse(data);
     setTasks(validatedTasks);
+}
+
+  useEffect(() => {
+    loadTasks();
   }, []);
 
   return (
@@ -75,27 +57,16 @@ export default function Dayview() {
         <div className="grid gap-6 w-3/4">
 
           {tasks.map((task) => (
-            <Card key={task.id} className='bg-white'>
-              <CardHeader className="flex-row pb-1">
-                <Checkbox
-                  className="rounded-full mt-1 mr-2"
-                  checked={task.isDone}
-                  onCheckedChange={() => handleCheckboxChange(task.id)}
-                />
-                <CardTitle className={task.isDone ? 'line-through' : ''}>
-                  {task.title}
-                </CardTitle>
-              </CardHeader>
-              <CardContent className="grid gap-1">
-                <div className="flex items-start space-x-4 rounded-md bg-accent text-accent-foreground transition-all pt-2">
-                  <div className="space-y-1">
-                    <p className="text-sm text-muted-foreground">
-                      {task.description}
-                    </p>
-                  </div>
+            <div key={task.id} className='w-full'>
+                <div className='flex flex-row'>
+                    <div className={`flex justify-center items-center rounded-xl bg-${"work"}-label mr-2 w-[15rem] p-4`}>
+                        <p>{task.title}</p>
+                    </div>
+                    <div className={`flex justify-center items-center rounded-xl bg-${"work"}-label grow`}>
+                        <p>{task.description}</p>
+                    </div>
                 </div>
-              </CardContent>
-            </Card>
+            </div>
           ))}
 
           <div className="w-1/2 flex gap-5 flex-col">

blotztask-ui/src/services/taskService.ts

@@ -1,3 +1,4 @@
+import { TaskDTO } from "@/app/task-dayview/schema/schema";
 import { TaskItemDTO } from "@/model/task-Item-dto";
 import { fetchWithAuth } from "@/utils/fetch-with-auth";
 
@@ -18,4 +19,26 @@ export const fetchAllTaskItems = async (): Promise<TaskItemDTO[]> => {
 
   const data: TaskItemDTO[] = await response.json();
   return data;
-};
+};
+
+export const fetchTaskItemsDueToday = async (): Promise<TaskDTO[]> => {
+    //Converting today's date to ISO String format
+    const date = new Date().toISOString().split('T')[0];
+
+    const response = await fetchWithAuth(
+      `${process.env.NEXT_PUBLIC_API_BASE_URL_WITH_API}/Task/due-date/${date}`,
+      {
+        method: 'GET',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+      }
+    );
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const data: TaskDTO[] = await response.json();
+    return data;
+  };

blotztask-ui/tailwind.config.ts

@@ -21,6 +21,11 @@ const config: Config = {
         'primary-dark': '#2C3233',
         'secondary': '#278291',
         'warn': '#F42F67',
+        'checkbox': '#989ca4',
+        'personal-label': '#fffcc4',
+        'acadedmic-label': '#a0e4e4',
+        'others-label': '#98bcfc',
+        'work-label': '#d0b4fc'
       }
     },
   },