Appsの内容分離

2024-08-29 18:08:14 +00:00 · 2024-08-29 18:08:14 +00:00 · 76c8bb8486
commit 76c8bb8486
parent 5373d4f691
8 changed files with 196 additions and 143 deletions
--- a/components/ActionSheetComponents/EachTrainInfo.js
+++ b/components/ActionSheetComponents/EachTrainInfo.js
@ -2,8 +2,8 @@ import React, { useRef } from "react";
 import { Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { EachTrainInfoCore } from "./EachTrainInfoCore";
-export const EachTrainInfo = (props) => {
-  if (!props.payload) return <></>;
+export const EachTrainInfo = ({payload}) => {
+  if (!payload) return <></>;

  const actionSheetRef = useRef(null);
  return (
@ -17,7 +17,7 @@ export const EachTrainInfo = (props) => {

      //useBottomSafeAreaPadding={Platform.OS == "android"}
    >
-      <EachTrainInfoCore {...{ actionSheetRef, ...props.payload }} />
+      <EachTrainInfoCore {...{ actionSheetRef, ...payload }} />
    </ActionSheet>
  );
 };
--- a/components/ActionSheetComponents/EachTrainInfoCore.js
+++ b/components/ActionSheetComponents/EachTrainInfoCore.js
@ -8,7 +8,6 @@ import {
  useWindowDimensions,
  BackHandler,
  Linking,
-  Image,
 } from "react-native";
 import { Ionicons } from "@expo/vector-icons";
 import { SheetManager } from "react-native-actions-sheet";
@ -34,22 +33,22 @@ import { getType } from "../../lib/eachTrainInfoCoreLib/getType";
 import { searchSpecialTrain } from "../../lib/eachTrainInfoCoreLib/searchSpecialTrain";
 import { openBackTrainInfo } from "../../lib/eachTrainInfoCoreLib/openBackTrainInfo";
 import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
-import { useNavigation } from "@react-navigation/native";
-import { useInterval } from "../../lib/useInterval";
-import dayjs from "dayjs";
 import { TrainIconStatus } from "./EachTrainInfo/trainIconStatus";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";

 export const EachTrainInfoCore = ({
  actionSheetRef,
  data,
-  originalStationList,
  openStationACFromEachTrainInfo,
  from,
-  setTrainInfo,
  navigate,
 }) => {
  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
  const { currentTrain } = useCurrentTrain();
+  const {
+    setTrainInfo,
+    originalStationList,
+  } = useTrainMenu();
  const [currentTrainData, setCurrentTrainData] = useState();

  // const [actionSheetHorizonalScroll, setActionSheetHorizonalScroll] = useState(false);
@ -96,7 +95,7 @@ export const EachTrainInfoCore = ({
    );

  // 使用例
-  const stopStationIDList = trainData.map((i, index) => {
+  const stopStationIDList = trainData.map((i) => {
    const [station, se, time] = i.split(",");
    const Stations = stationList.map((a) =>
      a.filter((d) => d.StationName == station)
@ -137,7 +136,7 @@ export const EachTrainInfoCore = ({
    }
  }, [data.limited, trainData]);

-  const { height, width } = useWindowDimensions();
+  const { height } = useWindowDimensions();
  const { isLandscape } = useDeviceOrientationChange();

  const [trueTrainID, setTrueTrainID] = useState();
@ -222,7 +221,7 @@ export const EachTrainInfoCore = ({
      .then((d) => {
        if (d) setTrainPositionSwitch(d);
      })
-      .catch((d) => AS.setItem("trainPositionSwitch", "false"));
+      .catch(() => AS.setItem("trainPositionSwitch", "false"));
  }, []);

  const openTrainInfo = (d) => {
--- a/components/Apps.js
+++ b/components/Apps.js
@ -22,6 +22,9 @@ import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { AppsWebView } from "./Apps/WebView";
 import { NewMenu } from "./Apps/NewMenu";
+import { MapsButton } from "./Apps/MapsButton";
+import { ReloadButton } from "./Apps/ReloadButton";
+import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@ -34,15 +37,13 @@ export default function Apps() {
  const { navigate } = useNavigation();
  const { isLandscape } = useDeviceOrientationChange();
  const handleLayout = () => {};
-  const { setInjectJavaScript, mapsStationData,
+  const {
+    setInjectJavaScript,
    mapSwitch,
-    LoadError,
-    setLoadError,
    trainInfo,
    setTrainInfo,
    originalStationList,
-    injectJavascript, } = useTrainMenu();
-
+  } = useTrainMenu();

  const openStationACFromEachTrainInfo = async (stationName) => {
    await SheetManager.hide("EachTrainInfo");
@ -82,9 +83,6 @@ export default function Apps() {
    >
      {!trainInfo.trainNum && isLandscape ? (
        <TrainMenu
-          webview={webview}
-          stationData={mapsStationData}
-          navigation={{ navigate: null }}
          style={{
            width: (width / 100) * 40,
            height: "100%",
@ -95,11 +93,7 @@ export default function Apps() {
      {/* {Status} */}
      <AppsWebView
        {...{
-          originalStationList,
-          setLoadError,
-          setTrainInfo,
          openStationACFromEachTrainInfo,
-          injectJavascript,
        }}
      />
      {isLandscape && trainInfo.trainNum && (
@ -113,10 +107,8 @@ export default function Apps() {
          <EachTrainInfoCore
            {...{
              data: trainInfo.trainNum ? trainInfo : undefined,
-              originalStationList,
              openStationACFromEachTrainInfo,
              from: "Train",
-              setTrainInfo,
              navigate,
            }}
          />
@ -128,7 +120,6 @@ export default function Apps() {
            setInjectJavaScript("");
            navigate("trainMenu", { webview });
          }}
-          mapSwitch={mapSwitch == "true" ? "flex" : "none"}
        />
      )}
      {isLandscape && trainInfo.trainNum && (
@ -147,119 +138,13 @@ export default function Apps() {
        <ReloadButton
          onPress={() => Updates.reloadAsync()}
          right={isLandscape && trainInfo.trainNum ? (width / 100) * 40 : 0}
-          LoadError={LoadError}
        />
      ) : (
-        <NewMenu LoadError={LoadError} />
+        <NewMenu />
      )}
    </View>
  );
 }

-const MapsButton = ({ onPress, mapSwitch }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      top,
-      left: 10,
-      width: 50,
-      height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-      fontSize: 20,
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Text style={styles.text}>≡</Text>
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};

-const LandscapeBackButton = ({ onPress }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      left: 10,
-      width: 50,
-      height: 50,
-      backgroundColor: "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: "flex",
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Ionicons name="arrow-back" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};

-const ReloadButton = ({ onPress, mapSwitch, LoadError = false, right }) => {
-  const styles = {
-    touch: {
-      position: "absolute",
-      top,
-      right: 10 + right,
-      width: 50,
-      height: 50,
-      backgroundColor: LoadError ? "red" : "#0099CC",
-      borderColor: "white",
-      borderStyle: "solid",
-      borderWidth: 1,
-      borderRadius: 50,
-      alignContent: "center",
-      alignSelf: "center",
-      alignItems: "center",
-      display: mapSwitch,
-    },
-    text: {
-      textAlign: "center",
-      width: "auto",
-      height: "auto",
-      textAlignVertical: "center",
-      fontWeight: "bold",
-      color: "white",
-    },
-  };
-  return (
-    <TouchableOpacity onPress={onPress} style={styles.touch}>
-      <View style={{ flex: 1 }} />
-      <Ionicons name="reload" color="white" size={30} />
-      <View style={{ flex: 1 }} />
-    </TouchableOpacity>
-  );
-};
--- a/components/Apps/LandscapeBackButton.tsx
+++ b/components/Apps/LandscapeBackButton.tsx
@ -0,0 +1,50 @@
+import React, { FC } from "react";
+import {
+  View,
+  TouchableOpacity,
+  TouchableOpacityProps,
+  TextStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import Constants from "expo-constants";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+export const LandscapeBackButton: FC<{
+  onPress: () => void;
+}> = ({ onPress }) => {
+  type stylesType = {
+    touch: TouchableOpacityProps["style"];
+    text: TextStyle;
+  };
+  const styles: stylesType = {
+    touch: {
+      position: "absolute",
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: "flex",
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="arrow-back" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
--- a/components/Apps/MapsButton.tsx
+++ b/components/Apps/MapsButton.tsx
@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  Platform,
+  TouchableOpacityProps,
+  TextStyle,
+} from "react-native";
+import Constants from "expo-constants";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+
+const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
+type MapsButtonProps = {
+  onPress: () => void;
+};
+type stylesType = {
+  touch: TouchableOpacityProps["style"];
+  text: TextStyle;
+};
+
+export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
+  const { mapSwitch } = useTrainMenu();
+  const styles: stylesType = {
+    touch: {
+      position: "absolute",
+      top,
+      left: 10,
+      width: 50,
+      height: 50,
+      backgroundColor: "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch == "true" ? "flex" : "none",
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+      fontSize: 20,
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Text style={styles.text}>≡</Text>
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
--- a/components/Apps/NewMenu.tsx
+++ b/components/Apps/NewMenu.tsx
@ -4,11 +4,13 @@ import { Ionicons } from "@expo/vector-icons";
 import * as Updates from "expo-updates";
 import Constants from "expo-constants";
 import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";

 const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
-export const NewMenu = ({ LoadError }) => {
+export const NewMenu = () => {
    const { webview } = useCurrentTrain();
    const { width } = useWindowDimensions();
+    const { LoadError } = useTrainMenu();
    return (
      <View
        style={{
--- a/components/Apps/ReloadButton.tsx
+++ b/components/Apps/ReloadButton.tsx
@ -0,0 +1,58 @@
+import React, { FC } from "react";
+import {
+  View,
+  TouchableOpacity,
+  Platform,
+  TouchableOpacityProps,
+  TextStyle,
+} from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import Constants from "expo-constants";
+import { useTrainMenu } from "../../stateBox/useTrainMenu";
+const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
+
+type stylesType = {
+  touch: TouchableOpacityProps["style"];
+  text: TextStyle;
+};
+type ReloadButton = {
+    onPress: () => void;
+    right: number;
+    
+}
+export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
+  const { mapSwitch, LoadError = false } = useTrainMenu();
+  const styles: stylesType = {
+    touch: {
+      position: "absolute",
+      top,
+      right: 10 + right,
+      width: 50,
+      height: 50,
+      backgroundColor: LoadError ? "red" : "#0099CC",
+      borderColor: "white",
+      borderStyle: "solid",
+      borderWidth: 1,
+      borderRadius: 50,
+      alignContent: "center",
+      alignSelf: "center",
+      alignItems: "center",
+      display: mapSwitch,
+    },
+    text: {
+      textAlign: "center",
+      width: "auto",
+      height: "auto",
+      textAlignVertical: "center",
+      fontWeight: "bold",
+      color: "white",
+    },
+  };
+  return (
+    <TouchableOpacity onPress={onPress} style={styles.touch}>
+      <View style={{ flex: 1 }} />
+      <Ionicons name="reload" color="white" size={30} />
+      <View style={{ flex: 1 }} />
+    </TouchableOpacity>
+  );
+};
--- a/components/Apps/WebView.jsx
+++ b/components/Apps/WebView.jsx
@ -12,18 +12,19 @@ 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,
-  setLoadError,
-  setTrainInfo,
-  openStationACFromEachTrainInfo,
-  injectJavascript,
-}) => {
+export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
  const { webview, currentTrain } = useCurrentTrain();
  const { navigate } = useNavigation();
  const { favoriteStation } = useFavoriteStation();
  const { isLandscape } = useDeviceOrientationChange();
-  const { setSelectedLine, mapsStationData: stationData } = useTrainMenu();
+  const {
+    setSelectedLine,
+    mapsStationData: stationData,
+    setLoadError,
+    setTrainInfo,
+    originalStationList,
+    injectJavascript,
+  } = useTrainMenu();
  var urlcache = "";
  let once = false;