リスト表示機能を追加

components/Settings/FavoriteSettings.js

@@ -1,26 +1,13 @@
-import React from "react";
+import React, { useEffect, useState } 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 { TripleSwitchArea } from "../atom/TripleSwitchArea";
+import { ListItem } from "native-base";
+import Icon from "react-native-vector-icons/Entypo";
 
-export const FavoriteSettings = ({
-  navigate,
-  iconSetting,
-  setIconSetting,
-  mapSwitch,
-  setMapSwitch,
-  stationMenu,
-  setStationMenu,
-  usePDFView,
-  setUsePDFView,
-  trainMenu,
-  setTrainMenu,
-  trainPosition,
-  setTrainPosition,
-  headerSize,
-  setHeaderSize,
-}) => {
+export const FavoriteSettings = ({ navigate }) => {
+  const { favoriteStation } = useFavoriteStation();
   return (
     <View style={{ height: "100%", backgroundColor: "#0099CC" }}>
       <View style={{ backgroundColor: "#0099CC", flexDirection: "row" }}>
@@ -63,79 +50,34 @@ export const FavoriteSettings = ({
         <View style={{ flex: 1 }}></View>
       </View>
       <ScrollView style={{ flex: 1, backgroundColor: "white" }}>
-        {/* <View style={{ flex: 1 }}>
-          <SwitchArea
-            str="列車アイコン表示"
-            bool={iconSetting}
-            setBool={setIconSetting}
-            falseImage={require("../../assets/configuration/icon_default.jpg")}
-            trueImage={require("../../assets/configuration/icon_original.jpg")}
-            falseText={"本家\n(文字アイコン)"}
-            trueText={"オリジナル\n(車種アイコン)"}
-          />
-          <SwitchArea
-            str="トップメニュー表示"
-            bool={mapSwitch}
-            setBool={setMapSwitch}
-            falseImage={require("../../assets/configuration/menu_default.jpg")}
-            trueImage={require("../../assets/configuration/menu_original.jpg")}
-            falseText={"本家\n(文字＆路線リスト)"}
-            trueText={"オリジナル\n(マップ＆お気に入り)"}
-          />
-          <SwitchArea
-            str="駅メニュー表示"
-            bool={stationMenu}
-            setBool={setStationMenu}
-            falseText={"本家\n(文字)"}
-            trueText={"オリジナル\n(駅名標)"}
-            falseImage={require("../../assets/configuration/station_default.jpg")}
-            trueImage={require("../../assets/configuration/station_original.jpg")}
-          >
-            <SimpleSwitch
-              bool={usePDFView}
-              setBool={setUsePDFView}
-              color="red"
-              str="時刻表PDFをアプリの外で表示する"
-            />
-          </SwitchArea>
-          <SwitchArea
-            str="列車メニュー"
-            bool={trainMenu}
-            setBool={setTrainMenu}
-            falseText={"本家"}
-            trueText={"オリジナル"}
-            falseImage={require("../../assets/configuration/train_default.jpg")}
-            trueImage={require("../../assets/configuration/train_original.jpg")}
-          >
-            <TripleSwitchArea
-              str={"ヘッダーサイズ"}
-              bool={headerSize}
-              setBool={setHeaderSize}
-              firstItem={{
-                firstImage: require("../../assets/configuration/train_original_small.jpg"),
-                firstText: "小固定",
-                firstValue: "small",
-              }}
-              secondItem={{
-                secondImage: require("../../assets/configuration/train_original.jpg"),
-                secondText: "既定(可変)",
-                secondValue: "default",
-              }}
-              thirdItem={{
-                thirdImage: require("../../assets/configuration/train_original.jpg"),
-                thirdText: "大固定",
-                thirdValue: "big",
-              }}
-            />
-            <SimpleSwitch
-              bool={trainPosition}
-              setBool={setTrainPosition}
-              color="red"
-              str="列車の現在位置をアイコン表示"
-            />
-          </SwitchArea>
-        </View> */}
         <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>
+          );
+        })}
       </ScrollView>
     </View>
   );