diff --git a/src/components/TypeChangeNotify.tsx b/src/components/TypeChangeNotify.tsx index 2f36e6039..56fe8c1c3 100644 --- a/src/components/TypeChangeNotify.tsx +++ b/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() diff --git a/src/hooks/useNextTrainType.ts b/src/hooks/useNextTrainType.ts index 6e5f762e6..bdbc910fb 100644 --- a/src/hooks/useNextTrainType.ts +++ b/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 diff --git a/src/hooks/useTypeWillChange.ts b/src/hooks/useTypeWillChange.ts index f3a330aad..57257752f 100644 --- a/src/hooks/useTypeWillChange.ts +++ b/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 }