ファイルの整理

components/ActionSheetComponents/EachTrainInfo/trainIconStatus.tsx

@@ -0,0 +1,83 @@
+import React, { ComponentProps, FC, useEffect, useState } from "react";
+import { View, Image } 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 = {
+  trainData: {
+    trainNum: string;
+    limited: string;
+  };
+};
+type apt = {
+  name: GlyphNames;
+  color: string;
+};
+export const TrainIconStatus: FC<Props> = ({ trainData }) => {
+  const [trainIcon, setTrainIcon] = useState(null);
+  const [anpanmanStatus, setAnpanmanStatus] = useState<apt>();
+  useEffect(() => {
+    if (!trainData.trainNum) return;
+    switch (trainData.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=" +
+            trainData.trainNum
+        );
+        fetch(
+          `https://n8n.haruk.in/webhook/dosan-anpanman?month=${dayjs().format(
+            "M"
+          )}&day=${dayjs().format("D")}&trainNum=${trainData.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;
+    }
+  }, [trainData.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>
+      )}
+    </>
+  );
+};

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -37,6 +37,7 @@ import { ShowSpecialTrain } from "./EachTrainInfo/ShowSpecialTrain";
 import { useNavigation } from "@react-navigation/native";
 import { useInterval } from "../../lib/useInterval";
 import dayjs from "dayjs";
+import { TrainIconStatus } from "./EachTrainInfo/trainIconStatus";
 
 export const EachTrainInfoCore = ({
   actionSheetRef,
@@ -84,50 +85,6 @@ export const EachTrainInfoCore = ({
   const [currentPosition, setCurrentPosition] = useState([]);
   const [trainData, setTrainData] = useState([]);
 
-  const [trainIcon, setTrainIcon] = useState(null);
-  const [anpanmanStatus, setAnpanmanStatus] = useState({name:"warning-outline",color:"yellow"});
-  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 (Object.keys(anpanmanStatus).length > 0  ) setMove(!move);
-    },
-    1000,
-    true
-  );
 
   const stationList =
     originalStationList &&
@@ -328,19 +285,7 @@ export const EachTrainInfoCore = ({
         </View>
       )}
       <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
-        {trainIcon && (
+        <TrainIconStatus trainData={data} />
-          <View
-            style={{
-            }}
-          >
-            {move ? (
-              <Image source={{ uri: trainIcon }} style={{ height: 30,width:30,margin:5 }} resizeMethod="resize" />
-            ) : (
-              <Ionicons {...anpanmanStatus} size={30}
-              style={{ margin: 5 }} />
-            )}
-          </View>
-        )}
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
           {trainName}
         </Text>