有効化忘れを修正、TraInfoをProviderに移動

App.js

@@ -28,6 +28,7 @@ import {
 import { AllTrainDiagramProvider } from "./stateBox/useAllTrainDiagram.js";
 import { SheetProvider } from "react-native-actions-sheet";
 import "./components/ActionSheetComponents/sheets.js";
+import { TrainDelayDataProvider } from "./stateBox/useTrainDelayData.js";
 LogBox.ignoreLogs([
   "ViewPropTypes will be removed",
   "ColorPropType will be removed",
@@ -43,17 +44,19 @@ export default function App() {
   useEffect(() => UpdateAsync(), []);
   return (
     <FavoriteStationProvider>
-      <SheetProvider>
+      <TrainDelayDataProvider>
-        <CurrentTrainProvider>
+        <SheetProvider>
-          <AreaInfoProvider>
+          <CurrentTrainProvider>
-            <AllTrainDiagramProvider>
+            <AreaInfoProvider>
-              <BusAndTrainDataProvider>
+              <AllTrainDiagramProvider>
-                <AppContainer />
+                <BusAndTrainDataProvider>
-              </BusAndTrainDataProvider>
+                  <AppContainer />
-            </AllTrainDiagramProvider>
+                </BusAndTrainDataProvider>
-          </AreaInfoProvider>
+              </AllTrainDiagramProvider>
-        </CurrentTrainProvider>
+            </AreaInfoProvider>
-      </SheetProvider>
+          </CurrentTrainProvider>
+        </SheetProvider>
+      </TrainDelayDataProvider>
     </FavoriteStationProvider>
   );
 }

components/ActionSheetComponents/JRSTraInfo.js

@@ -10,10 +10,10 @@ import {
 import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 import ActionSheet from "react-native-actions-sheet";
 import LottieView from "lottie-react-native";
-export const JRSTraInfo = (props) => {
+import { useTrainDelayData } from "../../stateBox/useTrainDelayData";
-  if (!props.payload) return <></>;
+export const JRSTraInfo = () => {
-  const { getTime, loadingDelayData, setLoadingDelayData, delayData } =
+  const { getTime, delayData, loadingDelayData, setLoadingDelayData } =
-    props.payload;
+    useTrainDelayData();
   return (
     <ActionSheet gestureEnabled CustomHeaderComponent={<></>}>
       <View

menu.js

@@ -22,7 +22,6 @@ import {
   MaterialCommunityIcons,
 } from "@expo/vector-icons";
 import LottieView from "lottie-react-native";
-import { StationDeteilView } from "./components/ActionSheetComponents/StationDeteilView";
 import { parseAllTrainDiagram } from "./lib/parseAllTrainDiagram";
 import trainList from "./assets/originData/trainList";
 
@@ -33,12 +32,11 @@ import { UsefulBox } from "./components/atom/UsefulBox";
 import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
 import { getStationList, lineList } from "./lib/getStationList";
-import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
-import { EachTrainInfo } from "./components/ActionSheetComponents/EachTrainInfo";
 import useInterval from "./lib/useInterval";
 import { HeaderConfig } from "./lib/HeaderConfig";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { SheetManager } from "react-native-actions-sheet";
+import { useTrainDelayData } from "./stateBox/useTrainDelayData";
 
 export default function Menu(props) {
   const {
@@ -105,22 +103,9 @@ export default function Menu(props) {
   const [originalStationList, setOriginalStationList] = useState(); // 第一要素
   useEffect(() => getStationList().then(setOriginalStationList), []);
 
-  const [count, setCount] = useState(0);
-  const [delayData, setDelayData] = useState(undefined);
-  const [getTime, setGetTime] = useState(new Date());
-  const [loadingDelayData, setLoadingDelayData] = useState(true);
   const carouselRef = useRef();
   const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
 
-  useEffect(() => {
-    fetch(
-      "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
-    )
-      .then((response) => response.text())
-      .then((data) => setDelayData(data !== "" ? data.split("^") : null))
-      .then(() => setGetTime(new Date()))
-      .finally(() => setLoadingDelayData(false));
-  }, [loadingDelayData]);
   const [allStationData, setAllStationData] = useState([]);
   useEffect(() => {
     setAllStationData(
@@ -262,12 +247,7 @@ export default function Menu(props) {
               openStationACFromEachTrainInfo={openStationACFromEachTrainInfo}
             />
           )}
-        <JRSTraInfoBox
+        <JRSTraInfoBox />
-          getTime={getTime}
-          setLoadingDelayData={setLoadingDelayData}
-          loadingDelayData={loadingDelayData}
-          delayData={delayData}
-        />
         <FixedContentBottom navigate={navigate} />
       </ScrollView>
     </View>
@@ -332,8 +312,15 @@ const TopMenuButton = () => {
   );
 };
 
-const JRSTraInfoBox = (props) => {
+const JRSTraInfoBox = () => {
-  const { getTime, setLoadingDelayData, loadingDelayData, delayData } = props;
+  const {
+    getTime,
+    setGetTime,
+    delayData,
+    setDelayData,
+    loadingDelayData,
+    setLoadingDelayData,
+  } = useTrainDelayData();
   const styles = {
     touch: {
       backgroundColor: "#0099CC",
@@ -365,17 +352,7 @@ const JRSTraInfoBox = (props) => {
   };
   return (
     <TouchableOpacity
-      onPress={() => {
+      onPress={() => SheetManager.show("JRSTraInfo")}
-        const payload = {
-          getTime,
-          setLoadingDelayData,
-          loadingDelayData,
-          delayData,
-        };
-        SheetManager.show("JRSTraInfo", {
-          payload,
-        });
-      }}
       style={styles.touch}
     >
       <ScrollView scrollEnabled={false} style={styles.scroll}>
@@ -558,18 +535,18 @@ const FixedContentBottom = (props) => {
           JR四国グループの施設をご案内
         </Text>
       </TextBox>
-      {/* <TextBox
+      <TextBox
         backgroundColor="#0099CC"
         flex={1}
         onPressButton={() => props.navigate("AllTrainIDList")}
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          JR四国のお店・サービス
+          列番検索
         </Text>
         <Text style={{ color: "white", fontSize: 18 }}>
-          JR四国グループの施設をご案内
+          全列車のダイヤを確認できる機能です。
         </Text>
-      </TextBox> */}
+      </TextBox>
       <View style={{ flexDirection: "row" }}>
         <TouchableOpacity
           style={{

stateBox/useTrainDelayData.js

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useEffect, useState } from "react";
+const initialState = {
+  getTime: new Date(),
+  setGetTime: () => {},
+  loadingDelayData: true,
+  setLoadingDelayData: () => {},
+  delayData: undefined,
+  setDelayData: () => {},
+};
+
+const TrainDelayDataContext = createContext(initialState);
+
+export const useTrainDelayData = () => {
+  return useContext(TrainDelayDataContext);
+};
+
+export const TrainDelayDataProvider = ({ children }) => {
+  const [delayData, setDelayData] = useState(undefined);
+  const [getTime, setGetTime] = useState(new Date());
+  const [loadingDelayData, setLoadingDelayData] = useState(true);
+  useEffect(() => {
+    fetch(
+      "https://script.google.com/macros/s/AKfycbyKxch7z7l8e07LXulRHqxjVoIiB13kcgvoToLE-rqlxLmLSKdlmqz0FI1F2EuA7Zfg/exec"
+    )
+      .then((response) => response.text())
+      .then((data) => setDelayData(data !== "" ? data.split("^") : null))
+      .then(() => setGetTime(new Date()))
+      .finally(() => setLoadingDelayData(false));
+  }, [loadingDelayData]);
+
+  return (
+    <TrainDelayDataContext.Provider
+      value={{
+        getTime,
+        setGetTime,
+        loadingDelayData,
+        setLoadingDelayData,
+        delayData,
+        setDelayData,
+      }}
+    >
+      {children}
+    </TrainDelayDataContext.Provider>
+  );
+};