列車遅延速報EXを分離

components/ActionSheetComponents/JRSTraInfo.js

@@ -0,0 +1,167 @@
+import React, { Component, useRef, useState, useEffect } from "react";
+import {
+  StatusBar,
+  Platform,
+  View,
+  LayoutAnimation,
+  ScrollView,
+  Linking,
+  Text,
+  TouchableOpacity,
+} from "react-native";
+import Image from "react-native-remote-svg";
+import Constants from "expo-constants";
+import { List, ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
+import * as Location from "expo-location";
+import StatusbarDetect from "../../StatusbarDetect";
+var Status = StatusbarDetect();
+import { useNavigation } from "@react-navigation/native";
+import AutoHeightImage from "react-native-auto-height-image";
+import {
+  widthPercentageToDP as wp,
+  heightPercentageToDP as hp,
+} from "react-native-responsive-screen";
+import {
+  FontAwesome,
+  Fontisto,
+  Foundation,
+  Ionicons,
+  MaterialCommunityIcons,
+} from "@expo/vector-icons";
+import * as WebBrowser from "expo-web-browser";
+import ActionSheet from "react-native-actions-sheet";
+import LottieView from "lottie-react-native";
+import SvgUri from "react-native-svg-uri";
+export const JRSTraInfo = (props) => {
+  const {
+    JRSTraInfoEXAcSR,
+    getTime,
+    loadingDelayData,
+    setLoadingDelayData,
+    delayData,
+    LottieRef2,
+  } = props;
+  return (
+    <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>
+  );
+};

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",
-              }}
+      <JRSTraInfo
+        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
+        getTime={getTime}
+        loadingDelayData={loadingDelayData}
+        setLoadingDelayData={setLoadingDelayData}
+        delayData={delayData}
+        LottieRef2={LottieRef2}
       />
     </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>
-    </View>
   );
 }