データ分離

Top.js

@@ -21,19 +21,14 @@ export const Top = ({ navigationRef }) => {
   const { navigate, addListener } = useNavigation();
 
   //地図用
-  const { setMapsStationData, injectJavaScript, setInjectJavaScript } =
+  const { injectJavaScript, setInjectJavaScript } = useTrainMenu();
-    useTrainMenu();
 
-  useEffect(() => {
+  const [mapSwitch, setMapSwitch] = useState("false");
-    getStationList2().then(setMapsStationData);
-  }, []);
-  const [mapSwitch, setMapSwitch] = React.useState("false");
   useEffect(() => {
     //地図スイッチ
     ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
   }, []);
 
-
   const goToFavoriteList = () => navigate("favoriteList");
 
   useEffect(() => {
@@ -41,7 +36,6 @@ export const Top = ({ navigationRef }) => {
     return unsubscribe;
   }, [{ navigate, addListener }]);
 
-
   const goToTrainMenu = () => {
     if (navigationRef.current?.getCurrentRoute().name == "Apps") {
       if (mapSwitch == "true") {

components/Apps.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import {
   View,
   Platform,
@@ -11,10 +11,7 @@ import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
 import * as Updates from "expo-updates";
 
-import { AS, ASCore } from "../storageControl";
+import { lineList } from "../lib/getStationList";
-import { news } from "../config/newsUpdate";
-import { getStationList, lineList } from "../lib/getStationList";
-import { injectJavascriptData } from "../lib/webViewInjectjavascript";
 import { useCurrentTrain } from "../stateBox/useCurrentTrain";
 import { useDeviceOrientationChange } from "../stateBox/useDeviceOrientationChange";
 import { SheetManager } from "react-native-actions-sheet";
@@ -24,6 +21,7 @@ import { EachTrainInfoCore } from "../components/ActionSheetComponents/EachTrain
 import { useNavigation } from "@react-navigation/native";
 import { useTrainMenu } from "../stateBox/useTrainMenu";
 import { AppsWebView } from "./Apps/WebView";
+import { NewMenu } from "./Apps/NewMenu";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -36,53 +34,15 @@ export default function Apps() {
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  const { setInjectJavaScript, mapsStationData } = useTrainMenu();
+  const { setInjectJavaScript, mapsStationData,
-
-  //画面表示関連
-  const [iconSetting, setIconSetting] = useState(undefined);
-  const [mapSwitch, setMapSwitch] = useState(undefined);
-  const [stationMenu, setStationMenu] = useState(undefined);
-  const [LoadError, setLoadError] = useState(false);
-
-  //列車情報表示関連
-  const [trainInfo, setTrainInfo] = useState({
-    trainNum: undefined,
-    limited: undefined,
-    trainData: undefined,
-  });
-
-  //駅情報画面用
-  const [originalStationList, setOriginalStationList] = useState();
-  const [trainMenu, setTrainMenu] = useState("true");
-  useEffect(() => getStationList().then(setOriginalStationList), []);
-
-  //地図表示テキスト
-  const injectJavascript = injectJavascriptData(
     mapSwitch,
-    iconSetting,
+    LoadError,
-    stationMenu,
+    setLoadError,
-    trainMenu
+    trainInfo,
-  );
+    setTrainInfo,
+    originalStationList,
+    injectJavascript, } = useTrainMenu();
 
-  useEffect(() => {
-    //ニュース表示
-    AS.getItem("status")
-      .then((d) => {
-        if (d != news) navigate("news");
-      })
-      .catch(() => navigate("news"));
-  }, []);
-
-  useEffect(() => {
-    //列車アイコンスイッチ
-    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
-    //地図スイッチ
-    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
-    //駅メニュースイッチ
-    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
-    //列車メニュースイッチ
-    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
-  }, []);
 
   const openStationACFromEachTrainInfo = async (stationName) => {
     await SheetManager.hide("EachTrainInfo");
@@ -100,8 +60,8 @@ export default function Apps() {
     if (returnDataBase.length) {
       const payload = {
         currentStation: returnDataBase,
-        originalStationList: originalStationList,
+        originalStationList,
-        navigate: navigate,
+        navigate,
         goTo: "Apps",
         useShow: () => SheetManager.show("StationDetailView", { payload }),
         onExit: () => SheetManager.hide("StationDetailView"),
@@ -134,8 +94,8 @@ export default function Apps() {
       ) : null}
       {/* {Status} */}
       <AppsWebView
-        originalStationList={originalStationList}
         {...{
+          originalStationList,
           setLoadError,
           setTrainInfo,
           openStationACFromEachTrainInfo,
@@ -195,90 +155,7 @@ export default function Apps() {
     </View>
   );
 }
-const NewMenu = ({ LoadError }) => {
-  const { webview } = useCurrentTrain();
-  const { width } = useWindowDimensions();
-  return (
-    <View
-      style={{
-        position: "absolute",
-        top,
-        width,
-        height: 54,
-        backgroundColor: "#0099CC",
-        borderColor: "white",
-        borderStyle: "solid",
-        borderWidth: 1,
-        alignContent: "center",
-        alignSelf: "center",
-        alignItems: "center",
-        flexDirection: "row",
-      }}
-    >
-      <TouchableOpacity
-        activeOpacity={1}
-        style={{
-          flex: 1,
-          height: 54,
-          backgroundColor: "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          borderRightWidth: 0,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-          flexDirection: "row",
-        }}
-        onPress={() => {
-          webview.current?.injectJavaScript(`AccordionClassEvent()`);
-        }}
-      >
-        <>
-          <View
-            style={{
-              width: 54,
-              height: 54,
-              backgroundColor: "#0099CC",
-              borderColor: "white",
-              borderStyle: "solid",
-              borderWidth: 1,
-              alignContent: "center",
-              alignSelf: "center",
-              alignItems: "center",
-            }}
-          >
-            <View style={{ flex: 1 }} />
-            <Ionicons name="menu" color="white" size={30} />
-            <View style={{ flex: 1 }} />
-          </View>
-          <View style={{ flex: 1 }} />
-          <Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
-          <View style={{ flex: 1 }}></View>
-        </>
-      </TouchableOpacity>
 
-      <TouchableOpacity
-        onPress={() => Updates.reloadAsync()}
-        style={{
-          width: 54,
-          height: 54,
-          backgroundColor: LoadError ? "red" : "#0099CC",
-          borderColor: "white",
-          borderStyle: "solid",
-          borderWidth: 1,
-          alignContent: "center",
-          alignSelf: "center",
-          alignItems: "center",
-        }}
-      >
-        <View style={{ flex: 1 }} />
-        <Ionicons name="reload" color="white" size={30} />
-        <View style={{ flex: 1 }} />
-      </TouchableOpacity>
-    </View>
-  );
-};
 const MapsButton = ({ onPress, mapSwitch }) => {
   const styles = {
     touch: {

components/Apps/NewMenu.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import { View, Text, TouchableOpacity, useWindowDimensions, Platform } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import * as Updates from "expo-updates";
+import Constants from "expo-constants";
+import { useCurrentTrain } from "../../stateBox/useCurrentTrain";
+
+const top = Platform.OS == "ios" ? Constants.statusBarHeight : 0;
+export const NewMenu = ({ LoadError }) => {
+    const { webview } = useCurrentTrain();
+    const { width } = useWindowDimensions();
+    return (
+      <View
+        style={{
+          position: "absolute",
+          top,
+          width,
+          height: 54,
+          backgroundColor: "#0099CC",
+          borderColor: "white",
+          borderStyle: "solid",
+          borderWidth: 1,
+          alignContent: "center",
+          alignSelf: "center",
+          alignItems: "center",
+          flexDirection: "row",
+        }}
+      >
+        <TouchableOpacity
+          activeOpacity={1}
+          style={{
+            flex: 1,
+            height: 54,
+            backgroundColor: "#0099CC",
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: 1,
+            borderRightWidth: 0,
+            alignContent: "center",
+            alignSelf: "center",
+            alignItems: "center",
+            flexDirection: "row",
+          }}
+          onPress={() => {
+            webview.current?.injectJavaScript(`AccordionClassEvent()`);
+          }}
+        >
+          <>
+            <View
+              style={{
+                width: 54,
+                height: 54,
+                backgroundColor: "#0099CC",
+                borderColor: "white",
+                borderStyle: "solid",
+                borderWidth: 1,
+                alignContent: "center",
+                alignSelf: "center",
+                alignItems: "center",
+              }}
+            >
+              <View style={{ flex: 1 }} />
+              <Ionicons name="menu" color="white" size={30} />
+              <View style={{ flex: 1 }} />
+            </View>
+            <View style={{ flex: 1 }} />
+            <Text style={{ color: "white", fontSize: 20 }}>メニュー</Text>
+            <View style={{ flex: 1 }}></View>
+          </>
+        </TouchableOpacity>
+  
+        <TouchableOpacity
+          onPress={() => Updates.reloadAsync()}
+          style={{
+            width: 54,
+            height: 54,
+            backgroundColor: LoadError ? "red" : "#0099CC",
+            borderColor: "white",
+            borderStyle: "solid",
+            borderWidth: 1,
+            alignContent: "center",
+            alignSelf: "center",
+            alignItems: "center",
+          }}
+        >
+          <View style={{ flex: 1 }} />
+          <Ionicons name="reload" color="white" size={30} />
+          <View style={{ flex: 1 }} />
+        </TouchableOpacity>
+      </View>
+    );
+  };

stateBox/useTrainMenu.js

@@ -1,4 +1,11 @@
-import React, { createContext, useContext, useState } from "react";
+import React, { createContext, useContext, useState, useEffect } from "react";
+
+import { AS, ASCore } from "../storageControl";
+
+import { getStationList } from "../lib/getStationList";
+import { getStationList2 } from "../lib/getStationList2";
+import { injectJavascriptData } from "../lib/webViewInjectjavascript";
+
 const initialState = {
   selectedLine: undefined,
   setSelectedLine: () => {},
@@ -6,6 +13,25 @@ const initialState = {
   setMapsStationData: () => {},
   injectJavaScript: "",
   setInjectJavaScript: () => {},
+  iconSetting: undefined,
+  setIconSetting: () => {},
+  mapSwitch: undefined,
+  setMapSwitch: () => {},
+  stationMenu: undefined,
+  setStationMenu: () => {},
+  LoadError: false,
+  setLoadError: () => {},
+  trainInfo: {
+    trainNum: undefined,
+    limited: undefined,
+    trainData: undefined,
+  },
+  setTrainInfo: () => {},
+  originalStationList: undefined,
+  setOriginalStationList: () => {},
+  trainMenu: "true",
+  setTrainMenu: () => {},
+  injectJavascript: "",
 };
 
 const TrainMenuContext = createContext(initialState);
@@ -19,6 +45,54 @@ export const TrainMenuProvider = ({ children }) => {
   const [mapsStationData, setMapsStationData] = useState(undefined);
   const [injectJavaScript, setInjectJavaScript] = useState();
 
+  useEffect(() => getStationList2().then(setMapsStationData), []);
+
+  //画面表示関連
+  const [iconSetting, setIconSetting] = useState(undefined);
+  const [mapSwitch, setMapSwitch] = useState(undefined);
+  const [stationMenu, setStationMenu] = useState(undefined);
+  const [LoadError, setLoadError] = useState(false);
+
+  //列車情報表示関連
+  const [trainInfo, setTrainInfo] = useState({
+    trainNum: undefined,
+    limited: undefined,
+    trainData: undefined,
+  });
+
+  //駅情報画面用
+  const [originalStationList, setOriginalStationList] = useState();
+  const [trainMenu, setTrainMenu] = useState("true");
+  useEffect(() => getStationList().then(setOriginalStationList), []);
+
+  //地図表示テキスト
+  const injectJavascript = injectJavascriptData(
+    mapSwitch,
+    iconSetting,
+    stationMenu,
+    trainMenu
+  );
+
+  useEffect(() => {
+    //ニュース表示
+    AS.getItem("status")
+      .then((d) => {
+        if (d != news) navigate("news");
+      })
+      .catch(() => navigate("news"));
+  }, []);
+
+  useEffect(() => {
+    //列車アイコンスイッチ
+    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
+    //地図スイッチ
+    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
+    //駅メニュースイッチ
+    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
+    //列車メニュースイッチ
+    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
+  }, []);
+
   return (
     <TrainMenuContext.Provider
       value={{
@@ -28,6 +102,22 @@ export const TrainMenuProvider = ({ children }) => {
         setMapsStationData,
         injectJavaScript,
         setInjectJavaScript,
+
+        iconSetting,
+        setIconSetting,
+        mapSwitch,
+        setMapSwitch,
+        stationMenu,
+        setStationMenu,
+        LoadError,
+        setLoadError,
+        trainInfo,
+        setTrainInfo,
+        originalStationList,
+        setOriginalStationList,
+        trainMenu,
+        setTrainMenu,
+        injectJavascript,
       }}
     >
       {children}