ファイルの分離、整理

components/ActionSheetComponents/EachTrainInfoCore/trainIconStatus.tsx

@@ -0,0 +1,83 @@
+import React, { ComponentProps, FC, useEffect, useState } from "react";
+import { View, Image, TouchableOpacity } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
+import { useInterval } from "../../../lib/useInterval";
+import { Icon } from "@expo/vector-icons/build/createIconSet";
+
+type GlyphNames = ComponentProps<typeof Ionicons>["name"];
+
+type Props = {
+  data: { trainNum: string; limited: string };
+  navigate: any;
+  from: string;
+};
+type apt = {
+  name: GlyphNames;
+  color: string;
+};
+export const TrainIconStatus: FC<Props> = ({ data,navigate,from }) => {
+  const [trainIcon, setTrainIcon] = useState(null);
+  const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
+  useEffect(() => {
+    if (!data.trainNum) return;
+    switch (data.trainNum) {
+      case "32D":
+      case "36D":
+      case "44D":
+      case "48D":
+      case "56D":
+      case "33D":
+      case "37D":
+      case "45D":
+      case "49D":
+      case "57D":
+        setTrainIcon(
+          "https://n8n.haruk.in/webhook/dosan-anpanman-pictures.png?trainNum=" +
+          data.trainNum
+        );
+        fetch(
+          `https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format(
+            "M"
+          )}&day=${dayjs().format("D")}&trainNum=${data.trainNum}`
+        )
+          .then((d) => d.json())
+          .then((d) => {
+            if (d.trainStatus == "〇") {
+              //setAnpanmanStatus({name:"checkmark-circle-outline",color:"blue"});
+            } else if (d.trainStatus == "△") {
+              setAnpanmanStatus({ name: "warning-outline", color: "yellow" });
+            } else if (d.trainStatus == "×") {
+              setAnpanmanStatus({ name: "close-circle-outline", color: "red" });
+            }
+          });
+        break;
+    }
+  }, [data.trainNum]);
+  const [move, setMove] = useState(true);
+  useInterval(
+    () => {
+      // anpanmanStatusがデータを持っているなら実行
+      if (anpanmanStatus) setMove(!move);
+    },
+    1000,
+    true
+  );
+  return (
+    <>
+      {trainIcon && (
+        <View style={{}} >
+          {move ? (
+            <Image
+              source={{ uri: trainIcon }}
+              style={{ height: 30, width: 30, margin: 5 }}
+              resizeMethod="resize"
+            />
+          ) : (
+            <Ionicons {...anpanmanStatus} size={30} style={{ margin: 5 }} />
+          )}
+        </View>
+      )}
+    </>
+  );
+};