website(bugfix): fix client-side rendering issue (#783)

functions/src/webhooks/admin/donation-certificates/index.ts

@@ -47,7 +47,7 @@ export default onCall<CreateDonationCertificatesFunctionProps, Promise<string>>(
 				await withFile(async ({ path }) => {
 					await writer.writeDonationCertificatePDF(path);
 
-					const { downloadUrl } = await storageAdmin.uploadAndGetDownloadURL({
+					const { downloadUrl } = await storageAdmin.uploadAndGetDownloadUrl({
 						sourceFilePath: path,
 						destinationFilePath: `users/${userId}/donation-certificates/${writer.year}_${writer.user.language}.pdf`,
 					});

shared/src/firebase/admin/StorageAdmin.test.ts

@@ -19,7 +19,7 @@ describe('useStorageAdmin', () => {
 	test('upload private file', async () => {
 		await fs.writeFile(tmpFile, 'test');
 
-		const { downloadUrl } = await storageAdmin.uploadAndGetDownloadURL({
+		const { downloadUrl } = await storageAdmin.uploadAndGetDownloadUrl({
 			sourceFilePath: tmpFile,
 			destinationFilePath: tmpFile,
 		});

shared/src/firebase/admin/StorageAdmin.ts

@@ -33,7 +33,7 @@ export class StorageAdmin {
 		await destinationBucket.upload(sourceFilePath, { destination: destinationFilePath });
 	};
 
-	uploadAndGetDownloadURL = async ({ bucket, sourceFilePath, destinationFilePath }: UploadProps) => {
+	uploadAndGetDownloadUrl = async ({ bucket, sourceFilePath, destinationFilePath }: UploadProps) => {
 		const destinationBucket = bucket || this.storage.bucket();
 		const token = randomBytes(32).toString('hex');
 		const [file, metadata] = await destinationBucket.upload(sourceFilePath, {

website/.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env.production
 
 # vercel
 .vercel

website/src/components/newsletter-popup/newsletter-popup-client.tsx

@@ -100,7 +100,7 @@ export const NewsletterPopupClient = ({ delay, lang, translations }: NewsletterP
 		return () => {
 			clearTimeout(timeout);
 		};
-	}, []);
+	}, [delay, lang, translations]);
 
 	return null;
 };

website/src/components/providers/context-providers.tsx

@@ -18,7 +18,7 @@ import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
 import { connectStorageEmulator, getStorage } from 'firebase/storage';
 import _ from 'lodash';
 import { useRouter, useSearchParams } from 'next/navigation';
-import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
+import { PropsWithChildren, Suspense, createContext, useContext, useEffect, useState } from 'react';
 import {
 	AnalyticsProvider,
 	AuthProvider,
@@ -150,14 +150,14 @@ type I18nContextType = {
 const I18nContext = createContext<I18nContextType>(undefined!);
 export const useI18n = () => useContext(I18nContext);
 
-function I18nProvider({ children }: PropsWithChildren) {
+function I18nUrlUpdater() {
+	// This component is used to watch the URL and update the language and region in the context if the URL changes.
+	// It's a separate component because it uses the useSearchParams hook, and needs to be wrapped in a Suspense
+	// boundary (https://nextjs.org/docs/messages/deopted-into-client-rendering).
 	const router = useRouter();
 	const searchParams = useSearchParams();
 	const searchParamsString = searchParams.toString();
-
-	const { value: language, setCookie: setLanguage } = useCookieState<WebsiteLanguage>(LANGUAGE_COOKIE);
-	const { value: region, setCookie: setRegion } = useCookieState<WebsiteRegion>(REGION_COOKIE);
-	const { value: currency, setCookie: setCurrency } = useCookieState<WebsiteCurrency>(CURRENCY_COOKIE);
+	const { language, setLanguage, region, setRegion } = useI18n();
 
 	useEffect(() => {
 		const urlSegments = window.location.pathname.split('/');
@@ -181,6 +181,14 @@ function I18nProvider({ children }: PropsWithChildren) {
 		}
 	}, [region, router, setRegion]);
 
+	return null;
+}
+
+function I18nProvider({ children }: PropsWithChildren) {
+	const { value: language, setCookie: setLanguage } = useCookieState<WebsiteLanguage>(LANGUAGE_COOKIE);
+	const { value: region, setCookie: setRegion } = useCookieState<WebsiteRegion>(REGION_COOKIE);
+	const { value: currency, setCookie: setCurrency } = useCookieState<WebsiteCurrency>(CURRENCY_COOKIE);
+
 	return (
 		<I18nContext.Provider
 			value={{
@@ -192,6 +200,9 @@ function I18nProvider({ children }: PropsWithChildren) {
 				setCurrency: (currency) => setCurrency(currency, { expires: 365 }),
 			}}
 		>
+			<Suspense fallback={null}>
+				<I18nUrlUpdater />
+			</Suspense>
 			{children}
 		</I18nContext.Provider>
 	);