From cb6334f076754a6edf1f37ac3704e29f510bab56 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A1s=20He=C3=A9?=
 <andrashee@users.noreply.github.com>
Date: Tue, 8 Aug 2023 22:51:11 +0200
Subject: [PATCH] bugfix(website): caching of transparency page (#495)

---
 .../transparency/[currency]/get-stats.ts      | 15 -------------
 .../transparency/[currency]/page.tsx          | 22 +++++++++++++++++--
 .../[currency]/transparency-charts.tsx        | 14 +++++++-----
 3 files changed, 28 insertions(+), 23 deletions(-)
 delete mode 100644 website/src/app/[lang]/[country]/(website)/transparency/[currency]/get-stats.ts

diff --git a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/get-stats.ts b/website/src/app/[lang]/[country]/(website)/transparency/[currency]/get-stats.ts
deleted file mode 100644
index 1e7254c6e..000000000
--- a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/get-stats.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { firestoreAdmin } from '@/firebase/admin';
-import { ContributionStatsCalculator } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
-import { PaymentStatsCalculator } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
-import { cache } from 'react';
-import 'server-only';
-
-export const getStats = cache(async (currency: string) => {
-	console.log('retrieving stats');
-	const contributionCalculator = await ContributionStatsCalculator.build(firestoreAdmin, currency);
-	const contributionStats = contributionCalculator.allStats();
-	const paymentCalculator = await PaymentStatsCalculator.build(firestoreAdmin, currency);
-	const paymentStats = paymentCalculator.allStats();
-	console.log('retrieved stats');
-	return { contributionStats, paymentStats };
-});
diff --git a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/page.tsx b/website/src/app/[lang]/[country]/(website)/transparency/[currency]/page.tsx
index c810853ee..7d4d6a676 100644
--- a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/page.tsx
+++ b/website/src/app/[lang]/[country]/(website)/transparency/[currency]/page.tsx
@@ -1,10 +1,13 @@
 import { DefaultPageProps } from '@/app/[lang]/[country]';
-import { getStats } from '@/app/[lang]/[country]/(website)/transparency/[currency]/get-stats';
 import TransparencyCharts from '@/app/[lang]/[country]/(website)/transparency/[currency]/transparency-charts';
+import { firestoreAdmin } from '@/firebase/admin';
 import { ValidCountry, WebsiteLanguage } from '@/i18n';
+import { ContributionStatsCalculator } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
+import { PaymentStatsCalculator } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
 import { BaseContainer, Stats } from '@socialincome/ui';
 
 export const generateStaticParams = () => ['USD', 'CHF'].map((currency) => ({ currency: currency.toLowerCase() }));
+export const revalidate = 3600; // update once an hour
 
 export type TransparencyPageProps = {
 	params: {
@@ -15,6 +18,16 @@ export type TransparencyPageProps = {
 } & DefaultPageProps;
 
 export default async function Page(props: TransparencyPageProps) {
+	const getStats = async (currency: string) => {
+		console.log('retrieving stats');
+		const contributionCalculator = await ContributionStatsCalculator.build(firestoreAdmin, currency);
+		const contributionStats = contributionCalculator.allStats();
+		const paymentCalculator = await PaymentStatsCalculator.build(firestoreAdmin, currency);
+		const paymentStats = paymentCalculator.allStats();
+		console.log('retrieved stats');
+		return { contributionStats, paymentStats };
+	};
+
 	const { contributionStats, paymentStats } = await getStats(props.params.currency);
 
 	return (
@@ -26,7 +39,12 @@ export default async function Page(props: TransparencyPageProps) {
 					<Stats.Stat.Item variant="value">{contributionStats.totalContributions}</Stats.Stat.Item>
 				</Stats.Stat>
 			</Stats>
-			<TransparencyCharts contributionStats={contributionStats} paymentStats={paymentStats} {...props} />
+			<TransparencyCharts
+				contributionStats={contributionStats}
+				paymentStats={paymentStats}
+				lang={props.params.lang}
+				currency={props.params.currency}
+			/>
 		</BaseContainer>
 	);
 }
diff --git a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/transparency-charts.tsx b/website/src/app/[lang]/[country]/(website)/transparency/[currency]/transparency-charts.tsx
index 7a70bd5a4..12d616480 100644
--- a/website/src/app/[lang]/[country]/(website)/transparency/[currency]/transparency-charts.tsx
+++ b/website/src/app/[lang]/[country]/(website)/transparency/[currency]/transparency-charts.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { TransparencyPageProps } from '@/app/[lang]/[country]/(website)/transparency/[currency]/page';
+import { WebsiteLanguage } from '@/i18n';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { ContributionStats } from '@socialincome/shared/src/utils/stats/ContributionStatsCalculator';
 import { PaymentStats } from '@socialincome/shared/src/utils/stats/PaymentStatsCalculator';
@@ -11,12 +11,15 @@ import { Area, AreaChart, Bar, BarChart, Line, LineChart, ResponsiveContainer, T
 type ContributionStatsProps = {
 	contributionStats: ContributionStats;
 	paymentStats: PaymentStats;
-} & TransparencyPageProps;
+	lang: WebsiteLanguage;
+	currency: string;
+};
 
 export default function TransparencyCharts({
-	params: { lang, currency },
 	contributionStats,
 	paymentStats,
+	lang,
+	currency,
 }: ContributionStatsProps) {
 	const { data: translator } = useQuery(
 		[lang],
@@ -29,9 +32,8 @@ export default function TransparencyCharts({
 			staleTime: Infinity, // never refetch
 		},
 	);
-	console.log(contributionStats)
-	console.log(paymentStats)
-
+	console.log(contributionStats);
+	console.log(paymentStats);
 	return (
 		<div className="grid grid-cols-1 gap-8  lg:grid-cols-2">
 			<div className="flex flex-col space-y-4">