diff --git a/src/components/TrainTypeInfoModal.tsx b/src/components/TrainTypeInfoModal.tsx index 63f496f28..3d512b422 100644 --- a/src/components/TrainTypeInfoModal.tsx +++ b/src/components/TrainTypeInfoModal.tsx @@ -1,12 +1,12 @@ import React, { useMemo } from 'react' -import { Modal, SafeAreaView, StyleSheet, View } from 'react-native' +import { Modal, Platform, SafeAreaView, StyleSheet, View } from 'react-native' import { RFValue } from 'react-native-responsive-fontsize' import { useRecoilValue } from 'recoil' -import { Station, TrainType } from '../../gen/proto/stationapi_pb' +import { Line, Station, TrainType } from '../../gen/proto/stationapi_pb' import { LED_THEME_BG_COLOR } from '../constants' import lineState from '../store/atoms/line' import { isLEDSelector } from '../store/selectors/isLED' -import { isJapanese } from '../translation' +import { isJapanese, translate } from '../translation' import dropEitherJunctionStation from '../utils/dropJunctionStation' import getIsPass from '../utils/isPass' import isTablet from '../utils/isTablet' @@ -33,7 +33,7 @@ const styles = StyleSheet.create({ height: '100%', }, modalView: { - paddingVertical: isTablet ? 32 : 24, + paddingVertical: 24, height: isTablet ? undefined : 'auto', width: '100%', }, @@ -60,12 +60,21 @@ export const TrainTypeInfoModal: React.FC = ({ const trainTypeLines = useMemo( () => - trainType.lines - .slice() - .sort((a, b) => - !a.trainType || !b.trainType ? 0 : a.trainType?.id - b.trainType?.id - ), - [trainType.lines] + trainType.lines.length + ? trainType.lines + .slice() + .sort((a, b) => + !a.trainType || !b.trainType + ? 0 + : a.trainType?.id - b.trainType?.id + ) + : ([selectedLine] as Line[]), + [selectedLine, trainType.lines] + ) + + const stopStations = useMemo( + () => dropEitherJunctionStation(stations).filter((s) => !getIsPass(s)), + [stations] ) return ( @@ -115,10 +124,9 @@ export const TrainTypeInfoModal: React.FC = ({ marginTop: isTablet ? 8 : 4, }} > - {dropEitherJunctionStation(stations) - .filter((s) => !getIsPass(s)) - .map((s) => s.name) - .join('、')} + {stopStations.length + ? stopStations.map((s) => s.name).join('、') + : `${translate('loadingAPI')}...`} = ({ > {trainTypeLines.map((l) => ( - + {l.nameShort}: = ({ textAlign: 'right', fontSize: RFValue(11), fontWeight: 'bold', + lineHeight: Platform.select({ android: RFValue(18) }), }} > - {l.trainType?.name} + {l.trainType?.name ?? '普通/各駅停車'} ))} diff --git a/src/hooks/useStationList.ts b/src/hooks/useStationList.ts index 21c39b0ee..6b0d67bab 100644 --- a/src/hooks/useStationList.ts +++ b/src/hooks/useStationList.ts @@ -2,7 +2,6 @@ import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil' import useSWR from 'swr' import { GetStationByLineIdRequest, - GetStationsByLineGroupIdRequest, GetTrainTypesByStationIdRequest, TrainDirection, TrainType, @@ -16,14 +15,13 @@ import { findBranchLine, findLocalType } from '../utils/trainTypeString' export const useStationList = (fetchAutomatically = true) => { const setStationState = useSetRecoilState(stationState) - const [{ fromBuilder, trainType }, setNavigationState] = - useRecoilState(navigationState) + const [{ fromBuilder }, setNavigationState] = useRecoilState(navigationState) const { selectedLine } = useRecoilValue(lineState) const { isLoading: isLoadingStations, error: loadingStationsError, - mutate: updateStations, + mutate: mutateStations, } = useSWR( [ '/app.trainlcd.grpc/getStationsByLineId', @@ -104,35 +102,9 @@ export const useStationList = (fetchAutomatically = true) => { } ) - const { - isLoading: isStationsByLineGroupIdLoading, - error: errorStationsByLineGroupId, - } = useSWR( - ['/app.trainlcd.grpc/GetStationsByLineGroupId', trainType?.groupId], - async ([, lineGroupId]) => { - if (!lineGroupId) { - return - } - - const req = new GetStationsByLineGroupIdRequest({ lineGroupId }) - const res = await grpcClient.getStationsByLineGroupId(req, {}) - - setStationState((prev) => ({ - ...prev, - stations: res.stations, - })) - } - ) - return { - updateStations, - loading: - isLoadingStations || - isTrainTypesLoading || - isStationsByLineGroupIdLoading, - error: - loadingStationsError || - loadingTrainTypesError || - errorStationsByLineGroupId, + mutateStations, + loading: isLoadingStations || isTrainTypesLoading, + error: loadingStationsError || loadingTrainTypesError, } } diff --git a/src/screens/SelectBound.tsx b/src/screens/SelectBound.tsx index f98b806ed..1ed984918 100644 --- a/src/screens/SelectBound.tsx +++ b/src/screens/SelectBound.tsx @@ -9,7 +9,7 @@ import { View, } from 'react-native' import { RFValue } from 'react-native-responsive-fontsize' -import { useRecoilState, useSetRecoilState } from 'recoil' +import { useRecoilState } from 'recoil' import { Line, Station, @@ -75,12 +75,11 @@ const SelectBoundScreen: React.FC = () => { useRecoilState(stationState) const [ { trainType, fetchedTrainTypes, autoModeEnabled, fromBuilder }, - setNavigation, + setNavigationState, ] = useRecoilState(navigationState) const [{ selectedLine }, setLineState] = useRecoilState(lineState) - const setNavigationState = useSetRecoilState(navigationState) - const { loading, error, updateStations } = useStationList() + const { loading, error, mutateStations } = useStationList() const { isLoopLine, isMeijoLine } = useLoopLine() const { bounds: [inboundStations, outboundStations], @@ -111,6 +110,7 @@ const SelectBoundScreen: React.FC = () => { bottomState: 'LINE', leftStations: [], stationForHeader: null, + fetchedTrainTypes: [], })) navigation.navigate('SelectLine') }, [navigation, setLineState, setNavigationState, setStationState]) @@ -142,11 +142,11 @@ const SelectBoundScreen: React.FC = () => { } const handleAutoModeButtonPress = useCallback(async () => { - setNavigation((prev) => ({ + setNavigationState((prev) => ({ ...prev, autoModeEnabled: !prev.autoModeEnabled, })) - }, [setNavigation]) + }, [setNavigationState]) const handleAllStopsButtonPress = useCallback(() => { const stopStations = stations.filter( @@ -183,10 +183,10 @@ const SelectBoundScreen: React.FC = () => { selectedBound: destination, selectedDirection: direction, })) - setNavigation((prev) => ({ ...prev, trainType: updatedTrainType })) + setNavigationState((prev) => ({ ...prev, trainType: updatedTrainType })) navigation.navigate('Main') }, - [navigation, setNavigation, setStationState, stations, trainType] + [navigation, setNavigationState, setStationState, stations, trainType] ) const normalLineDirectionText = useCallback( @@ -325,7 +325,7 @@ const SelectBoundScreen: React.FC = () => { showStatus title={translate('errorTitle')} text={translate('apiErrorText')} - onRetryPress={updateStations} + onRetryPress={mutateStations} isFetching={loading} /> ) diff --git a/src/screens/TrainTypeSettingsScreen.tsx b/src/screens/TrainTypeSettingsScreen.tsx index 322b74842..908fbfc14 100644 --- a/src/screens/TrainTypeSettingsScreen.tsx +++ b/src/screens/TrainTypeSettingsScreen.tsx @@ -1,7 +1,7 @@ import { useNavigation } from '@react-navigation/native' import React, { useCallback, useEffect, useState } from 'react' import { BackHandler, StyleSheet, View } from 'react-native' -import { useRecoilValue, useSetRecoilState } from 'recoil' +import { useRecoilState, useSetRecoilState } from 'recoil' import useSWR from 'swr' import { GetStationsByLineGroupIdRequest, @@ -11,7 +11,6 @@ import FAB from '../components/FAB' import Heading from '../components/Heading' import { TrainTypeInfoModal } from '../components/TrainTypeInfoModal' import { TrainTypeList } from '../components/TrainTypeList' -import { useStationList } from '../hooks/useStationList' import { grpcClient } from '../lib/grpc' import navigationState from '../store/atoms/navigation' import stationState from '../store/atoms/station' @@ -27,13 +26,11 @@ const TrainTypeSettings: React.FC = () => { null ) - const { fetchedTrainTypes } = useRecoilValue(navigationState) - + const [{ fetchedTrainTypes }, setNavigationState] = + useRecoilState(navigationState) const setStationState = useSetRecoilState(stationState) - const setNavigationState = useSetRecoilState(navigationState) const navigation = useNavigation() - /* const { loading, error } = */ useStationList() const { data: trainTypeStations = [], @@ -83,6 +80,11 @@ const TrainTypeSettings: React.FC = () => { ...prev, wantedDestination: null, })) + setIsTrainTypeModalVisible(false) + + if (navigation.canGoBack()) { + navigation.goBack() + } return } @@ -102,7 +104,7 @@ const TrainTypeSettings: React.FC = () => { setStationState((prev) => ({ ...prev, wantedDestination: null, - stations: [], + stations: trainTypeStations, })) setIsTrainTypeModalVisible(false) @@ -111,7 +113,13 @@ const TrainTypeSettings: React.FC = () => { navigation.goBack() } }, - [fetchedTrainTypes, navigation, setNavigationState, setStationState] + [ + fetchedTrainTypes, + navigation, + setNavigationState, + setStationState, + trainTypeStations, + ] ) return (