Merge pull request #3582 from TrainLCD/fix/tt

種別表示バグ修正

src/components/TypeChangeNotify.tsx

@@ -12,6 +12,7 @@ import useNextTrainType from '../hooks/useNextTrainType'
 import stationState from '../store/atoms/station'
 import themeState from '../store/atoms/theme'
 import { currentLineSelector } from '../store/selectors/currentLine'
+import { currentStationSelector } from '../store/selectors/currentStation'
 import isTablet from '../utils/isTablet'
 import { getIsLocal } from '../utils/trainTypeString'
 import truncateTrainType from '../utils/truncateTrainType'
@@ -724,16 +725,19 @@ const JOBars: React.FC = () => {
   )
 }
 const TypeChangeNotify: React.FC = () => {
-  const { selectedDirection, stations, selectedBound, station } =
+  const { selectedDirection, stations, selectedBound } =
     useRecoilValue(stationState)
   const { theme } = useRecoilValue(themeState)
+  const station = useRecoilValue(currentStationSelector({}))
   const currentLine = useRecoilValue(currentLineSelector)
   const nextLine = useNextLine()
   const trainType = useCurrentTrainType()
   const nextTrainType = useNextTrainType()
 
   const currentTypeStations = stations.filter(
-    (s) => s.trainType?.typeId === trainType?.typeId
+    (s) =>
+      s.trainType?.typeId === trainType?.typeId &&
+      s.line?.id === currentLine?.id
   )
 
   const reversedStations = stations.slice().reverse()

src/hooks/useNextTrainType.ts

@@ -1,19 +1,27 @@
 import { useMemo } from 'react'
 import { useRecoilValue } from 'recoil'
 import { TrainType } from '../../gen/proto/stationapi_pb'
+import navigationState from '../store/atoms/navigation'
 import stationState from '../store/atoms/station'
 import { currentStationSelector } from '../store/selectors/currentStation'
-import useCurrentTrainType from './useCurrentTrainType'
 import useNextLine from './useNextLine'
 
 const useNextTrainType = (): TrainType | null => {
   const { stations, selectedDirection } = useRecoilValue(stationState)
+  const { trainType } = useRecoilValue(navigationState)
   const nextLine = useNextLine()
   const currentStation = useRecoilValue(currentStationSelector({}))
-  const trainType = useCurrentTrainType()
 
   // 同じ路線でも種別が変わる場合を想定(小田急線等)
   const sameLineNextType = useMemo(() => {
+    if (
+      nextLine &&
+      trainType?.line?.id !== nextLine.id &&
+      trainType?.line?.company?.id !== nextLine.company?.id
+    ) {
+      return
+    }
+
     if (selectedDirection === 'INBOUND') {
       const currentIndex = stations.findIndex(
         (sta) => sta.groupId === currentStation?.groupId
@@ -36,16 +44,27 @@ const useNextTrainType = (): TrainType | null => {
       .map((sta) => sta.trainType)
       .filter((tt) => tt)
       .find((tt) => tt?.typeId !== trainType?.typeId)
-  }, [currentStation?.groupId, selectedDirection, stations, trainType?.typeId])
+  }, [
+    currentStation?.groupId,
+    nextLine,
+    selectedDirection,
+    stations,
+    trainType?.line?.company?.id,
+    trainType?.line?.id,
+    trainType?.typeId,
+  ])
+
+  const nextLineTrainType = useMemo(
+    () =>
+      trainType?.lines?.find((l) => l.id === nextLine?.id)?.trainType ?? null,
+    [nextLine?.id, trainType?.lines]
+  )
 
   const nextTrainType = useMemo(() => {
-    return (
-      sameLineNextType ??
-      trainType?.lines?.find((l) => l.id === nextLine?.id)?.trainType
-    )
-  }, [nextLine?.id, sameLineNextType, trainType?.lines])
+    return sameLineNextType ?? nextLineTrainType
+  }, [nextLineTrainType, sameLineNextType])
 
-  return nextTrainType ?? null
+  return nextTrainType
 }
 
 export default useNextTrainType

src/hooks/useTypeWillChange.ts

@@ -8,11 +8,11 @@ export const useTypeWillChange = (): boolean => {
   const nextTrainType = useNextTrainType()
 
   const nextTrainTypeIsDifferent = useMemo(() => {
-    if (!trainType) {
+    if (!trainType || !nextTrainType) {
       return false
     }
 
-    if (!nextTrainType) {
+    if (trainType.typeId === nextTrainType.typeId) {
       return false
     }