お気に入り機能を実装

components/駅名表/Sign.js

@@ -12,7 +12,9 @@ import {
   widthPercentageToDP as wp,
   heightPercentageToDP as hp,
 } from "react-native-responsive-screen";
+import LottieView from "lottie-react-native";
 import { useInterval } from "../../lib/useInterval";
+import { AS } from "../../storageControl";
 
 export default function Sign(props) {
   const { currentStation, originalStationList, oP } = props;
@@ -20,6 +22,32 @@ export default function Sign(props) {
 
   const [preStation, setPreStation] = useState();
   const [nexStation, setNexStation] = useState();
+  const [testButtonStatus, setTestButtonStatus] = useState(false);
+  const [favoriteStation, setFavoriteStation] = useState([]);
+
+  useEffect(() => {
+    AS.getItem("favoriteStation")
+      .then((d) => {
+        console.log(d);
+        const returnData = JSON.parse(d);
+        console.log(returnData);
+        setFavoriteStation(returnData);
+      })
+      .catch((d) => console.log(d));
+  }, []);
+  useEffect(() => {
+    const isFavorite = favoriteStation.filter((d) => {
+      const compare = JSON.stringify(d);
+      const current = JSON.stringify(currentStation);
+      if (compare === current) {
+        return true;
+      } else {
+        return false;
+      }
+    });
+    console.log(isFavorite.length);
+    setTestButtonStatus(isFavorite.length != 0);
+  }, [favoriteStation]);
 
   useInterval(() => {
     if (currentStation.length == 1) {
@@ -68,10 +96,46 @@ export default function Sign(props) {
     setPreStation(returnData[0]);
     setNexStation(returnData[1]);
   };
+  const lottieRef = useRef();
   return (
     <TouchableOpacity style={styleSheet.外枠} onPress={oP}>
       <StationNumberMaker currentStation={currentStation} />
       <StationNameArea currentStation={currentStation} />
+      <TouchableOpacity
+        style={{ position: "absolute", right: -15, top: -20 }}
+        onPress={() => {
+          if (testButtonStatus) {
+            lottieRef.current.play(35, 7);
+            const otherData = favoriteStation.filter((d) => {
+              const compare = JSON.stringify(d);
+              const current = JSON.stringify(currentStation);
+              if (compare !== current) {
+                return true;
+              } else {
+                return false;
+              }
+            });
+            AS.setItem("favoriteStation", JSON.stringify(otherData));
+          } else {
+            lottieRef.current.play(7, 35);
+            let ret = favoriteStation;
+            console.log(currentStation);
+            ret.push(currentStation);
+            AS.setItem("favoriteStation", JSON.stringify(ret));
+          }
+          setTestButtonStatus(!testButtonStatus);
+        }}
+      >
+        <LottieView
+          progress={testButtonStatus ? 1 : 0}
+          speed={1.4}
+          style={{ width: 80, height: 80 }}
+          source={require("../../assets/939-star.json")}
+          ref={lottieRef}
+          loop={false}
+        />
+      </TouchableOpacity>
+
       <Text style={styleSheet.JRStyle}>JR</Text>
       <View style={styleSheet.下帯} />
       <View style={styleSheet.下帯内容}>