basic pet info now fetched from backend on main page component

Author: belledw

client/src/components/ui/add-event-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Check, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";

client/src/components/ui/add-health-event-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Check, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";

client/src/components/ui/add-task-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Check, X } from "lucide-react";
 
 import { Button } from "@/components/ui/button";

client/src/components/ui/date-time-picker.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 

client/src/components/ui/dob-picker.tsx

@@ -1,4 +1,3 @@
-"use client";
 import { ChevronDownIcon } from "lucide-react";
 import * as React from "react";
 

client/src/components/ui/health-chart.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Bar, BarChart, LabelList, XAxis, YAxis } from "recharts";
 
 import {
@@ -9,7 +7,7 @@ import {
   CardFooter,
   CardHeader,
 } from "@/components/ui/card";
-import { type ChartConfig,ChartContainer } from "@/components/ui/chart";
+import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 
 export const description = "A horizontal bar chart";
 

client/src/components/ui/pet-page-header.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Dot, Plus, Settings } from "lucide-react";
 
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
@@ -28,22 +26,22 @@ export function PetHeader(props: PetHeaderProps) {
               <AvatarImage
                 src={props.petImg}
                 alt={props.petAlt}
-                className="h-[75] w-[75]"
+                className="h-[75] w-[75] rounded-full object-cover"
               />
               <AvatarFallback className="h-[75] w-[75] text-xl">
                 {props.petInit}
               </AvatarFallback>
             </Avatar>
             <div className="ml-10 flex flex-col gap-y-2 self-center">
-              <TextTitle> {props.petName} </TextTitle>
+              <TextTitle> {props.petName}</TextTitle>
               <TextBody className="flex">
                 {props.petType} <Dot /> {props.petAge}
               </TextBody>
             </div>
           </div>
           <div className="mt-5 flex items-center gap-5 lg:mt-0">
             <Button
-              className="gap-2 rounded-full bg-gray-700 font-light tracking-wider hover:bg-gray-800"
+              className="gap-2 rounded-full bg-black font-light tracking-wider hover:bg-gray-800"
               onClick={props.onClickSettings}
             >
               <Settings /> Pet Settings

client/src/components/ui/pet-settings-menu.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Check, X } from "lucide-react";
 
 import { DOBPicker } from "@/components/ui/dob-picker";

client/src/components/ui/separator.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import * as React from "react";
 

client/src/pages/pet.tsx

@@ -1,5 +1,5 @@
 import { Check, Plus } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { AddEvent } from "@/components/ui/add-event-menu";
 import { AddHealthEvent } from "@/components/ui/add-health-event-menu";
@@ -15,24 +15,62 @@ import { TaskCarousel } from "@/components/ui/pet-task-carousel";
 import { TextTitle } from "@/components/ui/text-styles";
 import { dm_sans } from "@/lib/fonts";
 
+interface petInfoResponse {
+  name: string;
+  dob: string;
+  type: string;
+  img: string;
+}
+
 export default function Default() {
   const [taskMenu, setTaskMenu] = useState(false);
   const [settingsMenu, setSettingsMenu] = useState(false);
   const [eventMenu, setEventMenu] = useState(false);
   const [healthMenu, setHealthMenu] = useState(false);
 
+  const [petInfo, setPetInfo] = useState<petInfoResponse>();
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const data = await fetch("http://localhost:8000/pet/");
+      const petInfo = await data.json();
+      setPetInfo(petInfo);
+    };
+
+    fetchData();
+  }, []);
+
+  const formatPetAge = () => {
+    if (!petInfo) return null;
+    const dob = new Date("2020-12-01");
+    const now = Date.now();
+    const age = now - dob.getTime();
+    const yearsAndMonths = age / 1000 / 60 / 60 / 24 / 365.25;
+    const years = Math.floor(yearsAndMonths);
+    const months = Math.floor((yearsAndMonths % 1) * 12);
+    if (years == 1 && months == 1) {
+      return `${years} year ${months} month`;
+    } else if (years > 1 && months == 1) {
+      return `${years} years ${months} month`;
+    } else if (years == 1 && months > 1) {
+      return `${years} year ${months} months`;
+    } else {
+      return `${years} years ${months} months`;
+    }
+  };
+
   return (
     <div className={dm_sans.className}>
       <h1 className="flex justify-center p-10"> Navbar </h1>
       <PetHeader
         onClickTask={() => setTaskMenu(true)}
         onClickSettings={() => setSettingsMenu(true)}
-        petImg=""
+        petImg={petInfo?.img || ""}
         petAlt="Spaghetti's Profile Image"
         petInit="S"
-        petName="Spaghetti (example pet)"
-        petType="Cat"
-        petAge="5 yrs 6 months"
+        petName={petInfo?.name || "Loading..."}
+        petType={petInfo?.type || "Loading..."}
+        petAge={formatPetAge() || "Loading..."}
       />
 
       <div className="mx-[7vw]">
@@ -42,9 +80,9 @@ export default function Default() {
 
         {settingsMenu === true && (
           <PetSettings
-            petName="Spaghetti"
-            petType="Cat"
-            petDOB="01/06/2020"
+            petName={petInfo?.name || "Loading..."}
+            petType={petInfo?.type || "Loading..."}
+            petDOB={petInfo?.dob || "Loading..."}
             onClickClose={() => setSettingsMenu(false)}
           />
         )}