diff --git a/components/発車時刻表/LED_vidion.js b/components/発車時刻表/LED_vidion.js
index cc9400c..6314246 100644
--- a/components/発車時刻表/LED_vidion.js
+++ b/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 = () =>
- fetch(
- "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
- HeaderConfig
- )
- .then((response) => response.json())
- .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
- .then((d) => setCurrentTrain(d));
- getCurrentTrain();
- const currentTrainInterval = setInterval(getCurrentTrain, 15000);
- return () => clearInterval(currentTrainInterval);
- }, []);
+ const getCurrentTrain = () =>
+ fetch(
+ "https://train.jr-shikoku.co.jp/g?arg1=train&arg2=train",
+ HeaderConfig
+ )
+ .then((response) => response.json())
+ .then((d) => d.map((x) => ({ num: x.TrainNum, delay: x.delay })))
+ .then(setCurrentTrain);
+
+ useEffect(getCurrentTrain, []);
+
+ useInterval(getCurrentTrain, 15000);
const timeFiltering = (d) => {
const date = new Date();
diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js
index ccbc20a..4517c54 100644
--- a/components/駅名表/Sign.js
+++ b/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(() => {
- if (currentStation) {
- if (currentStation.length > 1) {
- let stationCount = setInterval(() => {
- LayoutAnimation.easeInEaseOut();
- if (nexPrePosition + 1 == currentStation.length) {
- setNexPrePosition(0);
- } else {
- setNexPrePosition(nexPrePosition + 1);
- }
- }, 1000);
- return () => clearInterval(stationCount);
- }
- }
- }, [currentStation]);
+ useInterval(() => {
+ LayoutAnimation.easeInEaseOut();
+ setNexPrePosition(
+ nexPrePosition + 1 == currentStation.length ? 0 : nexPrePosition + 1
+ );
+ }, 2000);
return (
@@ -64,43 +56,45 @@ export default function Sign(props) {
JR
- {
- currentStation.map((currentStation) => {
- let [preStation, nexStation] = getPreNextStation(currentStation);
- return (
+ {(() => {
+ let [preStation, nexStation] = getPreNextStation(
+ currentStation[nexPrePosition]
+ );
+ return (
+
-
- {preStation && (
- <>
- ◀
- {preStation.StationNumber != " " && (
-
-
-
- {preStation.StationNumber}
-
-
-
- )}
-
-
- )}
-
-
- {nexStation && (
- <>
-
+ {preStation && (
+ <>
+ ◀
+ {preStation.StationNumber && (
+
+
+
+ {preStation.StationNumber}
+
+
+
+ )}
+
+
+ )}
+
+
+ {nexStation && (
+ <>
+
+ {nexStation.StationNumber && (
- ▶
-
- )}
-
+ )}
+ ▶
+
+ )}
- );
- })[nexPrePosition]
- }
+
+ );
+ })()}
);
@@ -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) => (
{
高徳線,
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;
});
diff --git a/lib/useInterval.js b/lib/useInterval.js
new file mode 100644
index 0000000..a646862
--- /dev/null
+++ b/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;