(fix) ParamsYearInvalidMessage moved to client-side component so that it can use useEffect
This commit is contained in:
@@ -2,9 +2,9 @@ import { fetchAllLocations } from '@/app/lib/actions/locationActions';
|
|||||||
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
|
import { fetchAvailableYears } from '@/app/lib/actions/monthActions';
|
||||||
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
import { getUserSettings } from '@/app/lib/actions/userSettingsActions';
|
||||||
import { BillingLocation, YearMonth } from '@/app/lib/db-types';
|
import { BillingLocation, YearMonth } from '@/app/lib/db-types';
|
||||||
import { FC, useEffect } from 'react';
|
import { FC } from 'react';
|
||||||
import { MonthLocationList } from '@/app/ui/MonthLocationList';
|
import { MonthLocationList } from '@/app/ui/MonthLocationList';
|
||||||
import { redirect } from 'next/navigation';
|
import { ParamsYearInvalidMessage } from './ParamsYearInvalidMessage';
|
||||||
|
|
||||||
export interface HomePageProps {
|
export interface HomePageProps {
|
||||||
searchParams?: {
|
searchParams?: {
|
||||||
@@ -13,24 +13,6 @@ 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(
|
|
||||||
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
|
||||||
<p className="text-center text-2xl text-red-500">The year specified in the URL is invalid ... redirecting</p>
|
|
||||||
</main>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
|
export const HomePage:FC<HomePageProps> = async ({ searchParams }) => {
|
||||||
|
|
||||||
/** years found in the DB sorted descending */
|
/** years found in the DB sorted descending */
|
||||||
|
|||||||
21
app/ui/ParamsYearInvalidMessage.tsx
Normal file
21
app/ui/ParamsYearInvalidMessage.tsx
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
"use client";
|
||||||
|
import { FC, useEffect } from 'react';
|
||||||
|
import { redirect } from 'next/navigation';
|
||||||
|
|
||||||
|
export 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(
|
||||||
|
<main className="flex min-h-screen flex-col p-6 bg-base-300">
|
||||||
|
<p className="text-center text-2xl text-red-500">The year specified in the URL is invalid ... redirecting</p>
|
||||||
|
</main>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user