website(bugfix): support static rendering, avoid cookies server side (#…

…617)

website/src/app/[lang]/[region]/(survey-tool)/survey/[recipient]/[survey]/layout.tsx

@@ -1,10 +1,9 @@
-import { CURRENCY_COOKIE, DefaultParams } from '@/app/[lang]/[region]';
+import { DefaultParams } from '@/app/[lang]/[region]';
 import { I18nDialog } from '@/components/i18n-dialog';
 import { SILogo } from '@/components/logos/si-logo';
 import { GlobeEuropeAfricaIcon, LanguageIcon } from '@heroicons/react/24/solid';
 import { Translator } from '@socialincome/shared/src/utils/i18n';
 import { BaseContainer, Button } from '@socialincome/ui';
-import { cookies } from 'next/headers';
 import { PropsWithChildren } from 'react';
 
 export interface SurveyPageProps {
@@ -14,7 +13,7 @@ export interface SurveyPageProps {
 	} & DefaultParams;
 }
 
-export default async function Layout({ children, params: { lang, region } }: PropsWithChildren<SurveyPageProps>) {
+export default async function Layout({ children, params: { lang } }: PropsWithChildren<SurveyPageProps>) {
 	const translator = await Translator.getInstance({
 		language: lang,
 		namespaces: ['common', 'website-common', 'website-me'],
@@ -34,11 +33,8 @@ export default async function Layout({ children, params: { lang, region } }: Pro
 						currencies={[]}
 						translations={{
 							language: translator.t('language'),
-							currentLanguage: translator.t(`languages.${lang}`),
 							region: translator.t('region'),
-							currentRegion: translator.t(`regions.${region}`),
 							currency: translator.t('currency'),
-							currentCurrency: translator.t(`currencies.${cookies().get(CURRENCY_COOKIE)}`),
 						}}
 					>
 						<Button variant="ghost" className="flex max-w-md space-x-2">

website/src/app/[lang]/[region]/(website)/login/page.tsx

@@ -15,7 +15,6 @@ export default async function Page(props: DefaultPageProps) {
 				requiredField: translator.t('login.required-field'),
 				invalidEmail: translator.t('login.invalid-email'),
 				submitButton: translator.t('login.submit-button'),
-
 				unknownUser: translator.t('login.unknown-user'),
 				wrongPassword: translator.t('login.wrong-password'),
 			}}

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useI18n } from '@/app/providers/i18n-provider-client';
+import { useI18n } from '@/app/context-providers';
 import { WebsiteCurrency } from '@/i18n';
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { useI18n } from '@/app/providers/i18n-provider-client';
+import { useI18n } from '@/app/context-providers';
 import { redirect } from 'next/navigation';
 import { useEffect } from 'react';
 

website/src/app/providers/providers-client.tsx → website/src/app/context-providers.tsx

@@ -1,14 +1,17 @@
 'use client';
 
+import { CURRENCY_COOKIE, LANGUAGE_COOKIE, REGION_COOKIE } from '@/app/[lang]/[region]';
+import { useCookieState } from '@/hooks/useCookieState';
+import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion } from '@/i18n';
 import { DEFAULT_REGION } from '@socialincome/shared/src/firebase';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Analytics, getAnalytics, isSupported as isAnalyticsSupported } from 'firebase/analytics';
 import { connectAuthEmulator, getAuth } from 'firebase/auth';
 import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
 import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
 import { connectStorageEmulator, getStorage } from 'firebase/storage';
-import { usePathname } from 'next/navigation';
-import { PropsWithChildren, useEffect, useState } from 'react';
+import { usePathname, useRouter } from 'next/navigation';
+import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 import { Toaster } from 'react-hot-toast';
 import {
 	AnalyticsProvider,
@@ -95,7 +98,7 @@ function FirebaseSDKProviders({ children }: PropsWithChildren) {
 	);
 }
 
-export function ThemeProvider({ children }: PropsWithChildren) {
+function ThemeProvider({ children }: PropsWithChildren) {
 	const pathname = usePathname();
 	const baseSegment = pathname?.split('/')[3];
 
@@ -111,7 +114,58 @@ export function ThemeProvider({ children }: PropsWithChildren) {
 	return <body className={theme}>{children}</body>;
 }
 
-export function ProvidersClient({ children }: PropsWithChildren) {
+type I18nContextType = {
+	language: WebsiteLanguage | undefined;
+	setLanguage: (language: WebsiteLanguage) => void;
+	region: WebsiteRegion | undefined;
+	setRegion: (country: WebsiteRegion) => void;
+	currency: WebsiteCurrency | undefined;
+	setCurrency: (currency: WebsiteCurrency) => void;
+};
+
+const I18nContext = createContext<I18nContextType>(undefined!);
+export const useI18n = () => useContext(I18nContext);
+
+function I18nProvider({ children }: PropsWithChildren) {
+	const router = useRouter();
+
+	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);
+
+	useEffect(() => {
+		const pathSegments = window.location.pathname.split('/');
+		if (language && pathSegments[1] !== language) {
+			pathSegments[1] = language;
+			router.push(pathSegments.join('/'));
+		}
+	}, [language, router]);
+
+	useEffect(() => {
+		const pathSegments = window.location.pathname.split('/');
+		if (region && pathSegments[2] !== region) {
+			pathSegments[2] = region;
+			router.push(pathSegments.join('/'));
+		}
+	}, [region, router]);
+
+	return (
+		<I18nContext.Provider
+			value={{
+				language: language,
+				setLanguage: (language) => setLanguage(language, { expires: 365 }),
+				region: region,
+				setRegion: (country) => setRegion(country, { expires: 365 }),
+				currency: currency,
+				setCurrency: (currency) => setCurrency(currency, { expires: 365 }),
+			}}
+		>
+			{children}
+		</I18nContext.Provider>
+	);
+}
+
+export function ContextProviders({ children }: PropsWithChildren) {
 	const firebaseConfig = {
 		apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
 		appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
@@ -128,8 +182,10 @@ export function ProvidersClient({ children }: PropsWithChildren) {
 			<FirebaseSDKProviders>
 				<QueryClientProvider client={queryClient}>
 					<ThemeProvider>
-						<Toaster />
-						{children}
+						<I18nProvider>
+							<Toaster />
+							{children}
+						</I18nProvider>
 					</ThemeProvider>
 				</QueryClientProvider>
 			</FirebaseSDKProviders>

website/src/app/layout.tsx

@@ -1,5 +1,4 @@
-import { I18nProvider } from '@/app/providers/i18n-provider';
-import { ProvidersClient } from '@/app/providers/providers-client';
+import { ContextProviders } from '@/app/context-providers';
 import { PropsWithChildren } from 'react';
 import './globals.css';
 
@@ -11,9 +10,7 @@ export const metadata = {
 export default function RootLayout({ children }: PropsWithChildren) {
 	return (
 		<html suppressHydrationWarning={true}>
-			<I18nProvider>
-				<ProvidersClient>{children}</ProvidersClient>
-			</I18nProvider>
+			<ContextProviders>{children}</ContextProviders>
 		</html>
 	);
 }

website/src/components/country-flags.tsx

@@ -1,7 +1,6 @@
 import { WebsiteCurrency } from '@/i18n';
 import { CH, EU } from 'country-flag-icons/react/1x1';
 import { SL, US } from 'country-flag-icons/react/3x2';
-import { Component } from 'react';
 
 export function getFlagComponentByCurrency(currency: WebsiteCurrency | undefined) {
 	switch (currency) {
@@ -13,7 +12,7 @@ export function getFlagComponentByCurrency(currency: WebsiteCurrency | undefined
 			return EU;
 		case 'SLE':
 			return SL;
-		case undefined:
-			return Component;
+		default:
+			return undefined;
 	}
 }

website/src/components/footer/footer-client.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { DefaultParams } from '@/app/[lang]/[region]';
-import { useI18n } from '@/app/providers/i18n-provider-client';
+import { useI18n } from '@/app/context-providers';
 import { WebsiteLanguage, WebsiteRegion } from '@/i18n';
 import { GlobeAltIcon, LanguageIcon } from '@heroicons/react/24/solid';
 import {

website/src/components/i18n-dialog.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useI18n } from '@/app/providers/i18n-provider-client';
+import { useI18n } from '@/app/context-providers';
 import { WebsiteCurrency, WebsiteLanguage, WebsiteRegion } from '@/i18n';
 import { CurrencyDollarIcon } from '@heroicons/react/24/outline';
 import { GlobeEuropeAfricaIcon, LanguageIcon } from '@heroicons/react/24/solid';
@@ -36,11 +36,8 @@ type I18nDialogProps = {
 	}[];
 	translations: {
 		language: string;
-		currentLanguage: string;
 		region: string;
-		currentRegion: string;
 		currency: string;
-		currentCurrency: string;
 	};
 };
 
@@ -58,7 +55,7 @@ export function I18nDialog(
 					<Select value={language} onValueChange={(l: WebsiteLanguage) => setLanguage(l)}>
 						<SelectTrigger className="space-x-2">
 							<LanguageIcon className="h-4 w-4" />
-							<SelectValue placeholder={translations.currentLanguage} />
+							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
 							<SelectGroup>
@@ -77,7 +74,7 @@ export function I18nDialog(
 					<Select value={region} onValueChange={(c: WebsiteRegion) => setRegion(c)}>
 						<SelectTrigger className="space-x-2">
 							<GlobeEuropeAfricaIcon className="h-4 w-4" />
-							<SelectValue placeholder={translations.currentRegion} />
+							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
 							<SelectGroup>
@@ -102,7 +99,7 @@ export function I18nDialog(
 					>
 						<SelectTrigger className="space-x-2">
 							<CurrencyDollarIcon className="h-4 w-4" />
-							<SelectValue placeholder={translations.currentCurrency} />
+							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
 							<SelectGroup>

website/src/components/navbar/navbar-client.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { DefaultParams } from '@/app/[lang]/[region]';
 import { I18nDialog } from '@/components/i18n-dialog';
 import { SILogo } from '@/components/logos/si-logo';
 import { WebsiteCurrency } from '@/i18n';
@@ -23,7 +24,6 @@ import {
 import _ from 'lodash';
 import Link from 'next/link';
 import { useState } from 'react';
-import { DefaultParams } from '../../app/[lang]/[region]';
 
 type NavbarSection = {
 	title: string;
@@ -40,11 +40,8 @@ type NavbarProps = {
 	sections: NavbarSection[];
 	translations: {
 		language: string;
-		currentLanguage: string;
 		region: string;
-		currentRegion: string;
 		currency: string;
-		currentCurrency: string;
 		myProfile: string;
 		contactDetails: string;
 		payments: string;
@@ -76,11 +73,8 @@ export function NavbarClient(
 			currencies={currencies}
 			translations={{
 				language: translations.language,
-				currentLanguage: translations.currentLanguage,
 				region: translations.region,
-				currentRegion: translations.currentRegion,
 				currency: translations.currency,
-				currentCurrency: translations.currentCurrency,
 			}}
 		>
 			<Button variant="ghost" className="flex max-w-md space-x-2">