Merge commit '229a7ffe5e95c8ca73bd6a3c48cc917efda1e6b4' into develop

App.js

@@ -1,17 +1,12 @@
 import React, { useEffect } from "react";
-import { NavigationContainer } from "@react-navigation/native";
-import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
 import { Platform, UIManager } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { AppContainer } from "./Apps.js";
 import { UpdateAsync } from "./UpdateAsync.js";
-import TNDView from "./ndView";
 import { LogBox } from "react-native";
-import { initIcon } from "./lib/initIcon";
 import { FavoriteStationProvider } from "./stateBox/useFavoriteStation";
-import { Top } from "./Top.js";
-import { MenuPage } from "./MenuPage.js";
 import { CurrentTrainProvider } from "./stateBox/useCurrentTrain.js";
-import { useAreaInfo, AreaInfoProvider } from "./stateBox/useAreaInfo.js";
+import { AreaInfoProvider } from "./stateBox/useAreaInfo.js";
 import { BusAndTrainDataProvider } from "./stateBox/useBusAndTrainData.js";
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
 import { SheetProvider } from "react-native-actions-sheet";
@@ -20,11 +15,13 @@ import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
 import { SafeAreaProvider } from "react-native-safe-area-context";
 import { DeviceOrientationChangeProvider } from "./stateBox/useDeviceOrientationChange.js";
 import { TrainMenuProvider } from "./stateBox/useTrainMenu.js";
+import { buildProvidersTree } from "./lib/providerTreeProvider.js";
+
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
   "ColorPropType will be removed",
 ]);
-const Tab = createBottomTabNavigator();
+
 if (Platform.OS === "android") {
   if (UIManager.setLayoutAnimationEnabledExperimental) {
     UIManager.setLayoutAnimationEnabledExperimental(true);
@@ -33,77 +30,25 @@ if (Platform.OS === "android") {
 
 export default function App() {
   useEffect(() => UpdateAsync(), []);
+
+  const ProviderTree = buildProvidersTree([
+    FavoriteStationProvider,
+    TrainDelayDataProvider,
+    CurrentTrainProvider,
+    AreaInfoProvider,
+    AllTrainDiagramProvider,
+    BusAndTrainDataProvider,
+    TrainMenuProvider,
+    SheetProvider,
+    AppContainer,
+  ]);
   return (
     <DeviceOrientationChangeProvider>
       <SafeAreaProvider>
         <GestureHandlerRootView style={{ flex: 1 }}>
-          <FavoriteStationProvider>
+          <ProviderTree />
-            <TrainDelayDataProvider>
-              <CurrentTrainProvider>
-                <AreaInfoProvider>
-                  <AllTrainDiagramProvider>
-                    <BusAndTrainDataProvider>
-                      <TrainMenuProvider>
-                        <SheetProvider>
-                          <AppContainer />
-                        </SheetProvider>
-                      </TrainMenuProvider>
-                    </BusAndTrainDataProvider>
-                  </AllTrainDiagramProvider>
-                </AreaInfoProvider>
-              </CurrentTrainProvider>
-            </TrainDelayDataProvider>
-          </FavoriteStationProvider>
         </GestureHandlerRootView>
       </SafeAreaProvider>
     </DeviceOrientationChangeProvider>
   );
 }
-export function AppContainer() {
-  const { areaInfo, areaIconBadgeText } = useAreaInfo();
-  const navigationRef = React.useRef();
-  return (
-    <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
-      <Tab.Navigator
-        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
-        initialRouteName="menuPage"
-        lazy={false}
-      >
-        <Tab.Screen
-          name="login"
-          options={{
-            tabBarLabel: "位置情報",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("barchart", "AntDesign"),
-          }}
-        >
-          {(props) => <Top {...props} navigationRef={navigationRef} />}
-        </Tab.Screen>
-        <Tab.Screen
-          name="menuPage"
-          options={{
-            tabBarLabel: "リンク",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("radio", "Ionicons"),
-          }}
-          component={MenuPage}
-        />
-
-        <Tab.Screen
-          name="home"
-          options={{
-            tabBarLabel: "運行情報",
-            headerTransparent: true,
-            gestureEnabled: true,
-            tabBarIcon: initIcon("train", "Ionicons"),
-            tabBarBadge: areaInfo ? areaIconBadgeText : undefined,
-          }}
-        >
-          {(props) => <TNDView {...props} />}
-        </Tab.Screen>
-      </Tab.Navigator>
-    </NavigationContainer>
-  );
-}

Apps.js

@@ -0,0 +1,55 @@
+import React from "react";
+import { NavigationContainer } from "@react-navigation/native";
+import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
+import { Platform } from "react-native";
+import TNDView from "./ndView";
+import { initIcon } from "./lib/initIcon";
+import { Top } from "./Top.js";
+import { MenuPage } from "./MenuPage.js";
+import { useAreaInfo } from "./stateBox/useAreaInfo.js";
+import "./components/ActionSheetComponents/sheets.js";
+
+export function AppContainer() {
+  const Tab = createBottomTabNavigator();
+  const { areaInfo, areaIconBadgeText } = useAreaInfo();
+  const navigationRef = React.useRef();
+  const getTabProps = (name, label, icon, iconFamily, tabBarBadge) => ({
+    name,
+    options: {
+      tabBarLabel: label,
+      headerTransparent: true,
+      gestureEnabled: true,
+      tabBarIcon: initIcon(icon, iconFamily),
+      tabBarBadge,
+    },
+  });
+  return (
+    <NavigationContainer name="Root" style={{ flex: 1 }} ref={navigationRef}>
+      <Tab.Navigator
+        tabBarOptions={{ keyboardHidesTabBar: Platform.OS === "android" }}
+        initialRouteName="menuPage"
+        lazy={false}
+      >
+        <Tab.Screen
+          {...getTabProps("login", "位置情報", "barchart", "AntDesign")}
+          children={(props) => <Top {...props} navigationRef={navigationRef} />}
+        />
+        <Tab.Screen
+          {...getTabProps("menuPage", "リンク", "radio", "Ionicons")}
+          component={MenuPage}
+        />
+
+        <Tab.Screen
+          {...getTabProps(
+            "home",
+            "運行情報",
+            "train",
+            "Ionicons",
+            areaInfo ? areaIconBadgeText : undefined
+          )}
+          children={(props) => <TNDView {...props} />}
+        />
+      </Tab.Navigator>
+    </NavigationContainer>
+  );
+}

Top.js

@@ -13,13 +13,12 @@ import FavoriteList from "./components/FavoriteList.js";
 import { optionData } from "./lib/stackOption.js";
 import { useNavigation } from "@react-navigation/native";
 import { useCurrentTrain } from "./stateBox/useCurrentTrain.js";
-import { AS } from "./storageControl.js";
+import { ASCore } from "./storageControl.js";
 import { useTrainMenu } from "./stateBox/useTrainMenu";
 const Stack = createStackNavigator();
 export const Top = ({ navigationRef }) => {
   const { webview } = useCurrentTrain();
-  const navigation = useNavigation();
+  const { navigate, addListener } = useNavigation();
-  const { navigate, addListener } = navigation;
 
   //地図用
   const { setMapsStationData, injectJavaScript, setInjectJavaScript } =
@@ -29,26 +28,24 @@ export const Top = ({ navigationRef }) => {
     getStationList2().then(setMapsStationData);
   }, []);
   const [mapSwitch, setMapSwitch] = React.useState("false");
-  const ASCore = ({ k, s, d }) =>
-    AS.getItem(k)
-      .then((d) => (d ? s(d) : AS.setItem(k, d)))
-      .catch(() => AS.setItem(k, d));
   useEffect(() => {
     //地図スイッチ
     ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
   }, []);
 
+
+  const goToFavoriteList = () => navigate("favoriteList");
+
   useEffect(() => {
-    const unsubscribe = addListener("tabLongPress", () =>
+    const unsubscribe = addListener("tabLongPress", goToFavoriteList);
-      navigate("favoriteList")
-    );
     return unsubscribe;
-  }, [navigation]);
+  }, [{ navigate, addListener }]);
-  useEffect(() => {
+
-    const unsubscribe = navigation.addListener("tabPress", () => {
+
+  const goToTrainMenu = () => {
     if (navigationRef.current?.getCurrentRoute().name == "Apps") {
       if (mapSwitch == "true") {
-          navigation.navigate("trainMenu");
+        navigate("trainMenu");
         setInjectJavaScript("");
       } else {
         webview.current?.injectJavaScript(`AccordionClassEvent()`);
@@ -60,11 +57,14 @@ export const Top = ({ navigationRef }) => {
           setInjectJavaScript("");
         }
       }
-        navigation.navigate("Apps");
+      navigate("Apps");
     }
-    });
+  };
+  
+  useEffect(() => {
+    const unsubscribe = addListener("tabPress", goToTrainMenu);
     return unsubscribe;
-  }, [navigation, mapSwitch, injectJavaScript]);
+  }, [{ navigate, addListener }, mapSwitch, injectJavaScript]);
 
   return (
     <Stack.Navigator>

components/Apps.js

@@ -11,7 +11,7 @@ import Constants from "expo-constants";
 import { Ionicons } from "@expo/vector-icons";
 import * as Updates from "expo-updates";
 
-import { AS } from "../storageControl";
+import { AS, ASCore } from "../storageControl";
 import { news } from "../config/newsUpdate";
 import { getStationList, lineList } from "../lib/getStationList";
 import { injectJavascriptData } from "../lib/webViewInjectjavascript";
@@ -36,7 +36,7 @@ export default function Apps() {
   const { navigate } = useNavigation();
   const { isLandscape } = useDeviceOrientationChange();
   const handleLayout = () => {};
-  const { setInjectJavaScript, mapsStationData: stationData } = useTrainMenu();
+  const { setInjectJavaScript, mapsStationData } = useTrainMenu();
 
   //画面表示関連
   const [iconSetting, setIconSetting] = useState(undefined);
@@ -63,10 +63,6 @@ export default function Apps() {
     stationMenu,
     trainMenu
   );
-  const ASCore = ({ k, s, d }) =>
-    AS.getItem(k)
-      .then((d) => (d ? s(d) : AS.setItem(k, d).then(Updates.reloadAsync)))
-      .catch(() => AS.setItem(k, d).then(Updates.reloadAsync));
 
   useEffect(() => {
     //ニュース表示
@@ -79,13 +75,13 @@ export default function Apps() {
 
   useEffect(() => {
     //列車アイコンスイッチ
-    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true" });
+    ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
     //地図スイッチ
-    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false" });
+    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
     //駅メニュースイッチ
-    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true" });
+    ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
     //列車メニュースイッチ
-    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true" });
+    ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
   }, []);
 
   const openStationACFromEachTrainInfo = async (stationName) => {
@@ -127,7 +123,7 @@ export default function Apps() {
       {!trainInfo.trainNum && isLandscape ? (
         <TrainMenu
           webview={webview}
-          stationData={stationData}
+          stationData={mapsStationData}
           navigation={{ navigate: null }}
           style={{
             width: (width / 100) * 40,
@@ -194,17 +190,13 @@ export default function Apps() {
           LoadError={LoadError}
         />
       ) : (
-        <NewMenu
+        <NewMenu LoadError={LoadError} />
-          webview={webview}
-          isLandscape={isLandscape}
-          LoadError={LoadError}
-          mapSwitch={mapSwitch}
-        />
       )}
     </View>
   );
 }
-const NewMenu = ({ webview, LoadError }) => {
+const NewMenu = ({ LoadError }) => {
+  const { webview } = useCurrentTrain();
   const { width } = useWindowDimensions();
   return (
     <View

lib/providerTreeProvider.js

@@ -0,0 +1,25 @@
+export const buildProvidersTree = (providers) => {
+  // 基本ケース：ContextProviderが1つしか残っていない場合、それを返して終了する
+  if (providers.length === 1) {
+    return providers[0];
+  }
+
+  // 配列から最初の2つのContextProviderを取り出す
+  const FirstProvider = providers.shift();
+  const SecondProvider = providers.shift();
+
+  // 十分な数のContextProviderがあるかどうかを確認
+  if (FirstProvider === undefined || SecondProvider === undefined) {
+    throw new Error("ContextProviderが不足しています");
+  }
+
+  // 最初の2つのContextProviderをネストした新しいContextProviderを作成し、再帰する
+  return buildProvidersTree([
+    ({ children }) => (
+      <FirstProvider>
+        <SecondProvider>{children}</SecondProvider>
+      </FirstProvider>
+    ),
+    ...providers,
+  ]);
+};

storageControl.js

@@ -1,4 +1,5 @@
 import storage from "./storageConfig.js";
+import * as Updates from "expo-updates";
 
 export const AS = {
   getItem: (key) => storage.load({ key }),
@@ -13,3 +14,9 @@ export const AS = {
     }),
   removeItem: (key) => storage.remove({ key }),
 };
+export const ASCore = ({ k, s, d, u }) =>
+  AS.getItem(k)
+    .then((d) =>
+      d ? s(d) : AS.setItem(k, d).then(() => u && Updates.reloadAsync())
+    )
+    .catch(() => AS.setItem(k, d).then(() => u && Updates.reloadAsync()));