bugfix(website): caching of transparency page (#495)

socialincome-san · Aug 8, 2023 · cb6334f · cb6334f
1 parent fd27b8e
commit cb6334f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 23 deletions.
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
diff --git 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
@@ -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">