LEDと看板のロジック変更

components/FavoriteList.js

@@ -34,7 +34,6 @@ export default function FavoriteList({
         {favoriteStation
           .filter((d) => d[0].StationMap)
           .map((currentStation) => {
-            console.log(currentStation);
             return (
               <ListItem
                 onPress={() => {

components/発車時刻表/LED_vidion.js

@@ -138,7 +138,6 @@ export default function LED_vision(props) {
       });
       return { train: d, time: a.time, lastStation: a.lastStation };
     });
-    console.log(returnData);
     return returnData.sort((a, b) => {
       switch (true) {
         case parseInt(a.time.split(":")[0]) < parseInt(b.time.split(":")[0]):

components/駅名表/Sign.js

@@ -112,7 +112,6 @@ export default function Sign(props) {
             setFavoriteStation(otherData);
           } else {
             let ret = favoriteStation;
-            console.log(currentStation);
             ret.push(currentStation);
             AS.setItem("favoriteStation", JSON.stringify(ret));
             setFavoriteStation(ret);
@@ -164,7 +163,6 @@ const LottieDelayView = ({
       ref={lottieRef}
       loop={loop}
       onAnimationFinish={(isCanceled) => {
-        console.log("finish");
         setProgressState(progress);
       }}
     />

menu.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect } from "react";
+import React, { useRef, useState, useEffect, useMemo } from "react";
 import Carousel from "react-native-snap-carousel";
 import {
   Platform,
@@ -47,7 +47,7 @@ export default function Menu(props) {
   const StationBoardAcSR = useRef(null);
   const navigation = useNavigation();
 
-  //位置情報
+  //ここから位置情報
   const [location, setLocation] = useState(null);
   const [locationStatus, setLocationStatus] = useState(null);
   useEffect(() => {
@@ -70,30 +70,16 @@ export default function Menu(props) {
     if (locationStatus !== "granted") return () => {};
     getCurrentPosition();
   }, 5000);
+  //ここまで位置情報
 
+  //基礎駅情報取得
   const [originalStationList, setOriginalStationList] = useState();
   useEffect(() => {
     getStationList().then(setOriginalStationList);
   }, []);
 
-  const [locationAndFavorite, setLocationAndFavorite] = useState([]);
+  //ここから現在地付近の駅情報整理
-  useEffect(() => {
+  const [currentAreaStation, setCurrentAreaStation] = useState([]);
-    if (!favoriteStation) return () => {};
-    const data = favoriteStation.filter((d) =>
-      JSON.stringify(d) === JSON.stringify(currentStation) ? false : true
-    );
-    setLocationAndFavorite(data);
-  }, [currentStation, favoriteStation]);
-
-  useEffect(() => {
-    if (!(selectedCurrentStation < favoriteStation.length)) {
-      setSelectedCurrentStation(favoriteStation.length - 1);
-      carouselRef.current.snapToItem(favoriteStation.length - 1);
-    }
-  }, [favoriteStation]);
-
-  const [stationName, setStationName] = useState(undefined);
-  const [currentStation, setCurrentStation] = useState(undefined);
   useEffect(() => {
     if (!location) return () => {};
     if (!originalStationList) return () => {};
@@ -123,15 +109,43 @@ export default function Menu(props) {
       }, []);
     LayoutAnimation.easeInEaseOut();
     if (returnDataBase.length) {
-      let currentStation = currentStation == undefined ? [] : currentStation;
+      if (currentAreaStation.toString() != returnDataBase.toString()) {
-      if (currentStation.toString() != returnDataBase.toString()) {
+        setCurrentAreaStation(returnDataBase);
-        setCurrentStation(returnDataBase);
       }
     } else {
-      setCurrentStation(undefined);
+      setCurrentAreaStation([]);
     }
   }, [location, originalStationList]);
 
+  //Favoriteから現在地を排除し現在地を最初に持ってくるバージョン
+  //const [locationAndFavorite, setLocationAndFavorite] = useState([]);
+  const locationAndFavorite = useMemo(() => {
+    const data = favoriteStation.filter((d) =>
+      JSON.stringify(d) === JSON.stringify(currentAreaStation) ? false : true
+    );
+    return [...currentAreaStation, ...data];
+  }, [currentAreaStation, favoriteStation]);
+  // useEffect(() => {
+  //   if (!favoriteStation) return () => {};
+  //   const data = favoriteStation.filter((d) =>
+  //     JSON.stringify(d) === JSON.stringify(currentAreaStation) ? false : true
+  //   );
+  //   setLocationAndFavorite([...currentAreaStation, ...data]);
+  // }, [currentAreaStation, favoriteStation]);
+
+  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
+  useEffect(() => {
+    console.log(selectedCurrentStation > locationAndFavorite.length);
+    if (locationAndFavorite.length == 0) {
+      //carouselRef.current.snapToItem(0);
+      setSelectedCurrentStation(0);
+    }
+    if (selectedCurrentStation > locationAndFavorite.length - 1) {
+      //carouselRef.current.snapToItem(locationAndFavorite.length - 1);
+      setSelectedCurrentStation(locationAndFavorite.length - 1);
+    }
+  }, [locationAndFavorite]);
+
   const [count, setCount] = useState(0);
   const [delayData, setDelayData] = useState(undefined);
   const [getTime, setGetTime] = useState(new Date());
@@ -139,7 +153,6 @@ export default function Menu(props) {
   const carouselRef = useRef();
   const scrollRef = useRef();
   const [isScroll, setIsScroll] = useState(true);
-  const [selectedCurrentStation, setSelectedCurrentStation] = useState(0);
 
   useEffect(() => {
     fetch(
@@ -162,33 +175,15 @@ export default function Menu(props) {
     >
       <StatusbarDetect />
       <TitleBar />
-      <ScrollView ref={scrollRef} scrollEnabled={isScroll}>
+      <FixedContent
-        <TopMenuButton />
+        scrollRef={scrollRef}
-        <TextBox
+        isScroll={isScroll}
-          backgroundColor="#0099CC"
+        navigate={navigate}
-          flex={1}
-          onPressButton={() =>
-            Linking.openURL(
-              "https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
-            )
-          }
       >
-          <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
-            新型コロナウイルスに関するお知らせ
-          </Text>
-          <Text style={{ color: "white", fontSize: 15 }}>
-            列車の運行計画・混雑状況・感染症対策への取り組み
-          </Text>
-        </TextBox>
         <Carousel
           ref={carouselRef}
           layout={"default"}
-          data={
+          data={originalStationList && locationAndFavorite}
-            originalStationList &&
-            (currentStation
-              ? [currentStation, ...locationAndFavorite]
-              : locationAndFavorite)
-          }
           sliderWidth={wp("100%")}
           itemWidth={wp("80%")}
           enableMomentum
@@ -211,13 +206,11 @@ export default function Menu(props) {
             );
           }}
         />
-        {locationAndFavorite.length != 0 && originalStationList && (
+        {originalStationList && locationAndFavorite[selectedCurrentStation] && (
           <LED_vision
             station={
               originalStationList &&
-              (currentStation
+              locationAndFavorite[selectedCurrentStation][0]
-                ? [currentStation, ...locationAndFavorite]
-                : locationAndFavorite)[selectedCurrentStation][0]
             }
             navigate={navigate}
           />
@@ -229,6 +222,214 @@ export default function Menu(props) {
           loadingDelayData={loadingDelayData}
           delayData={delayData}
         />
+      </FixedContent>
+      <StationDeteilView
+        StationBoardAcSR={StationBoardAcSR}
+        currentStation={
+          originalStationList && locationAndFavorite[selectedCurrentStation]
+        }
+        originalStationList={originalStationList}
+        favoriteStation={favoriteStation}
+        setFavoriteStation={setFavoriteStation}
+        busAndTrainData={busAndTrainData}
+      />
+      <JRSTraInfo
+        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
+        getTime={getTime}
+        loadingDelayData={loadingDelayData}
+        setLoadingDelayData={setLoadingDelayData}
+        delayData={delayData}
+      />
+    </View>
+  );
+}
+
+const TitleBar = () => {
+  return (
+    <View style={{ alignItems: "center" }}>
+      <TouchableOpacity
+        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
+      >
+        <AutoHeightImage
+          source={require("./assets/Header.png")}
+          resizeMode="contain"
+          width={wp("100%")}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const TopMenuButton = () => {
+  const buttonList = [
+    {
+      backgroundColor: "#F89038",
+      icon: "train-car",
+      onPress: () =>
+        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
+      title: "駅・鉄道情報",
+    },
+    {
+      backgroundColor: "#EA4752",
+      icon: "google-spreadsheet",
+      onPress: () =>
+        Linking.openURL(
+          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
+        ),
+      title: "運賃表",
+    },
+    {
+      backgroundColor: "#91C31F",
+      icon: "clipboard-list-outline",
+      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
+      title: "予約",
+    },
+  ];
+  return (
+    <View style={{ flexDirection: "row" }}>
+      {buttonList.map((d, index) => (
+        <UsefulBox
+          backgroundColor={d.backgroundColor}
+          icon={d.icon}
+          flex={1}
+          onPressButton={d.onPress}
+          key={index + d.icon}
+        >
+          {d.title}
+        </UsefulBox>
+      ))}
+    </View>
+  );
+};
+
+const JRSTraInfoBox = (props) => {
+  const {
+    JRSTraInfoEXAcSR,
+    getTime,
+    setLoadingDelayData,
+    loadingDelayData,
+    delayData,
+  } = props;
+  const styles = {
+    touch: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      margin: 10,
+      borderColor: "black",
+      borderWidth: 2,
+      overflow: "hidden",
+    },
+    scroll: {
+      backgroundColor: "#0099CC",
+      borderRadius: 5,
+      maxHeight: 300,
+    },
+    bottom: {
+      position: "absolute",
+      top: 250,
+      alignItems: "center",
+      width: "100%",
+      height: 50,
+      backgroundColor: "#007FCC88",
+    },
+    box: {
+      padding: 10,
+      backgroundColor: "white",
+      borderBottomLeftRadius: 5,
+      borderBottomRightRadius: 5,
+    },
+  };
+  return (
+    <TouchableOpacity
+      onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
+      style={styles.touch}
+    >
+      <ScrollView scrollEnabled={false} style={styles.scroll}>
+        <View
+          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
+        >
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            列車遅延速報EX
+          </Text>
+          <View style={{ flex: 1 }} />
+          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
+            {getTime
+              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
+                ":" +
+                getTime.toLocaleTimeString("ja-JP").split(":")[1]
+              : NaN}
+          </Text>
+          <Ionicons
+            name="reload"
+            color="white"
+            size={30}
+            style={{ margin: 5 }}
+            onPress={() => {
+              LayoutAnimation.easeInEaseOut();
+              setLoadingDelayData(true);
+            }}
+          />
+        </View>
+        <View style={styles.box}>
+          {loadingDelayData ? (
+            <View style={{ alignItems: "center" }}>
+              <LottieView
+                autoPlay
+                loop
+                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
+                source={require("./assets/51690-loading-diamonds.json")}
+              />
+            </View>
+          ) : delayData ? (
+            delayData.map((d, index) => {
+              let data = d.split(" ");
+              return (
+                <View style={{ flexDirection: "row" }} key={data[1] + "key"}>
+                  <Text style={{ flex: 15, fontSize: 20 }}>
+                    {data[0].replace("\n", "")}
+                  </Text>
+                  <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
+                  <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
+                </View>
+              );
+            })
+          ) : (
+            <Text>現在、5分以上の遅れはありません。</Text>
+          )}
+        </View>
+      </ScrollView>
+      <View style={styles.bottom}>
+        <View style={{ flex: 1 }} />
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
+          詳細を見る
+        </Text>
+        <View style={{ flex: 1 }} />
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const FixedContent = (props) => (
+  <>
+    <ScrollView ref={props.scrollRef} scrollEnabled={props.isScroll}>
+      <TopMenuButton />
+      <TextBox
+        backgroundColor="#0099CC"
+        flex={1}
+        onPressButton={() =>
+          Linking.openURL(
+            "https://www.jr-shikoku.co.jp/02_information/suspension/sp/"
+          )
+        }
+      >
+        <Text style={{ color: "white", fontWeight: "bold", fontSize: 18 }}>
+          新型コロナウイルスに関するお知らせ
+        </Text>
+        <Text style={{ color: "white", fontSize: 15 }}>
+          列車の運行計画・混雑状況・感染症対策への取り組み
+        </Text>
+      </TextBox>
+      {props.children}
 
       <View style={{ flexDirection: "row" }}>
         <TicketBox
@@ -282,9 +483,7 @@ export default function Menu(props) {
         backgroundColor="#0099CC"
         flex={1}
         onPressButton={() =>
-            Linking.openURL(
+          Linking.openURL("https://www.jr-shikoku.co.jp/sp/index.html#menu-box")
-              "https://www.jr-shikoku.co.jp/sp/index.html#menu-box"
-            )
         }
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
@@ -493,7 +692,7 @@ export default function Menu(props) {
       <TextBox
         backgroundColor="black"
         flex={1}
-          onPressButton={() => navigate("setting")}
+        onPressButton={() => props.navigate("setting")}
       >
         <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
           アプリの設定
@@ -509,191 +708,5 @@ export default function Menu(props) {
     source={require("./assets/トレインビジョン関係/1.svg")}
   /> */}
     </ScrollView>
-      <StationDeteilView
+  </>
-        StationBoardAcSR={StationBoardAcSR}
+);
-        currentStation={
-          originalStationList &&
-          (currentStation
-            ? [currentStation, ...locationAndFavorite]
-            : locationAndFavorite)[selectedCurrentStation]
-        }
-        originalStationList={originalStationList}
-        favoriteStation={favoriteStation}
-        setFavoriteStation={setFavoriteStation}
-        busAndTrainData={busAndTrainData}
-      />
-      <JRSTraInfo
-        JRSTraInfoEXAcSR={JRSTraInfoEXAcSR}
-        getTime={getTime}
-        loadingDelayData={loadingDelayData}
-        setLoadingDelayData={setLoadingDelayData}
-        delayData={delayData}
-      />
-    </View>
-  );
-}
-
-const TitleBar = () => {
-  return (
-    <View style={{ alignItems: "center" }}>
-      <TouchableOpacity
-        onPress={() => Linking.openURL("https://www.jr-shikoku.co.jp")}
-      >
-        <AutoHeightImage
-          source={require("./assets/Header.png")}
-          resizeMode="contain"
-          width={wp("100%")}
-        />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-const TopMenuButton = () => {
-  const buttonList = [
-    {
-      backgroundColor: "#F89038",
-      icon: "train-car",
-      onPress: () =>
-        Linking.openURL("https://www.jr-shikoku.co.jp/01_trainbus/sp/"),
-      title: "駅・鉄道情報",
-    },
-    {
-      backgroundColor: "#EA4752",
-      icon: "google-spreadsheet",
-      onPress: () =>
-        Linking.openURL(
-          "https://www.jr-shikoku.co.jp/01_trainbus/jikoku/sp/#mainprice-box"
-        ),
-      title: "運賃表",
-    },
-    {
-      backgroundColor: "#91C31F",
-      icon: "clipboard-list-outline",
-      onPress: () => Linking.openURL("https://www.jr-shikoku.co.jp/e5489/"),
-      title: "予約",
-    },
-  ];
-  return (
-    <View style={{ flexDirection: "row" }}>
-      {buttonList.map((d, index) => (
-        <UsefulBox
-          backgroundColor={d.backgroundColor}
-          icon={d.icon}
-          flex={1}
-          onPressButton={d.onPress}
-          key={index + d.icon}
-        >
-          {d.title}
-        </UsefulBox>
-      ))}
-    </View>
-  );
-};
-
-const JRSTraInfoBox = (props) => {
-  const {
-    JRSTraInfoEXAcSR,
-    getTime,
-    setLoadingDelayData,
-    loadingDelayData,
-    delayData,
-  } = props;
-  const styles = {
-    touch: {
-      backgroundColor: "#0099CC",
-      borderRadius: 5,
-      margin: 10,
-      borderColor: "black",
-      borderWidth: 2,
-      overflow: "hidden",
-    },
-    scroll: {
-      backgroundColor: "#0099CC",
-      borderRadius: 5,
-      maxHeight: 300,
-    },
-    bottom: {
-      position: "absolute",
-      top: 250,
-      alignItems: "center",
-      width: "100%",
-      height: 50,
-      backgroundColor: "#007FCC88",
-    },
-    box: {
-      padding: 10,
-      backgroundColor: "white",
-      borderBottomLeftRadius: 5,
-      borderBottomRightRadius: 5,
-    },
-  };
-  return (
-    <TouchableOpacity
-      onPress={JRSTraInfoEXAcSR.current?.setModalVisible}
-      style={styles.touch}
-    >
-      <ScrollView scrollEnabled={false} style={styles.scroll}>
-        <View
-          style={{ padding: 10, flexDirection: "row", alignItems: "center" }}
-        >
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            列車遅延速報EX
-          </Text>
-          <View style={{ flex: 1 }} />
-          <Text style={{ fontSize: 30, fontWeight: "bold", color: "white" }}>
-            {getTime
-              ? getTime.toLocaleTimeString("ja-JP").split(":")[0] +
-                ":" +
-                getTime.toLocaleTimeString("ja-JP").split(":")[1]
-              : NaN}
-          </Text>
-          <Ionicons
-            name="reload"
-            color="white"
-            size={30}
-            style={{ margin: 5 }}
-            onPress={() => {
-              LayoutAnimation.easeInEaseOut();
-              setLoadingDelayData(true);
-            }}
-          />
-        </View>
-        <View style={styles.box}>
-          {loadingDelayData ? (
-            <View style={{ alignItems: "center" }}>
-              <LottieView
-                autoPlay
-                loop
-                style={{ width: 150, height: 150, backgroundColor: "#fff" }}
-                source={require("./assets/51690-loading-diamonds.json")}
-              />
-            </View>
-          ) : delayData ? (
-            delayData.map((d, index) => {
-              let data = d.split(" ");
-              return (
-                <View style={{ flexDirection: "row" }} key={data[1] + "key"}>
-                  <Text style={{ flex: 15, fontSize: 20 }}>
-                    {data[0].replace("\n", "")}
-                  </Text>
-                  <Text style={{ flex: 5, fontSize: 20 }}>{data[1]}</Text>
-                  <Text style={{ flex: 6, fontSize: 20 }}>{data[3]}</Text>
-                </View>
-              );
-            })
-          ) : (
-            <Text>現在、5分以上の遅れはありません。</Text>
-          )}
-        </View>
-      </ScrollView>
-      <View style={styles.bottom}>
-        <View style={{ flex: 1 }} />
-        <Text style={{ color: "white", fontWeight: "bold", fontSize: 20 }}>
-          詳細を見る
-        </Text>
-        <View style={{ flex: 1 }} />
-      </View>
-    </TouchableOpacity>
-  );
-};

trainbaseview.js

@@ -12,7 +12,6 @@ import { Ionicons, MaterialCommunityIcons } from "@expo/vector-icons";
 export default function TrainBase({ route, navigation }) {
   const { info, from } = route.params;
   const { navigate } = navigation;
-  console.log(info);
   const webview = useRef();
   const jss = `document.getElementById('Footer').style.display = 'none';
   ${