feat(generalised tiles): use generalised ft tiles, zoom in on map position to load form

feat(generalised tiles): use generalised ft tiles, zoom in on map position to load form

Author: danji90

.env

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_VECTOR_TILES_ENDPOINT=https://tiles-staging.tree-app.ch
-NEXT_PUBLIC_SO_PDF_ENDPOINT=https://so-data.tree-app.ch/forest-types
+NEXT_PUBLIC_DATA_ENDPOINT=https://data.tree-app.ch
+NEXT_PUBLIC_SO_PDF_ENDPOINT=https://data.tree-app.ch/profiles/so/forest-types
+NEXT_PUBLIC_TREE_PDF_ENDPOINT=https://data.tree-app.ch/tree-types
 NEXT_PUBLIC_MATOMO_URL_BASE=https://analytics.geops.de/
 NEXT_PUBLIC_MATOMO_SITE_ID=14
 KV_REST_API_URL=https://dear-woodcock-56336.upstash.io

.env.dist

@@ -36,7 +36,6 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-
 # Serwist
 public/sw*
 public/swe-worker*

.gitignore

@@ -2,6 +2,7 @@ import { Field } from "@headlessui/react";
 import { useTranslation } from "react-i18next";
 
 import useStore from "@/store";
+import getForestTypePdfUrl from "@/utils/getForestTypesPdfUrl";
 import useCantonalForestType from "@/utils/hooks/useCantonalForestType";
 import useHasPdf from "@/utils/hooks/useHasPdf";
 
@@ -14,7 +15,10 @@ function CantonalForestType() {
     (state) => state.setForestTypeDescription,
   );
   const cantonalForestType = useCantonalForestType();
-  const hasPdf = useHasPdf(cantonalForestType);
+  const hasPdf = useHasPdf(
+    cantonalForestType && getForestTypePdfUrl(cantonalForestType),
+    ["so"],
+  );
 
   if (!cantonalForestType) return null;
 

components/CantonalForestType.tsx

@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import { createPortal } from "react-dom";
 import { Trans, useTranslation } from "react-i18next";
 
 import useLocalStorage from "@/utils/hooks/useLocalStorage";
@@ -18,30 +19,33 @@ const CookieBanner = () => {
     [i18n.language],
   );
 
-  return lsValue !== "true" ? (
-    <Message className="absolute bottom-0 z-50 flex w-screen items-center justify-between rounded-none border-none bg-zinc-900 text-white">
-      <div>
-        <Trans i18nKey="cookieConsent">
-          <a
-            className="text-white underline hover:text-primary-200"
-            href={link}
-            rel="noopener noreferrer"
-            target="_blank"
+  return lsValue !== "true"
+    ? createPortal(
+        <Message className="absolute bottom-0 z-[9999] flex w-screen items-center justify-between rounded-none border-none bg-zinc-900 text-white">
+          <div>
+            <Trans i18nKey="cookieConsent">
+              <a
+                className="text-white underline hover:text-primary-200"
+                href={link}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Datenschutzerklärung
+              </a>
+            </Trans>
+          </div>
+          <Button
+            className="ml-2 border-2 border-white !bg-zinc-900 text-white hover:border-white hover:!bg-zinc-600 hover:bg-zinc-700 hover:text-white"
+            data-cypress="cookie-consent-ok-btn"
+            onClick={() => setLsValue("true")}
+            variant="outlined"
           >
-            Datenschutzerklärung
-          </a>
-        </Trans>
-      </div>
-      <Button
-        className="ml-2 border-2 border-white !bg-zinc-900 text-white hover:border-white hover:!bg-zinc-600 hover:bg-zinc-700 hover:text-white"
-        data-cypress="cookie-consent-ok-btn"
-        onClick={() => setLsValue("true")}
-        variant="outlined"
-      >
-        OK
-      </Button>
-    </Message>
-  ) : null;
+            OK
+          </Button>
+        </Message>,
+        document.body,
+      )
+    : null;
 };
 
 export default CookieBanner;

components/CookieBanner.tsx

@@ -1,18 +1,17 @@
-import dynamic from "next/dynamic";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
 
 import useStore from "@/store";
+import getForestTypePdfUrl from "@/utils/getForestTypesPdfUrl";
 import useHasPdf from "@/utils/hooks/useHasPdf";
 
 import BlForestTypeDescription from "./bl";
 import ChForestTypesDescription from "./ch";
 import LuForestTypeDescription from "./lu";
-
-const SoForestTypesDescription = dynamic(() => import("./so"), { ssr: false }); // Needs to be dynamic due to react-pdf
+import SoForestTypeDescription from "./so";
 
 function useShowForestTypeDescription(code: string, activeProfile: string) {
-  const hasPdf = useHasPdf(code);
+  const hasPdf = useHasPdf(code && getForestTypePdfUrl(code), ["so"]);
 
   const showForestTypeDescription = useMemo(
     () => (activeProfile === "so" ? hasPdf : !!code),
@@ -37,7 +36,7 @@ function ForestTypeDescription() {
       {activeProfile === "ch" && <ChForestTypesDescription code={code} />}
       {activeProfile === "lu" && <LuForestTypeDescription code={code} />}
       {activeProfile === "bl" && <BlForestTypeDescription code={code} />}
-      {activeProfile === "so" && <SoForestTypesDescription code={code} />}
+      {activeProfile === "so" && <SoForestTypeDescription code={code} />}
       {activeProfile === "vd" && (
         <p className="p-2">{t("forestTypeModal.noDataMessage")}</p>
       )}

components/ForestTypeModal/ForestTypeDescription/index.tsx

@@ -1,70 +1,32 @@
 "use client";
-import { useEffect, useReducer, useRef, useState } from "react";
+import dynamic from "next/dynamic";
 import { useTranslation } from "react-i18next";
-import { Document, Page, pdfjs } from "react-pdf";
-
-pdfjs.GlobalWorkerOptions.workerSrc = "/pdf.worker.min.mjs"; // we host this statically in public folder
 
 import { buttonStyles, primaryStyles } from "@/components/ui/Button";
-
-let rerenderTimout: ReturnType<typeof setTimeout>;
+import { useModalContext } from "@/components/ui/Modal";
 
 const soPdfEndpoint = process.env.NEXT_PUBLIC_SO_PDF_ENDPOINT;
 
+const PdfViewer = dynamic(() => import("@/components/PdfViewer"), {
+  ssr: false,
+}); // Needs to be dynamic due to react-pdf pdf.worker.min.mjs
+
 function ForestTypeDescription({ code }: { code: string }) {
   const name = code?.replace("*", "stern");
-  const containerRef = useRef<HTMLDivElement | null>(null);
-  const [numPages, setNumPages] = useState<null | number>(null);
   const { t } = useTranslation();
-  const [, forceUpdate] = useReducer((x: number) => x + 1, 0);
-
-  const onDocumentLoadSuccess = ({
-    numPages: nextNumPages,
-  }: {
-    numPages: number;
-  }) => {
-    setNumPages(nextNumPages);
-  };
-
-  useEffect(() => {
-    // Force rerender PDF on resize, important for mobile devices
-    const debouncedRerender = () => {
-      clearTimeout(rerenderTimout);
-      rerenderTimout = setTimeout(forceUpdate, 50);
-    };
-    const resizeObserver = new ResizeObserver(debouncedRerender);
-    resizeObserver.observe(document.body);
-    return () => {
-      clearTimeout(rerenderTimout);
-      resizeObserver.disconnect();
-    };
-  }, []);
+  const { isOpen } = useModalContext();
 
   return (
-    <div className="flex flex-col gap-2" ref={containerRef}>
+    <div className="flex flex-col gap-2">
       <a
         className={`${buttonStyles} ${primaryStyles} self-end`}
         href={`${soPdfEndpoint}/${name}.pdf`}
         target="so-data"
       >
         {t("export.exportForestTypeDescription")}
       </a>
-      {containerRef?.current ? (
-        <Document
-          file={`${soPdfEndpoint}/${name}.pdf`}
-          onLoadSuccess={onDocumentLoadSuccess}
-        >
-          {Array.from(new Array(numPages), (_, index) => (
-            <Page
-              key={`page_${index + 1}`}
-              pageNumber={index + 1}
-              renderAnnotationLayer={false}
-              renderTextLayer={false}
-              width={(containerRef.current?.clientWidth ?? 500) - 10}
-            />
-          ))}
-        </Document>
-      ) : null}
+      {/* We react to isOpen to rerender the component */}
+      {isOpen ? <PdfViewer href={`${soPdfEndpoint}/${name}.pdf`} /> : null}
     </div>
   );
 }

components/ForestTypeModal/ForestTypeDescription/so/index.tsx

@@ -30,9 +30,9 @@ function MapGeolocation() {
   });
 
   return getIsMobileDevice() ? (
-    <div className="absolute bottom-28 right-5 z-50 flex items-center rounded p-1 backdrop-blur-sm">
+    <div className="absolute bottom-28 right-5 z-40 flex items-center rounded p-1 backdrop-blur-sm">
       <Button
-        className="flex h-[34px] !w-[34px] items-center justify-center bg-white !px-0 !py-0 !text-primary-500 hover:bg-white hover:!text-primary-200"
+        className="flex h-[34px] !w-[34px] items-center justify-center bg-white/85 !px-0 !py-0 !text-primary-500 hover:bg-white/85 hover:!text-primary-200"
         onClick={() => geoloc.setTracking(true)}
       >
         <GeolocationIcon className="h-4 w-4" />

components/MapGeolocation.tsx

@@ -161,7 +161,7 @@ function MapLayersMenu() {
       {({ open }) => {
         return (
           <>
-            <PopoverButton className="absolute right-5 top-5 z-50 flex items-center rounded-lg p-1 backdrop-blur-sm sm:w-60">
+            <PopoverButton className="absolute right-5 top-5 z-30 flex items-center rounded-lg p-1 backdrop-blur-sm sm:w-60">
               <div
                 className={`${buttonStyles} ${outlinedStyles} flex w-full justify-between gap-2 border-none !px-3`}
               >