Call getObservations in server side

src/app/[locale]/map/layout.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { getObservations } from '@/api/customObservations';
 import { MapContextProvider } from '@/context/map';
 import { getTranslations } from 'next-intl/server';
 
@@ -19,13 +20,18 @@ export const generateMetadata = async () => {
 };
 
 export default async function MapLayout({ children }: Props) {
+  const observations = await getObservations();
   return (
     <MapContextProvider>
       <main
         role="main"
         className="grid h-full w-screen grid-cols-[100dvw_auto_100dvw] grid-rows-1 justify-stretch overflow-x-hidden scroll-smooth md:grid-cols-[50dvw_auto_50dvw] lg:grid-cols-[300px_auto_1fr]"
       >
-        <MapSidebar id="search" className="z-[1001]" />
+        <MapSidebar
+          id="search"
+          className="z-[1001]"
+          observations={observations}
+        />
         <section
           id="content"
           className="h-full w-[100dvw] empty:w-0 md:w-[50dvw] lg:w-[350px] xl:w-[450px]"

src/components/map-filters.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback } from 'react';
 import { useMapContext } from '@/context/map';
 import { useTranslations } from 'next-intl';

src/components/map-sidebar.tsx

@@ -1,6 +1,5 @@
-'use client';
-
 import { HTMLAttributes } from 'react';
+import { Observation } from '@/api/customObservations';
 
 import { cn } from '@/lib/utils';
 
@@ -9,14 +8,16 @@ import { ObservationCTA } from './observation-cta';
 import SearchForm from './search-form';
 import { ScrollArea } from './ui/scroll-area';
 
-type Props = HTMLAttributes<HTMLElement>;
+type Props = HTMLAttributes<HTMLElement> & {
+  observations: Observation[];
+};
 
-export function MapSidebar({ className, ...props }: Props) {
+export function MapSidebar({ className, observations, ...props }: Props) {
   return (
     <section {...props} className={cn('flex flex-col bg-primary', className)}>
       <div className="flex flex-row flex-wrap items-end justify-center gap-4 p-4">
         <SearchForm />
-        <ObservationCTA />
+        <ObservationCTA observations={observations} />
       </div>
       <ScrollArea className="h-full">
         <MapFilters />

src/components/observation-cta.tsx

@@ -1,7 +1,9 @@
-import React, { useEffect, useState } from 'react';
+'use client';
+
+import React from 'react';
 import Link from 'next/link';
 import { useSearchParams } from 'next/navigation';
-import { Observation, getObservations } from '@/api/customObservations';
+import { Observation } from '@/api/customObservations';
 import { DEFAULT_OBSERVATION_TYPES } from '@/constants';
 import { useTranslations } from 'next-intl';
 
@@ -16,16 +18,14 @@ import {
 
 import { Icons } from './icons';
 
-export function ObservationCTA() {
+type OversationsCTAProps = {
+  observations: Observation[];
+};
+
+export function ObservationCTA({ observations }: OversationsCTAProps) {
   const t = useTranslations('observation');
   const params = useSearchParams();
 
-  const [observations, setObservations] = useState<Observation[]>([]);
-
-  useEffect(() => {
-    getObservations().then(res => setObservations(res));
-  }, []);
-
   return (
     <div className="flex grow justify-center">
       <NavigationMenu delayDuration={500}>