typeの整備

components/ActionSheetComponents/EachTrainInfo/EachStopList.tsx

@@ -1,9 +1,30 @@
-import React from "react";
+import React, { FC } from "react";
 import { View, Text, TouchableWithoutFeedback } from "react-native";
 import dayjs from "dayjs";
 import lineColorList from "../../../assets/originData/lineColorList";
 
-export const EachStopList = ({
+type seTypes = "発編" | "着編" | "通編" | "頃編" | "発" | "着" | string;
+
+type currentTrainDataType = {
+  Index: number;
+  num: string;
+  delay: "入線" | number;
+  Pos: string;
+  PosNum: number;
+  Direction: number;
+  Type: string;
+  Line: string;
+};
+type props = {
+  i: string;
+  index: number;
+  stationList: { StationName: string; StationNumber: string }[][];
+  points: boolean;
+  currentTrainData?: currentTrainDataType;
+  openStationACFromEachTrainInfo?: (station: string) => void;
+  showThrew: boolean;
+};
+export const EachStopList: FC<props> = ({
   i,
   index,
   stationList,
@@ -12,11 +33,11 @@ export const EachStopList = ({
   openStationACFromEachTrainInfo,
   showThrew,
 }) => {
+  const [station, se, time] = i.split(",") as [string, seTypes, string]; // 阿波池田,発,6:21
   if (!showThrew) {
-    if (i.split(",")[1] == "通過") return null;
+    if (se == "通過") return null;
-    if (i.split(",")[1] == "通編") return null;
+    if (se == "通編") return null;
   }
-  const [station, se, time] = i.split(","); // 阿波池田,発,6:21
   const Stations = stationList
     .map((a) => a.filter((d) => d.StationName == station))
     .reduce((newArray, e) => newArray.concat(e), []);
@@ -52,22 +73,12 @@ export const EachStopList = ({
     }
   })();
   // Array [  "T01",  "B01",]
-  const lineIDs = [];
-  const EachIDs = [];
-  StationNumbers.forEach((d) => {
-    const textArray = d.split("");
-    lineIDs.push(textArray.filter((s) => "A" < s && s < "Z").join(""));
-    EachIDs.push(textArray.filter((s) => "0" <= s && s <= "9").join(""));
-  });
   // Array [  "T",  "B",]
   // Array [  "01",  "01",]
 
-  const dates = dayjs()
+  const textColor = `#${seType == "community" ? "44f" : "000"}${
-    .set("hour", parseInt(time.split(":")[0]))
+    se == "通過" || se == "通編" ? "5" : ""
-    .set("minute", parseInt(time.split(":")[1]))
+  }`;
-    .add(isNaN(currentTrainData?.delay) ? 0 : currentTrainData.delay, "minute");
-  const timeString = se == "通過" ? "" : dates.format("HH:mm");
-
   return (
     <TouchableWithoutFeedback
       onPress={() =>
@@ -76,12 +87,7 @@ export const EachStopList = ({
       }
       key={station}
     >
-      <View
+      <View style={{ flexDirection: "row", backgroundColor: "#ffffffc2" }}>
-        style={{
-          flexDirection: "row",
-          backgroundColor: "#ffffffc2",
-        }}
-      >
         <View
           style={{
             width: 35,
@@ -91,31 +97,8 @@ export const EachStopList = ({
             height: "101%",
           }}
         >
-          {lineIDs.map((lineID, index) => (
+          {StationNumbers.map((stn, index) => (
-            <View
+            <StationNumbersBox stn={stn} se={se} key={index} />
-              style={{
-                backgroundColor: `${lineColorList[lineID]}${
-                  se == "通過" || se == "通編" ? "80" : ""
-                }`,
-                flex: 1,
-              }}
-              key={lineID}
-            >
-              <View style={{ flex: 1 }} />
-              <Text
-                style={{
-                  color: "white",
-                  textAlign: "center",
-                  fontSize: 10,
-                  fontWeight: "bold",
-                }}
-              >
-                {lineIDs[index]}
-                {"\n"}
-                {EachIDs[index]}
-              </Text>
-              <View style={{ flex: 1 }} />
-            </View>
           ))}
         </View>
         <View
@@ -130,7 +113,7 @@ export const EachStopList = ({
           <Text
             style={{
               fontSize: 20,
-              color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
+              color: textColor,
               fontStyle: seType == "community" ? "italic" : "normal",
             }}
           >
@@ -138,18 +121,18 @@ export const EachStopList = ({
           </Text>
           <View style={{ flex: 1 }} />
           <View style={{ position: "relative", width: 0 }}>
-            {points ? (
+            {points && (
               <Text style={{ fontSize: 20, position: "absolute", left: -60 }}>
                 🚊
               </Text>
-            ) : null}
+            )}
           </View>
 
-          {!isNaN(currentTrainData?.delay) && currentTrainData?.delay != 0 && (
+          {currentTrainData.delay != "入線" && currentTrainData?.delay != 0 && (
             <Text
               style={{
                 fontSize: 15,
-                color: `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`,
+                color: textColor,
                 width: 60,
                 position: "absolute",
                 right: 120,
@@ -161,23 +144,72 @@ export const EachStopList = ({
               {time}
             </Text>
           )}
-          <Text
+          <StationTimeBox
-            style={{
+            delay={currentTrainData?.delay}
-              fontSize: 20,
+            textColor={textColor}
-              color: isNaN(currentTrainData?.delay)
+            seType={seType}
-                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
+            se={se}
-                : currentTrainData?.delay == 0
+            time={time}
-                ? `#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}`
+          />
-                : "red",
+          <Text style={{ fontSize: 18, width: 50, color: textColor }}>
-              width: 60,
+            {seString}
-              fontStyle: seType == "community" ? "italic" : "normal",
-            }}
-          >
-            {se == "通過" ? "レ" : timeString}
           </Text>
-          <Text style={{ fontSize: 18, width: 50,color:`#${seType == "community" ? "44f" : "000"}${se == "通過" || se == "通編" ? "5" : ""}` }}>{seString}</Text>
         </View>
       </View>
     </TouchableWithoutFeedback>
   );
 };
+
+const StationNumbersBox: FC<{ stn: string; se: seTypes }> = (props) => {
+  const { stn, se } = props;
+  const lineColor = lineColorList[stn.charAt(0)];
+  const hasThrew = se == "通過" || se == "通編" ? "80" : "";
+  const backgroundColor = `${lineColor}${hasThrew}`;
+  return (
+    <View style={{ backgroundColor, flex: 1 }} key={stn}>
+      <View style={{ flex: 1 }} />
+      <Text
+        style={{
+          color: "white",
+          textAlign: "center",
+          fontSize: 10,
+          fontWeight: "bold",
+        }}
+      >
+        {stn.charAt(0)}
+        {"\n"}
+        {stn.slice(1)}
+      </Text>
+      <View style={{ flex: 1 }} />
+    </View>
+  );
+};
+
+type StationTimeBoxType = {
+  delay: "入線" | number;
+  textColor: string;
+  seType: seTypes;
+  se: string;
+  time: string;
+};
+
+const StationTimeBox: FC<StationTimeBoxType> = (props) => {
+  const { delay, textColor, seType, se, time } = props;
+  const dates = dayjs()
+    .set("hour", parseInt(time.split(":")[0]))
+    .set("minute", parseInt(time.split(":")[1]))
+    .add(delay == "入線" ? 0 : delay, "minute");
+  const timeString = se == "通過" ? "" : dates.format("HH:mm");
+  return (
+    <Text
+      style={{
+        fontSize: 20,
+        color: delay != "入線" ? delay != 0 && "red" : textColor,
+        width: 60,
+        fontStyle: seType == "community" ? "italic" : "normal",
+      }}
+    >
+      {se == "通過" ? "レ" : timeString}
+    </Text>
+  );
+};

components/ActionSheetComponents/SpecialTrainInfo.tsx

@@ -1,10 +1,14 @@
-import React, { useRef } from "react";
+import React, { FC, useRef } from "react";
 import { View, Platform } from "react-native";
 import ActionSheet from "react-native-actions-sheet";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 
 import { SpecialTrainInfoBox } from "../Menu/SpecialTrainInfoBox";
-export const SpecialTrainInfo = ({ payload }) => {
+
+type props = {
+  payload: { navigate: (screen: string, params?: object) => void };
+};
+export const SpecialTrainInfo: FC<props> = ({ payload }) => {
   const { navigate } = payload;
   const actionSheetRef = useRef(null);
   const insets = useSafeAreaInsets();

components/Menu/SpecialTrainInfoBox.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useLayoutEffect, useState } from "react";
+import { FC, useLayoutEffect, useState } from "react";
 import { View, Text, TouchableOpacity } from "react-native";
 import { getPDFViewURL } from "@/lib/getPdfViewURL";
 import { ScrollView, SheetManager } from "react-native-actions-sheet";
@@ -6,20 +6,27 @@ import { ScrollView, SheetManager } from "react-native-actions-sheet";
 type props = {
   navigate: (screen: string, params?: object) => void;
 };
+type specialDataType = { address: string; text: string; description: string };
+
 export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
-  const [specialData, setSpecialData] = useState([]);
+  const [specialData, setSpecialData] = useState<specialDataType[]>([]);
   useLayoutEffect(() => {
     fetch("https://n8n.haruk.in/webhook/sptrainfo")
       .then((res) => res.json())
       .then((data) => setSpecialData(data.data))
       .catch((err) => console.log(err));
   }, []);
+
+  const onPressItem: (d: specialDataType) => void = (d) => {
+    navigate("howto", {
+      info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
+      goTo: "menu",
+    });
+    SheetManager.hide("SpecialTrainInfo");
+  };
+  
   return (
-    <View
+    <View style={{ backgroundColor: "#0099CC" }}>
-      style={{
-        backgroundColor: "#0099CC",
-      }}
-    >
       <View style={{ flexDirection: "row", alignItems: "center" }}>
         <Text
           style={{
@@ -33,20 +40,10 @@ export const SpecialTrainInfoBox: FC<props> = ({ navigate }) => {
           臨時列車情報
         </Text>
       </View>
-      <ScrollView
+      <ScrollView style={{ backgroundColor: "white" }}>
-        style={{
-          backgroundColor: "white",
-        }}
-      >
         {specialData.map((d) => (
           <TouchableOpacity
-            onPress={() => {
+            onPress={() => onPressItem(d)}
-              navigate("howto", {
-                info: getPDFViewURL("https://www.jr-shikoku.co.jp" + d.address),
-                goTo: "menu",
-              });
-              SheetManager.hide("SpecialTrainInfo");
-            }}
             onLongPress={() => alert(d.description)}
             key={d.address}
             style={{