経路検索機能では複数APIを使用することにした

src/components/RouteList.tsx

@@ -91,7 +91,6 @@ export const RouteList = ({
       style={{
         width: '100%',
         height: '100%',
-        maxHeight: '50%',
         alignSelf: 'center',
         borderColor: isLEDTheme ? '#fff' : '#aaa',
         borderWidth: 1,

src/components/RouteListModal.tsx

@@ -1,23 +1,23 @@
 import React from 'react'
 import { ActivityIndicator, Modal, StyleSheet, View } from 'react-native'
 import { useSafeAreaInsets } from 'react-native-safe-area-context'
-import { Route } from '../../gen/proto/stationapi_pb'
+import { TrainType } from '../../gen/proto/stationapi_pb'
 import { LED_THEME_BG_COLOR } from '../constants'
 import { useThemeStore } from '../hooks/useThemeStore'
 import { APP_THEME } from '../models/Theme'
 import { translate } from '../translation'
 import isTablet from '../utils/isTablet'
 import FAB from './FAB'
 import Heading from './Heading'
-import { RouteList } from './RouteList'
+import { TrainTypeList } from './TrainTypeList'
 
 type Props = {
+  trainTypes: TrainType[]
   visible: boolean
-  routes: Route[]
   loading: boolean
   error: Error
   onClose: () => void
-  onSelect: (route: Route) => void
+  onSelect: (trainType: TrainType) => void
 }
 
 const styles = StyleSheet.create({
@@ -46,8 +46,8 @@ const styles = StyleSheet.create({
 const SAFE_AREA_FALLBACK = 32
 
 export const RouteListModal: React.FC<Props> = ({
+  trainTypes,
   visible,
-  routes,
   loading,
   onClose,
   onSelect,
@@ -96,16 +96,18 @@ export const RouteListModal: React.FC<Props> = ({
           >
             <View
               style={{
-                marginBottom: 12,
+                marginVertical: 16,
               }}
             >
-              <Heading>{translate('routeSearchTitle')}</Heading>
+              <Heading>{translate('trainTypeSettings')}</Heading>
+            </View>
+            <View style={{ flex: 1, width: '100%', height: '100%' }}>
+              {loading ? (
+                <ActivityIndicator size="large" style={styles.loading} />
+              ) : (
+                <TrainTypeList data={trainTypes} onSelect={onSelect} />
+              )}
             </View>
-            {loading ? (
-              <ActivityIndicator style={styles.loading} />
-            ) : (
-              <RouteList data={routes} onSelect={onSelect} />
-            )}
           </View>
         </View>
         <FAB onPress={onClose} icon="close" />

src/components/TrainTypeInfoModal.tsx

@@ -146,7 +146,7 @@ export const TrainTypeInfoModal: React.FC<Props> = ({
                   lineHeight: RFValue(14),
                 }}
               >
-                {stopStations.length
+                {!loading && stopStations.length
                   ? stopStations.map((s) => s.name).join('、')
                   : ''}
                 {loading ? `${translate('loadingAPI')}...` : ''}

src/hooks/useStationList.ts

@@ -1,5 +1,7 @@
+import { useEffect } from 'react'
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import useSWR from 'swr'
+import useSWRMutation from 'swr/mutation'
 import {
   GetStationByLineIdRequest,
   GetTrainTypesByStationIdRequest,
@@ -17,11 +19,12 @@ export const useStationList = () => {
   const setStationState = useSetRecoilState(stationState)
   const [{ fromBuilder }, setNavigationState] = useRecoilState(navigationState)
   const { selectedLine } = useRecoilValue(lineState)
+  const { stations: stationsFromState } = useRecoilValue(stationState)
 
   const {
+    data: stations,
     isLoading: isLoadingStations,
     error: loadingStationsError,
-    mutate: mutateStations,
   } = useSWR(
     [
       '/app.trainlcd.grpc/getStationsByLineId',
@@ -33,6 +36,13 @@ export const useStationList = () => {
         return
       }
 
+      if (
+        selectedLine?.station?.hasTrainTypes &&
+        stationsFromState.length > 0
+      ) {
+        return
+      }
+
       const req = new GetStationByLineIdRequest({ lineId, stationId })
       const res = await grpcClient.getStationsByLineId(req)
 
@@ -45,63 +55,76 @@ export const useStationList = () => {
     }
   )
 
-  const { isLoading: isTrainTypesLoading, error: loadingTrainTypesError } =
-    useSWR(
-      [
-        '/app.trainlcd.grpc/GetTrainTypesByStationId',
-        selectedLine?.station?.id,
-        selectedLine?.station?.hasTrainTypes,
-      ],
-      async ([, stationId, shouldFetch]) => {
-        if (!stationId || !shouldFetch) {
-          return
-        }
+  const {
+    data: trainTypes = [],
+    isMutating: isTrainTypesLoading,
+    error: loadingTrainTypesError,
+    trigger: fetchTrainTypes,
+  } = useSWRMutation(
+    '/app.trainlcd.grpc/GetTrainTypesByStationId',
+    async (_, { arg: { stationId } }: { arg: { stationId: number } }) => {
+      if (!stationId) {
+        return
+      }
 
-        const req = new GetTrainTypesByStationIdRequest({ stationId })
-        const res = await grpcClient.getTrainTypesByStationId(req, {})
+      const req = new GetTrainTypesByStationIdRequest({ stationId })
+      const res = await grpcClient.getTrainTypesByStationId(req, {})
 
-        const trainTypes = res.trainTypes ?? []
-        const localType = new TrainType({
-          id: 0,
-          typeId: 0,
-          groupId: 0,
-          name: '普通/各駅停車',
-          nameKatakana: '',
-          nameRoman: 'Local',
-          nameChinese: '慢车/每站停车',
-          nameKorean: '보통/각역정차',
-          color: '',
-          lines: [],
-          direction: TrainDirection.Both,
-          kind: TrainTypeKind.Default,
-        })
+      const trainTypes = res.trainTypes
 
-        // 普通種別が登録済み: 非表示
-        // 支線種別が登録されていているが、普通種別が登録されていない: 非表示
-        // 特例で普通列車以外の種別で表示を設定されている場合(中央線快速等): 表示
-        // 上記以外: 表示
-        if (
-          !(
-            findLocalType(trainTypes) ||
-            (findBranchLine(trainTypes) && !findLocalType(trainTypes))
-          )
-        ) {
-          setNavigationState((prev) => ({
-            ...prev,
-            fetchedTrainTypes: [localType, ...trainTypes],
-          }))
-          return trainTypes
-        }
+      const localType = new TrainType({
+        id: 0,
+        typeId: 0,
+        groupId: 0,
+        name: '普通/各駅停車',
+        nameKatakana: '',
+        nameRoman: 'Local',
+        nameChinese: '慢车/每站停车',
+        nameKorean: '보통/각역정차',
+        color: '',
+        lines: [],
+        direction: TrainDirection.Both,
+        kind: TrainTypeKind.Default,
+      })
 
+      // 普通種別が登録済み: 非表示
+      // 支線種別が登録されていているが、普通種別が登録されていない: 非表示
+      // 特例で普通列車以外の種別で表示を設定されている場合(中央線快速等): 表示
+      // 上記以外: 表示
+      if (
+        !(
+          findLocalType(trainTypes) ||
+          (findBranchLine(trainTypes) && !findLocalType(trainTypes))
+        )
+      ) {
         setNavigationState((prev) => ({
           ...prev,
-          fetchedTrainTypes: trainTypes,
+          fetchedTrainTypes: [localType, ...trainTypes],
         }))
+        return [localType, ...trainTypes]
       }
-    )
+
+      setNavigationState((prev) => ({
+        ...prev,
+        fetchedTrainTypes: trainTypes,
+      }))
+
+      return trainTypes
+    }
+  )
+
+  useEffect(() => {
+    if (selectedLine?.station) {
+      fetchTrainTypes({
+        stationId: selectedLine.station.id,
+      })
+    }
+  }, [fetchTrainTypes, selectedLine?.station])
 
   return {
-    mutateStations,
+    stations,
+    fetchTrainTypes,
+    trainTypes,
     loading: isLoadingStations || isTrainTypesLoading,
     error: loadingStationsError || loadingTrainTypesError,
   }

src/hooks/useTrainTypeStations.ts

@@ -0,0 +1,23 @@
+import useSWRMutation from 'swr/dist/mutation'
+import { GetStationsByLineGroupIdRequest } from '../../gen/proto/stationapi_pb'
+import { grpcClient } from '../lib/grpc'
+
+export const useTrainTypeStations = () => {
+  const {
+    data: stations,
+    isMutating: isLoading,
+    error,
+    trigger: fetchStations,
+  } = useSWRMutation(
+    '/app.trainlcd.grpc/GetStationsByLineGroupId',
+    async (_, { arg: { lineGroupId } }: { arg: { lineGroupId: number } }) => {
+      const req = new GetStationsByLineGroupIdRequest({
+        lineGroupId,
+      })
+      const res = await grpcClient.getStationsByLineGroupId(req)
+      return res.stations ?? []
+    }
+  )
+
+  return { stations, isLoading, error, fetchStations }
+}