お気に入り/現在地切り替え機能を仮作成

components/Menu/Carousel/CarouselTypeChanger.tsx

@@ -2,7 +2,13 @@ import React, { useRef } from "react";
 import { View, TouchableOpacity, Text } from "react-native";
 import Ionicons from "react-native-vector-icons/Ionicons";
 
-export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
+export const CarouselTypeChanger = ({
+  locationStatus,
+  position,
+  mapsRef,
+  stationListMode,
+  setStationListMode,setSelectedCurrentStation
+}) => {
   return (
     <View style={{ width: "100%", height: 40, flexDirection: "row" }}>
       <TouchableOpacity
@@ -13,7 +19,10 @@ export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
           alignItems: "center",
           flexDirection: "row",
           marginHorizontal: 5,
-          borderRadius: 30,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          borderBottomLeftRadius: stationListMode == "position" ? 0 : 20,
+          borderBottomRightRadius: stationListMode == "position" ? 0 : 20,
         }}
         disabled={!locationStatus}
         onPress={() => {
@@ -28,6 +37,7 @@ export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
             },
             1000
           );
+          setStationListMode("position");
         }}
       >
         <Ionicons
@@ -48,6 +58,36 @@ export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
           現在地基準
         </Text>
       </TouchableOpacity>
+      <TouchableOpacity
+        style={{
+          padding: 5,
+          alignItems: "center",
+          flexDirection: "row",
+          marginHorizontal: 5,
+          borderRadius: 50,
+        }}
+        disabled={true}
+        onPress={() => {
+          if (!position) return;
+          const { latitude, longitude } = position.coords;
+          mapsRef.current.animateToRegion(
+            {
+              latitude,
+              longitude,
+              latitudeDelta: 0.05,
+              longitudeDelta: 0.05,
+            },
+            1000
+          );
+        }}
+      >
+        <Ionicons
+          name="menu"
+          size={30}
+          color="#0099CC"
+          style={{ marginHorizontal: 5 }}
+        />
+      </TouchableOpacity>
       <TouchableOpacity
         style={{
           flex: 1,
@@ -56,10 +96,15 @@ export const CarouselTypeChanger = ({ locationStatus, position, mapsRef }) => {
           alignItems: "center",
           flexDirection: "row",
           marginHorizontal: 5,
-          borderRadius: 30,
+          borderTopLeftRadius: 20,
+          borderTopRightRadius: 20,
+          borderBottomLeftRadius: stationListMode == "favorite" ? 0 : 20,
+          borderBottomRightRadius: stationListMode == "favorite" ? 0 : 20,
         }}
         onPress={() => {
           // お気に入りリスト更新
+          setStationListMode("favorite");
+          setSelectedCurrentStation(0);
         }}
       >
         <Ionicons name="star" size={14} color="white" style={{ margin: 5 }} />

menu.js

@@ -35,6 +35,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   const { bottom, left, right, top } = useSafeAreaInsets();
   const tabBarHeight = useBottomTabBarHeight();
   const [mapsOpacity, setMapsOpacity] = useState(false);
+  const [stationListMode, setStationListMode] = useState/*<"position"|"favorite">*/("position");
   const mapsRef = useRef(null);
   const MapHeight =
     height -
@@ -62,7 +63,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
   const makeCurrentStation = (location) => {
     if (!originalStationList) return () => {};
     const findStationEachLine = (selectLine) => {
-      const searchArea = 0.002;
+      const searchArea = stationListMode == "position" ? 0.1 : 0.002;
       const _calcDistance = (from, to) => {
         let lat = Math.abs(from.lat - to.lat);
         let lng = Math.abs(from.lng - to.lng);
@@ -80,7 +81,9 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
 
     let returnDataBase = lineList
       .map((d) => findStationEachLine(originalStationList[d]))
-      .filter((d) => d.length > 0)
+      .filter((d) => {
+        console.log(d);
+        return d.length > 0})
       .reduce((pre, current) => {
         pre.push(...current);
         return pre;
@@ -102,10 +105,17 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
 
   const [allStationData, setAllStationData] = useState([]);
   useEffect(() => {
+    if(stationListMode == "position"){
+      setAllStationData(
+        [currentStation].filter((d) => d != undefined)
+      );
+    }else{
     setAllStationData(
       [currentStation, ...favoriteStation].filter((d) => d != undefined)
     );
-  }, [currentStation, favoriteStation]);
+
+    }
+  }, [currentStation, favoriteStation,stationListMode]);
   useEffect(() => {
     if (allStationData.length == 0) {
       setSelectedCurrentStation(0);
@@ -178,7 +188,7 @@ export default function Menu({ getCurrentTrain, scrollRef }) {
           }}
           onPress={() => alert("地図をタップ")}
         />
-        <CarouselTypeChanger {...{ locationStatus, position, mapsRef }} />
+        <CarouselTypeChanger {...{ locationStatus, position, mapsRef,stationListMode, setStationListMode,setSelectedCurrentStation }} />
         {allStationData.length != 0 && originalStationList.length != 0 && (
           <>
             <CarouselBox