Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rework dash #56

Merged
merged 4 commits into from
Dec 9, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 74 additions & 0 deletions app/pufflings/family/[id]/child/[childId]/childNavigation.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
'use client';

import Link from "next/link";
import { ChevronDownIcon } from '@heroicons/react/16/solid'
import { usePathname } from "next/navigation"; // usePathname is a hook now imported from navigation
import { useRouter } from 'next/navigation'

const tabs = [
{ name: 'Dashboard', href: 'dashboard', current: true },
{ name: 'Feeds', href: 'feeds', current: false },
{ name: 'Diapers', href: 'diapers', current: false },
{ name: 'Sleeps', href: 'sleeps', current: false },
{ name: 'Medical', href: 'medical', current: false },
]

function classNames(...classes: any) {
return classes.filter(Boolean).join(' ')
}

const ChildNavigation = ({ childId, familyId, childInfo}: {childId: string, familyId: string, childInfo: any}) => {
const pathName = usePathname();
const router = useRouter();

const tabChange = (e: any) => {
const newRoute = e.target.value.toLowerCase();
router.push(`/pufflings/family/${familyId}/child/${childId}/${newRoute}`)
}

return (
<div className="border-b border-gray-200 pb-5 sm:pb-0">
<h1 className="text-2xl font-semibold text-gray-900">{childInfo?.name?.toLowerCase()}</h1>
<div className="mt-3 sm:mt-4">
<div className="grid grid-cols-1 sm:hidden">
{/* Use an "onChange" listener to redirect the user to the selected tab URL. */}
<select
defaultValue={tabs.find((tab) => pathName.includes(tab.href))?.href}
aria-label="Select a tab"
onChange={tabChange}
className="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-2 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600"
>
{tabs.map((tab) => (
<option key={tab.name} value={tab.href}>{tab.name}</option>
))}
</select>
<ChevronDownIcon
aria-hidden="true"
className="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end fill-gray-500"
/>
</div>
<div className="hidden sm:block">
<nav className="-mb-px flex space-x-8">
{tabs.map((tab) => (
<Link
key={tab.name}
href={`/pufflings/family/${familyId}/child/${childId}/${tab.href}`}
aria-current={pathName.includes(tab.href) ? 'page' : undefined}
className={classNames(
pathName.includes(tab.href)
? 'text-oxford-blue border-oxford-blue'
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700',
'whitespace-nowrap border-b-2 px-1 pb-4 text-xl font-medium',
)}
>
{tab.name}
</Link>
))}
</nav>
</div>
</div>
</div>
)
}

export default ChildNavigation;
20 changes: 20 additions & 0 deletions app/pufflings/family/[id]/child/[childId]/dashboard/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import Recents from "@/app/ui/recents";
import { getChildDashboard, LastDiaper, LastFeed, LastSleep } from "@/lib/dashboard";

const Dashboard = async ({ params: { childId, id }}: {params: { childId: string, id: string }}) => {

const {
lastFeed,
lastSleep,
lastDiaper
} = await getChildDashboard(parseInt(childId))


return (
<>
<Recents familyId={id} childId={childId} lastFeed={lastFeed as LastFeed} lastSleep={lastSleep as LastSleep} lastDiaper={lastDiaper as LastDiaper} />
</>
)
}

export default Dashboard
2 changes: 1 addition & 1 deletion app/pufflings/family/[id]/child/[childId]/diapers/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export default async function Diapers ({ params: { childId, id }}: {params: { ch
const poopIcon = <FontAwesomeIcon icon={faPoop} />

return (
<div className="mt-36 flex flex-col">
<div className="mt-5 flex flex-col">
<div className="self-center text-6xl text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
diapers
</div>
Expand Down
2 changes: 1 addition & 1 deletion app/pufflings/family/[id]/child/[childId]/feeds/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export default async function Feeds (
const [feedInfo, count]: [feed[], number] = await getPagedFeeds(parseInt(childId), pageParam)

return (
<div className="flex flex-col">
<div className="flex flex-col mt-5">
<div className="text-6xl self-center text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
Feeds
</div>
Expand Down
22 changes: 22 additions & 0 deletions app/pufflings/family/[id]/child/[childId]/layout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import { getChild } from "@/lib/child";
import ChildNavigation from "./childNavigation";

export default async function ChildLayout({
children,
params: { childId, id }
}: {

children: React.ReactNode;
params: { childId: string, id: string } }) {

console.log(childId)

const childInfo = await getChild(parseInt(childId))

return (
<div className="px-5 sm:px-20">
<ChildNavigation childId={childId} familyId={id} childInfo={childInfo} />
{children}
</div>
)
}
2 changes: 1 addition & 1 deletion app/pufflings/family/[id]/child/[childId]/loading.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import Loading from "@/app/loading";

const PageLoading = () => <Loading />
const PageLoading = () => <div className="mt-5"><Loading /></div>

export default PageLoading
2 changes: 1 addition & 1 deletion app/pufflings/family/[id]/child/[childId]/medical/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export default async function Medicals ({ params: { childId, id }}: {params: { c

return (
<div>
<div className="mt-36 flex flex-col">
<div className="mt-5 flex flex-col">
<div className="text-6xl self-center text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
medical
</div>
Expand Down
70 changes: 70 additions & 0 deletions app/pufflings/family/[id]/child/[childId]/page copy.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { getChild } from "@/lib/child";
import Link from "next/link";
import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouseChimneyMedical, faMoon } from '@fortawesome/free-solid-svg-icons'
import { BabyBottleIcon } from "hugeicons-react";
import { DiaperIcon } from "hugeicons-react";
import DeleteButton from '../../../../../ui/deleteButton'

export default async function Child ({ params: { childId, id }}: {params: { childId: string, id: string }}) {

const childInfo = await getChild(parseInt(childId))

const diaperIcon = <DiaperIcon color="oxford-blue" size="99" />
const feedIcon = <BabyBottleIcon color="oxford-blue" size="99" />
const medicalIcon = <FontAwesomeIcon icon={faHouseChimneyMedical} />
const sleepIcon = <FontAwesomeIcon icon={faMoon} />

const activities = [
{
url: `/pufflings/family/${id}/child/${childId}/diapers`,
icon: diaperIcon,
label: 'diapers'
},
{
url:`/pufflings/family/${id}/child/${childId}/sleeps`,
icon: sleepIcon,
label: 'sleeps'
},
{
url:`/pufflings/family/${id}/child/${childId}/feeds`,
icon: feedIcon,
label: 'feeds'
},
{
url:`/pufflings/family/${id}/child/${childId}/medical`,
icon: medicalIcon,
label: 'medical'
}
]


return (
<div className="flex flex-col mt-8">
<div className="text-6xl flex justify-center">
<span className="text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] mb-5">{childInfo?.name.toLocaleLowerCase()}</span>
</div>
<Link href={`/pufflings/family/${id}/child/${childId}/profile`} className="text-oxford-blue py-2 px-4 rounded shadow outline outline-1 outline-oxford-blue rounded transition hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl mt-1 w-fit flex place-self-center">view {childInfo?.name.toLocaleLowerCase()}&apos;s profile</Link>
<div className="flex flex-row flex-wrap justify-center md:space-x-10">
{activities.map(activity => {
return (
<div key={`label_${activity.label}`}>
<Link href={activity.url} className="text-oxford-blue py-2 px-4 rounded shadow flex flex-col bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl mt-7">
<div className="min-w-[180px] flex flex-col">
<div className="self-center text-8xl mt-6">
{activity.icon}
</div>
<div className="self-center text-4xl mb-3 mt-1 ">
{activity.label}
</div>
</div>
</Link>
</div>
)
})}
</div>
<DeleteButton childId={childId} familyId={id} />
</div>
);
};
74 changes: 5 additions & 69 deletions app/pufflings/family/[id]/child/[childId]/page.tsx
Original file line number Diff line number Diff line change
@@ -1,70 +1,6 @@
import { getChild } from "@/lib/child";
import Link from "next/link";
import React from "react";
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faHouseChimneyMedical, faMoon } from '@fortawesome/free-solid-svg-icons'
import { BabyBottleIcon } from "hugeicons-react";
import { DiaperIcon } from "hugeicons-react";
import DeleteButton from '../../../../../ui/deleteButton'
import { redirect } from 'next/navigation';
const ChildPage = async ({ params: { childId, id }}: {params: { childId: string, id: string }}) => {
redirect(`/pufflings/family/${id}/child/${childId}/dashboard`)
}

export default async function Child ({ params: { childId, id }}: {params: { childId: string, id: string }}) {

const childInfo = await getChild(parseInt(childId))

const diaperIcon = <DiaperIcon color="oxford-blue" size="99" />
const feedIcon = <BabyBottleIcon color="oxford-blue" size="99" />
const medicalIcon = <FontAwesomeIcon icon={faHouseChimneyMedical} />
const sleepIcon = <FontAwesomeIcon icon={faMoon} />

const activities = [
{
url: `/pufflings/family/${id}/child/${childId}/diapers`,
icon: diaperIcon,
label: 'diapers'
},
{
url:`/pufflings/family/${id}/child/${childId}/sleeps`,
icon: sleepIcon,
label: 'sleeps'
},
{
url:`/pufflings/family/${id}/child/${childId}/feeds`,
icon: feedIcon,
label: 'feeds'
},
{
url:`/pufflings/family/${id}/child/${childId}/medical`,
icon: medicalIcon,
label: 'medical'
}
]


return (
<div className="flex flex-col mt-8">
<div className="text-6xl flex justify-center">
<span className="text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)] mb-5">{childInfo?.name.toLocaleLowerCase()}</span>
</div>
<Link href={`/pufflings/family/${id}/child/${childId}/profile`} className="text-oxford-blue py-2 px-4 rounded shadow outline outline-1 outline-oxford-blue rounded transition hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl mt-1 w-fit flex place-self-center">view {childInfo?.name.toLocaleLowerCase()}&apos;s profile</Link>
<div className="flex flex-row flex-wrap justify-center md:space-x-10">
{activities.map(activity => {
return (
<div key={`label_${activity.label}`}>
<Link href={activity.url} className="text-oxford-blue py-2 px-4 rounded shadow flex flex-col bg-tea-green transition hover:drop-shadow-xl transition-all transition-duration-100 text-xl mt-7">
<div className="min-w-[180px] flex flex-col">
<div className="self-center text-8xl mt-6">
{activity.icon}
</div>
<div className="self-center text-4xl mb-3 mt-1 ">
{activity.label}
</div>
</div>
</Link>
</div>
)
})}
</div>
<DeleteButton childId={childId} familyId={id} />
</div>
);
};
export default ChildPage
2 changes: 1 addition & 1 deletion app/pufflings/family/[id]/child/[childId]/sleeps/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export default async function Sleeps ({ params: { childId, id }}: {params: { chi
await lastCreatedSleep(childId);

return (
<div className="mt-36 flex flex-col items-center">
<div className="mt-5 flex flex-col items-center">
<div className="text-6xl text-atomic-tangerine [text-shadow:_0_2px_0_rgb(0_0_0_/_40%)]">
sleeps
</div>
Expand Down
77 changes: 77 additions & 0 deletions app/ui/recents.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
'use client';

import { LastDiaper, LastFeed, LastSleep } from "@/lib/dashboard";
import Link from "next/link"


const Recents = ({ familyId, childId, lastFeed, lastSleep, lastDiaper }: { familyId: string, childId: string, lastFeed: LastFeed, lastSleep: LastSleep, lastDiaper: LastDiaper}) => {
return (
<>
<dl className="mt-5 grid grid-cols-1 gap-5 sm:grid-cols-3">
<div className="overflow-hidden rounded-lg bg-white shadow">
<div className="flex px-4 py-5 sm:p-6">
<div className="flex flex-col text-left left-0">
<dt className="truncate text-sm font-medium text-gray-500">last feed</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastFeed?.timeSince} hrs ago</dd>
</div>
<div className="flex grow">&nbsp;</div>
<div className="flex flex-col text-right right-0">
<dt className="truncate text-sm font-medium text-gray-500">amount</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{2} oz</dd>
</div>
</div>
<div className="bg-tea-green">
<Link href={`/pufflings/family/${familyId}/child/${childId}/feeds/startFeed`}
className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
start new feed
</Link>
</div>
</div>

<div className="overflow-hidden rounded-lg bg-white shadow">
<div className="flex px-4 py-5 sm:p-6">
<div className="flex flex-col text-left left-0">
<dt className="truncate text-sm font-medium text-gray-500">last diaper</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastDiaper?.timeSince} hrs ago</dd>
</div>
<div className="flex grow">&nbsp;</div>
<div className="flex flex-col text-right right-0">
<dt className="truncate text-sm font-medium text-gray-500">type</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastDiaper?.type}</dd>
</div>
</div>

<div className="bg-tea-green">
<Link href={`/pufflings/family/${familyId}/child/${childId}/diapers/addDiaper`}
className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
add diaper
</Link>
</div>
</div>

<div className="overflow-hidden rounded-lg bg-white shadow">
<div className="flex px-4 py-5 sm:p-6">
<div className="flex flex-col text-left left-0">
<dt className="truncate text-sm font-medium text-gray-500">last sleep start</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastSleep?.start_time.toLocaleTimeString()}</dd>
</div>
<div className="flex grow">&nbsp;</div>
<div className="flex flex-col text-right right-0">
<dt className="truncate text-sm font-medium text-gray-500">last sleep end</dt>
<dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">{lastSleep?.end_time?.toLocaleTimeString()}</dd>
</div>
</div>

<div className="bg-tea-green">
<Link href={`/pufflings/family/${familyId}/child/${childId}/sleeps/startSleep`}
className="text-oxford-blue py-1 px-2 text-center rounded hover:drop-shadow-xl hover:bg-foreground-50 transition-all transition-duration-100 text-xl flex flex-col mt-3 w-26 self-center">
start new sleep
</Link>
</div>
</div>
</dl>
</>
)
}

export default Recents
Loading
Loading