コードの整理とデータの供給元の整理

components/Apps/FixedPositionBox.tsx

@@ -131,7 +131,7 @@ export const FixedStation = ({ stationID }) => {
 };
 
 export const FixedTrain = ({ trainID }) => {
-  const { fixedPosition, setFixedPosition, currentTrain } = useCurrentTrain();
+  const { fixedPosition, setFixedPosition, currentTrain,getCurrentStationData } = useCurrentTrain();
   const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
 
   const getTrainDataFromCurrentTrain = (trainNum: string) => {
@@ -187,9 +187,10 @@ export const FixedTrain = ({ trainID }) => {
     setCustomData(getTrainDataFromCurrentTrain(trainID));
   }, [currentTrain, trainID]);
   useEffect(() => {
-    currentTrain.forEach((d) => {
-      if (d.num == trainID) setTrain(d);
-    });
+    const stationData = getCurrentStationData(trainID);
+    if (stationData) {
+      setTrain(stationData);
+    }
   }, [trainID, currentTrain]);
 
   const [ToData, setToData] = useState("");
@@ -219,22 +220,6 @@ export const FixedTrain = ({ trainID }) => {
     station.length > 0
       ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
       : "black";
-  let firstText = "";
-  let secondText = "";
-  let marginText = "";
-  let externalText = "";
-  const { isBetween, Pos: PosData } = trainPosition(train);
-  if (isBetween === true) {
-    const { from, to } = PosData;
-    firstText = from;
-    secondText = to;
-    marginText = "→";
-  } else {
-    const { Pos } = PosData;
-    if (Pos !== "") {
-      firstText = Pos;
-    }
-  }
   return (
     <TouchableOpacity
       style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
@@ -383,7 +368,30 @@ export const FixedTrain = ({ trainID }) => {
           ></View>
         </View>
       </View>
-      <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
+      <CurrentPositionBox train={train} lineColor={lineColor}/>
+      
+    </TouchableOpacity>
+  );
+};
+
+const CurrentPositionBox = ({train,lineColor})=>{
+    let firstText = "";
+  let secondText = "";
+  let marginText = "";
+  let externalText = "";
+  const { isBetween, Pos: PosData } = trainPosition(train);
+  if (isBetween === true) {
+    const { from, to } = PosData;
+    firstText = from;
+    secondText = to;
+    marginText = "→";
+  } else {
+    const { Pos } = PosData;
+    if (Pos !== "") {
+      firstText = Pos;
+    }
+  }
+  return <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
         <View style={{ flexDirection: "column", height: "100%" }}>
           <View
             style={{
@@ -422,7 +430,5 @@ export const FixedTrain = ({ trainID }) => {
         <Text style={{ color: "black", fontSize: 30, alignSelf: "center" }}>
           {marginText == "→" ? firstText + marginText + secondText : firstText}
         </Text>
-      </View>
-    </TouchableOpacity>
-  );
-};
+      </View>;
+}