From 2f13c6e2b18ad1505e1b11e50539c9baf2aafc88 Mon Sep 17 00:00:00 2001
From: Kristen Chandler <krismchandler@gmail.com>
Date: Mon, 9 Dec 2024 13:57:10 -0600
Subject: [PATCH 1/5] created back to child button component and added to
 diapers page to test

---
 .../family/[id]/child/[childId]/diapers/page.tsx          | 4 ++--
 app/ui/backToChildButton.tsx                              | 8 ++++++++
 2 files changed, 10 insertions(+), 2 deletions(-)
 create mode 100644 app/ui/backToChildButton.tsx

diff --git a/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx b/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
index 94c175f..4bdf94f 100644
--- a/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
@@ -5,7 +5,7 @@ import { faDroplet } from '@fortawesome/free-solid-svg-icons'
 import { faPoop } from '@fortawesome/free-solid-svg-icons'
 import { dateFormatter } from "@/lib/dateFormatter";
 import { timeFormatter } from "@/lib/timeFormatter";
-import BackButton from "@/app/ui/backButton";
+import BackToChildButton from "@/app/ui/backToChildButton";
 
 export default async function Diapers ({ params: { childId, id }}: {params: { childId: string, id: string}}) {
 
@@ -22,7 +22,7 @@ export default async function Diapers ({ params: { childId, id }}: {params: { ch
           diapers
         </div>
         <div className="flex flex-row self-center">
-          <BackButton />
+          <BackToChildButton childId={childId} id={id}/>
           <div className="text-oxford-blue py-2 px-4 rounded shadow flex transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex flex-col mt-4 mb-4 outline outline-1 outline-oxford-blue hover:bg-foreground-50 rounded self-center ml-4">
             <Link href={`/pufflings/family/${id}/child/${childId}/diapers/addDiaper`}>
               add diaper
diff --git a/app/ui/backToChildButton.tsx b/app/ui/backToChildButton.tsx
new file mode 100644
index 0000000..7e4bcbb
--- /dev/null
+++ b/app/ui/backToChildButton.tsx
@@ -0,0 +1,8 @@
+import Link from "next/link";
+
+export default function BackToChildButton({ childId, id }:{ childId: string, id:string }) {
+
+  return (
+    <Link className='text-oxford-blue py-2 px-4 rounded shadow transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex mt-4 mb-4 outline outline-1 outline-oxford-blue hover:bg-foreground-50 rounded' href={`/pufflings/family/${id}/child/${childId}`}>previous page</Link>
+  );
+}

From 156d0fbc112dc689d657e5dd5432264a5f0d5de7 Mon Sep 17 00:00:00 2001
From: Kristen Chandler <krismchandler@gmail.com>
Date: Mon, 9 Dec 2024 14:10:26 -0600
Subject: [PATCH 2/5] fix styling

---
 .../[id]/child/[childId]/diapers/page.tsx     | 41 +++++++++++--------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx b/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
index dd29ebb..f65a3d7 100644
--- a/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
@@ -1,11 +1,11 @@
-import { getChildWithNested } from "@/lib/child";
-import Link from "next/link";
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faDroplet } from '@fortawesome/free-solid-svg-icons'
-import { faPoop } from '@fortawesome/free-solid-svg-icons'
-import { dateFormatter } from "@/lib/dateFormatter";
-import { timeFormatter } from "@/lib/timeFormatter";
-import BackToChildButton from "@/app/ui/backToChildButton";
+import { getChildWithNested } from '@/lib/child';
+import Link from 'next/link';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faDroplet } from '@fortawesome/free-solid-svg-icons';
+import { faPoop } from '@fortawesome/free-solid-svg-icons';
+import { dateFormatter } from '@/lib/dateFormatter';
+import { timeFormatter } from '@/lib/timeFormatter';
+import BackToChildButton from '@/app/ui/backToChildButton';
 
 export default async function Diapers({
   params: { childId, id },
@@ -24,16 +24,21 @@ export default async function Diapers({
       <div className='self-center text-6xl text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]'>
         diapers
       </div>
-        <div className="flex flex-row self-center">
-          <BackToChildButton childId={childId} id={id}/>
-          <div className="text-oxford-blue py-2 px-4 rounded shadow flex transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex flex-col mt-4 mb-4 outline outline-1 outline-oxford-blue hover:bg-foreground-50 rounded self-center ml-4">
-            <Link href={`/pufflings/family/${id}/child/${childId}/diapers/addDiaper`}>
-              add diaper
-            </Link>
-          </div>
-         </div>
-         <div className="text-3xl self-center">
-          {diaperInfo?.slice().reverse().map(diaper => {
+      <div className='flex flex-row self-center'>
+        <BackToChildButton childId={childId} id={id} />
+        <div className='transition-duration-100 mb-4 ml-4 mt-4 flex flex-col self-center rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'>
+          <Link
+            href={`/pufflings/family/${id}/child/${childId}/diapers/addDiaper`}
+          >
+            add diaper
+          </Link>
+        </div>
+      </div>
+      <div className='self-center text-3xl'>
+        {diaperInfo
+          ?.slice()
+          .reverse()
+          .map((diaper) => {
             const dateTime = diaper.time_of_last_change;
 
             if (diaper.type === 'pee') {

From 410f490c859f0c68d9647a66a828c91b3bd35ff9 Mon Sep 17 00:00:00 2001
From: Kristen Chandler <krismchandler@gmail.com>
Date: Mon, 9 Dec 2024 15:06:45 -0600
Subject: [PATCH 3/5] updated all the back to child buttons and also updated
 the profile page of the child to account for correct display of
 week(s)/month(s)/year(s) for child's age

---
 .../[id]/child/[childId]/dashboard/page.tsx   | 14 +++++++++++
 .../[id]/child/[childId]/feeds/page.tsx       |  4 +--
 .../[childId]/medical/[medicalId]/page.tsx    |  8 +++---
 .../[id]/child/[childId]/profile/page.tsx     | 25 +++++++++++++------
 .../[id]/child/[childId]/sleeps/page.tsx      |  4 +--
 app/ui/backToChildButton.tsx                  | 18 ++++++++++---
 app/ui/deleteButton.tsx                       |  2 +-
 app/ui/recents.tsx                            |  2 +-
 lib/currentAge.ts                             | 16 ++++++++++++
 9 files changed, 72 insertions(+), 21 deletions(-)

diff --git a/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx b/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx
index f445950..d84986e 100644
--- a/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx
@@ -1,12 +1,15 @@
 'use server';
 
+import DeleteButton from '@/app/ui/deleteButton';
 import Recents from '@/app/ui/recents';
+import { getChild } from '@/lib/child';
 import {
   getChildDashboard,
   LastDiaper,
   LastFeed,
   LastSleep,
 } from '@/lib/dashboard';
+import Link from 'next/link';
 
 const Dashboard = async ({
   params: { childId, id },
@@ -17,6 +20,8 @@ const Dashboard = async ({
     parseInt(childId)
   );
 
+  const childInfo = await getChild(parseInt(childId));
+
   return (
     <>
       <Recents
@@ -26,6 +31,15 @@ const Dashboard = async ({
         lastSleep={lastSleep as LastSleep}
         lastDiaper={lastDiaper as LastDiaper}
       />
+      <div className='mt-10 flex flex-row place-self-center'>
+        <Link
+          href={`/pufflings/family/${id}/child/${childId}/profile`}
+          className='transition-duration-100 mr-4 h-fit w-fit rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'
+        >
+          view {childInfo?.name.toLocaleLowerCase()}&apos;s profile
+        </Link>
+        <DeleteButton childId={childId} familyId={id} />
+      </div>
     </>
   );
 };
diff --git a/app/pufflings/family/[id]/child/[childId]/feeds/page.tsx b/app/pufflings/family/[id]/child/[childId]/feeds/page.tsx
index 4aa21e9..8da68a0 100644
--- a/app/pufflings/family/[id]/child/[childId]/feeds/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/feeds/page.tsx
@@ -3,8 +3,8 @@ import FeedTable from './feedTable';
 import Link from 'next/link';
 import { feed } from '@prisma/client';
 import LastFeed from './lastFeed';
-import BackButton from '@/app/ui/backButton';
 import { getPagedFeeds, getLastFeed } from '@/lib/feed';
+import BackToChildButton from '@/app/ui/backToChildButton';
 
 export default async function Feeds({
   params: { childId, id },
@@ -27,7 +27,7 @@ export default async function Feeds({
       </div>
       {feedInfo && <LastFeed lastFeed={lastFeed[0]} />}
       <div className='flex flex-row self-center'>
-        <BackButton />
+        <BackToChildButton childId={childId} id={id} />
         <Link
           href={`/pufflings/family/${id}/child/${childId}/feeds/startFeed`}
           className='transition-duration-100 mb-4 ml-4 mt-4 flex w-24 flex-row justify-center self-center rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'
diff --git a/app/pufflings/family/[id]/child/[childId]/medical/[medicalId]/page.tsx b/app/pufflings/family/[id]/child/[childId]/medical/[medicalId]/page.tsx
index 057f3c1..5f5493e 100644
--- a/app/pufflings/family/[id]/child/[childId]/medical/[medicalId]/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/medical/[medicalId]/page.tsx
@@ -1,13 +1,13 @@
 import { deleteMedical, getMedical } from '@/lib/medical';
 import { dateFormatter } from '@/lib/dateFormatter';
 import { timeFormatter } from '@/lib/timeFormatter';
-import BackButton from '@/app/ui/backButton';
 import SubmitButton from '@/app/ui/submitButton';
+import BackToChildButton from '@/app/ui/backToChildButton';
 
 export default async function Medical({
-  params: { childId, medicalId },
+  params: { childId, medicalId, id },
 }: {
-  params: { childId: string; medicalId: string };
+  params: { childId: string; medicalId: string; id: string };
 }) {
   const medicalInfo = await getMedical(parseInt(medicalId));
 
@@ -19,7 +19,7 @@ export default async function Medical({
         single medical page
       </div>
       <div className='w-fit self-center'>
-        <BackButton />
+        <BackToChildButton childId={childId} id={id} />
       </div>
       <div className='transition-duration-100 mt-4 flex w-56 flex-col self-center rounded bg-tea-green px-4 py-2 text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
         <div className='ml-1'>{dateFormatter.format(dateTime)}</div>
diff --git a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
index 569108b..f553db5 100644
--- a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
@@ -5,8 +5,12 @@ import { lastCreatedWeight } from '@/lib/weight';
 import Link from 'next/link';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPenToSquare } from '@fortawesome/free-solid-svg-icons';
-import { calculateAge, getMonthsDifference } from '@/lib/currentAge';
-import BackButton from '@/app/ui/backButton';
+import {
+  calculateAge,
+  getMonthsDifference,
+  getWeeksDifference,
+} from '@/lib/currentAge';
+import BackToChildButton from '@/app/ui/backToChildButton';
 
 const childProfilePage = async ({
   params: { childId, id },
@@ -38,7 +42,14 @@ const childProfilePage = async ({
     ageDisplay = `${childsAge} years`;
   } else if (currentAge < 1) {
     let childsAge = getMonthsDifference(date);
-    ageDisplay = `${childsAge} months`;
+    if (childsAge < 1) {
+      let childWeeks = getWeeksDifference(date);
+      if (childWeeks == 1) {
+        ageDisplay = `${childWeeks} week`;
+      } else ageDisplay = `${childWeeks} weeks`;
+    } else if (childsAge == 1) {
+      ageDisplay = `${childsAge} month`;
+    } else ageDisplay = `${childsAge} months`;
   }
 
   const editIcon = <FontAwesomeIcon icon={faPenToSquare} />;
@@ -47,7 +58,7 @@ const childProfilePage = async ({
     return (
       <div className='flex flex-col'>
         <div className='w-fit self-center'>
-          <BackButton />
+          <BackToChildButton childId={childId} id={id} />
         </div>
         <div className='transition-duration-100 mt-4 inline-block flex flex-col rounded bg-tea-green px-4 py-2 text-center text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
           <p className='mb-2 text-5xl'>
@@ -83,7 +94,7 @@ const childProfilePage = async ({
     return (
       <div className='flex flex-col justify-self-center'>
         <div className='w-fit self-center'>
-          <BackButton />
+          <BackToChildButton childId={childId} id={id} />
         </div>
         <div className='transition-duration-100 mt-4 inline-block flex w-fit flex-col rounded bg-tea-green px-4 py-2 text-center text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
           <p className='mb-2 text-5xl'>
@@ -119,7 +130,7 @@ const childProfilePage = async ({
     return (
       <div className='flex flex-col justify-self-center'>
         <div className='w-fit self-center'>
-          <BackButton />
+          <BackToChildButton childId={childId} id={id} />
         </div>
         <div className='transition-duration-100 mt-4 inline-block flex w-fit flex-col rounded bg-tea-green px-4 py-2 text-center text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
           <p className='mb-2 text-5xl'>
@@ -155,7 +166,7 @@ const childProfilePage = async ({
     return (
       <div className='flex flex-col justify-self-center'>
         <div className='w-fit self-center'>
-          <BackButton />
+          <BackToChildButton childId={childId} id={id} />
         </div>
         <div className='transition-duration-100 mt-4 inline-block flex w-fit flex-col rounded bg-tea-green px-4 py-2 text-center text-3xl text-oxford-blue shadow transition transition-all hover:drop-shadow-xl'>
           <p className='mb-2 text-5xl'>
diff --git a/app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx b/app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx
index 229d89f..734af92 100644
--- a/app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx
@@ -3,7 +3,7 @@ import Link from 'next/link';
 import { dateFormatter } from '@/lib/dateFormatter';
 import { timeFormatter } from '@/lib/timeFormatter';
 import { lastCreatedSleep } from '@/lib/sleep';
-import BackButton from '@/app/ui/backButton';
+import BackToChildButton from '@/app/ui/backToChildButton';
 
 export default async function Sleeps({
   params: { childId, id },
@@ -22,7 +22,7 @@ export default async function Sleeps({
         sleeps
       </div>
       <div className='flex flex-row'>
-        <BackButton />
+        <BackToChildButton childId={childId} id={id} />
         <div className='transition-duration-100 mb-4 ml-4 mt-4 flex rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'>
           <Link
             href={`/pufflings/family/${id}/child/${childId}/sleeps/startSleep`}
diff --git a/app/ui/backToChildButton.tsx b/app/ui/backToChildButton.tsx
index 7e4bcbb..fc3d182 100644
--- a/app/ui/backToChildButton.tsx
+++ b/app/ui/backToChildButton.tsx
@@ -1,8 +1,18 @@
-import Link from "next/link";
-
-export default function BackToChildButton({ childId, id }:{ childId: string, id:string }) {
+import Link from 'next/link';
 
+export default function BackToChildButton({
+  childId,
+  id,
+}: {
+  childId: string;
+  id: string;
+}) {
   return (
-    <Link className='text-oxford-blue py-2 px-4 rounded shadow transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl flex mt-4 mb-4 outline outline-1 outline-oxford-blue hover:bg-foreground-50 rounded' href={`/pufflings/family/${id}/child/${childId}`}>previous page</Link>
+    <Link
+      className='transition-duration-100 mb-4 mt-4 flex rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'
+      href={`/pufflings/family/${id}/child/${childId}`}
+    >
+      previous page
+    </Link>
   );
 }
diff --git a/app/ui/deleteButton.tsx b/app/ui/deleteButton.tsx
index 51e725a..0c1b163 100644
--- a/app/ui/deleteButton.tsx
+++ b/app/ui/deleteButton.tsx
@@ -15,7 +15,7 @@ const DeleteButton = ({
   return (
     <button
       onClick={() => handleClick(childId, familyId)}
-      className='transition-duration-100 mt-7 flex flex-col self-center rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'
+      className='transition-duration-100 flex flex-col self-center rounded px-4 py-2 text-xl text-oxford-blue shadow outline outline-1 outline-oxford-blue transition transition-all hover:bg-foreground-50 hover:drop-shadow-xl'
     >
       remove child
     </button>
diff --git a/app/ui/recents.tsx b/app/ui/recents.tsx
index 27154dd..3bf7cae 100644
--- a/app/ui/recents.tsx
+++ b/app/ui/recents.tsx
@@ -35,7 +35,7 @@ const Recents = ({
                 amount
               </dt>
               <dd className='mt-1 text-3xl font-semibold tracking-tight text-gray-900'>
-                {lastFeed.amount?.toString()} oz
+                {lastFeed?.amount?.toString()} oz
               </dd>
             </div>
           </div>
diff --git a/lib/currentAge.ts b/lib/currentAge.ts
index 040c624..6131f77 100644
--- a/lib/currentAge.ts
+++ b/lib/currentAge.ts
@@ -26,3 +26,19 @@ export const getMonthsDifference = (birthday: Date) => {
 
   return monthsDiff;
 };
+
+export const getWeeksDifference = (birthday: Date) => {
+  const birthDate = new Date(birthday);
+
+  // Set the time component of the birthDate to midnight
+  birthDate.setHours(0, 0, 0, 0);
+
+  const today = new Date();
+  // Set the time component of today to midnight
+  today.setHours(0, 0, 0, 0);
+
+  const timeDiff = today.getTime() - birthDate.getTime();
+  const weeksDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24 * 7));
+
+  return weeksDiff;
+};

From d362fdb553a91e356aa2199fc8d458ddde4a1e4a Mon Sep 17 00:00:00 2001
From: Kristen Chandler <krismchandler@gmail.com>
Date: Mon, 9 Dec 2024 15:16:03 -0600
Subject: [PATCH 4/5] updated all the back to child buttons and also updated
 the profile page of the child to account for correct display of
 week(s)/month(s)/year(s) for child's age

---
 app/pufflings/family/[id]/child/[childId]/profile/page.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
index f553db5..a451fdf 100644
--- a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
@@ -40,6 +40,9 @@ const childProfilePage = async ({
   if (currentAge >= 1) {
     let childsAge = currentAge;
     ageDisplay = `${childsAge} years`;
+  } else if (currentAge == 1) {
+    let childsAge = currentAge;
+    ageDisplay = `${childsAge} year`;
   } else if (currentAge < 1) {
     let childsAge = getMonthsDifference(date);
     if (childsAge < 1) {

From 8818c366e766888aa9d7627b50c082fc33217738 Mon Sep 17 00:00:00 2001
From: Kristen Chandler <krismchandler@gmail.com>
Date: Mon, 9 Dec 2024 15:29:37 -0600
Subject: [PATCH 5/5] updated the height and weight display to show properly
 whether or not it includes feet, inches, pounds, or ounces

---
 .../[id]/child/[childId]/profile/page.tsx     | 28 ++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
index a451fdf..b9e7889 100644
--- a/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
+++ b/app/pufflings/family/[id]/child/[childId]/profile/page.tsx
@@ -57,6 +57,26 @@ const childProfilePage = async ({
 
   const editIcon = <FontAwesomeIcon icon={faPenToSquare} />;
 
+  let weightDisplay = '';
+
+  if (currentWeight.pounds && currentWeight.ounces) {
+    weightDisplay = `${currentWeight?.pounds} lbs ${currentWeight?.ounces} oz`;
+  } else if (currentWeight.pounds && !currentWeight.ounces) {
+    weightDisplay = `${currentWeight?.pounds} lbs`;
+  } else if (!currentWeight.pounds && currentWeight.ounces) {
+    weightDisplay = `${currentWeight?.ounces} oz`;
+  }
+
+  let heightDisplay = '';
+
+  if (currentHeight.feet && currentHeight.inches) {
+    heightDisplay = `${currentHeight?.feet} ft ${currentHeight?.inches} in`;
+  } else if (currentHeight.feet && !currentHeight.inches) {
+    heightDisplay = `${currentHeight?.feet} ft`;
+  } else if (!currentHeight.feet && currentHeight.inches) {
+    heightDisplay = `${currentHeight?.inches} in`;
+  }
+
   if (currentHeight && currentWeight) {
     return (
       <div className='flex flex-col'>
@@ -71,7 +91,7 @@ const childProfilePage = async ({
           <p className='mb-2'>age: {ageDisplay}</p>
           <p className='mb-2'>birthday: {formattedBirthday}</p>
           <p className='flex flex-row self-center'>
-            height: {currentHeight?.feet} ft {currentHeight?.inches} in
+            height: {heightDisplay}
             <Link
               href={`/pufflings/family/${id}/child/${childId}/profile/editHeight`}
               className='ml-3 mt-2 flex text-xl'
@@ -80,7 +100,7 @@ const childProfilePage = async ({
             </Link>
           </p>
           <p className='flex flex-row self-center'>
-            weight: {currentWeight?.pounds} lbs {currentWeight?.ounces} oz
+            weight: {weightDisplay}
             <Link
               href={`/pufflings/family/${id}/child/${childId}/profile/editWeight`}
               className='ml-3 mt-2 flex text-xl'
@@ -116,7 +136,7 @@ const childProfilePage = async ({
             </Link>
           </p>
           <p className='flex flex-row self-center'>
-            weight: {currentWeight?.pounds} lbs {currentWeight?.ounces} oz
+            weight: {weightDisplay}
             <Link
               href={`/pufflings/family/${id}/child/${childId}/profile/editWeight`}
               className='ml-3 mt-2 flex text-xl'
@@ -143,7 +163,7 @@ const childProfilePage = async ({
           <p className='mb-2'>age: {ageDisplay}</p>
           <p className='mb-2'>birthday: {formattedBirthday}</p>
           <p className='flex flex-row self-center'>
-            height: {currentHeight?.feet} ft {currentHeight?.inches} in
+            height: {heightDisplay}
             <Link
               href={`/pufflings/family/${id}/child/${childId}/profile/editHeight`}
               className='ml-3 mt-2 flex text-xl'