♻️ use server mainNewsletter route to reduce vercel API calls (NGC-1498)

src/app/(large-layout)/stats/_components/StatsContent.tsx

@@ -12,7 +12,7 @@ import {
   useCurrentMonthWebsites,
   useGetSharedSimulationEvents,
 } from '@/helpers/matomo'
-import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
+import { useMainNewsletter } from '@/hooks/useMainNewsletter'
 import type { UseQueryResult } from '@tanstack/react-query'
 import AcquisitionBlock from './content/AcquisitionBlock'
 import MetabaseIframe from './content/MetabaseIframe'
@@ -70,7 +70,7 @@ export default function StatsContent() {
   const currentMonthWebsites = useCurrentMonthWebsites()
   const currentMonthSocials = useCurrentMonthSocials()
   const allSharedSimulationEvents = useGetSharedSimulationEvents()
-  const allSubscribers = useNumberSubscribers()
+  const { data: mainNewsletter } = useMainNewsletter()
 
   return (
     <div>
@@ -127,7 +127,7 @@ export default function StatsContent() {
             currentMonthIframeVisitsData,
           ]) => (
             <AcquisitionBlock
-              allSubscribers={allSubscribers}
+              mainNewsletter={mainNewsletter}
               allSharedSimulationEventsData={allSharedSimulationEventsData}
               currentMonthWebsitesData={currentMonthWebsitesData}
               currentMonthSocialsData={currentMonthSocialsData}

src/app/(large-layout)/stats/_components/content/AcquisitionBlock.tsx

@@ -1,11 +1,12 @@
 import Trans from '@/components/translation/Trans'
 import Card from '@/design-system/layout/Card'
 import { useLocale } from '@/hooks/useLocale'
+import type { Newsletter } from '@/hooks/useMainNewsletter'
 import { formatPercentage, formatValue } from '../utils/formatFigure'
 import Sources from './Sources'
 
 type Props = {
-  allSubscribers: any
+  mainNewsletter?: Newsletter
   allSharedSimulationEventsData: any
   currentMonthWebsitesData: any
   currentMonthSocialsData: any
@@ -14,7 +15,7 @@ type Props = {
 }
 
 export default function AcquisitionBlock({
-  allSubscribers,
+  mainNewsletter,
   allSharedSimulationEventsData,
   currentMonthWebsitesData,
   currentMonthSocialsData,
@@ -27,9 +28,11 @@ export default function AcquisitionBlock({
       <div className="mt-4">
         <div className="flex flex-row gap-4">
           <Card className="flex-1">
-            <strong className="text-3xl">
-              {formatValue(allSubscribers?.data, locale)}
-            </strong>{' '}
+            {!!mainNewsletter && (
+              <strong className="text-3xl">
+                {formatValue(mainNewsletter.totalSubscribers, locale)}
+              </strong>
+            )}
             <p className="mb-0 text-sm">
               <Trans>inscrits à l'infolettre</Trans>
             </p>

src/app/(simulation)/(large-layout-nosticky)/fin/_components/GetResultsByEmail.tsx

@@ -18,13 +18,13 @@ import { useGetNewsletterSubscriptions } from '@/hooks/settings/useGetNewsletter
 import { useSaveSimulation } from '@/hooks/simulation/useSaveSimulation'
 import { useClientTranslation } from '@/hooks/useClientTranslation'
 import { useLocale } from '@/hooks/useLocale'
-import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
+import { useMainNewsletter } from '@/hooks/useMainNewsletter'
 import { useCurrentSimulation, useUser } from '@/publicodes-state'
 import { formatEmail } from '@/utils/format/formatEmail'
 import { trackEvent } from '@/utils/matomo/trackEvent'
 import { captureException } from '@sentry/react'
 import { useEffect, useRef } from 'react'
-import type { SubmitHandler} from 'react-hook-form';
+import type { SubmitHandler } from 'react-hook-form'
 import { useForm as useReactHookForm } from 'react-hook-form'
 import { twMerge } from 'tailwind-merge'
 import Confirmation from './carbone/getResultsByEmail/Confirmation'
@@ -100,7 +100,7 @@ export default function GetResultsByEmail({
   const { saveSimulation, isPending, isSuccess, isError, error } =
     useSaveSimulation()
 
-  const { data: numberSubscribers } = useNumberSubscribers()
+  const { data: mainNewsletter } = useMainNewsletter()
 
   const onSubmit: SubmitHandler<Inputs> = async (data) => {
     // If the mutation is pending, we do nothing
@@ -175,7 +175,7 @@ export default function GetResultsByEmail({
             </strong>
             {t('comme {{numberSubscribers}} personnes.', {
               numberSubscribers:
-                numberSubscribers?.toLocaleString(locale, {
+                mainNewsletter?.totalSubscribers.toLocaleString(locale, {
                   maximumFractionDigits: 0,
                 }) ?? '---',
             })}

src/constants/urls.ts

@@ -10,6 +10,8 @@ export const AUTHENTICATION_URL = SERVER_URL + '/authentication/v1'
 
 export const GROUP_URL = SERVER_URL + '/groups/v1'
 
+export const NEWSLETTER_URL = SERVER_URL + '/newsletters/v1'
+
 export const NORTHSTAR_RATING_URL = SERVER_URL + '/northstar-ratings/v1'
 
 export const ORGANISATION_URL = SERVER_URL + '/organisations/v1'

src/design-system/cms/NewslettersBlock.tsx

@@ -11,7 +11,7 @@ import { subscribeToNewsletterBlog } from '@/constants/tracking/pages/newsletter
 import { useGetNewsletterSubscriptions } from '@/hooks/settings/useGetNewsletterSubscriptions'
 import { useUpdateUserSettings } from '@/hooks/settings/useUpdateUserSettings'
 import { useLocale } from '@/hooks/useLocale'
-import { useNumberSubscribers } from '@/hooks/useNumberSubscriber'
+import { useMainNewsletter } from '@/hooks/useMainNewsletter'
 import { useUser } from '@/publicodes-state'
 import { formatEmail } from '@/utils/format/formatEmail'
 import { trackEvent } from '@/utils/matomo/trackEvent'
@@ -50,7 +50,7 @@ function SuccessMessage() {
 }
 
 export default function NewslettersBlock() {
-  const { data: numberSubscribers } = useNumberSubscribers()
+  const { data: mainNewsletter } = useMainNewsletter()
 
   const locale = useLocale()
 
@@ -143,7 +143,7 @@ export default function NewslettersBlock() {
             <CheckIcon className="mr-2 h-4 w-4 stroke-green-500" />
 
             <span className="text-sm text-gray-600">
-              {numberSubscribers?.toLocaleString(locale) ?? 0}{' '}
+              {mainNewsletter?.totalSubscribers.toLocaleString(locale) ?? 0}{' '}
               <Trans>personnes inscrites</Trans>
             </span>
           </p>

src/hooks/useMainNewsletter.ts

@@ -0,0 +1,21 @@
+import { keepPreviousData, useQuery } from '@tanstack/react-query'
+import axios from 'axios'
+import { LIST_MAIN_NEWSLETTER } from '../constants/brevo'
+import { NEWSLETTER_URL } from '../constants/urls'
+
+export type Newsletter = {
+  id: number
+  name: string
+  totalSubscribers: number
+}
+
+export function useMainNewsletter() {
+  return useQuery({
+    queryKey: ['mainNewsletter'],
+    queryFn: () =>
+      axios
+        .get<Newsletter>(`${NEWSLETTER_URL}/${LIST_MAIN_NEWSLETTER}`)
+        .then((res) => res.data),
+    placeholderData: keepPreviousData,
+  })
+}