駅名標の動作が不完全だった問題を修正

components/発車時刻表/LED_vidion.js

@@ -14,6 +14,7 @@ import {
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
 import { customTrainDataDetector } from "../custom-train-data";
+import { useInterval } from "../../lib/useInterval";
 
 let diagramData = undefined;
 
@@ -126,7 +127,6 @@ export default function LED_vision(props) {
     });
   };
   const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
-  useEffect(() => {
   const getCurrentTrain = () =>
     fetch(
       "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
@@ -134,11 +134,11 @@ export default function LED_vision(props) {
     )
       .then((response) => response.json())
       .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
-        .then((d) => setCurrentTrain(d));
+      .then(setCurrentTrain);
-    getCurrentTrain();
+
-    const currentTrainInterval = setInterval(getCurrentTrain, 15000);
+  useEffect(getCurrentTrain, []);
-    return () => clearInterval(currentTrainInterval);
+
-  }, []);
+  useInterval(getCurrentTrain, 15000);
 
   const timeFiltering = (d) => {
     const date = new Date();

components/駅名表/Sign.js

@@ -12,6 +12,7 @@ import {
   widthPercentageToDP as wp,
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
+import { useInterval } from "../../lib/useInterval";
 
 export default function Sign(props) {
   const { currentStation, originalStationList, oP } = props;
@@ -42,21 +43,12 @@ export default function Sign(props) {
     return returnData;
   };
   const [nexPrePosition, setNexPrePosition] = useState(0);
-  useEffect(() => {
+  useInterval(() => {
-    if (currentStation) {
-      if (currentStation.length > 1) {
-        let stationCount = setInterval(() => {
     LayoutAnimation.easeInEaseOut();
-          if (nexPrePosition + 1 == currentStation.length) {
+    setNexPrePosition(
-            setNexPrePosition(0);
+      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
-          } else {
+    );
-            setNexPrePosition(nexPrePosition + 1);
+  }, 2000);
-          }
-        }, 1000);
-        return () => clearInterval(stationCount);
-      }
-    }
-  }, [currentStation]);
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
@@ -64,16 +56,17 @@ export default function Sign(props) {
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>
-        {
+        {(() => {
-          currentStation.map((currentStation) => {
+          let [preStation, nexStation] = getPreNextStation(
-            let [preStation, nexStation] = getPreNextStation(currentStation);
+            currentStation[nexPrePosition]
+          );
           return (
             <View style={styleSheet.下枠フレーム}>
               <View style={styleSheet.下枠フレーム}>
                 {preStation && (
                   <>
                     <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                      {preStation.StationNumber != " " && (
+                    {preStation.StationNumber && (
                       <View style={styleSheet.下枠駅ナンバー}>
                         <View style={{ flex: 1 }} />
                         <Text
@@ -101,6 +94,7 @@ export default function Sign(props) {
                       stringData={nexStation}
                       ss={{ flex: 1, alignItems: "flex-end" }}
                     />
+                    {nexStation.StationNumber && (
                       <View style={styleSheet.下枠駅ナンバー}>
                         <View style={{ flex: 1 }} />
                         <Text
@@ -110,14 +104,14 @@ export default function Sign(props) {
                         </Text>
                         <View style={{ flex: 1 }} />
                       </View>
+                    )}
                     <Text style={styleSheet.下枠左右マーク}>▶</Text>
                   </>
                 )}
               </View>
             </View>
           );
-          })[nexPrePosition]
+        })()}
-        }
       </View>
     </TouchableOpacity>
   );
@@ -125,7 +119,7 @@ export default function Sign(props) {
 
 const StationNumberMaker = (props) => {
   return props.currentStation
-    .filter((d) => (d.StationNumber != " " ? true : false))
+    .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => (
       <View
         style={{

lib/getStationList.js

@@ -155,17 +155,36 @@ export const getStationList = async (props) => {
       高徳線,
       stationList.日英対応表
     );
-    stationList.徳島線 = addStationPosition(
-      concatBetweenStations(stationList.徳島線),
-      徳島線,
-      stationList.日英対応表
-    );
     stationList.鳴門線 = addStationPosition(
       concatBetweenStations(stationList.鳴門線),
       鳴門線,
       stationList.日英対応表
-    ); /* 
+    );
+    const tokushimaCurrent = addStationPosition(
+      concatBetweenStations(stationList.徳島線),
+      徳島線,
+      stationList.日英対応表
+    );
+    stationList.徳島線 = [
+      tokushimaCurrent[tokushimaCurrent.length - 1],
+      ...tokushimaCurrent,
+    ];
+    stationList.徳島線.pop();
     stationList.瀬戸大橋線 = [
+      {
+        Station_JP: "坂出",
+        Station_EN: "Sakaide",
+        MyStation: "3",
+        StationNumber: null,
+        DispNum: "3",
+        StationTimeTable:
+          "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/sakaide.pdf",
+        StationMap: "https://www.google.co.jp/maps/place/34.313222,133.856325",
+        JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/sakaide/",
+        lat: 34.313222,
+        lng: 133.856325,
+      },
+
       {
         Station_JP: "児島",
         Station_EN: "Kojima",
@@ -179,7 +198,20 @@ export const getStationList = async (props) => {
         lat: 34.462562,
         lng: 133.807809,
       },
-    ]; */
+      {
+        Station_JP: "宇多津",
+        Station_EN: "Utazu",
+        MyStation: "0",
+        StationNumber: null,
+        DispNum: "3",
+        StationTimeTable:
+          "http://www.jr-shikoku.co.jp/01_trainbus/jikoku/pdf/utazu.pdf",
+        StationMap: "https://www.google.co.jp/maps/place/34.306379,133.813784",
+        JrHpUrl: "http://www.jr-shikoku.co.jp/01_trainbus/kakueki/utazu/",
+        lat: 34.306379,
+        lng: 133.813784,
+      },
+    ];
     status = stationList;
     return stationList;
   });

lib/useInterval.js

@@ -0,0 +1,45 @@
+import { useEffect, useRef, useState } from "react";
+
+// type Control = {
+//   start: () => void;
+//   stop: () => void;
+// };
+
+// type State = 'RUNNING' | 'STOPPED';
+
+// type Fn = () => void;
+
+export const useInterval = (fn, interval, autostart = true) => {
+  const onUpdateRef = useRef();
+  const [state, setState] = useState("RUNNING");
+  const start = () => {
+    setState("RUNNING");
+  };
+  const stop = () => {
+    setState("STOPPED");
+  };
+  useEffect(() => {
+    onUpdateRef.current = fn;
+  }, [fn]);
+  useEffect(() => {
+    if (autostart) {
+      setState("RUNNING");
+    }
+  }, [autostart]);
+  useEffect(() => {
+    let timerId;
+    if (state === "RUNNING") {
+      timerId = setInterval(() => {
+        onUpdateRef.current?.();
+      }, interval);
+    } else {
+      timerId && clearInterval(timerId);
+    }
+    return () => {
+      timerId && clearInterval(timerId);
+    };
+  }, [interval, state]);
+  return [state, { start, stop }];
+};
+
+export default useInterval;