列車遅延速報EXを分離

menu.js

@@ -48,6 +48,7 @@ import { UsefulBox } from "./components/atom/UsefulBox";
 import { TicketBox } from "./components/atom/TicketBox";
 import { TextBox } from "./components/atom/TextBox";
 import { getStationList } from "./lib/getStationList";
+import { JRSTraInfo } from "./components/ActionSheetComponents/JRSTraInfo";
 
 export default function Menu(props) {
   const {
@@ -136,11 +137,6 @@ export default function Menu(props) {
     }
   }, [location, originalStationList]);
 
-  useEffect(() => {
-    console.log("test");
-    console.log(currentStation);
-  }, [currentStation]);
-
   const LottieRef = useRef(null);
   const LottieRef2 = useRef(null);
   const [count, setCount] = useState(0);
@@ -636,134 +632,14 @@ export default function Menu(props) {
         currentStation={currentStation}
         originalStationList={originalStationList}
       />
-      <ActionSheet
-        ref={JRSTraInfoEXAcSR}
-        gestureEnabled
-        CustomHeaderComponent={() => {}}
-      >
-        <View
-          style={{
-            backgroundColor: "#0099CC",
-            borderRadius: 5,
-            borderColor: "dark",
-            borderWidth: 1,
-          }}
-        >
-          <View style={{ height: 26, width: "100%" }}>
-            <View
-              style={{
-                height: 6,
-                width: 45,
-                borderRadius: 100,
-                backgroundColor: "#f0f0f0",
-                marginVertical: 10,
-                alignSelf: "center",
-              }}
-            />
-          </View>
-          <View
-            style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-          >
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              列車遅延速報EX
-            </Text>
-            <View style={{ flex: 1 }} />
-            {/* <TouchableOpacity style={{padding:10,backgroundColor:"white",alignContent:"center"}} onPress={() => {doFetch()}}>
-                    <Text style={{fontSize:20,fontWeight:"bold",color:"#0099CC"}}>最新の情報へ更新</Text>
-                  </TouchableOpacity> */}
-            <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              {getTime
-                ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                  ":" +
-                  getTime.toLocaleTimeString("ja-JP").split(":")[1]
-                : NaN}{" "}
-            </Text>
-            <Ionicons
-              name="reload"
-              color="white"
-              size={30}
-              style={{ margin: 5 }}
-              onPress={() => {
-                LayoutAnimation.easeInEaseOut(), setLoadingDelayData(true);
-              }}
-            />
-          </View>
-          <ScrollView>
-            <View
-              style={{
-                padding: 10,
-                backgroundColor: "white",
-                borderBottomLeftRadius: 5,
-                borderBottomRightRadius: 5,
-              }}
-            >
-              {loadingDelayData ? (
-                <View style={{ alignItems: "center" }}>
-                  <LottieView
-                    ref={LottieRef2}
-                    style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                    source={require("./assets/51690-loading-diamonds.json")}
-                  />
-                </View>
-              ) : delayData ? (
-                delayData.map((d) => {
-                  let data = d.split(" ");
-                  return (
-                    <View style={{ flexDirection: "row" }}>
-                      <Text style={{ flex: 15, fontSize: 20 }}>
-                        {data[0].replace("\n", "")}
-                      </Text>
-                      <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
-                      <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
-                    </View>
-                  );
-                })
-              ) : (
-                <Text>現在、5分以上の遅れはありません。</Text>
-              )}
-            </View>
-
-            <View style={{ padding: 10 }}>
-              <Text
-                style={{ fontSize: 20, fontWeight: "bold", color: "white" }}
-              >
-                列車遅延情報EXについて
-              </Text>
-              <Text style={{ color: "white" }}>
-                列車遅延情報をJR四国公式列車運行情報より5分毎に取得します。Twitterにて投稿している内容と同一のものとなります。
-              </Text>
-            </View>
-            <TouchableOpacity
-              style={{
-                padding: 10,
-                flexDirection: "row",
-                borderColor: "white",
-                borderWidth: 1,
-                margin: 10,
-                borderRadius: 5,
-                alignItems: "center",
-              }}
-              onPress={() =>
-                Linking.openURL("https://twitter.com/JRSTrainfoEX")
-              }
-            >
-              <MaterialCommunityIcons name="twitter" color="white" size={30} />
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
-              >
-                TwitterBOTはこちら！
-              </Text>
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{ fontSize: 25, fontWeight: "bold", color: "white" }}
-              >
-                →
-              </Text>
-            </TouchableOpacity>
-          </ScrollView>
-        </View>
-      </ActionSheet>
+      <JRSTraInfo
+        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
+        getTime={getTime}
+        loadingDelayData={loadingDelayData}
+        setLoadingDelayData={setLoadingDelayData}
+        delayData={delayData}
+        LottieRef2={LottieRef2}
+      />
     </View>
   );
 }