超リファクタリング

components/発車時刻表/LED_vidion.js

@@ -59,6 +59,7 @@ export default function LED_vision(props) {
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
   useEffect(() => {
+    console.log("LED");
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
       HeaderConfig
@@ -66,49 +67,47 @@ export default function LED_vision(props) {
       .then((response) => response.text())
       .then((d) => {
         const val = d.replace("[\r\n", "").split(",\r\n");
-        let returnData = {};
+        let trainDiagram = {};
         val.forEach((element) => {
           try {
             let data = JSON.parse(element);
-            Object.keys(data).forEach((key) => (returnData[key] = data[key]));
+            Object.keys(data).forEach((key) => (trainDiagram[key] = data[key]));
           } catch (e) {}
         });
-        return returnData;
+        setTrainDiagram(trainDiagram);
+        return trainDiagram;
       })
       .then((trainDiagram) => {
         let returnData = {};
-        if (trainDiagram) {
+        if (!trainDiagram) {
+          setStationDiagram(returnData);
+          return;
+        }
         Object.keys(trainDiagram).forEach((key) => {
           if (trainDiagram[key].match(props.station.Station_JP)) {
             returnData[key] = trainDiagram[key];
           }
         });
-        }
-        setTrainDiagram(trainDiagram);
         setStationDiagram(returnData);
       });
   }, []);
   const getTime = () => {
     const returnData = [];
-    const date = new Date();
     Object.keys(stationDiagram).forEach((d) => {
-      let a = (() => {
+      let a = {};
-        let returnData = {};
       stationDiagram[d].split("#").forEach((data) => {
         if (data.match("着")) {
-            returnData.lastStation = data.split(",着,")[0];
+          a.lastStation = data.split(",着,")[0];
         }
         if (data.match(props.station.Station_JP)) {
           if (data.match(",発,")) {
-              returnData.time = data.split(",発,")[1];
+            a.time = data.split(",発,")[1];
           } else {
-              returnData.time = data.split(",着,")[1];
+            a.time = data.split(",着,")[1];
-              returnData.lastStation = "当駅止";
+            a.lastStation = "当駅止";
           }
         }
       });
-        return returnData;
-      })();
       returnData.push({ train: d, time: a.time, lastStation: a.lastStation });
     });
 
@@ -141,42 +140,26 @@ export default function LED_vision(props) {
         .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
         .then((d) => setCurrentTrain(d));
     getCurrentTrain();
-    const currentTrainInterval = setInterval(() => getCurrentTrain(), 15000);
+    const currentTrainInterval = setInterval(getCurrentTrain, 15000);
     return () => clearInterval(currentTrainInterval);
   }, []);
 
-  const filtering = (d) => currentTrain.map((m) => m.num).includes(d.train);
-  console.log(new Date());
   const timeFiltering = (d) => {
     const date = new Date();
     const newDate = new Date();
     let data = d.time.split(":");
-    let delay = isNaN(
+    let delay = isNaN(currentTrain.filter((t) => t.num == d.train)[0].delay)
-      currentTrain.filter((data) => data.num == d.train)[0].delay
-    )
       ? 0
-      : currentTrain.filter((data) => data.num == d.train)[0].delay;
+      : currentTrain.filter((t) => t.num == d.train)[0].delay;
 
     date.setHours(parseInt(data[0]));
     date.setMinutes(parseInt(data[1]) + parseInt(delay));
-    console.log(date);
-    console.log(newDate);
     if (!(newDate > date)) {
       return true;
     }
 
     return false;
   };
-  const finalFiltering = (d) => {
-    if (finalSwitch) {
-      return true;
-    } else {
-      if (d.lastStation == "当駅止") {
-        return false;
-      }
-      return true;
-    }
-  };
   return (
     <View
       style={{
@@ -208,10 +191,12 @@ export default function LED_vision(props) {
       {trainTimeAndNumber
         ? currentTrain &&
           trainTimeAndNumber
-            .filter(filtering)
+            .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
             .filter(timeFiltering)
-            .filter(finalFiltering)
+            .filter((d) => !!finalSwitch || d.lastStation != "当駅止")
-            .map((d, index) => [
+            .map((d, index) => {
+              const train = customTrainDataDetector(d.train);
+              return [
                 <View
                   style={{
                     alignContent: "center",
@@ -226,17 +211,9 @@ export default function LED_vision(props) {
                   <View style={{ flex: 9 }}>
                     <Text
                       style={{
-                      fontSize: (() => {
+                        fontSize: train.trainName.length > 6 ? 15 : 20,
-                        if (
-                          customTrainDataDetector(d.train).trainName.length > 6
-                        ) {
-                          return 15;
-                        } else {
-                          return 20;
-                        }
-                      })(),
                         color: (() => {
-                        switch (customTrainDataDetector(d.train).type) {
+                          switch (train.type) {
                             case "Rapid":
                               return "aqua";
                             case "LTDEXP":
@@ -253,7 +230,7 @@ export default function LED_vision(props) {
                       {trainIDSwitch
                         ? d.train
                         : (() => {
-                          switch (customTrainDataDetector(d.train).type) {
+                            switch (train.type) {
                               case "Rapid":
                                 return "快速";
                               case "LTDEXP":
@@ -265,24 +242,14 @@ export default function LED_vision(props) {
                             }
                           })() +
                           " " +
-                        customTrainDataDetector(d.train).trainName +
+                          train.trainName +
-                        (() => {
+                          (!train.trainNumDistance
-                          if (
+                            ? ""
-                            customTrainDataDetector(d.train).trainNumDistance !=
+                            : parseInt(
-                            null
-                          ) {
-                            return (
-                              parseInt(
                                 d.train.replace("M", "").replace("D", "")
                               ) -
-                              customTrainDataDetector(d.train)
+                              train.trainNumDistance +
-                                .trainNumDistance +
+                              "号")}
-                              "号"
-                            );
-                          } else {
-                            return "";
-                          }
-                        })()}
                     </Text>
                   </View>
                   <View style={{ flex: 4, flexDirection: "row" }}>
@@ -298,32 +265,40 @@ export default function LED_vision(props) {
                   </View>
                   <View style={{ flex: 3 }}>
                     <Text
-                    style={{ fontSize: 20, color: "white", fontWeight: "bold" }}
+                      style={{
+                        fontSize: 20,
+                        color: "white",
+                        fontWeight: "bold",
+                      }}
                     >
                       {d.time}
                     </Text>
                   </View>
                   <View style={{ flex: 4 }}>
                     <Text
-                    style={{ fontSize: 20, color: "white", fontWeight: "bold" }}
+                      style={{
+                        fontSize: 20,
+                        color: "white",
+                        fontWeight: "bold",
+                      }}
                     >
                       {(() => {
-                      let data = currentTrain.filter(
+                        const delay = currentTrain.filter(
-                        (data) => data.num == d.train
+                          (a) => a.num == d.train
                         )[0].delay;
-                      if (isNaN(data)) {
+                        switch (true) {
-                        return data;
+                          case isNaN(delay):
-                      } else if (data == 0) {
+                            return delay;
+                          case delay == 0:
                             return "定刻通り";
-                      } else {
+                          default:
-                        return data + "分遅れ";
+                            return delay + "分遅れ";
                         }
                       })()}
                     </Text>
                   </View>
                 </View>,
-              Boolean(trainDescriptionSwitch) &&
+                trainDescriptionSwitch && !!train.info && (
-                Boolean(customTrainDataDetector(d.train).info) && (
                   <View
                     style={{
                       alignContent: "center",
@@ -344,12 +319,13 @@ export default function LED_vision(props) {
                         }}
                       >
                         {" "}
-                        &gt; {customTrainDataDetector(d.train).info}
+                        &gt; {train.info}
                       </Text>
                     </View>
                   </View>
                 ),
-            ])
+              ];
+            })
         : null}
       <View style={{ flexDirection: "row", padding: 10 }}>
         <Text
@@ -363,10 +339,7 @@ export default function LED_vision(props) {
         >
           種別名 / 列番
         </Text>
-        <Switch
+        <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
-          value={trainIDSwitch}
-          onValueChange={(value) => setTrainIDSwitch(!trainIDSwitch)}
-        />
         <View style={{ flex: 1 }} />
         <Text
           style={{
@@ -381,9 +354,7 @@ export default function LED_vision(props) {
         </Text>
         <Switch
           value={trainDescriptionSwitch}
-          onValueChange={(value) =>
+          onValueChange={setTrainDescriptionSwitch}
-            setTrainDescriptionSwitch(!trainDescriptionSwitch)
-          }
         />
         <View style={{ flex: 1 }} />
         <Text
@@ -397,10 +368,7 @@ export default function LED_vision(props) {
         >
           当駅止表示
         </Text>
-        <Switch
+        <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
-          value={finalSwitch}
-          onValueChange={(value) => setFinalSwitch(!finalSwitch)}
-        />
       </View>
     </View>
   );

menu.js

@@ -15,7 +15,6 @@ 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 {
@@ -173,7 +172,7 @@ export default function Menu(props) {
         paddingTop: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
       }}
     >
-      {Status}
+      <StatusbarDetect />
       <View style={{ alignItems: "center" }}>
         <TouchableOpacity
           onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
@@ -514,7 +513,7 @@ export default function Menu(props) {
               size={30}
             />
             <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-              公式Twitter一族
+              JR四国公式Twitter一族
             </Text>
           </View>
           <View
@@ -525,65 +524,63 @@ export default function Menu(props) {
               borderBottomRightRadius: 10,
             }}
           >
-            <ListItem
+            {((data) =>
-              onPress={() =>
+              data.map((d) => (
-                Linking.openURL("https://twitter.com/JRshikoku_tokyo")
+                <ListItem onPress={() => Linking.openURL(d.url)}>
-              }
+                  <Text>{d.name}</Text>
-            >
-              <Text>JR四国 東京営業情報【公式】</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() =>
-                Linking.openURL("https://twitter.com/JRshikoku_osaka")
-              }
-            >
-              <Text>JR四国　大阪営業部【公式】</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() => Linking.openURL("https://twitter.com/shikoku_DC")}
-            >
-              <Text>JR四国営業部 四国DC情報【公式】</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() =>
-                Linking.openURL("https://twitter.com/jr_shikoku_info")
-              }
-            >
-              <Text>JR四国運行情報Twitter</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() =>
-                Linking.openURL("https://twitter.com/Smile_Eki_Chan")
-              }
-            >
-              <Text>JR四国いそうろう妖精 すまいるえきちゃん♡【公式】</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() =>
-                Linking.openURL("https://twitter.com/JR_Shikoku_DPT")
-              }
-            >
-              <Text>JR四国デザインPT♡</Text>
-              <View style={{ flex: 1 }} />
-              <Icon name="chevron-right" size={20} />
-            </ListItem>
-            <ListItem
-              onPress={() => Linking.openURL("https://twitter.com/PT2nd_Yuki")}
-            >
-              <Text>JR四国デザインPT弐号◇</Text>
                   <View style={{ flex: 1 }} />
                   <Icon name="chevron-right" size={20} />
                 </ListItem>
+              )))([
+              {
+                url: "https://twitter.com/JRshikoku_eigyo",
+                name: "JR四国営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_tokyo",
+                name: "JR四国 東京営業情報【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_osaka",
+                name: "JR四国 大阪営業部【公式】",
+              },
+              {
+                url: "https://twitter.com/jr_shikoku_info",
+                name: "ＪＲ四国列車運行情報【公式】",
+              },
+              {
+                url: "https://twitter.com/Smile_Eki_Chan",
+                name: "すまいるえきちゃん♡JR四国【公式】",
+              },
+              {
+                url: "https://twitter.com/jrs_matsuyama",
+                name: "JR四国 松山駅 【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_kochi",
+                name: "JR四国 高知駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jr_tokust",
+                name: "JR四国 徳島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_uwjm",
+                name: "JR四国 宇和島駅【公式】",
+              },
+              {
+                url: "https://twitter.com/JRshikoku_wkoch",
+                name: "JR四国 ワープ高知支店【公式】",
+              },
+              {
+                url: "https://twitter.com/jrshikoku_nihaw",
+                name: "JR四国 ワープ新居浜営業所【公式】",
+              },
+              {
+                url: "https://twitter.com/Yoakemonogatari",
+                name: "志国土佐　時代の夜明けのものがたり【公式】",
+              },
+            ])}
           </View>
         </View>
         <Text style={{ fontWeight: "bold", fontSize: 20 }}>
@@ -592,8 +589,6 @@ export default function Menu(props) {
         <Text>
           このアプリはXprocess(HARUKIN)が製作しているJR四国の完全非公式アシストアプリケーションです。このアプリに関することでのJR四国公式へ問合せすることはお控えください。以下のTwitterよりお願いします。
         </Text>
-        <Text>2022/4/14 4.1公開！列車アイコン表示が開始しました。</Text>
-        <Text>2021/6/23 4.0公開！ホーム画面を大改造しました。</Text>
         <TextBox
           backgroundColor="#CC0000"
           flex={1}