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"; import { SheetManager } from "react-native-actions-sheet"; import { customTrainDataDetector } from "../../custom-train-data"; type GlyphNames = ComponentProps["name"]; type Props = { data: { trainNum: string; limited: string }; navigate: any; from: string; }; type apt = { name: GlyphNames; color: string; }; export const TrainIconStatus: FC = ({ data, navigate, from }) => { const [trainIcon, setTrainIcon] = useState(null); const [anpanmanStatus, setAnpanmanStatus] = useState(); const [address, setAddress] = useState(""); useEffect(() => { if (!data.trainNum) return; const { trainIcon, infoUrl } = customTrainDataDetector(data.trainNum); if (trainIcon) setTrainIcon(trainIcon); if (infoUrl) setAddress(infoUrl); switch (data.trainNum) { case "32D": case "36D": case "44D": case "48D": case "56D": case "33D": case "37D": case "45D": case "49D": case "57D": fetch( `https://n8n.haruk.in/webhook/dosan-anpanman?trainNum=${ data.trainNum }&month=${dayjs().format("M")}&day=${dayjs().format("D")}` ) .then((d) => d.json()) .then((d) => { console.log(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; case "2074D": case "2076D": case "2080D": case "2082D": case "2071D": case "2073D": case "2079D": case "2081D": fetch( `https://n8n.haruk.in/webhook/dosan-anpanman-first?trainNum=${ data.trainNum }&month=${dayjs().format("M")}&day=${dayjs().format("D")}` ) .then((d) => d.json()) .then((d) => { console.log(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 && ( { navigate("howto", { info: address, goTo: from == "LED" ? "menu" : from, }); SheetManager.hide("EachTrainInfo"); }} > {move ? ( ) : ( )} )} ); };