コードの整理とuseCurrentTrainの取得ルートの変更

MenuPage.js

@@ -15,7 +15,6 @@ import Setting from "./components/Settings/settings";
 import { useFavoriteStation } from "./stateBox/useFavoriteStation";
 import { optionData } from "./lib/stackOption";
 import AllTrainDiagramView from "./components/AllTrainDiagramView";
-import { useCurrentTrain } from "./stateBox/useCurrentTrain";
 import { useNavigation } from "@react-navigation/native";
 import { news } from "./config/newsUpdate";
 import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";
@@ -25,7 +24,6 @@ export function MenuPage() {
   const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   const { height, width } = useWindowDimensions();
   const tabBarHeight = useBottomTabBarHeight();
-  const { getCurrentTrain } = useCurrentTrain();
   const navigation = useNavigation();
   const { addListener } = navigation;
   useEffect(() => {
@@ -86,7 +84,7 @@ export function MenuPage() {
           headerTransparent: true,
         }}
         children={() => (
-          <Menu getCurrentTrain={getCurrentTrain} scrollRef={scrollRef} />
+          <Menu  scrollRef={scrollRef} />
         )}
       />
       <Stack.Screen name="news" options={optionData} component={News} />

components/Menu/Carousel/CarouselBox.tsx

@@ -1,25 +1,25 @@
 import Sign from "@/components/駅名表/Sign";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import { AS } from "@/storageControl";
 import { useWindowDimensions, View, LayoutAnimation } from "react-native";
-import Carousel from "react-native-reanimated-carousel";
+import Carousel, { ICarouselInstance } from "react-native-reanimated-carousel";
 import { SheetManager } from "react-native-actions-sheet";
 import { StationNumber } from "../StationPagination";
 import { SimpleDot } from "../SimpleDot";
 export const CarouselBox = ({
   originalStationList,
-  allStationData,
-  currentStation,
-  setSelectedCurrentStation,
-  carouselRef,
-  selectedCurrentStation,
+  listUpStation,
+  nearPositionStation,
+  setListIndex,
+  listIndex,
   navigate,
 }) => {
+  const carouselRef = useRef<ICarouselInstance>(null);
   const { height, width } = useWindowDimensions();
   const [dotButton, setDotButton] = useState(false);
   const oPSign = () => {
     const payload = {
-      currentStation: allStationData[selectedCurrentStation],
+      currentStation: listUpStation[listIndex],
       navigate,
       goTo: "menu",
       //@ts-ignore
@@ -46,6 +46,13 @@ export const CarouselBox = ({
       setDotButton(data === "true");
     });
   }, []);
+  useEffect(() => {
+    if (!carouselRef.current) return;
+    carouselRef?.current.scrollTo({
+      count: listIndex - carouselRef.current.getCurrentIndex(),
+      animated: true,
+    });
+  }, [listIndex]);
   const RenderItem = ({ item, index }) => {
     return (
       <View
@@ -61,7 +68,7 @@ export const CarouselBox = ({
         <View style={{ flex: 1 }} />
         <Sign
           stationID={item[0].StationNumber}
-          isCurrentStation={item == currentStation}
+          isCurrentStation={item == nearPositionStation}
           oP={oPSign}
           oLP={oLPSign}
         />
@@ -73,7 +80,7 @@ export const CarouselBox = ({
     <View style={{ flex: 1, paddingTop: 10 }}>
       <Carousel
         ref={carouselRef}
-        data={allStationData}
+        data={listUpStation}
         height={(((width / 100) * 80) / 20) * 9 + 10}
         pagingEnabled={true}
         snapEnabled={true}
@@ -86,7 +93,7 @@ export const CarouselBox = ({
           parallaxScrollingOffset: 100,
           parallaxAdjacentItemScale: 0.8,
         }}
-        onSnapToItem={setSelectedCurrentStation}
+        onSnapToItem={setListIndex}
         renderItem={RenderItem}
       />
       <View
@@ -98,19 +105,19 @@ export const CarouselBox = ({
         }}
       >
         {originalStationList &&
-          allStationData.map((d, index) => {
-            const active = index == selectedCurrentStation;
+          listUpStation.map((d, index) => {
+            const active = index == listIndex;
             const numberKey = d[0].StationNumber + index;
             return dotButton ? (
               <StationNumber
-                onPress={() => setSelectedCurrentStation(index)}
+                onPress={() => setListIndex(index)}
                 currentStation={d}
                 active={active}
                 key={numberKey}
               />
             ) : (
               <SimpleDot
-                onPress={() => setSelectedCurrentStation(index)}
+                onPress={() => setListIndex(index)}
                 active={active}
                 key={numberKey}
               />

components/発車時刻表/LED_vidion.js

@@ -42,44 +42,43 @@ import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
  * 9062D 四国まんなか千年ものがたり(臨時？)
  */
 export default function LED_vision(props) {
-  const { station, getCurrentTrain, navigate, openStationACFromEachTrainInfo } =
-    props;
-  const { currentTrain } = useCurrentTrain();
+  const { station, navigate, openStationACFromEachTrainInfo } = props;
+  const { getCurrentTrain, currentTrain } = useCurrentTrain();
   const [stationDiagram, setStationDiagram] = useState({}); //当該駅の全時刻表
   const [finalSwitch, setFinalSwitch] = useState(false);
   const [trainIDSwitch, setTrainIDSwitch] = useState(false);
   const [trainDescriptionSwitch, setTrainDescriptionSwitch] = useState(false);
   const [isInfoArea, setIsInfoArea] = useState(false);
   const { areaInfo, areaStationID } = useAreaInfo();
-  const { allTrainDiagram: trainDiagram } = useAllTrainDiagram();
+  const { allTrainDiagram } = useAllTrainDiagram();
 
   useEffect(() => {
     AS.getItem("LEDSettings/trainIDSwitch").then((data) => {
       setTrainIDSwitch(data === "true");
     });
     AS.getItem("LEDSettings/trainDescriptionSwitch").then((data) => {
-      setTrainDescriptionSwitch(data == "true");
+      setTrainDescriptionSwitch(data === "true");
     });
     AS.getItem("LEDSettings/finalSwitch").then((data) => {
-      setFinalSwitch(data == "true");
+      setFinalSwitch(data === "true");
     });
   }, []);
 
   useEffect(() => {
     // 現在の駅に停車するダイヤを作成する副作用[列車ダイヤと現在駅情報]
-    if (!trainDiagram) {
+    if (!allTrainDiagram) {
       setStationDiagram({});
       return;
     }
     let returnData = {};
-    Object.keys(trainDiagram).forEach((key) => {
-      if (trainDiagram[key].match(station[0].Station_JP + ",")) {
-        returnData[key] = trainDiagram[key];
+    Object.keys(allTrainDiagram).forEach((key) => {
+      if (allTrainDiagram[key].match(station[0].Station_JP + ",")) {
+        returnData[key] = allTrainDiagram[key];
       }
     });
     setStationDiagram(returnData);
     setIsInfoArea(station.some((s) => areaStationID.includes(s.StationNumber)));
-  }, [trainDiagram, station]);
+  }, [allTrainDiagram, station]);
 
   const [trainTimeAndNumber, setTrainTimeAndNumber] = useState(null);
 

menu.js

@@ -27,7 +27,7 @@ configureReanimatedLogger({
   level: ReanimatedLogLevel.error, // Set the log level to error
   strict: true, // Reanimated runs in strict mode by default
 });
-export default function Menu({ getCurrentTrain, scrollRef }) {
+export default function Menu({scrollRef }) {
   const { navigate, addListener, isFocused } = useNavigation();
   const { favoriteStation } = useFavoriteStation();
   const { originalStationList } = useStationList();
@@ -95,28 +95,17 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
     };
 
     let returnDataBase = lineList
-      .map((d) => {
-        return findStationEachLine(originalStationList[d]);
-      })
-      .filter((d) => {
-        return d.length > 0;
-      })
+      .map((d) =>  findStationEachLine(originalStationList[d]))
+      .filter((d) => d.length > 0)
       .reduce((pre, current) => {
         pre.push(...current);
         return pre;
-      }, []);
-
-    if (returnDataBase.length) {
-      const returnData = returnDataBase.map((d) => [d]);
-      setNearPositionStation(returnData);
-    } else {
-      setNearPositionStation([]);
-    }
+      }, []).map((d) => [d]);
+    setNearPositionStation(returnDataBase.length ? returnDataBase : []);
   };
 
   const [nearPositionStation, setNearPositionStation] = useState([]); //第三要素
 
-  const carouselRef = useRef();
   const [listIndex, setListIndex] = useState(0);
 
   const [listUpStation, setListUpStation] = useState([]);
@@ -137,14 +126,6 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
       setListIndex(count);
     }
   }, [listIndex, nearPositionStation, listUpStation]);
-  useEffect(() => {
-    if (!carouselRef.current) return;
-    carouselRef?.current.scrollTo({
-      count: listIndex - carouselRef.current.getCurrentIndex(),
-      animated: true,
-    });
-  }, [listIndex]);
-
   useEffect(() => {
     if (originalStationList == undefined) return;
     if (listUpStation.length == 0) return;
@@ -211,18 +192,16 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
             <CarouselBox
               {...{
                 originalStationList,
-                allStationData: listUpStation,
-                currentStation: nearPositionStation,
-                setSelectedCurrentStation: setListIndex,
-                carouselRef,
-                selectedCurrentStation: listIndex,
+                listUpStation,
+                nearPositionStation,
+                setListIndex ,
+                listIndex,
                 navigate,
               }}
             />
             {listUpStation[listIndex] && (
               <LED_vision
                 station={listUpStation[listIndex]}
-                getCurrentTrain={getCurrentTrain}
                 navigate={navigate}
                 openStationACFromEachTrainInfo={() => {}}
               />