jrshikoku/components/Apps/WebView.jsx

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}
    />
  );
};