From 1ce74361f42d6bc8e4a3177a3ee973a9a66acd6d Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sun, 7 Jan 2024 17:00:13 +0900
Subject: [PATCH] add fitBoundsToGeoJson

---
 src/app/page.tsx                    | 32 +++++++++++------------------
 src/utils/map/fitBoundsToGeoJson.ts | 23 +++++++++++++++++++++
 src/utils/scrollToBotton.ts         |  9 --------
 3 files changed, 35 insertions(+), 29 deletions(-)
 create mode 100644 src/utils/map/fitBoundsToGeoJson.ts
 delete mode 100644 src/utils/scrollToBotton.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index f93675c8..a22e7ccd 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -17,6 +17,7 @@ import { TridentMapsStyle } from "@/types/TridentMaps";
 import { useLocalStorage } from "@/hooks/localStorage";
 import { FloatingChatButton } from "@/components/FloatingActionButton";
 import { MapStyleSelector } from "@/components/MapStyleSelector";
+import { fitBoundsToGeoJson } from "@/utils/map/fitBoundsToGeoJson";
 
 const greetings = `Hello! I'm TRIDENT, interactive Smart Maps assistant. Could you indicate me the areas and themes you want to see as the map?`;
 
@@ -40,12 +41,15 @@ export default function Home() {
 
   // floating chat button state
   const [showingFloatingChat, setShowingFloatingChat] = useState(true);
-  const onChangeFloatingChatButton = useCallback((showing: boolean) => {
-    setShowingFloatingChat(showing);
-    if (showing) {
-      scrollToBottom();
-    }
-  }, [scrollToBottom]);
+  const onChangeFloatingChatButton = useCallback(
+    (showing: boolean) => {
+      setShowingFloatingChat(showing);
+      if (showing) {
+        scrollToBottom();
+      }
+    },
+    [scrollToBottom]
+  );
 
   // maps ref and state
   const mapRef = useRef<MapRef | null>(null);
@@ -81,9 +85,6 @@ export default function Home() {
             .flat(),
         };
 
-        // bounding box of all everything
-        const [minLng, minLat, maxLng, maxLat] = turf.bbox(everything);
-
         // padding of the map
         let padding = {
           top: 40,
@@ -114,16 +115,7 @@ export default function Home() {
           }
         }
 
-        mapRef.current.fitBounds(
-          [
-            [minLng, minLat],
-            [maxLng, maxLat],
-          ],
-          {
-            padding: padding,
-            duration: 1000,
-          }
-        );
+        fitBoundsToGeoJson(mapRef, everything, padding);
       } catch (error) {
         console.error(error);
       }
@@ -423,7 +415,7 @@ export default function Home() {
                   </div>
                 );
               })}
-              <div style={{ height: '1px' }} ref={dialogueEndRef} />
+              <div style={{ height: "1px" }} ref={dialogueEndRef} />
             </div>
             <TextInput
               disabled={responding || lazyInserting || mapping}
diff --git a/src/utils/map/fitBoundsToGeoJson.ts b/src/utils/map/fitBoundsToGeoJson.ts
new file mode 100644
index 00000000..cdc40027
--- /dev/null
+++ b/src/utils/map/fitBoundsToGeoJson.ts
@@ -0,0 +1,23 @@
+import { MapRef, PaddingOptions } from "react-map-gl";
+import * as turf from "@turf/turf";
+import { MutableRefObject } from "react";
+
+export const fitBoundsToGeoJson = (
+  mapRef: MutableRefObject<MapRef | null>,
+  geoJson: GeoJSON.FeatureCollection,
+  padding?: PaddingOptions
+) => {
+  if (!mapRef || !mapRef.current) return;
+
+  const [minLng, minLat, maxLng, maxLat] = turf.bbox(geoJson);
+  mapRef.current.fitBounds(
+    [
+      [minLng, minLat],
+      [maxLng, maxLat],
+    ],
+    {
+      padding: padding,
+      duration: 1000,
+    }
+  );
+};
diff --git a/src/utils/scrollToBotton.ts b/src/utils/scrollToBotton.ts
deleted file mode 100644
index 048cda16..00000000
--- a/src/utils/scrollToBotton.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { sleep } from "./sleep";
-
-export const scrollToBottom = async () => {
-  await sleep(100);
-  window.scroll({
-    top: document.body.scrollHeight,
-    behavior: "smooth",
-  });
-};