引数の短縮と関数の移動

components/発車時刻表/LED_vidion.js

@@ -240,56 +240,36 @@ const Header = ({
   </View>
 );
 
-const Footer = ({
+const Footer = (props) => {
-  trainIDSwitch,
+  const {
-  setTrainIDSwitch,
+    trainIDSwitch,
-  trainDescriptionSwitch,
+    setTrainIDSwitch,
-  setTrainDescriptionSwitch,
+    trainDescriptionSwitch,
-  finalSwitch,
+    setTrainDescriptionSwitch,
-  setFinalSwitch,
+    finalSwitch,
-}) => {
+    setFinalSwitch,
+  } = props;
+
+  const textStyle = {
+    alignItems: "center",
+    alignContent: "center",
+    textAlign: "center",
+    textAlignVertical: "center",
+    color: "white",
+  };
+
   return (
     <View style={{ flexDirection: "row", padding: 10, alignItems: "center" }}>
-      <Text
+      <Text style={textStyle}>種別名 / 列番</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        種別名 / 列番
-      </Text>
       <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
       <View style={{ flex: 1 }} />
-      <Text
+      <Text style={textStyle}>列車情報</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        列車情報
-      </Text>
       <Switch
         value={trainDescriptionSwitch}
         onValueChange={setTrainDescriptionSwitch}
       />
       <View style={{ flex: 1 }} />
-      <Text
+      <Text style={textStyle}>当駅止表示</Text>
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        当駅止表示
-      </Text>
       <Switch value={finalSwitch} onValueChange={setFinalSwitch} />
     </View>
   );
@@ -329,6 +309,28 @@ const EachData = ({
   useEffect(() => {
     setTrain(customTrainDataDetector(d.train));
   }, [currentTrain, d.train, trainDescriptionSwitch]);
+  // 土讃線複数存在対策
+  const getTrainDelayStatus = (current) => {
+    if (!current) return () => {};
+    const delay = current.delay;
+    switch (true) {
+      case delay === "入線":
+        if (current.Pos === station.Station_JP) {
+          return "当駅始発";
+        } else {
+          return "発車前";
+        }
+      case isNaN(delay):
+        return delay;
+      case delay === 0:
+        return "定刻通り";
+      default:
+        return delay + "分遅れ";
+    }
+  };
+  const trainDelayStatus = getTrainDelayStatus(
+    checkDuplicateTrainData(currentTrain.filter((a) => a.num == train))
+  );
   return (
     <>
       <TouchableOpacity
@@ -351,11 +353,7 @@ const EachData = ({
         />
         <LastStation lastStation={d.lastStation} />
         <DependTime time={d.time} />
-        <StatusAndDelay
+        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
-          currentTrain={currentTrain}
-          train={d.train}
-          station={props.station}
-        />
       </TouchableOpacity>
       {trainDescriptionSwitch && !!train.info && (
         <Description info={train.info} />
@@ -364,12 +362,14 @@ const EachData = ({
   );
 };
 
-const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
+const TrainName = ({ train: s, trainIDSwitch, d, getTrainType }) => {
-  const { trainName, trainNumDistance } = train;
+  const { trainName, trainNumDistance } = s;
+  const { name, color } = getTrainType;
+  const { train } = d;
   let TrainNumber =
     trainNumDistance != undefined
       ? `${
-          parseInt(d.train.replace("M", "").replace("D", "")) - trainNumDistance
+          parseInt(train.replace("M", "").replace("D", "")) - trainNumDistance
         }号`
       : "";
   return (
@@ -377,13 +377,11 @@ const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
       <Text
         style={{
           fontSize: trainName.length > 6 ? parseInt("13%") : parseInt("18%"),
-          color: getTrainType.color,
+          color: color,
           fontWeight: "bold",
         }}
       >
-        {trainIDSwitch
+        {trainIDSwitch ? train : `${name} ${trainName}${TrainNumber}`}
-          ? d.train
-          : `${getTrainType.name} ${trainName}${TrainNumber}`}
       </Text>
     </View>
   );
@@ -428,27 +426,7 @@ const checkDuplicateTrainData = (currentTrainArray) => {
   else return notNyujoData[0];
 };
 
-const StatusAndDelay = ({ currentTrain, train, station }) => {
+const StatusAndDelay = ({ trainDelayStatus }) => {
-  // 土讃線複数存在対策
-  const getTrainDelayStatus = (current) => {
-    if (!current) return () => {};
-    const delay = current.delay;
-    switch (true) {
-      case delay === "入線":
-        if (current.Pos === station.Station_JP) {
-          return "当駅始発";
-        } else {
-          return "発車前";
-        }
-      case isNaN(delay):
-        return delay;
-      case delay === 0:
-        return "定刻通り";
-      default:
-        return delay + "分遅れ";
-    }
-  };
-
   return (
     <View style={{ flex: 4 }}>
       <Text
@@ -459,39 +437,35 @@ const StatusAndDelay = ({ currentTrain, train, station }) => {
           paddingLeft: 1,
         }}
       >
-        {getTrainDelayStatus(
+        {trainDelayStatus}
-          checkDuplicateTrainData(currentTrain.filter((a) => a.num == train))
-        )}
       </Text>
     </View>
   );
 };
 
-const Description = ({ info }) => {
+const Description = ({ info }) => (
-  return (
+  <View
-    <View
+    style={{
-      style={{
+      alignContent: "center",
-        alignContent: "center",
+      alignItems: "center",
-        alignItems: "center",
+      width: "94%",
-        width: "94%",
+      marginVertical: 5,
-        marginVertical: 5,
+      marginHorizontal: "3%",
-        marginHorizontal: "3%",
+      backgroundColor: "#000",
-        backgroundColor: "#000",
+      flexDirection: "row",
-        flexDirection: "row",
+    }}
-      }}
+  >
-    >
+    <View style={{ flex: 4 }}>
-      <View style={{ flex: 4 }}>
+      <Text
-        <Text
+        style={{
-          style={{
+          fontSize: parseInt("18%"),
-            fontSize: parseInt("18%"),
+          color: "green",
-            color: "green",
+          fontWeight: "bold",
-            fontWeight: "bold",
+        }}
-          }}
+      >
-        >
+        {" "}
-          {" "}
+        &gt; {info}
-          &gt; {info}
+      </Text>
-        </Text>
-      </View>
     </View>
-  );
+  </View>
-};
+);