refactor: onSelected -> onSelect

yuiseki · Nov 9, 2024 · 3037cad · 3037cad
1 parent 084a4a9
commit 3037cad
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 43 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -7,7 +7,7 @@ import { TextInput } from "@/components/TextInput";
 import { DialogueElement } from "@/types/DialogueElement";
 import { nextPostJson, nextPostJsonWithCache } from "@/utils/nextPostJson";
 import { sleep } from "@/utils/sleep";
-import { useCallback, useEffect, useRef, useState } from "react";
+import React, { useCallback, useEffect, useRef, useState } from "react";
 import { MapProvider, MapRef } from "react-map-gl/maplibre";
 import { FeatureCollection } from "geojson";
 import { getOverpassResponseJsonWithCache } from "@/utils/getOverpassResponse";
@@ -41,6 +41,7 @@ export default function Home() {
   const [geojsonWithStyleList, setGeojsonWithStyleList] = useState<
     Array<{ id: string; style: TridentMapsStyle; geojson: FeatureCollection }>
   >([]);
+
   const [location, setLocation] = useState<string | undefined>(undefined);
 
   // base maps style state
@@ -66,24 +67,6 @@ export default function Home() {
   // input ref and state
   const [inputText, setInputText] = useState("");
 
-  const onChangeFloatingChatButton = useCallback(
-    (showing: boolean) => {
-      setShowingFloatingChat(showing);
-      if (showing) {
-        scrollToBottom();
-      }
-    },
-    [scrollToBottom]
-  );
-
-  // base maps style change
-  const onSelectMapStyleJsonUrl = useCallback(
-    (e: React.ChangeEvent<HTMLSelectElement>) => {
-      setMapStyleJsonUrl(e.target.value);
-    },
-    [setMapStyleJsonUrl]
-  );
-
   const insertNewDialogue = useCallback(
     (newDialogueElement: DialogueElement, lazy?: boolean) => {
       if (!lazy) {
@@ -244,7 +227,7 @@ export default function Home() {
     [inputText, insertNewDialogue, pastMessages, scrollToBottom]
   );
 
-  const onSelectedSuggestions = useCallback(
+  const onSelectSuggestions = useCallback(
     async (value: string) => {
       setResponding(true);
       await onSubmit(value);
@@ -355,7 +338,11 @@ export default function Home() {
         <div className="tridentMapWrap">
           <MapStyleSelector
             mapStyleJsonUrl={mapStyleJsonUrl}
-            onSelectMapStyleJsonUrl={onSelectMapStyleJsonUrl}
+            onSelectMapStyleJsonUrl={(
+              e: React.ChangeEvent<HTMLSelectElement>
+            ) => {
+              setMapStyleJsonUrl(e.target.value);
+            }}
           />
           <MapProvider>
             <BaseMap
@@ -378,7 +365,14 @@ export default function Home() {
                 })}
             </BaseMap>
           </MapProvider>
-          <FloatingChatButton onChange={onChangeFloatingChatButton}>
+          <FloatingChatButton
+            onChange={(showing: boolean) => {
+              setShowingFloatingChat(showing);
+              if (showing) {
+                scrollToBottom();
+              }
+            }}
+          >
             <div className="logsOuterWrap" ref={dialogueRef}>
               <div className="tridentMapTitle">
                 {mapTitle ? mapTitle : "Loading..."}
@@ -400,7 +394,7 @@ export default function Home() {
               <LocationProvider locationInfo={{ location: location }}>
                 {dialogueList.length === 1 && inputText.length === 0 && (
                   <InputSuggest
-                    onSelected={onSelectedSuggestions}
+                    onSelect={onSelectSuggestions}
                     onChangeLocation={(v) => {
                       setLocation(v);
                     }}
@@ -415,7 +409,7 @@ export default function Home() {
                       onUpdateSuggestions={() => {
                         scrollToBottom();
                       }}
-                      onSelected={onSelectedSuggestions}
+                      onSelect={onSelectSuggestions}
                     />
                   )}
               </LocationProvider>

diff --git a/src/components/InputPredict/index.tsx b/src/components/InputPredict/index.tsx
@@ -7,8 +7,8 @@ import styles from "./styles.module.scss";
 export const InputPredict: React.FC<{
   pastMessages?: any[];
   onUpdateSuggestions?: () => void;
-  onSelected?: (value: string) => void;
-}> = ({ pastMessages, onUpdateSuggestions, onSelected }) => {
+  onSelect?: (value: string) => void;
+}> = ({ pastMessages, onUpdateSuggestions, onSelect }) => {
   const locationInfo = useContext(LocationContext);
   const [requesting, setRequesting] = useState(false);
   const [suggests, setSuggests] = useState<string[] | undefined>(undefined);
@@ -50,7 +50,7 @@ export const InputPredict: React.FC<{
               className={styles.suggestListItem}
               key={suggest}
               onClick={() => {
-                onSelected && onSelected(suggest);
+                onSelect && onSelect(suggest);
               }}
             >
               {suggest}

diff --git a/src/components/InputSuggest/SuggestByCurrentLocation/index.tsx b/src/components/InputSuggest/SuggestByCurrentLocation/index.tsx
@@ -7,8 +7,8 @@ import styles from "./styles.module.scss";
 export const SuggestByCurrentLocation: React.FC<{
   coordinates: GeolocationCoordinates | null;
   onChangeLocation?: (location: string) => void;
-  onSelected?: (value: string) => void;
-}> = ({ coordinates, onChangeLocation, onSelected }) => {
+  onSelect?: (value: string) => void;
+}> = ({ coordinates, onChangeLocation, onSelect }) => {
   const [location, setLocation] = useState<string | null>(null);
   const [suggests, setSuggests] = useState<string[]>([]);
 
@@ -70,8 +70,8 @@ export const SuggestByCurrentLocation: React.FC<{
               key={suggest}
               className={styles.suggestListItem}
               onClick={() => {
-                if (onSelected) {
-                  onSelected(suggest);
+                if (onSelect) {
+                  onSelect(suggest);
                 }
               }}
             >

diff --git a/src/components/InputSuggest/SuggestByTrend/index.tsx b/src/components/InputSuggest/SuggestByTrend/index.tsx
@@ -3,8 +3,8 @@ import styles from "./styles.module.scss";
 import { nextPostJsonWithCache } from "@/utils/nextPostJson";
 
 export const SuggestByTrend: React.FC<{
-  onSelected?: (value: string) => void;
-}> = ({ onSelected }) => {
+  onSelect?: (value: string) => void;
+}> = ({ onSelect }) => {
   const [trends, setTrends] = useState<string[]>([
     "ガザ地区の避難所を表示して",
     "ウクライナの首都を表示して",
@@ -33,7 +33,7 @@ export const SuggestByTrend: React.FC<{
               className={styles.suggestListItem}
               key={trend}
               onClick={() => {
-                onSelected && onSelected(trend);
+                onSelect && onSelect(trend);
               }}
             >
               {trend}

diff --git a/src/components/InputSuggest/index.tsx b/src/components/InputSuggest/index.tsx
@@ -7,9 +7,9 @@ import { SuggestByCurrentLocationButton } from "./SuggestByCurrentLocation/butto
 import { SuggestByTrend } from "./SuggestByTrend";
 
 export const InputSuggest: React.FC<{
-  onSelected?: (value: string) => void;
+  onSelect?: (value: string) => void;
   onChangeLocation?: (location: string) => void;
-}> = ({ onSelected, onChangeLocation }) => {
+}> = ({ onSelect, onChangeLocation }) => {
   const [suggestMode, setSuggestMode] = useState<"location" | "trend" | null>(
     null
   );
@@ -18,11 +18,7 @@ export const InputSuggest: React.FC<{
   );
 
   const onChangeSuggestByCurrentLocation = useCallback(
-    ({
-      coordinates,
-    }: {
-      coordinates: GeolocationCoordinates | null;
-    }) => {
+    ({ coordinates }: { coordinates: GeolocationCoordinates | null }) => {
       setCoordinates(coordinates);
     },
     []
@@ -46,11 +42,11 @@ export const InputSuggest: React.FC<{
       {suggestMode === "location" && (
         <SuggestByCurrentLocation
           coordinates={coordinates}
-          onSelected={onSelected}
+          onSelect={onSelect}
           onChangeLocation={onChangeLocation}
         />
       )}
-      {suggestMode === "trend" && <SuggestByTrend onSelected={onSelected} />}
+      {suggestMode === "trend" && <SuggestByTrend onSelect={onSelect} />}
     </div>
   );
 };