126 lines
4.6 KiB
TypeScript
126 lines
4.6 KiB
TypeScript
import { LocationCard } from './ui/LocationCard';
|
|
import { MonthTitle } from './ui/MonthTitle';
|
|
import { AddMonthButton } from './ui/AddMonthButton';
|
|
import { AddLocationButton } from './ui/AddLocationButton';
|
|
import { PageFooter } from './ui/PageFooter';
|
|
import { fetchAllLocations } from './lib/actions/locationActions';
|
|
import { formatCurrency } from './lib/formatStrings';
|
|
import { fetchAvailableYears } from './lib/actions/monthActions';
|
|
import { YearMonth } from './lib/db-types';
|
|
import { formatYearMonth } from './lib/format';
|
|
import { FC } from 'react';
|
|
import Pagination from './ui/Pagination';
|
|
|
|
const getNextYearMonth = (yearMonth:YearMonth) => {
|
|
const {year, month} = yearMonth;
|
|
return({
|
|
year: month===12 ? year+1 : year,
|
|
month: month===12 ? 1 : month+1
|
|
} as YearMonth);
|
|
}
|
|
|
|
export interface PageProps {
|
|
searchParams?: {
|
|
year?: string;
|
|
};
|
|
}
|
|
|
|
const Page:FC<PageProps> = async ({ searchParams }) => {
|
|
|
|
let availableYears: number[];
|
|
|
|
try {
|
|
availableYears = await fetchAvailableYears();
|
|
} catch (error:any) {
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
<p className="text-center text-2xl text-red-500">{error.message}</p>
|
|
</main>);
|
|
}
|
|
|
|
// if the database is in it's initial state, show the add location button for the current month
|
|
if(availableYears.length === 0) {
|
|
|
|
const currentYearMonth:YearMonth = {
|
|
year: new Date().getFullYear(),
|
|
month: new Date().getMonth() + 1
|
|
};
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
<MonthTitle yearMonth={currentYearMonth} />
|
|
<AddLocationButton yearMonth={currentYearMonth} />
|
|
<PageFooter />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
console.log("page.availableYears", availableYears)
|
|
|
|
const [ latestYear ] = availableYears;
|
|
const currentYear = Number(searchParams?.year) || availableYears[0];
|
|
const locations = await fetchAllLocations(currentYear);
|
|
|
|
let monthlyExpense = 0;
|
|
|
|
return (
|
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
{
|
|
// if this is the latest year, show the add month button
|
|
currentYear === latestYear &&
|
|
<AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
|
|
}
|
|
{
|
|
locations.map((location, ix, array) => {
|
|
|
|
const { year, month } = location.yearMonth
|
|
const { year: prevYear, month: prevMonth } = array[ix-1]?.yearMonth ?? { year: undefined, month: undefined };
|
|
const { year: nextYear, month: nextMonth } = array[ix+1]?.yearMonth ?? { year: undefined, month: undefined };
|
|
|
|
const isLatestYear = year === latestYear;
|
|
const isFirstLocationInMonth = ix === 0 || year !== prevYear || month !== prevMonth;
|
|
const isLastLocationInMonth = year !== nextYear || month !== nextMonth;
|
|
const isLastLocationOfLatestMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month
|
|
|
|
if(isFirstLocationInMonth) {
|
|
monthlyExpense = 0;
|
|
}
|
|
|
|
monthlyExpense += location.bills.reduce((acc, bill) => acc + (bill.payedAmount ?? 0), 0);
|
|
|
|
return (
|
|
<>
|
|
{
|
|
// show month title above the first LocationCard in the month
|
|
isFirstLocationInMonth ?
|
|
<MonthTitle key={`${year}-${month}`} yearMonth={location.yearMonth} /> : null
|
|
}
|
|
<LocationCard key={`${location._id}`} location={location} />
|
|
{
|
|
// show AddLocationButton as a last item in the first month
|
|
isLastLocationOfLatestMonth && isLatestYear ?
|
|
<AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
|
|
}
|
|
{
|
|
isLastLocationInMonth && monthlyExpense>0 ?
|
|
<div className="card card-compact card-bordered max-w-[36em] bg-base-100 shadow-s my-1">
|
|
<span className="card-body self-center">
|
|
<p>
|
|
Total monthly expenditure: <strong>{ formatCurrency(monthlyExpense) }</strong>
|
|
</p>
|
|
</span>
|
|
</div> : null
|
|
}
|
|
</>
|
|
)
|
|
})
|
|
}
|
|
<div className="mt-5 flex w-full justify-center">
|
|
<Pagination availableYears={availableYears} />
|
|
</div>
|
|
<PageFooter />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
export default Page; |