Website: Fix recipients selection page loading issue (#1047)

website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/page.tsx

@@ -1,13 +1,13 @@
 import { DefaultPageProps, DefaultParams } from '@/app/[lang]/[region]';
 import { CurrencyRedirect } from '@/app/[lang]/[region]/(website)/transparency/(components)/currency-redirect';
 import { firestoreAdmin } from '@/firebase-admin';
-import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion, websiteCurrencies } from '@/i18n';
+import { websiteCurrencies, WebsiteCurrency } from '@/i18n';
 import { Currency } from '@socialincome/shared/src/types/currency';
 import {
 	ContributionStats,
 	ContributionStatsCalculator,
 } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
-import { ExpenseStats, ExpensesStatsCalculator } from '@socialincome/shared/src/utils/stats/ExpensesStatsCalculator';
+import { ExpensesStatsCalculator, ExpenseStats } from '@socialincome/shared/src/utils/stats/ExpensesStatsCalculator';
 import { PaymentStats, PaymentStatsCalculator } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
 import {
 	RecipientStats,
@@ -22,26 +22,15 @@ import { Section4 } from './section-4';
 export const revalidate = 3600; // update once an hour
 export const generateStaticParams = () => websiteCurrencies.map((currency) => ({ currency: currency.toLowerCase() }));
 
-export type TransparencyPageProps = {
-	params: {
-		country: WebsiteRegion;
-		lang: WebsiteLanguage;
-		currency: string;
-	};
-} & DefaultPageProps;
+export type TransparencyPageProps = DefaultPageProps & {
+	params: DefaultParams & { currency: string };
+};
 
 export type SectionProps = {
-	params: DefaultParams & { currency: string };
 	contributionStats: ContributionStats;
-	paymentStats: PaymentStats;
 	expensesStats: ExpenseStats;
-};
-
-export type Section1Props = {
 	params: DefaultParams & { currency: string };
-	contributionStats: ContributionStats;
 	paymentStats: PaymentStats;
-	expensesStats: ExpenseStats;
 	recipientStats: RecipientStats;
 };
 
@@ -59,35 +48,15 @@ export default async function Page({ params }: TransparencyPageProps) {
 	};
 	const currency = params.currency.toUpperCase() as WebsiteCurrency;
 	const { contributionStats, expensesStats, paymentStats, recipientStats } = await getStats(currency);
+	const sectionProps = { contributionStats, expensesStats, params, paymentStats, recipientStats };
 
 	return (
 		<BaseContainer className="flex flex-col space-y-16">
 			<CurrencyRedirect currency={currency} />
-			<Section1
-				params={params}
-				contributionStats={contributionStats}
-				paymentStats={paymentStats}
-				expensesStats={expensesStats}
-				recipientStats={recipientStats}
-			/>
-			<Section2
-				params={params}
-				contributionStats={contributionStats}
-				paymentStats={paymentStats}
-				expensesStats={expensesStats}
-			/>
-			<Section3
-				params={params}
-				contributionStats={contributionStats}
-				paymentStats={paymentStats}
-				expensesStats={expensesStats}
-			/>
-			<Section4
-				params={params}
-				contributionStats={contributionStats}
-				paymentStats={paymentStats}
-				expensesStats={expensesStats}
-			/>
+			<Section1 {...sectionProps} />
+			<Section2 {...sectionProps} />
+			<Section3 {...sectionProps} />
+			<Section4 {...sectionProps} />
 		</BaseContainer>
 	);
 }

website/src/app/[lang]/[region]/(website)/transparency/finances/[currency]/section-1.tsx

@@ -1,15 +1,15 @@
 import { RecipientProgramStatus } from '@socialincome/shared/src/types/recipient';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { Badge, Card, CardContent, Typography } from '@socialincome/ui';
-import { Section1Props } from './page';
+import { SectionProps } from './page';
 
 export const roundAmount = (amount: number) => {
 	if (amount === 0) return 0;
 	const rounded = Math.round(amount / 10) * 10;
 	return rounded === 0 ? 10 : rounded;
 };
 
-export async function Section1({ params, paymentStats, contributionStats, recipientStats }: Section1Props) {
+export async function Section1({ params, paymentStats, contributionStats, recipientStats }: SectionProps) {
 	const translator = await Translator.getInstance({ language: params.lang, namespaces: ['website-finances'] });
 
 	return (

website/src/app/[lang]/[region]/(website)/transparency/recipient-selection/[currency]/page.tsx

@@ -1,16 +1,17 @@
-import { DefaultParams } from '@/app/[lang]/[region]';
+import { DefaultPageProps, DefaultParams } from '@/app/[lang]/[region]';
 import { CurrencyRedirect } from '@/app/[lang]/[region]/(website)/transparency/(components)/currency-redirect';
-import { WebsiteCurrency } from '@/i18n';
+import { websiteCurrencies, WebsiteCurrency } from '@/i18n';
 import { SelectionFaq } from './(sections)/faq';
 import { HeroSection } from './(sections)/hero-section';
 import { PastRounds } from './(sections)/past-rounds';
 import { Resources } from './(sections)/resources';
 import { SelectionProcess } from './(sections)/selection-process';
 
-type RecipientSelectionPageProps = {
-	params: {
-		currency: string;
-	} & DefaultParams;
+export const revalidate = 3600; // update once an hour
+export const generateStaticParams = () => websiteCurrencies.map((currency) => ({ currency: currency.toLowerCase() }));
+
+type RecipientSelectionPageProps = DefaultPageProps & {
+	params: DefaultParams & { currency: string };
 };
 
 export default async function Page({ params: { lang, region, currency } }: RecipientSelectionPageProps) {