From 3b952396e0fb8df1b5725c6e08b2bf42b6d7efd7 Mon Sep 17 00:00:00 2001
From: Yolijn <mail@yolijn.com>
Date: Fri, 27 Dec 2024 16:13:54 +0100
Subject: [PATCH] feat: configure reactive map zoom with out without address

---
 config.json                                   |  3 ++-
 .../incident/add/components/MapDialog.tsx     | 22 ++++++++++++++-----
 src/components/ui/LocationMap.tsx             | 19 ++++++++++++----
 src/types/config.ts                           |  1 +
 4 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/config.json b/config.json
index 6ad77f87..0ab7e144 100644
--- a/config.json
+++ b/config.json
@@ -28,7 +28,8 @@
       "maxBounds": [
         [3.31497114423, 50.803721015],
         [7.09205325687, 53.5104033474]
-      ]
+      ],
+      "default_zoom": 12
     },
     "links": {
       "about": "https://signalen.org",
diff --git a/src/app/[locale]/incident/add/components/MapDialog.tsx b/src/app/[locale]/incident/add/components/MapDialog.tsx
index db70dd5e..058e72c4 100644
--- a/src/app/[locale]/incident/add/components/MapDialog.tsx
+++ b/src/app/[locale]/incident/add/components/MapDialog.tsx
@@ -62,7 +62,6 @@ import {
 } from '@/lib/utils/address'
 import MapExplainerAccordion from './questions/MapExplainerAccordion'
 import { useWindowSize } from 'usehooks-ts'
-import { string } from 'zod'
 
 type MapDialogProps = {
   trigger: React.ReactElement
@@ -110,7 +109,9 @@ const MapDialog = ({
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 18,
+    zoom: formState.address
+      ? config?.base.map.minimal_zoom || 17
+      : config?.base.map.default_zoom || 12,
     bearing: 0,
     padding: {
       top: 0,
@@ -171,10 +172,20 @@ const MapDialog = ({
     }
   }, [features, field])
 
+  useEffect(() => {
+    setViewState((state) => ({
+      ...state,
+      zoom: formState.address
+        ? config?.base.map.minimal_zoom || 17
+        : config?.base.map.default_zoom || 12,
+    }))
+  }, [config, formState])
+
   // memoize list of features to show in left sidebar
   const featureList = useMemo(() => {
     if (config && dialogMap) {
-      const mapFeaturesToShow = mapFeatures ? mapFeatures.features : []
+      const mapFeaturesToShow =
+        mapFeatures && formState.address ? mapFeatures.features : []
 
       const features =
         dialogMap?.getZoom() > config.base.map.minimal_zoom
@@ -185,14 +196,14 @@ const MapDialog = ({
     }
 
     return []
-  }, [config, dialogMap, formState.selectedFeatures, mapFeatures])
+  }, [config, dialogMap, formState, mapFeatures])
 
   // Update position, flyTo position, after this set the marker position
   const updatePosition = (lat: number, lng: number) => {
     if (dialogMap) {
       dialogMap.flyTo({
         center: [lng, lat],
-        zoom: 18,
+        zoom: config?.base.map.minimal_zoom || 17,
       })
     }
 
@@ -563,6 +574,7 @@ const MapDialog = ({
                 {onMapReady &&
                   dialogMap &&
                   dialogMap.getZoom() > config.base.map.minimal_zoom &&
+                  formState.address &&
                   mapFeatures?.features.map((feature) => {
                     const id = feature.id as number
 
diff --git a/src/components/ui/LocationMap.tsx b/src/components/ui/LocationMap.tsx
index 032491bf..bf1f3ee1 100644
--- a/src/components/ui/LocationMap.tsx
+++ b/src/components/ui/LocationMap.tsx
@@ -13,7 +13,9 @@ const LocationMap = () => {
   const [viewState, setViewState] = useState<ViewState>({
     latitude: 0,
     longitude: 0,
-    zoom: 14,
+    zoom: formState.address
+      ? config?.base.map.minimal_zoom || 17
+      : config?.base.map.default_zoom || 12,
     bearing: 0,
     padding: {
       top: 0,
@@ -48,13 +50,22 @@ const LocationMap = () => {
 
   // Update viewState, to move map view with marker
   useEffect(() => {
-    setViewState({
-      ...viewState,
+    setViewState((state) => ({
+      ...state,
       latitude: marker[0],
       longitude: marker[1],
-    })
+    }))
   }, [marker])
 
+  useEffect(() => {
+    setViewState((state) => ({
+      ...state,
+      zoom: formState.address
+        ? config?.base.map.minimal_zoom || 17
+        : config?.base.map.default_zoom || 12,
+    }))
+  }, [config, formState])
+
   const mapStyle = isDarkMode
     ? `${process.env.NEXT_PUBLIC_MAPTILER_MAP_DARK_MODE}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`
     : `${process.env.NEXT_PUBLIC_MAPTILER_MAP}/style.json?key=${process.env.NEXT_PUBLIC_MAPTILER_API_KEY}`
diff --git a/src/types/config.ts b/src/types/config.ts
index 26fb0e82..319eedd8 100644
--- a/src/types/config.ts
+++ b/src/types/config.ts
@@ -26,6 +26,7 @@ export type AppConfig = {
     map: {
       find_address_in_distance: number
       minimal_zoom: number
+      default_zoom: number
       center: number[]
       maxBounds: number[][]
     }