yearMonth split into year + month
This commit is contained in:
31
app/page.tsx
31
app/page.tsx
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user