設定機能を実装

components/Settings/FavoriteSettings.js

@@ -1,13 +1,11 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { View, Text, TouchableOpacity, ScrollView } from "react-native";
-import { SwitchArea } from "../atom/SwitchArea";
 import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
 import { CheckBox } from "react-native-elements";
-import { ListItem } from "native-base";
-import Icon from "react-native-vector-icons/Entypo";
+import { FavoriteSettingsItem } from "./FavoliteSettings/FavoiliteSettingsItem";
 
 export const FavoriteSettings = ({ navigate }) => {
-  const { favoriteStation } = useFavoriteStation();
+  const { favoriteStation, setFavoriteStation } = useFavoriteStation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
@@ -51,33 +49,15 @@ export const FavoriteSettings = ({ navigate }) => {
       </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
         <Text>作成中</Text>
-        {favoriteStation.map((currentStation) => {
-          return (
-            <ListItem>
-              <Text style={{ fontSize: 20, flex: 2 }}>
-                {currentStation
-                  .map((d) => d.StationNumber)
-                  .filter((d) => d !== null)
-                  .join("/")}
-              </Text>
-              <Text style={{ fontSize: 20, flex: 3 }}>
-                {currentStation[0].Station_JP}
-              </Text>
-              <View
-                style={{
-                  flex: 2,
-                  flexDirection: "row",
-                  alignContent: "center",
-                  alignItems: "center",
-                }}
-              >
-                <View style={{ flex: 1 }} />
-                <Text style={{ fontSize: 20 }}>移動する</Text>
-                <Icon name="chevron-right" size={20} />
-              </View>
-            </ListItem>
-          );
-        })}
+        {favoriteStation.map((currentStation, index, array) => (
+          <FavoriteSettingsItem
+            currentStation={currentStation}
+            setFavoriteStation={setFavoriteStation}
+            index={index}
+            array={array}
+            key={currentStation[0].StationNumber}
+          />
+        ))}
       </ScrollView>
     </View>
   );