Appsの内容分離

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) => {
+export const EachTrainInfo = ({payload}) => {
-  if (!props.payload) return <></>;
+  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>
   );
 };

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) => {

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

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

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

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={{

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

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 = ({
+export const AppsWebView = ({ openStationACFromEachTrainInfo }) => {
-  originalStationList,
-  setLoadError,
-  setTrainInfo,
-  openStationACFromEachTrainInfo,
-  injectJavascript,
-}) => {
   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;