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

year & month replaced by yearMonth object

Browse Source
This commit is contained in:
Nikola Derežić
2024-01-09 16:20:49 +01:00
parent 46b65711a8
commit d627ad757d
12 changed files with 82 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/page.tsx
View File

@@ -7,18 +7,21 @@ import { isAuthErrorMessage } from '@/app/lib/auth';
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';
const getNextYearMonth = (year:number, month:number) => {
const getNextYearMonth = (yearMonth:YearMonth) => {
const {year, month} = yearMonth;
return({
year: month<12 ? year+1 : year,
month: month<12 ? month+1 : 1
});
year: month===12 ? year+1 : year,
month: month===12 ? 1 : month+1
} as YearMonth);
}
export const Page = async () => {
const locations = await fetchAllLocations();
const availableYearMonths = await fetchAvailableYears();
const availableYears = await fetchAvailableYears();
if(isAuthErrorMessage(locations)) {
return (
@@ -30,13 +33,15 @@ 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 currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
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 year={currentYear} month={currentMonth} />
<AddLocationButton year={currentYear} month={currentMonth} />
<MonthTitle yearMonth={currentYearMonth} />
<AddLocationButton yearMonth={currentYearMonth} />
<PageFooter />
</main>
);
@@ -46,13 +51,17 @@ export const Page = async () => {
return (
<main className="flex min-h-screen flex-col p-6 bg-base-300">
<AddMonthButton {...getNextYearMonth(locations[0].year, locations[0].month)} />
<AddMonthButton yearMonth={getNextYearMonth(locations[0].yearMonth)} />
{
locations.map((location, ix, array) => {
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;
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 isFirstLocationInMonth = ix === 0 || year !== prevYear || month !== prevMonth;
const isLastLocationInMonth = year !== nextYear || month !== nextMonth;
const isLastLocationOfFirstMonth = isLastLocationInMonth && year === array[0].yearMonth.year && month === array[0].yearMonth.month
if(isFirstLocationInMonth) {
monthlyExpense = 0;
@@ -65,13 +74,13 @@ export const Page = async () => {
{
// show month title above the first LocationCard in the month
isFirstLocationInMonth ?
<MonthTitle key={`${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
<MonthTitle key={`${year}-${month}`} yearMonth={location.yearMonth} /> : null
}
<LocationCard key={`${location._id}`} location={location} />
{
// show AddLocationButton as a last item in the firts month
isLastLocationOfFirstMonth ?
<AddLocationButton key={`add-loc-${location.year}-${location.month}`} year={location.year} month={location.month} /> : null
<AddLocationButton key={`add-loc-${formatYearMonth(location.yearMonth)}`} yearMonth={location.yearMonth} /> : null
}
{
isLastLocationInMonth && monthlyExpense>0 ?
@@ -88,7 +97,7 @@ export const Page = async () => {
})
}
<PageFooter />
{ availableYearMonths.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
{ availableYears.map(ym => <p key={`year-month-${ym}`}>{ym}</p>) }
</main>
);
}