yearMonth split into year + month

This commit is contained in:
2024-01-09 15:43:01 +01:00
parent 90edcf14e1
commit 46b65711a8
12 changed files with 73 additions and 88 deletions

View File

@@ -6,14 +6,19 @@ import { PageFooter } from './ui/PageFooter';
import { isAuthErrorMessage } from '@/app/lib/auth';
import { fetchAllLocations } from './lib/actions/locationActions';
import { formatCurrency } from './lib/formatStrings';
import { fetchAvailableYears } from './lib/actions/monthActions';
const getNextYearMonth = (yearMonth:number) => {
return(yearMonth % 100 === 12 ? yearMonth + 89 : yearMonth + 1);
const getNextYearMonth = (year:number, month:number) => {
return({
year: month<12 ? year+1 : year,
month: month<12 ? month+1 : 1
});
}
export const Page = async () => {
const locations = await fetchAllLocations();
const availableYearMonths = await fetchAvailableYears();
if(isAuthErrorMessage(locations)) {
return (
@@ -24,11 +29,14 @@ export const Page = async () => {
// if the database is in it's initial state, show the add location button for the current month
if(locations.length === 0) {
const currentYearMonth = new Date().getFullYear() * 100 + new Date().getMonth() + 1;
const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<MonthTitle yearMonth={currentYearMonth} />
<AddLocationButton yyyymm={currentYearMonth} />
<MonthTitle year={currentYear} month={currentMonth} />
<AddLocationButton year={currentYear} month={currentMonth} />
<PageFooter />
</main>
);
@@ -38,13 +46,13 @@ export const Page = async () => {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<AddMonthButton nextYearMonth={getNextYearMonth(locations[0].yearMonth)} />
<AddMonthButton {...getNextYearMonth(locations[0].year, locations[0].month)} />
{
locations.map((location, ix, array) => {
const isFirstLocationInMonth = ix === 0 || location.yearMonth !== array[ix-1].yearMonth;
const isLastLocationInMonth = location.yearMonth !== array[ix+1]?.yearMonth;
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.yearMonth === array[0].yearMonth;
const isFirstLocationInMonth = ix === 0 || location.year !== array[ix-1].year || location.month !== array[ix-1].month;
const isLastLocationInMonth = location.year !== array[ix+1]?.year || location.month !== array[ix+1]?.month;
const isLastLocationOfFirstMonth = isLastLocationInMonth && location.year === array[0].year && location.month === array[0].month;
if(isFirstLocationInMonth) {
monthlyExpense = 0;
@@ -57,13 +65,13 @@ export const Page = async () => {
{
// show month title above the first LocationCard in the month
isFirstLocationInMonth ?
<MonthTitle key={location.yearMonth} yearMonth={location.yearMonth} /> : null
<MonthTitle key={`${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
}
<LocationCard key={`${location._id}`} location={location} />
{
// show AddLocationButton as a last item in the firts month
isLastLocationOfFirstMonth ?
<AddLocationButton key={`add-loc-${location.yearMonth}`} yyyymm={location.yearMonth} /> : null
<AddLocationButton key={`add-loc-${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
}
{
isLastLocationInMonth && monthlyExpense>0 ?
@@ -80,6 +88,7 @@ export const Page = async () => {
})
}
<PageFooter />
{ availableYearMonths.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
</main>
);
}