選択された駅名板を利用したLED表示と選択画面の整備

menu.js

@@ -74,6 +74,14 @@ export default function Menu(props) {
   useEffect(() => {
     getStationList().then(setOriginalStationList);
   }, []);
+  const [locationAndFavorite, setLocationAndFavorite] = useState([]);
+  useEffect(() => {
+    if (!favoriteStation) return () => {};
+    const data = favoriteStation.filter((d) =>
+      JSON.stringify(d) === JSON.stringify(currentStation) ? false : true
+    );
+    setLocationAndFavorite(data);
+  }, [currentStation, favoriteStation]);
 
   const [stationName, setStationName] = useState(undefined);
   const [currentStation, setCurrentStation] = useState(undefined);
@@ -123,6 +131,7 @@ export default function Menu(props) {
   const carouselRef = useRef();
   const scrollRef = useRef();
   const [isScroll, setIsScroll] = useState(true);
+  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
 
   useEffect(() => {
     fetch(
@@ -166,11 +175,20 @@ export default function Menu(props) {
         <Carousel
           ref={carouselRef}
           layout={"default"}
-          data={originalStationList && favoriteStation}
+          data={
+            originalStationList &&
+            (currentStation
+              ? [currentStation, ...locationAndFavorite]
+              : locationAndFavorite)
+          }
           sliderWidth={wp("100%")}
           itemWidth={wp("80%")}
           enableMomentum
           callbackOffsetMargin={1000}
+          activeAnimationOptions={0.3}
+          onSnapToItem={(d) => {
+            setSelectedCurrentStation(d);
+          }}
           renderItem={({ item, index }) => {
             return (
               <View style={{ marginVertical: 10 }} key={item[0].StationNumber}>
@@ -185,8 +203,16 @@ export default function Menu(props) {
             );
           }}
         />
-        {currentStation && (
-          <LED_vision station={currentStation[0]} navigate={navigate} />
+        {(currentStation || originalStationList) && (
+          <LED_vision
+            station={
+              originalStationList &&
+              (currentStation
+                ? [currentStation, ...locationAndFavorite]
+                : locationAndFavorite)[selectedCurrentStation][0]
+            }
+            navigate={navigate}
+          />
         )}
         <JRSTraInfoBox
           JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
@@ -477,7 +503,12 @@ export default function Menu(props) {
       </ScrollView>
       <StationDeteilView
         StationBoardAcSR={StationBoardAcSR}
-        currentStation={currentStation}
+        currentStation={
+          originalStationList &&
+          (currentStation
+            ? [currentStation, ...locationAndFavorite]
+            : locationAndFavorite)[selectedCurrentStation]
+        }
         originalStationList={originalStationList}
         favoriteStation={favoriteStation}
         setFavoriteStation={setFavoriteStation}