Merge branch 'main' into feedchart

kmchandler · Dec 12, 2024 · 8799f8f · 8799f8f
2 parents 1ca2ed4 + 8ee1dec
commit 8799f8f
Show file tree

Hide file tree

Showing 10 changed files with 105 additions and 23 deletions.
diff --git a/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx b/app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx
@@ -1,13 +1,16 @@
 'use server';
 
 import FeedChart from '@/app/ui/charts/feedChart';
+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 },
@@ -18,6 +21,8 @@ const Dashboard = async ({
     parseInt(childId)
   );
 
+  const childInfo = await getChild(parseInt(childId));
+
   return (
     <div className='flex flex-col gap-10'>
       <Recents
@@ -28,6 +33,15 @@ const Dashboard = async ({
         lastDiaper={lastDiaper as LastDiaper}
       />
       <FeedChart childId={childId} />
+      <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>
     </div>
   );
 };

diff --git 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 },
@@ -25,7 +25,7 @@ export default async function Diapers({
         diapers
       </div>
       <div className='flex flex-row self-center'>
-        <BackButton />
+        <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`}

diff --git 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
@@ -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
@@ -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 },
@@ -36,18 +40,48 @@ 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);
-    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} />;
 
+  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'>
         <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'>
@@ -57,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'
@@ -66,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'
@@ -83,7 +117,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'>
@@ -102,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'
@@ -119,7 +153,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'>
@@ -129,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'
@@ -155,7 +189,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
@@ -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
@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+export default function BackToChildButton({
+  childId,
+  id,
+}: {
+  childId: string;
+  id: string;
+}) {
+  return (
+    <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
@@ -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
@@ -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
@@ -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;
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -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>
@@ Expand Down @@