ファイルの整理

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 && (
-          <View
-            style={{
-            }}
-          >
-            {move ? (
-              <Image source={{ uri: trainIcon }} style={{ height: 30,width:30,margin:5 }} resizeMethod="resize" />
-            ) : (
-              <Ionicons {...anpanmanStatus} size={30}
-              style={{ margin: 5 }} />
-            )}
-          </View>
-        )}
+        <TrainIconStatus trainData={data} />
         <Text style={{ fontSize: 20, fontWeight: "bold", color: "white" }}>
           {trainName}
         </Text>