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

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,19 +127,18 @@ export default function LED_vision(props) {
     });
   };
   const trainTimeAndNumber = stationDiagram != null ? getTime() : null;
-  useEffect(() => {
+  const getCurrentTrain = () =>
-    const getCurrentTrain = () =>
+    fetch(
-      fetch(
+      "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
-        "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+      HeaderConfig
-        HeaderConfig
+    )
-      )
+      .then((response) => response.json())
-        .then((response) => response.json())
+      .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
-        .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
+      .then(setCurrentTrain);
-        .then((d) => setCurrentTrain(d));
+
-    getCurrentTrain();
+  useEffect(getCurrentTrain, []);
-    const currentTrainInterval = setInterval(getCurrentTrain, 15000);
+
-    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) {
+    LayoutAnimation.easeInEaseOut();
-      if (currentStation.length > 1) {
+    setNexPrePosition(
-        let stationCount = setInterval(() => {
+      nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
-          LayoutAnimation.easeInEaseOut();
+    );
-          if (nexPrePosition + 1 == currentStation.length) {
+  }, 2000);
-            setNexPrePosition(0);
-          } else {
-            setNexPrePosition(nexPrePosition + 1);
-          }
-        }, 1000);
-        return () => clearInterval(stationCount);
-      }
-    }
-  }, [currentStation]);
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
@@ -64,43 +56,45 @@ 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 (
+          );
+          return (
+            <View style={styleSheet.下枠フレーム}>
               <View style={styleSheet.下枠フレーム}>
-                <View style={styleSheet.下枠フレーム}>
+                {preStation && (
-                  {preStation && (
+                  <>
-                    <>
+                    <Text style={styleSheet.下枠左右マーク}>◀</Text>
-                      <Text style={styleSheet.下枠左右マーク}>◀</Text>
+                    {preStation.StationNumber && (
-                      {preStation.StationNumber != " " && (
+                      <View style={styleSheet.下枠駅ナンバー}>
-                        <View style={styleSheet.下枠駅ナンバー}>
+                        <View style={{ flex: 1 }} />
-                          <View style={{ flex: 1 }} />
+                        <Text
-                          <Text
+                          style={{
-                            style={{
+                            fontSize: parseInt("10%"),
-                              fontSize: parseInt("10%"),
+                            color: "white",
-                              color: "white",
+                          }}
-                            }}
+                        >
-                          >
+                          {preStation.StationNumber}
-                            {preStation.StationNumber}
+                        </Text>
-                          </Text>
+                        <View style={{ flex: 1 }} />
-                          <View style={{ flex: 1 }} />
+                      </View>
-                        </View>
+                    )}
-                      )}
+                    <StationName
-                      <StationName
+                      stringData={preStation}
-                        stringData={preStation}
+                      ss={{ flex: 1, alignItems: "flex-start" }}
-                        ss={{ flex: 1, alignItems: "flex-start" }}
+                    />
-                      />
+                  </>
-                    </>
+                )}
-                  )}
+              </View>
-                </View>
+              <View style={styleSheet.下枠フレーム}>
-                <View style={styleSheet.下枠フレーム}>
+                {nexStation && (
-                  {nexStation && (
+                  <>
-                    <>
+                    <StationName
-                      <StationName
+                      stringData={nexStation}
-                        stringData={nexStation}
+                      ss={{ flex: 1, alignItems: "flex-end" }}
-                        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>
+                    )}
-                    </>
+                    <Text style={styleSheet.下枠左右マーク}>▶</Text>
-                  )}
+                  </>
-                </View>
+                )}
               </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;