webviewの分離化

components/Apps.js

@@ -7,17 +7,14 @@ import {
   useWindowDimensions,
   LayoutAnimation,
 } from "react-native";
-import { WebView } from "react-native-webview";
 import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
 import * as Updates from "expo-updates";
 
 import { AS } from "../storageControl";
 import { news } from "../config/newsUpdate";
-import { getStationList, lineList, lineListPair } from "../lib/getStationList";
+import { getStationList, lineList } from "../lib/getStationList";
 import { injectJavascriptData } from "../lib/webViewInjectjavascript";
-import { checkDuplicateTrainData } from "../lib/checkDuplicateTrainData";
-import { useFavoriteStation } from "../stateBox/useFavoriteStation";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
 import { SheetManager } from "react-native-actions-sheet";
@@ -26,24 +23,18 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain
 
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
-import { stationNamePair } from "../lib/getStationList2";
+import { AppsWebView } from "./Apps/WebView";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
 
 export default function Apps() {
-  const { webview, currentTrain } = useCurrentTrain();
+  const { webview } = useCurrentTrain();
   const { height, width } = useWindowDimensions();
   const { navigate } = useNavigation();
-  var urlcache = "";
+  const { isLandscape } = useDeviceOrientationChange();
-  const { favoriteStation } = useFavoriteStation();
-  const { isLandscape, setIsLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  const {
+  const { setInjectJavaScript, mapsStationData: stationData } = useTrainMenu();
-    setSelectedLine,
-    setInjectJavaScript,
-    mapsStationData: stationData,
-  } = useTrainMenu();
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -61,7 +52,6 @@ export default function Apps() {
   //駅情報画面用
   const [originalStationList, setOriginalStationList] = useState();
   const [trainMenu, setTrainMenu] = useState("true");
-  let once = false;
   useEffect(() => {
     getStationList().then(setOriginalStationList);
   }, []);
@@ -98,130 +88,6 @@ export default function Apps() {
     ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" });
   }, []);
 
-  const onMessage = (event) => {
-    const { data } = event.nativeEvent;
-    if (data.includes("train.html")) {
-      navigate("trainbase", { info: data, from: "Train" });
-      return;
-    }
-    if (!originalStationList) {
-      alert("駅名標データを取得中...");
-      return;
-    }
-    const dataSet = JSON.parse(data);
-    switch (dataSet.type) {
-      case "LoadError": {
-        setLoadError(true);
-        return;
-      }
-      case "PopUpMenu":
-        {
-          const selectedStationPDFAddress = dataSet.pdf;
-          const findStationEachLine = (selectLine) =>
-            selectLine.filter(
-              (d) => d.StationTimeTable == selectedStationPDFAddress
-            );
-          let returnDataBase = lineList
-            .map((d) => findStationEachLine(originalStationList[d]))
-            .filter((d) => d.length > 0)
-            .reduce((pre, current) => {
-              pre.push(...current);
-              return pre;
-            }, []);
-
-          if (returnDataBase.length) {
-            const payload = {
-              currentStation: returnDataBase,
-              originalStationList: originalStationList,
-              navigate: navigate,
-              goTo: "Apps",
-              useShow: () =>
-                SheetManager.show("StationDetailView", {
-                  payload,
-                }),
-              onExit: () => SheetManager.hide("StationDetailView"),
-            };
-            SheetManager.show("StationDetailView", { payload });
-          }
-        }
-        return;
-      case "ShowTrainTimeInfo": {
-        const { trainNum, limited } = dataSet;
-        //alert(trainNum, limited);
-        LayoutAnimation.easeInEaseOut();
-        setTrainInfo({
-          trainNum,
-          limited,
-          trainData: checkDuplicateTrainData(
-            currentTrain.filter((a) => a.num == trainNum)
-          ),
-        }); //遅延情報は未実装
-        if (isLandscape) return;
-        const payload = {
-          data: {
-            trainNum,
-            limited,
-          },
-          navigate,
-          originalStationList,
-          openStationACFromEachTrainInfo,
-        };
-        SheetManager.show("EachTrainInfo", {
-          payload,
-        });
-        return;
-      }
-      case "currentLines": {
-        const lineInfo = dataSet.currentLines.split("\n")[0];
-        const lineID = stationNamePair[lineInfo];
-
-        setSelectedLine(lineID);
-        return;
-      }
-      default: {
-        return;
-      }
-    }
-  };
-
-  const onNavigationStateChange = (event) => {
-    if (event.url != urlcache) {
-      //URL二重判定回避
-      urlcache = event.url;
-
-      if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
-        if (Platform.OS === "android") navigate("howto", { info: event.url });
-        webview?.current.goBack();
-        //Actions.howto();
-      } else if (
-        event.url.includes("https://train.jr-shikoku.co.jp/train.html")
-      ) {
-        //Actions.trainbase({info: event.url});
-        if (Platform.OS === "android")
-          navigate("trainbase", { info: event.url });
-        webview?.current.goBack();
-      }
-    }
-  };
-  function sleep(waitSec, callbackFunc) {
-    // 経過時間（秒）
-    var spanedSec = 0;
-
-    // 1秒間隔で無名関数を実行
-    var id = setInterval(function () {
-      spanedSec++;
-
-      // 経過時間 >= 待機時間の場合、待機終了。
-      if (spanedSec >= waitSec) {
-        // タイマー停止
-        clearInterval(id);
-
-        // 完了時、コールバック関数を実行
-        if (callbackFunc) callbackFunc();
-      }
-    }, 1);
-  }
-
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");
     const findStationEachLine = (selectLine) => {
@@ -271,41 +137,12 @@ export default function Apps() {
         />
       ) : null}
       {/* {Status} */}
-      <WebView
+      <AppsWebView
-        useWebKit
+        originalStationList={originalStationList}
-        ref={webview}
+        loadErrorStatus={{ LoadError, setLoadError }}
-        source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
+        trainInfoStatus={{ trainInfo, setTrainInfo }}
-        originWhitelist={[
+        openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
-          "https://train.jr-shikoku.co.jp",
+        injectJavascript={injectJavascript}
-          "https://train.jr-shikoku.co.jp/sp.html",
-        ]}
-        mixedContentMode={"compatibility"}
-        javaScriptEnabled
-        allowsBackForwardNavigationGestures
-        setSupportMultipleWindows
-        onNavigationStateChange={onNavigationStateChange}
-        onMessage={onMessage}
-        injectedJavaScript={injectJavascript}
-        onLoadEnd={() => {
-          if (once) return () => {};
-          if (!stationData) return () => {};
-          if (favoriteStation.length > 0) {
-            const getStationLine = (now) => {
-              const returnData = Object.keys(stationData).filter((d) => {
-                const cache = stationData[d].findIndex(
-                  (data) => data.Station_JP == now.Station_JP
-                );
-                return cache != -1;
-              });
-              return returnData[0];
-            };
-            const lineName = getStationLine(favoriteStation[0][0]);
-            webview.current?.injectJavaScript(
-              `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')`
-            );
-            once = true;
-          }
-        }}
       />
       {isLandscape && trainInfo.trainNum && (
         <View

components/Apps/WebView.jsx

@@ -0,0 +1,178 @@
+import React from "react";
+import { Platform, LayoutAnimation } from "react-native";
+import { WebView } from "react-native-webview";
+
+import { lineList } from "../../lib/getStationList";
+import { checkDuplicateTrainData } from "../../lib/checkDuplicateTrainData";
+import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { useDeviceOrientationChange } from "../../stateBox/useDeviceOrientationChange";
+import { SheetManager } from "react-native-actions-sheet";
+
+import { useNavigation } from "@react-navigation/native";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+import { stationNamePair } from "../../lib/getStationList2";
+export const AppsWebView = ({
+  originalStationList,
+  loadErrorStatus,
+  trainInfoStatus,
+  openStationACFromEachTrainInfo,
+  injectJavascript,
+}) => {
+  const { setLoadError } = loadErrorStatus;
+  const { setTrainInfo } = trainInfoStatus;
+  const { webview, currentTrain } = useCurrentTrain();
+  const { navigate } = useNavigation();
+  const { favoriteStation } = useFavoriteStation();
+  const { isLandscape } = useDeviceOrientationChange();
+  var urlcache = "";
+  let once = false;
+  const { setSelectedLine, mapsStationData: stationData } = useTrainMenu();
+
+  const onNavigationStateChange = (event) => {
+    if (event.url != urlcache) {
+      //URL二重判定回避
+      urlcache = event.url;
+
+      if (event.url.includes("https://train.jr-shikoku.co.jp/usage.htm")) {
+        if (Platform.OS === "android") navigate("howto", { info: event.url });
+        webview?.current.goBack();
+        //Actions.howto();
+      } else if (
+        event.url.includes("https://train.jr-shikoku.co.jp/train.html")
+      ) {
+        //Actions.trainbase({info: event.url});
+        if (Platform.OS === "android")
+          navigate("trainbase", { info: event.url });
+        webview?.current.goBack();
+      }
+    }
+  };
+
+  const onMessage = (event) => {
+    const { data } = event.nativeEvent;
+    if (data.includes("train.html")) {
+      navigate("trainbase", { info: data, from: "Train" });
+      return;
+    }
+    if (!originalStationList) {
+      alert("駅名標データを取得中...");
+      return;
+    }
+    const dataSet = JSON.parse(data);
+    switch (dataSet.type) {
+      case "LoadError": {
+        setLoadError(true);
+        return;
+      }
+      case "PopUpMenu":
+        {
+          const selectedStationPDFAddress = dataSet.pdf;
+          const findStationEachLine = (selectLine) =>
+            selectLine.filter(
+              (d) => d.StationTimeTable == selectedStationPDFAddress
+            );
+          let returnDataBase = lineList
+            .map((d) => findStationEachLine(originalStationList[d]))
+            .filter((d) => d.length > 0)
+            .reduce((pre, current) => {
+              pre.push(...current);
+              return pre;
+            }, []);
+
+          if (returnDataBase.length) {
+            const payload = {
+              currentStation: returnDataBase,
+              originalStationList: originalStationList,
+              navigate: navigate,
+              goTo: "Apps",
+              useShow: () =>
+                SheetManager.show("StationDetailView", {
+                  payload,
+                }),
+              onExit: () => SheetManager.hide("StationDetailView"),
+            };
+            SheetManager.show("StationDetailView", { payload });
+          }
+        }
+        return;
+      case "ShowTrainTimeInfo": {
+        const { trainNum, limited } = dataSet;
+        //alert(trainNum, limited);
+        LayoutAnimation.easeInEaseOut();
+        setTrainInfo({
+          trainNum,
+          limited,
+          trainData: checkDuplicateTrainData(
+            currentTrain.filter((a) => a.num == trainNum)
+          ),
+        }); //遅延情報は未実装
+        if (isLandscape) return;
+        const payload = {
+          data: {
+            trainNum,
+            limited,
+          },
+          navigate,
+          originalStationList,
+          openStationACFromEachTrainInfo,
+        };
+        SheetManager.show("EachTrainInfo", {
+          payload,
+        });
+        return;
+      }
+      case "currentLines": {
+        const lineInfo = dataSet.currentLines.split("\n")[0];
+        const lineID = stationNamePair[lineInfo];
+
+        setSelectedLine(lineID);
+        return;
+      }
+      default: {
+        return;
+      }
+    }
+  };
+
+  const onLoadEnd = () => {
+    if (once) return () => {};
+    if (!stationData) return () => {};
+    if (favoriteStation.length > 0) {
+      const getStationLine = (now) => {
+        const returnData = Object.keys(stationData).filter((d) => {
+          const cache = stationData[d].findIndex(
+            (data) => data.Station_JP == now.Station_JP
+          );
+          return cache != -1;
+        });
+        return returnData[0];
+      };
+      const lineName = getStationLine(favoriteStation[0][0]);
+      webview.current?.injectJavaScript(
+        `MoveDisplayStation('${lineName}_${favoriteStation[0][0].MyStation}_${favoriteStation[0][0].Station_JP}')`
+      );
+      once = true;
+    }
+  };
+
+  return (
+    <WebView
+      useWebKit
+      ref={webview}
+      source={{ uri: "https://train.jr-shikoku.co.jp/sp.html" }}
+      originWhitelist={[
+        "https://train.jr-shikoku.co.jp",
+        "https://train.jr-shikoku.co.jp/sp.html",
+      ]}
+      mixedContentMode={"compatibility"}
+      javaScriptEnabled
+      allowsBackForwardNavigationGestures
+      setSupportMultipleWindows
+      onNavigationStateChange={onNavigationStateChange}
+      onMessage={onMessage}
+      injectedJavaScript={injectJavascript}
+      onLoadEnd={onLoadEnd}
+    />
+  );
+};