設定画面の調整

components/Settings/WidgetSettings.js

@@ -12,25 +12,21 @@ import { ListItem } from "native-base";
 
 export const WidgetSettings = ({ navigate }) => {
   const { JR_shikoku_train_info, Info_Widget } = nameToWidget;
+  const [time, setTime] = useState();
+  const [delayString, setDelayString] = useState();
+  const [trainInfo, setTrainInfo] = useState();
   const [widgetList, setWidgetList] = useState([]);
-  useEffect(() => {
+  const reload = async () => {
     const d = [];
-    Object.keys(nameToWidget).forEach((element) => {
+    const data = await getWidgetInfo("JR_shikoku_train_info");
-      const widgetInfo = getWidgetInfo(element);
+    data.forEach((elem) => {
-      widgetInfo.then((s) => {
+      d.push(elem.widgetId);
-        if (s.length > 0) {
-          s.forEach((elem) => {
-            console.log(elem);
-            d.push(elem);
-          });
-        }
-      });
     });
     setWidgetList(d);
-  }, []);
+  };
-  const [time, setTime] = useState(time);
+
-  const [delayString, setDelayString] = useState(delayString);
+  useEffect(reload, []);
-  const [trainInfo, setTrainInfo] = useState();
+
   useEffect(() => {
     getDelayData().then(({ time, delayString }) => {
       setTime(time);
@@ -144,48 +140,9 @@ export const WidgetSettings = ({ navigate }) => {
             名前
           </Text>
         </ListItem>
-        {widgetList.map((widget) => {
+        {widgetList.map((id) => (
-          return (
+          <WidgetList id={id} key={id} />
-            <ListItem
+        ))}
-              key={widget.widgetId}
-              onPress={() => {
-                //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
-                if (widget.widgetName === "Info_Widget") {
-                  AS.setItem(
-                    `widgetType/${widget.widgetId}`,
-                    "JR_shikoku_train_info"
-                  );
-                } else {
-                  AS.setItem(`widgetType/${widget.widgetId}`, "Info_Widget");
-                }
-              }}
-            >
-              <Text
-                style={{
-                  fontSize: 20,
-                  alignItems: "center",
-                  alignContent: "center",
-                  textAlign: "center",
-                  textAlignVertical: "center",
-                  marginRight: 10,
-                }}
-              >
-                {widget.widgetId}
-              </Text>
-              <Text
-                style={{
-                  fontSize: 20,
-                  alignItems: "center",
-                  alignContent: "center",
-                  textAlign: "center",
-                  textAlignVertical: "center",
-                }}
-              >
-                {widget.widgetName}
-              </Text>
-            </ListItem>
-          );
-        })}
       </ScrollView>
       <Text
         style={{
@@ -217,3 +174,54 @@ const SimpleSwitch = ({ bool, setBool, str }) => (
     />
   </View>
 );
+const WidgetList = ({ id }) => {
+  const [widgetConfig, setWidgetConfig] = useState("");
+  const reload = () => {
+    AS.getItem(`widgetType/${id}`)
+      .then((widgetType) => {
+        setWidgetConfig(widgetType);
+      })
+      .catch((e) => {
+        setWidgetConfig("JR_shikoku_train_info");
+      });
+  };
+  useEffect(reload, [id]);
+  return (
+    <ListItem
+      key={id}
+      onPress={() => {
+        //widget.widgetNameで定義されてないもう一つのウィジェットを選択する
+        if (widgetConfig === "Info_Widget") {
+          AS.setItem(`widgetType/${id}`, "JR_shikoku_train_info");
+        } else {
+          AS.setItem(`widgetType/${id}`, "Info_Widget");
+        }
+        reload();
+      }}
+    >
+      <Text
+        style={{
+          fontSize: 20,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+          marginRight: 10,
+        }}
+      >
+        {id}
+      </Text>
+      <Text
+        style={{
+          fontSize: 20,
+          alignItems: "center",
+          alignContent: "center",
+          textAlign: "center",
+          textAlignVertical: "center",
+        }}
+      >
+        {widgetConfig}
+      </Text>
+    </ListItem>
+  );
+};