Merge pull request #3797 from TrainLCD/feature/move-automode-button

オートモードボタンの移動

src/screens/SelectBound.tsx

@@ -22,7 +22,6 @@ import Heading from '../components/Heading'
 import Typography from '../components/Typography'
 import { TOEI_OEDO_LINE_ID } from '../constants'
 import { TOEI_OEDO_LINE_TOCHOMAE_STATION_ID } from '../constants/station'
-import { useApplicationFlagStore } from '../hooks/useApplicationFlagStore'
 import useBounds from '../hooks/useBounds'
 import { useLoopLine } from '../hooks/useLoopLine'
 import { useStationList } from '../hooks/useStationList'
@@ -84,13 +83,6 @@ const SelectBoundScreen: React.FC = () => {
     bounds: [inboundStations, outboundStations],
   } = useBounds()
 
-  const autoModeEnabled = useApplicationFlagStore(
-    (state) => state.autoModeEnabled
-  )
-  const toggleAutoModeEnabled = useApplicationFlagStore(
-    (state) => state.toggleAutoModeEnabled
-  )
-
   // 種別選択ボタンを表示するかのフラグ
   const withTrainTypes = useMemo(
     (): boolean => fetchedTrainTypes.length > 1,
@@ -314,10 +306,6 @@ const SelectBoundScreen: React.FC = () => {
     return subscription.remove
   }, [handleSelectBoundBackButtonPress])
 
-  const autoModeButtonText = `${translate('autoModeSettings')}: ${
-    autoModeEnabled ? 'ON' : 'OFF'
-  }`
-
   if (error) {
     return (
       <ErrorScreen
@@ -398,7 +386,6 @@ const SelectBoundScreen: React.FC = () => {
               {translate('selectBoundSettings')}
             </Button>
           ) : null}
-          <Button onPress={toggleAutoModeEnabled}>{autoModeButtonText}</Button>
         </View>
       </View>
     </ScrollView>

src/screens/SelectLine.tsx

@@ -1,6 +1,6 @@
 import AsyncStorage from '@react-native-async-storage/async-storage'
 import { useNavigation } from '@react-navigation/native'
-import React, { useCallback, useEffect } from 'react'
+import React, { useCallback, useEffect, useMemo } from 'react'
 import { Alert, ScrollView, StyleSheet, View } from 'react-native'
 import { useSetRecoilState } from 'recoil'
 import { Line } from '../../gen/proto/stationapi_pb'
@@ -10,6 +10,7 @@ import FAB from '../components/FAB'
 import Heading from '../components/Heading'
 import Loading from '../components/Loading'
 import { ASYNC_STORAGE_KEYS, parenthesisRegexp } from '../constants'
+import { useApplicationFlagStore } from '../hooks/useApplicationFlagStore'
 import useConnectivity from '../hooks/useConnectivity'
 import { useCurrentStation } from '../hooks/useCurrentStation'
 import { useFetchCurrentLocationOnce } from '../hooks/useFetchCurrentLocationOnce'
@@ -50,6 +51,14 @@ const SelectLineScreen: React.FC = () => {
   const setStationState = useSetRecoilState(stationState)
   const setNavigationState = useSetRecoilState(navigationState)
   const setLineState = useSetRecoilState(lineState)
+
+  const autoModeEnabled = useApplicationFlagStore(
+    (state) => state.autoModeEnabled
+  )
+  const toggleAutoModeEnabled = useApplicationFlagStore(
+    (state) => state.toggleAutoModeEnabled
+  )
+
   const {
     fetchByCoords,
     isLoading: nearbyStationLoading,
@@ -219,6 +228,11 @@ const SelectLineScreen: React.FC = () => {
     navigation.navigate('RouteSearch')
   }, [navigation])
 
+  const autoModeButtonText = useMemo(
+    () => `${translate('autoModeSettings')}: ${autoModeEnabled ? 'ON' : 'OFF'}`,
+    [autoModeEnabled]
+  )
+
   if (nearbyStationFetchError) {
     return (
       <ErrorScreen
@@ -292,6 +306,10 @@ const SelectLineScreen: React.FC = () => {
               </Button>
             </>
           ) : null}
+          <Button style={styles.button} onPress={toggleAutoModeEnabled}>
+            {autoModeButtonText}
+          </Button>
+
           <Button style={styles.button} onPress={navigateToSettingsScreen}>
             {translate('settings')}
           </Button>