引数の短縮と関数の移動

components/発車時刻表/LED_vidion.js

@@ -240,56 +240,36 @@ const Header = ({
   </View>
 );
 
-const Footer = ({
+const Footer = (props) => {
+  const {
     trainIDSwitch,
     setTrainIDSwitch,
     trainDescriptionSwitch,
     setTrainDescriptionSwitch,
     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
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        種別名 / 列番
-      </Text>
+      <Text style={textStyle}>種別名 / 列番</Text>
       <Switch value={trainIDSwitch} onValueChange={setTrainIDSwitch} />
       <View style={{ flex: 1 }} />
-      <Text
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        列車情報
-      </Text>
+      <Text style={textStyle}>列車情報</Text>
       <Switch
         value={trainDescriptionSwitch}
         onValueChange={setTrainDescriptionSwitch}
       />
       <View style={{ flex: 1 }} />
-      <Text
-        style={{
-          alignItems: "center",
-          alignContent: "center",
-          textAlign: "center",
-          textAlignVertical: "center",
-          color: "white",
-        }}
-      >
-        当駅止表示
-      </Text>
+      <Text style={textStyle}>当駅止表示</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
-          currentTrain={currentTrain}
-          train={d.train}
-          station={props.station}
-        />
+        <StatusAndDelay trainDelayStatus={trainDelayStatus} />
       </TouchableOpacity>
       {trainDescriptionSwitch && !!train.info && (
         <Description info={train.info} />
@@ -364,12 +362,14 @@ const EachData = ({
   );
 };
 
-const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
-  const { trainName, trainNumDistance } = train;
+const TrainName = ({ train: s, trainIDSwitch, d, getTrainType }) => {
+  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
-          ? d.train
-          : `${getTrainType.name} ${trainName}${TrainNumber}`}
+        {trainIDSwitch ? train : `${name} ${trainName}${TrainNumber}`}
       </Text>
     </View>
   );
@@ -428,27 +426,7 @@ const checkDuplicateTrainData = (currentTrainArray) => {
   else return notNyujoData[0];
 };
 
-const StatusAndDelay = ({ currentTrain, train, station }) => {
-  // 土讃線複数存在対策
-  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 StatusAndDelay = ({ trainDelayStatus }) => {
   return (
     <View style={{ flex: 4 }}>
       <Text
@@ -459,16 +437,13 @@ const StatusAndDelay = ({ currentTrain, train, station }) => {
           paddingLeft: 1,
         }}
       >
-        {getTrainDelayStatus(
-          checkDuplicateTrainData(currentTrain.filter((a) => a.num == train))
-        )}
+        {trainDelayStatus}
       </Text>
     </View>
   );
 };
 
-const Description = ({ info }) => {
-  return (
+const Description = ({ info }) => (
   <View
     style={{
       alignContent: "center",
@@ -493,5 +468,4 @@ const Description = ({ info }) => {
       </Text>
     </View>
   </View>
-  );
-};
+);