diff --git a/app/ui/HomePage.tsx b/app/ui/HomePage.tsx index 2932d5f..fd7d4aa 100644 --- a/app/ui/HomePage.tsx +++ b/app/ui/HomePage.tsx @@ -2,8 +2,9 @@ import { fetchAllLocations } from '@/app/lib/actions/locationActions'; import { fetchAvailableYears } from '@/app/lib/actions/monthActions'; import { getUserSettings } from '@/app/lib/actions/userSettingsActions'; import { BillingLocation, YearMonth } from '@/app/lib/db-types'; -import { FC } from 'react'; +import { FC, useEffect } from 'react'; import { MonthLocationList } from '@/app/ui/MonthLocationList'; +import { redirect } from 'next/navigation'; export interface HomePageProps { searchParams?: { @@ -12,13 +13,29 @@ export interface HomePageProps { }; } +const ParamsYearInvalidMessage:FC<{ firstAvailableYear?: number }> = ({ firstAvailableYear }) => { + + // Redirect to the first available year after showing the message + useEffect(() => { + if(firstAvailableYear) { + redirect(`/?year=${firstAvailableYear}`); + } else { + redirect(`/`); + } + }); + + return( +
+

The year specified in the URL is invalid ... redirecting

+
+ ); +}; + export const HomePage:FC = async ({ searchParams }) => { + /** years found in the DB sorted descending */ let availableYears: number[]; - // const asyncTimout = (ms:number) => new Promise(resolve => setTimeout(resolve, ms)); - // await asyncTimout(5000); - try { availableYears = await fetchAvailableYears(); } catch (error:any) { @@ -28,14 +45,34 @@ export const HomePage:FC = async ({ searchParams }) => { ); } - // if the database is in it's initial state, show the add location button for the current month - if(availableYears.length === 0) { - return (); + const paramsYear = searchParams?.year ? Number(searchParams.year) : null; + let selectedYear:number; + + // IF year is set via params, check if it's valid + if(paramsYear) { + + // IF the database is in it's initial state + // THEN show message param being invalid AND redirect to root page + if(availableYears.length === 0) { + return (); + } + + // IF the year specified in the params is not found in the DB + // THEN show message param being invalid AND redirect to page showing first available year + if(!availableYears.includes(paramsYear)) { + return (); + } + + selectedYear = paramsYear; + } else { + const currYear = new Date().getFullYear(); + + // IF current year is available in DB THEN use it + // ELSE use the latest year found in the DB + selectedYear = availableYears.includes(currYear) ? currYear : availableYears[0]; } - const currentYear = Number(searchParams?.year) || new Date().getFullYear(); - - const locations = await fetchAllLocations(currentYear); + const locations = await fetchAllLocations(selectedYear); const userSettings = await getUserSettings(); // group locations by month