LED表示機能第二弾リファクタリング

components/発車時刻表/LED_vidion.js

@@ -64,7 +64,7 @@ export default function LED_vision(props) {
   };
 
   useEffect(() => {
-    //全列車リストを生成する副作用
+    //全列車リストを生成する副作用[無条件初回実行]
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=station&arg2=traintimeinfo&arg3=dia",
       HeaderConfig
@@ -81,7 +81,7 @@ export default function LED_vision(props) {
   }, []);
 
   useEffect(() => {
-    //駅の情報を作成する副作用
+    // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
     if (!trainDiagram) {
       setStationDiagram({});
       return;
@@ -110,12 +110,11 @@ export default function LED_vision(props) {
         console.log(e);
       });
 
-  useEffect(getCurrentTrain, []);
+  useEffect(getCurrentTrain, []); //初回だけ現在の全在線列車取得
 
-  useInterval(getCurrentTrain, 15000);
+  useInterval(getCurrentTrain, 15000); //15秒毎に全在線列車取得
 
   const getTime = (stationDiagram, station) => {
-    console.log(stationDiagram);
     const returnData = Object.keys(stationDiagram).map((d) => {
       let a = {};
       stationDiagram[d].split("#").forEach((data) => {
@@ -149,7 +148,9 @@ export default function LED_vision(props) {
   };
 
   const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
+
   useEffect(() => {
+    //現在の駅に停車する列車から時刻を切り出してLEDベースにフォーマット
     if (objectIsEmpty(stationDiagram)) return () => {};
     console.log(stationDiagram);
     const getTimeData = getTime(stationDiagram, props.station);
@@ -184,6 +185,16 @@ export default function LED_vision(props) {
         return { color: "white", name: "普通列車" };
     }
   };
+  const [selectedTrain, setSelectedTrain] = useState([]);
+  useEffect(() => {
+    if (!trainTimeAndNumber) return () => {};
+    if (!currentTrain) return () => {};
+    const data = trainTimeAndNumber
+      .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
+      .filter(timeFiltering)
+      .filter((d) => !!finalSwitch || d.lastStation != "当駅止");
+    setSelectedTrain(data);
+  }, [trainTimeAndNumber, currentTrain]);
   return (
     <View
       style={{
@@ -195,49 +206,17 @@ export default function LED_vision(props) {
       }}
     >
       <Header />
-      {trainTimeAndNumber
-        ? currentTrain &&
-          trainTimeAndNumber
-            .filter((d) => currentTrain.map((m) => m.num).includes(d.train))
-            .filter(timeFiltering)
-            .filter((d) => !!finalSwitch || d.lastStation != "当駅止")
-            .map((d, index) => {
-              const train = customTrainDataDetector(d.train);
-              return (
-                <>
-                  <View
-                    style={{
-                      alignContent: "center",
-                      alignItems: "center",
-                      width: "94%",
-                      marginVertical: 5,
-                      marginHorizontal: "3%",
-                      backgroundColor: "#000",
-                      flexDirection: "row",
-                    }}
-                    key={d.train}
-                  >
-                    <TrainName
-                      train={train}
-                      trainIDSwitch={trainIDSwitch}
-                      d={d}
-                      getTrainType={getTrainType(train.type)}
-                    />
-                    <LastStation d={d} />
-                    <DependTime d={d} />
-                    <StatusAndDelay
-                      currentTrain={currentTrain}
-                      d={d}
-                      props={props}
-                    />
-                  </View>
-                  {trainDescriptionSwitch && !!train.info && (
-                    <Description train={train} key={d.train + "Description"} />
-                  )}
-                </>
-              );
-            })
-        : null}
+      {selectedTrain.map((d, index) => (
+        <EachData
+          d={d}
+          trainIDSwitch={trainIDSwitch}
+          trainDescriptionSwitch={trainDescriptionSwitch}
+          props={props}
+          currentTrain={currentTrain}
+          getTrainType={getTrainType}
+          customTrainDataDetector={customTrainDataDetector}
+        />
+      ))}
       <Footer
         trainIDSwitch={trainIDSwitch}
         setTrainIDSwitch={setTrainIDSwitch}
@@ -325,6 +304,44 @@ const Footer = ({
   );
 };
 
+const EachData = ({
+  d,
+  trainIDSwitch,
+  trainDescriptionSwitch,
+  props,
+  currentTrain,
+  getTrainType,
+  customTrainDataDetector,
+}) => {
+  const train = customTrainDataDetector(d.train);
+  return (
+    <>
+      <View
+        style={{
+          alignContent: "center",
+          alignItems: "center",
+          width: "94%",
+          marginVertical: 5,
+          marginHorizontal: "3%",
+          backgroundColor: "#000",
+          flexDirection: "row",
+        }}
+      >
+        <TrainName
+          train={train}
+          trainIDSwitch={trainIDSwitch}
+          d={d}
+          getTrainType={getTrainType(train.type)}
+        />
+        <LastStation d={d} />
+        <DependTime d={d} />
+        <StatusAndDelay currentTrain={currentTrain} d={d} props={props} />
+      </View>
+      {trainDescriptionSwitch && !!train.info && <Description train={train} />}
+    </>
+  );
+};
+
 const TrainName = ({ train, trainIDSwitch, d, getTrainType }) => {
   const { trainName, trainNumDistance } = train;
   let TrainNumber = "";
@@ -395,7 +412,6 @@ const StatusAndDelay = ({ currentTrain, d, props }) => {
           setStatus("発車前");
           break;
         }
-
       case isNaN(delay):
         setStatus(delay);
         break;

components/駅名表/Sign.js

@@ -39,6 +39,7 @@ export default function Sign(props) {
   }, [currentStation]);
 
   useEffect(() => {
+    if (!currentStation[nexPrePosition]) return () => {};
     LayoutAnimation.easeInEaseOut();
     getPreNextStation(currentStation[nexPrePosition]);
   }, [nexPrePosition]);