駅への移動スクリプトをhooksに移動

components/Apps/WebView.jsx

@@ -23,7 +23,7 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
   const { navigate } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { isLandscape } = useDeviceOrientationChange();
-  const { originalStationList, stationList } = useStationList();
+  const { originalStationList, stationList, getInjectJavascriptAddress } = useStationList();
   const {
     setSelectedLine,
     mapsStationData: stationData,
@@ -137,34 +137,9 @@ export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
     if (!stationData) return () => {};
     if (!originalStationList) return () => {};
     if (favoriteStation.length < 1) return () => {};
-    const bootStationList = [];
+    const string = getInjectJavascriptAddress(favoriteStation[0][0].StationNumber);
-    Object.keys(originalStationList).forEach((d) => {
+    if (!string) return () => {};
-      let findNearStations = false;
+    webview.current?.injectJavaScript(string);
-      originalStationList[d].forEach((x) => {
-        let lineName = lineList_LineWebID[d];
-        if (findNearStations) {
-          if (x.MyStation){
-            bootStationList.push({ line: lineName, station: x });
-            findNearStations = false;
-          }
-          return;
-        }
-        if (x.StationNumber == favoriteStation[0][0].StationNumber) {
-          console.log(originalStationList[d]);
-          if (!x.MyStation) findNearStations = true;
-          else bootStationList.push({ line: lineName, station: x });
-        }
-      });
-      if (favoriteStation[0].StationNumber == "M12") {
-        bootStationList.push({
-          line: "seto",
-          station: { Station_JP: "児島", MyStation: "0" },
-        });
-      }
-    });
-    webview.current?.injectJavaScript(
-      `MoveDisplayStation('${bootStationList[0].line}_${bootStationList[0].station.MyStation}_${bootStationList[0].station.Station_JP}')`
-    );
     once = true;
   };
 

stateBox/useStationList.tsx

@@ -5,7 +5,11 @@ import React, {
   useEffect,
   FC,
 } from "react";
-import { lineList, getStationList } from "../lib/getStationList";
+import {
+  lineList,
+  getStationList,
+  lineList_LineWebID,
+} from "../lib/getStationList";
 
 type initialStateType = {
   originalStationList: any[][];
@@ -13,6 +17,7 @@ type initialStateType = {
   getStationDataFromName: (id: string) => any[];
   getStationDataFromId: (id: string) => any[];
   stationList: any[];
+  getInjectJavascriptAddress: (StationNumber: string) => string;
 };
 const initialState = {
   originalStationList: [[]],
@@ -20,6 +25,7 @@ const initialState = {
   getStationDataFromName: () => [],
   getStationDataFromId: () => [],
   stationList: [],
+  getInjectJavascriptAddress: (StationNumber: string) => "",
 };
 
 const StationListContext = createContext<initialStateType>(initialState);
@@ -40,7 +46,10 @@ export const StationListProvider: FC<Props> = ({ children }) => {
     Object.keys(originalStationList).forEach((key) => {
       originalStationList[key].forEach((station) => {
         if (station.StationNumber === id) {
-          returnArray = [...returnArray, ...getStationDataFromName(station.Station_JP)];
+          returnArray = [
+            ...returnArray,
+            ...getStationDataFromName(station.Station_JP),
+          ];
         }
       });
     });
@@ -58,21 +67,56 @@ export const StationListProvider: FC<Props> = ({ children }) => {
     return returnArray;
   };
   const [stationList, setStationList] = useState<any[][]>([[]]);
-  useEffect(()=>{
+  useEffect(() => {
-    if(originalStationList.length === 0) return;
+    if (originalStationList.length === 0) return;
-    const stationList =
+    const stationList = lineList.map((d) =>
-      lineList.map((d) =>
+      originalStationList[d].map((a) => ({
-        originalStationList[d].map((a) => ({
+        StationNumber: a.StationNumber,
-          StationNumber: a.StationNumber,
+        StationName: a.Station_JP,
-          StationName: a.Station_JP,
+      }))
-        }))
+    );
-      );
+    setStationList(stationList);
-      setStationList(stationList);
+  }, [originalStationList]);
-  },[originalStationList])
+
+  const getInjectJavascriptAddress = (StationNumber: string) => {
+    const bootStationList = [];
+    Object.keys(originalStationList).forEach((d) => {
+      let findNearStations = false;
+      originalStationList[d].forEach((x) => {
+        let lineName = lineList_LineWebID[d];
+        if (findNearStations) {
+          if (x.MyStation) {
+            bootStationList.push({ line: lineName, station: x });
+            findNearStations = false;
+          }
+          return;
+        }
+        if (x.StationNumber == StationNumber) {
+          console.log(originalStationList[d]);
+          if (!x.MyStation) findNearStations = true;
+          else bootStationList.push({ line: lineName, station: x });
+        }
+      });
+      if (StationNumber == "M12") {
+        bootStationList.push({
+          line: "seto",
+          station: { Station_JP: "児島", MyStation: "0" },
+        });
+      }
+    });
+    return `MoveDisplayStation('${bootStationList[0].line}_${bootStationList[0].station.MyStation}_${bootStationList[0].station.Station_JP}')`;
+  };
 
   return (
     <StationListContext.Provider
-      value={{ originalStationList, setOriginalStationList, getStationDataFromName, getStationDataFromId, stationList }}
+      value={{
+        originalStationList,
+        setOriginalStationList,
+        getStationDataFromName,
+        getStationDataFromId,
+        stationList,
+        getInjectJavascriptAddress,
+      }}
     >
       {children}
     </StationListContext.Provider>