chore(website): code cleanups (#777)

socialincome-san · Mar 23, 2024 · eb1cbe7 · eb1cbe7
1 parent 1c42962
commit eb1cbe7
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 47 deletions.
diff --git a/website/src/app/[lang]/[region]/(survey-tool)/survey/[recipient]/[survey]/survey.tsx b/website/src/app/[lang]/[region]/(survey-tool)/survey/[recipient]/[survey]/survey.tsx
@@ -31,7 +31,7 @@ export function Survey({ surveyId, recipientId, lang }: SurveyProps) {
 	const { data: survey } = useQuery({
 		queryFn: () => getDoc(surveyDocRef).then((snapshot) => snapshot.data() as SurveyModel),
 		queryKey: [recipientId, surveyId],
-		staleTime: 1000 * 60 * 60, // 1 hour
+		staleTime: 3600000, // 1 hour
 	});
 
 	// TODO: implement session storage caching

diff --git a/website/src/app/[lang]/[region]/(website)/me/hooks.ts b/website/src/app/[lang]/[region]/(website)/me/hooks.ts
@@ -29,17 +29,16 @@ export const useContributions = () => {
 		isRefetching,
 		error,
 	} = useQuery({
-		queryKey: ['me/contributions'],
-		queryFn: async () => {
-			return await getDocs(
+		queryKey: ['me', 'contributions'],
+		queryFn: () =>
+			getDocs(
 				query(
 					collection(firestore, USER_FIRESTORE_PATH, user.id, CONTRIBUTION_FIRESTORE_PATH),
 					where('status', '==', StatusKey.SUCCEEDED),
 					orderBy('created', 'desc'),
 				),
-			);
-		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+			),
+		staleTime: 3600000, // 1 hour
 	});
 	return { contributions, loading: isLoading || isRefetching, error };
 };
@@ -52,12 +51,12 @@ export const useSubscriptions = () => {
 		isRefetching,
 		error,
 	} = useQuery({
-		queryKey: ['me/subscriptions'],
+		queryKey: ['me', 'subscriptions'],
 		queryFn: async () => {
 			const response = await api.get('/api/stripe/subscriptions');
 			return (await response.json()) as Stripe.Subscription[];
 		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+		staleTime: 3600000, // 1 hour
 	});
 	return { subscriptions, loading: isLoading || isRefetching, error };
 };
@@ -71,16 +70,15 @@ export const useDonationCertificates = () => {
 		isRefetching,
 		error,
 	} = useQuery({
-		queryKey: ['me/donation-certificates'],
-		queryFn: async () => {
-			return await getDocs(
+		queryKey: ['me', 'donation-certificates'],
+		queryFn: () =>
+			getDocs(
 				query(
 					collection(firestore, USER_FIRESTORE_PATH, user.id, DONATION_CERTIFICATE_FIRESTORE_PATH),
 					orderBy('year', 'desc'),
 				),
-			);
-		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+			),
+		staleTime: 3600000, // 1 hour
 	});
 	return { donationCertificates, loading: isLoading || isRefetching, error };
 };
@@ -94,12 +92,12 @@ export const useMailchimpSubscription = () => {
 		isRefetching,
 		error,
 	} = useQuery<string | null>({
-		queryKey: ['me/mailchimp'],
+		queryKey: ['me', 'mailchimp'],
 		queryFn: async () => {
 			const response = await api.get('/api/mailchimp/subscription');
 			return (await response.json()).status;
 		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+		staleTime: 3600000, // 1 hour
 	});
 	return { status, loading: isLoading || isRefetching, error };
 };
@@ -110,7 +108,7 @@ export const useUpsertMailchimpSubscription = () => {
 
 	return async (status: Status) => {
 		const response = await api.post('/api/mailchimp/subscription', { status });
-		queryClient.invalidateQueries({ queryKey: ['me/mailchimp'] });
+		await queryClient.invalidateQueries({ queryKey: ['me', 'mailchimp'] });
 		return response;
 	};
 };
@@ -129,14 +127,14 @@ export const useEmployers = () => {
 		isRefetching,
 		error,
 	} = useQuery({
-		queryKey: ['me/employers'],
+		queryKey: ['me', 'employers'],
 		queryFn: async () => {
 			const data = await getDocs(
 				query(collection(firestore, USER_FIRESTORE_PATH, user.id, 'employers'), orderBy('created', 'desc')),
 			);
-			return data!.docs.map((e) => ({ id: e.id, ...e.data() }) as EmployerWithId);
+			return data.docs.map((e) => ({ id: e.id, ...e.data() }) as EmployerWithId);
 		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+		staleTime: 3600000, // 1 hour
 	});
 	return { employers, loading: isLoading || isRefetching, error };
 };
@@ -149,7 +147,7 @@ export const useArchiveEmployer = () => {
 	return async (employer_id: string) => {
 		const employerRef = doc(firestore, USER_FIRESTORE_PATH, user!.id, 'employers', employer_id);
 		await updateDoc(employerRef, { is_current: false });
-		queryClient.invalidateQueries({ queryKey: ['me/employers'] });
+		await queryClient.invalidateQueries({ queryKey: ['me', 'employers'] });
 	};
 };
 
@@ -161,7 +159,7 @@ export const useDeleteEmployer = () => {
 	return async (employer_id: string) => {
 		const employerRef = doc(firestore, USER_FIRESTORE_PATH, user!.id, 'employers', employer_id);
 		await deleteDoc(employerRef);
-		queryClient.invalidateQueries({ queryKey: ['me/employers'] });
+		await queryClient.invalidateQueries({ queryKey: ['me', 'employers'] });
 	};
 };
 
@@ -176,6 +174,6 @@ export const useAddEmployer = () => {
 			is_current: true,
 			created: Timestamp.now(),
 		});
-		queryClient.invalidateQueries({ queryKey: ['me/employers'] });
+		await queryClient.invalidateQueries({ queryKey: ['me', 'employers'] });
 	};
 };
diff --git a/website/src/app/[lang]/[region]/(website)/me/personal-info/personal-info-form.tsx b/website/src/app/[lang]/[region]/(website)/me/personal-info/personal-info-form.tsx
@@ -94,24 +94,22 @@ export function PersonalInfoForm({ lang, translations }: PersonalInfoFormProps)
 	});
 
 	useEffect(() => {
-		if (user) {
-			form.reset({
-				firstname: user?.get('personal.name') || '',
-				lastname: user?.get('personal.lastname') || '',
-				gender: user?.get('personal.gender') || '',
-				email: user?.get('email') || '',
-				street: user?.get('address.street') || '',
-				streetNumber: user?.get('address.number') || '',
-				city: user?.get('address.city') || '',
-				zip: user?.get('address.zip') || '',
-				country: user?.get('address.country') || '',
-				language: user?.get('language') || '',
-			});
-		}
+		form.reset({
+			firstname: user.get('personal.name') || '',
+			lastname: user.get('personal.lastname') || '',
+			gender: user.get('personal.gender') || '',
+			email: user.get('email') || '',
+			street: user.get('address.street') || '',
+			streetNumber: user.get('address.number') || '',
+			city: user.get('address.city') || '',
+			zip: user.get('address.zip') || '',
+			country: user.get('address.country') || '',
+			language: user.get('language') || '',
+		});
 	}, [user, form]);
 
 	const onSubmit = async (values: FormSchema) => {
-		await updateDoc<Partial<User>>(doc(firestore, USER_FIRESTORE_PATH, user!.id), {
+		await updateDoc<Partial<User>>(doc(firestore, USER_FIRESTORE_PATH, user.id), {
 			personal: {
 				name: values.firstname,
 				lastname: values.lastname,
@@ -128,12 +126,10 @@ export function PersonalInfoForm({ lang, translations }: PersonalInfoFormProps)
 			},
 		}).then(() => {
 			toast.success(translations.userUpdatedToast);
-			queryClient.invalidateQueries({ queryKey: ['me'] });
+			queryClient.invalidateQueries({ queryKey: ['me', user.get('auth_user_id')] });
 		});
 	};
 
-	if (!user) return null;
-
 	return (
 		<Form {...form}>
 			<form className="grid grid-cols-1 gap-y-4 md:grid-cols-2 md:gap-x-4" onSubmit={form.handleSubmit(onSubmit)}>

diff --git a/website/src/app/[lang]/[region]/(website)/me/subscriptions/billing-portal-button.tsx b/website/src/app/[lang]/[region]/(website)/me/subscriptions/billing-portal-button.tsx
@@ -18,7 +18,7 @@ export function BillingPortalButton({ translations }: BillingPortalButtonProps)
 	const api = useApi();
 
 	const { data: billingPortalUrl } = useQuery({
-		queryKey: ['me/subscriptions-button'],
+		queryKey: ['me', 'subscriptions', 'billing-portal-button'],
 		queryFn: async () => {
 			const response = await api.post('/api/stripe/billing-portal-session/create', {
 				returnUrl: window.location.href,

diff --git a/website/src/app/context-providers.tsx b/website/src/app/context-providers.tsx
@@ -16,7 +16,7 @@ import { connectFirestoreEmulator, getFirestore } from 'firebase/firestore';
 import { connectFunctionsEmulator, getFunctions } from 'firebase/functions';
 import { connectStorageEmulator, getStorage } from 'firebase/storage';
 import _ from 'lodash';
-import { useRouter } from 'next/navigation';
+import { useRouter, useSearchParams } from 'next/navigation';
 import { PropsWithChildren, createContext, useContext, useEffect, useState } from 'react';
 import {
 	AnalyticsProvider,
@@ -151,6 +151,8 @@ export const useI18n = () => useContext(I18nContext);
 
 function I18nProvider({ children }: PropsWithChildren) {
 	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);
@@ -163,7 +165,7 @@ function I18nProvider({ children }: PropsWithChildren) {
 			setLanguage(languageInUrl);
 		} else if (languageInUrl !== language) {
 			urlSegments[1] = language;
-			router.push(urlSegments.join('/'));
+			router.push(urlSegments.join('/') + (searchParamsString ? `?${searchParamsString}` : ''));
 		}
 	}, [language, router, setLanguage]);
 
@@ -174,7 +176,7 @@ function I18nProvider({ children }: PropsWithChildren) {
 			setRegion(regionInUrl);
 		} else if (regionInUrl !== region) {
 			urlSegments[2] = region;
-			router.push(urlSegments.join('/'));
+			router.push(urlSegments.join('/') + (searchParamsString ? `?${searchParamsString}` : ''));
 		}
 	}, [region, router, setRegion]);
 

diff --git a/website/src/components/providers/user-context-provider.tsx b/website/src/components/providers/user-context-provider.tsx
@@ -26,7 +26,7 @@ export function UserContextProvider({ children }: PropsWithChildren) {
 			}
 			return null;
 		},
-		staleTime: 1000 * 60 * 60, // 1 hour
+		staleTime: 3600000, // 1 hour
 	});
 
 	useEffect(() => {