From 084a4a9f802b9f07841880131ea3732700afa37d Mon Sep 17 00:00:00 2001
From: yuiseki <yuiseki@gmail.com>
Date: Sat, 9 Nov 2024 13:06:13 +0900
Subject: [PATCH] refactor

---
 src/app/page.tsx            | 16 ++++++----------
 src/hooks/scrollToBottom.ts | 17 +++++++++++++++++
 2 files changed, 23 insertions(+), 10 deletions(-)
 create mode 100644 src/hooks/scrollToBottom.ts

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 718d9eae..fe81a08f 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -25,6 +25,7 @@ import { LocationProvider } from "@/contexts/LocationContext";
 import { greetings } from "@/constants/Greetings";
 import { untitledMaps } from "@/constants/UntitledMap";
 import { tridentPlaceholders } from "@/constants/TridentPlaceholder";
+import { useScrollToBottom } from "@/hooks/scrollToBottom";
 
 export default function Home() {
   // all state
@@ -48,29 +49,23 @@ export default function Home() {
     "/map_styles/fiord-color-gl-style/style.json"
   );
 
+  // floating chat button state
+  const [showingFloatingChat, setShowingFloatingChat] = useState(true);
+
   // dialogue ref and state
   const dialogueRef = useRef<HTMLDivElement | null>(null);
   const dialogueEndRef = useRef<HTMLDivElement | null>(null);
   const [dialogueList, setDialogueList] = useState<DialogueElement[]>([]);
+  const scrollToBottom = useScrollToBottom(dialogueEndRef);
 
   // communication state
   const [responding, setResponding] = useState(false);
   const [mapping, setMapping] = useState(false);
   const [pastMessages, setPastMessages] = useState<Array<any> | undefined>();
 
-  // floating chat button state
-  const [showingFloatingChat, setShowingFloatingChat] = useState(true);
-
   // input ref and state
   const [inputText, setInputText] = useState("");
 
-  const scrollToBottom = useCallback(async () => {
-    await sleep(50);
-    if (dialogueEndRef.current) {
-      dialogueEndRef.current.scrollIntoView({ behavior: "instant" });
-    }
-  }, []);
-
   const onChangeFloatingChatButton = useCallback(
     (showing: boolean) => {
       setShowingFloatingChat(showing);
@@ -81,6 +76,7 @@ export default function Home() {
     [scrollToBottom]
   );
 
+  // base maps style change
   const onSelectMapStyleJsonUrl = useCallback(
     (e: React.ChangeEvent<HTMLSelectElement>) => {
       setMapStyleJsonUrl(e.target.value);
diff --git a/src/hooks/scrollToBottom.ts b/src/hooks/scrollToBottom.ts
new file mode 100644
index 00000000..5b488b11
--- /dev/null
+++ b/src/hooks/scrollToBottom.ts
@@ -0,0 +1,17 @@
+"use client";
+
+import { sleep } from "@/utils/sleep";
+import { useCallback, RefObject } from "react";
+
+export const useScrollToBottom = (
+  dialogueEndRef: RefObject<HTMLDivElement>
+) => {
+  const scrollToBottom = useCallback(async () => {
+    await sleep(50);
+    if (dialogueEndRef.current) {
+      dialogueEndRef.current.scrollIntoView({ behavior: "instant" });
+    }
+  }, [dialogueEndRef]);
+
+  return scrollToBottom;
+};