knee-cola/evidencija-rezija
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

tracking active month via URL param

Browse Source
This commit is contained in:
Nikola Derežić
2024-02-01 14:34:27 +01:00
parent 15422a6d75
commit f71098d9e8
2 changed files with 37 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
app/page.tsx
View File

@@ -21,6 +21,7 @@ const getNextYearMonth = (yearMonth:YearMonth) => {
export interface PageProps { export interface PageProps {
searchParams?: { searchParams?: {
year?: string; year?: string;
month?: string;
}; };
} }
@@ -47,15 +48,17 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
return ( return (
<main className="flex min-h-screen flex-col p-6 bg-base-300"> <main className="flex min-h-screen flex-col p-6 bg-base-300">
<MonthTitle yearMonth={currentYearMonth} /> <MonthCard yearMonth={currentYearMonth} key={`month-${currentYearMonth}`} monthlyExpense={0}>
<AddLocationButton yearMonth={currentYearMonth} /> <AddLocationButton yearMonth={currentYearMonth} />
</MonthCard>
<PageFooter /> <PageFooter />
</main> </main>
); );
} }
const [ latestYear ] = availableYears;
const currentYear = Number(searchParams?.year) || availableYears[0]; const currentYear = Number(searchParams?.year) || availableYears[0];
const currentMonth = Number(searchParams?.month);
const locations = await fetchAllLocations(currentYear); const locations = await fetchAllLocations(currentYear);
// group locations by month // group locations by month
@@ -95,7 +98,7 @@ const Page:FC<PageProps> = async ({ searchParams }) => {
<AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} /> <AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
{ {
Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) => Object.entries(months).map(([monthKey, { yearMonth, locations, monthlyExpense }], monthIx) =>
<MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense}> <MonthCard yearMonth={yearMonth} key={`month-${monthKey}`} monthlyExpense={monthlyExpense} expanded={ yearMonth.month === currentMonth } >
{ {
locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />) locations.map((location, ix) => <LocationCard key={`location-${location._id}`} location={location} />)
} }

47
app/ui/MonthCard.tsx
View File

@@ -1,27 +1,40 @@
"use client";
import { FC } from "react"; import { FC } from "react";
import { formatYearMonth } from "../lib/format"; import { formatYearMonth } from "../lib/format";
import { YearMonth } from "../lib/db-types"; import { YearMonth } from "../lib/db-types";
import { formatCurrency } from "../lib/formatStrings"; import { formatCurrency } from "../lib/formatStrings";
import { redirect, useParams, useRouter } from "next/navigation";
export interface MonthCardProps { export interface MonthCardProps {
yearMonth: YearMonth, yearMonth: YearMonth,
children?: React.ReactNode, children?: React.ReactNode,
monthlyExpense:number monthlyExpense:number,
expanded?:boolean
} }
export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense }) => export const MonthCard:FC<MonthCardProps> = ({ yearMonth, children, monthlyExpense, expanded }) => {
<div className="collapse collapse-plus bg-base-200 my-1">
<input type="radio" name="my-accordion-3" /> const router = useRouter();
<div className="collapse-title text-xl font-medium">
{`${formatYearMonth(yearMonth)}`} // setting the `month` will activate the accordion belonging to that month
{ const handleChange = (event:any) => router.push(`/?year=${yearMonth.year}&month=${yearMonth.month}`)
monthlyExpense>0 ?
<p className="text-xs font-medium"> return(
Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong> <div className="collapse collapse-plus bg-base-200 my-1">
</p> : null <input type="radio" name="my-accordion-3" checked={expanded} onChange={handleChange} />
} <div className="collapse-title text-xl font-medium">
</div> {`${formatYearMonth(yearMonth)}`}
<div className="collapse-content"> {
{children} monthlyExpense>0 ?
</div> <p className="text-xs font-medium">
</div> Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
</p> : null
}
</div>
<div className="collapse-content">
{children}
</div>
</div>
)
};