Merge pull request #3608 from TrainLCD/fix/tt

種別関係のバグ修正
TrainLCD · Jul 24, 2024 · 9a85e8b · 9a85e8b
2 parents 8fa4df9 + 10fb985
commit 9a85e8b
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 66 deletions.
diff --git 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<Props> = ({
 
   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<Props> = ({
                 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')}...`}
             </Typography>
             <Typography
               style={{
@@ -136,7 +144,13 @@ export const TrainTypeInfoModal: React.FC<Props> = ({
             >
               {trainTypeLines.map((l) => (
                 <View style={{ flexDirection: 'row' }} key={l.id}>
-                  <Typography style={{ width: '30%', fontSize: RFValue(11) }}>
+                  <Typography
+                    style={{
+                      width: '30%',
+                      fontSize: RFValue(11),
+                      lineHeight: Platform.select({ android: RFValue(18) }),
+                    }}
+                  >
                     {l.nameShort}:
                   </Typography>
                   <Typography
@@ -145,9 +159,10 @@ export const TrainTypeInfoModal: React.FC<Props> = ({
                       textAlign: 'right',
                       fontSize: RFValue(11),
                       fontWeight: 'bold',
+                      lineHeight: Platform.select({ android: RFValue(18) }),
                     }}
                   >
-                    {l.trainType?.name}
+                    {l.trainType?.name ?? '普通/各駅停車'}
                   </Typography>
                 </View>
               ))}

diff --git 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
@@ -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
@@ -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 (