From eb1cbe73f9f8c0a82d3e965d75f9997ae157d6ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Michael=20K=C3=BCndig?= Date: Sat, 23 Mar 2024 16:16:51 +0100 Subject: [PATCH] chore(website): code cleanups (#777) --- .../survey/[recipient]/[survey]/survey.tsx | 2 +- .../app/[lang]/[region]/(website)/me/hooks.ts | 44 +++++++++---------- .../me/personal-info/personal-info-form.tsx | 32 ++++++-------- .../subscriptions/billing-portal-button.tsx | 2 +- website/src/app/context-providers.tsx | 8 ++-- .../providers/user-context-provider.tsx | 2 +- 6 files changed, 43 insertions(+), 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 index ac4df1415..2eaaabefb 100644 --- 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 index 01ce298e2..c83af9f9b 100644 --- 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({ - 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 index c473e58d9..f633214c6 100644 --- 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>(doc(firestore, USER_FIRESTORE_PATH, user!.id), { + await updateDoc>(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 (
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 index 418a7f3d6..9b962f32e 100644 --- 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 index 6aad04953..e8c1c5d7d 100644 --- 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(LANGUAGE_COOKIE); const { value: region, setCookie: setRegion } = useCookieState(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 index fc2d07ac0..c8b039898 100644 --- 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(() => {