From 448b0696acee8f490f6772e1398c18f91a1a8590 Mon Sep 17 00:00:00 2001 From: harukin-OneMix4 Date: Sat, 19 Nov 2022 00:36:56 +0900 Subject: [PATCH] =?UTF-8?q?=E9=A7=85=E5=90=8D=E6=A8=99=E3=81=AE=E5=8B=95?= =?UTF-8?q?=E4=BD=9C=E3=81=8C=E4=B8=8D=E5=AE=8C=E5=85=A8=E3=81=A0=E3=81=A3?= =?UTF-8?q?=E3=81=9F=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/発車時刻表/LED_vidion.js | 26 +++--- components/駅名表/Sign.js | 112 +++++++++++------------ lib/getStationList.js | 46 ++++++++-- lib/useInterval.js | 45 +++++++++ 4 files changed, 150 insertions(+), 79 deletions(-) create mode 100644 lib/useInterval.js 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;