task data can now be fetched from backend and displayed on pet task carousel

Author: belledw

client/src/components/ui/pet-task-carousel.tsx

@@ -1,3 +1,5 @@
+import { useEffect, useState } from "react";
+
 import {
   Carousel,
   CarouselContent,
@@ -7,22 +9,76 @@ import {
 } from "@/components/ui/carousel";
 import { TaskCard } from "@/components/ui/task-card";
 
+interface taskInfoObject {
+  descr: string;
+  due: string;
+  forPet: number;
+  id: number;
+  isComplete: boolean;
+  title: string;
+}
+
+interface taskInfoResponse {
+  task: taskInfoObject;
+}
+
 export function TaskCarousel() {
+  const [taskInfo, setTaskInfo] = useState<taskInfoResponse>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetch("http://localhost:8000/tasks/");
+      const taskInfo = await data.json();
+      setTaskInfo(taskInfo);
+    };
+
+    fetchData();
+  }, []);
+
+  // Not very efficient, and need to modify for multiple pets.
+  function getTaskInfo(id: number, item: keyof taskInfoObject) {
+    if (taskInfo) {
+      let task: keyof taskInfoResponse;
+      for (task in taskInfo) {
+        if (taskInfo[task].id == id) {
+          return taskInfo[task][item].toString();
+        }
+      }
+    } else {
+      return "";
+    }
+  }
+
+  function formatDueDate(id: number, type: "day" | "time") {
+    const due = getTaskInfo(id, "due") || "";
+    const newDue = due.slice(0, 10);
+    const date = new Date(newDue);
+    const newDate = date.toString();
+
+    if (type === "day") {
+      const finalDate = newDate.slice(0, 16);
+      return finalDate;
+    } else if (type === "time") {
+      const finalTime = newDate.slice(16, 21);
+      return finalTime;
+    }
+  }
+
   return (
     <Carousel className="w-fit max-w-full">
       <CarouselContent>
         <CarouselItem key={1} className="basis-sm lg:basis-md -ml-10 mr-5">
           <TaskCard
-            date="Wednesday, July 7th, 2025"
-            title="Feed Spaghetti"
+            date={formatDueDate(1, "day") || ""}
+            title={getTaskInfo(1, "title") || ""}
             usrImg=""
             usrAlt="@username"
             usrColour="bg-gray-200"
             usrInit="CS"
             usrName="You"
             usrAssignee="exampletask"
-            time="7:00 am"
-            descr="50.0 g x Premium Cat Biscuits"
+            time={formatDueDate(1, "time") || ""}
+            descr={getTaskInfo(1, "descr") || ""}
           />
         </CarouselItem>
         <CarouselItem key={2} className="basis-sm lg:basis-md -ml-10 mr-5">

client/src/pages/pet.tsx

@@ -50,9 +50,9 @@ export default function Default() {
     const months = Math.floor((yearsAndMonths % 1) * 12);
     if (years == 1 && months == 1) {
       return `${years} year ${months} month`;
-    } else if (years > 1 && months == 1) {
+    } else if ((years > 1 || years == 0) && months == 1) {
       return `${years} years ${months} month`;
-    } else if (years == 1 && months > 1) {
+    } else if (years == 1 && (months > 1 || months == 0)) {
       return `${years} year ${months} months`;
     } else {
       return `${years} years ${months} months`;
@@ -68,9 +68,9 @@ export default function Default() {
         petImg={petInfo?.img || ""}
         petAlt="Spaghetti's Profile Image"
         petInit="S"
-        petName={petInfo?.name || "Loading..."}
-        petType={petInfo?.type || "Loading..."}
-        petAge={formatPetAge() || "Loading..."}
+        petName={petInfo?.name || ""}
+        petType={petInfo?.type || ""}
+        petAge={formatPetAge() || ""}
       />
 
       <div className="mx-[7vw]">
@@ -80,9 +80,9 @@ export default function Default() {
 
         {settingsMenu === true && (
           <PetSettings
-            petName={petInfo?.name || "Loading..."}
-            petType={petInfo?.type || "Loading..."}
-            petDOB={petInfo?.dob || "Loading..."}
+            petName={petInfo?.name || ""}
+            petType={petInfo?.type || ""}
+            petDOB={petInfo?.dob || ""}
             onClickClose={() => setSettingsMenu(false)}
           />
         )}

server/tasks/serializers.py

@@ -0,0 +1,7 @@
+from rest_framework import serializers
+from .models import Task
+
+class TaskSerializer(serializers.ModelSerializer):
+    class Meta:
+        model = Task
+        fields = "__all__"

server/tasks/views.py

@@ -1,6 +1,16 @@
 from django.shortcuts import render
-from django.http import HttpResponse
+from django.http import HttpResponse, JsonResponse
+from rest_framework.response import Response
+from rest_framework.decorators import api_view
+from rest_framework.renderers import JSONRenderer
+
+from tasks.models import Task
+from tasks.serializers import TaskSerializer
 
 # Create your views here.
+# https://www.django-rest-framework.org/tutorial/1-serialization/
+@api_view(('GET',))
 def index(request):
-    return HttpResponse("Hello, world. This is the tasks page of Fetch!, a pet care app.")
+    data = Task.objects.all()
+    serializer = TaskSerializer(data, many=True)
+    return JsonResponse(serializer.data, safe=False)