位置情報取得処理改善

index.js

@@ -3,9 +3,8 @@ import 'fast-text-encoding'
 import { registerRootComponent } from 'expo'
 import * as TaskManager from 'expo-task-manager'
 import App from './src'
-import { locationTaskName } from './src/utils/locationTaskName'
 
-TaskManager.unregisterTaskAsync(locationTaskName).catch(console.debug)
+TaskManager.unregisterAllTasksAsync().catch(console.error)
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in the Expo client or in a native build,

src/components/Permitted.tsx

@@ -9,7 +9,7 @@ import RNFS from 'react-native-fs'
 import { LongPressGestureHandler, State } from 'react-native-gesture-handler'
 import Share from 'react-native-share'
 import ViewShot from 'react-native-view-shot'
-import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import { useRecoilValue, useSetRecoilState } from 'recoil'
 import {
   ALL_AVAILABLE_LANGUAGES,
   ASYNC_STORAGE_KEYS,
@@ -18,6 +18,7 @@ import {
 } from '../constants'
 import useAndroidWearable from '../hooks/useAndroidWearable'
 import useAppleWatch from '../hooks/useAppleWatch'
+import { useApplicationFlagStore } from '../hooks/useApplicationFlagStore'
 import { useBadAccuracy } from '../hooks/useBadAccuracy'
 import useCachedInitAnonymousUser from '../hooks/useCachedAnonymousUser'
 import useCheckStoreVersion from '../hooks/useCheckStoreVersion'
@@ -69,14 +70,18 @@ const PermittedLayout: React.FC<Props> = ({ children }: Props) => {
   const [longPressNoticeDismissed, setLongPressNoticeDismissed] = useState(true)
 
   const { selectedBound } = useRecoilValue(stationState)
-  const [{ autoModeEnabled }, setNavigation] = useRecoilState(navigationState)
+  const setNavigation = useSetRecoilState(navigationState)
   const setSpeech = useSetRecoilState(speechState)
   const [reportModalShow, setReportModalShow] = useState(false)
   const [sendingReport, setSendingReport] = useState(false)
   const [reportDescription, setReportDescription] = useState('')
   const [screenShotBase64, setScreenShotBase64] = useState('')
   const [screenshotTaken, setScreenshotTaken] = useState(false)
 
+  const autoModeEnabled = useApplicationFlagStore(
+    (state) => state.autoModeEnabled
+  )
+
   useCheckStoreVersion()
   useAppleWatch()
   useAndroidWearable()

src/constants/location.ts

@@ -1,9 +1,3 @@
 export const LOCATION_TASK_NAME_PROD = 'trainlcd-background-location-task'
 export const LOCATION_TASK_NAME_CANARY =
   'trainlcd-canary-background-location-task'
-// デフォルトの端末上の駅直線距離計算誤差(meter)
-// 位置情報の処理間隔(meter)
-
-export const DISTANCE_FILTER_LOW = 300
-export const DISTANCE_FILTER_BALANCED = 150
-export const DISTANCE_FILTER_HIGH = 100

src/constants/state.ts

@@ -12,5 +12,4 @@ export const RECOIL_STATES = {
 
   // selectors
   isEnSelector: 'isEnSelector',
-  autoModeEnabledSelector: 'autoModeEnabledSelector',
 }

src/hooks/useApplicationFlagStore.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+
+type State = {
+  autoModeEnabled: boolean
+  toggleAutoModeEnabled: () => void
+}
+
+export const useApplicationFlagStore = create<State>((set) => ({
+  autoModeEnabled: false,
+  toggleAutoModeEnabled: () =>
+    set((state) => ({ autoModeEnabled: !state.autoModeEnabled })),
+}))

src/hooks/useLocationStore.ts

@@ -4,16 +4,4 @@ import { create } from 'zustand'
 export const useLocationStore = create<LocationObject | null>(() => null)
 
 export const setLocation = (location: LocationObject) =>
-  useLocationStore.setState((state) => {
-    if (!state) {
-      return location
-    }
-
-    const { latitude: inputLat, longitude: inputLon } = location.coords
-    const { latitude: stateLat, longitude: stateLon } = state.coords
-    if (inputLat === stateLat && inputLon === stateLon) {
-      return state
-    }
-
-    return location
-  })
+  useLocationStore.setState(location, true)

src/hooks/useStartBackgroundLocationUpdates.ts

@@ -1,15 +1,12 @@
 import * as Location from 'expo-location'
-import * as TaskManager from 'expo-task-manager'
 import { useEffect } from 'react'
-import { useRecoilValue } from 'recoil'
-import { autoModeEnabledSelector } from '../store/selectors/autoMode'
 import { translate } from '../translation'
 import { locationTaskName } from '../utils/locationTaskName'
+import { useApplicationFlagStore } from './useApplicationFlagStore'
 
 export const useStartBackgroundLocationUpdates = () => {
-  const autoModeEnabled = useRecoilValue(autoModeEnabledSelector)
-
   useEffect(() => {
+    const autoModeEnabled = useApplicationFlagStore.getState()?.autoModeEnabled
     if (autoModeEnabled) {
       return
     }
@@ -24,8 +21,7 @@ export const useStartBackgroundLocationUpdates = () => {
     })
 
     return () => {
-      TaskManager.unregisterTaskAsync(locationTaskName)
+      Location.stopLocationUpdatesAsync(locationTaskName).catch(console.debug)
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 }

src/screens/Main.tsx

@@ -21,6 +21,7 @@ import Transfers from '../components/Transfers'
 import TransfersYamanote from '../components/TransfersYamanote'
 import TypeChangeNotify from '../components/TypeChangeNotify'
 import { ASYNC_STORAGE_KEYS } from '../constants'
+import { useApplicationFlagStore } from '../hooks/useApplicationFlagStore'
 import useAutoMode from '../hooks/useAutoMode'
 import { useCurrentLine } from '../hooks/useCurrentLine'
 import { useCurrentStation } from '../hooks/useCurrentStation'
@@ -60,6 +61,7 @@ TaskManager.defineTask(
       console.error(error)
       return
     }
+
     setLocation(data.locations[0])
   }
 )
@@ -77,11 +79,15 @@ const MainScreen: React.FC = () => {
   const isLEDTheme = theme === APP_THEME.LED
 
   const { stations, selectedDirection, arrived } = useRecoilValue(stationState)
-  const [{ leftStations, bottomState, autoModeEnabled }, setNavigation] =
+  const [{ leftStations, bottomState }, setNavigation] =
     useRecoilState(navigationState)
   const currentLine = useCurrentLine()
   const currentStation = useCurrentStation()
 
+  const autoModeEnabled = useApplicationFlagStore(
+    (state) => state.autoModeEnabled
+  )
+
   const nextStation = useNextStation()
   useAutoMode(autoModeEnabled)
   const { isYamanoteLine, isOsakaLoopLine, isMeijoLine } = useLoopLine()

src/screens/SelectBound.tsx

@@ -22,6 +22,7 @@ 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'
@@ -73,10 +74,8 @@ const SelectBoundScreen: React.FC = () => {
   const navigation = useNavigation()
   const [{ station, stations, wantedDestination }, setStationState] =
     useRecoilState(stationState)
-  const [
-    { trainType, fetchedTrainTypes, autoModeEnabled, fromBuilder },
-    setNavigationState,
-  ] = useRecoilState(navigationState)
+  const [{ trainType, fetchedTrainTypes, fromBuilder }, setNavigationState] =
+    useRecoilState(navigationState)
   const [{ selectedLine }, setLineState] = useRecoilState(lineState)
 
   const { loading, error, mutateStations } = useStationList()
@@ -85,6 +84,13 @@ 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,
@@ -141,13 +147,6 @@ const SelectBoundScreen: React.FC = () => {
     navigation.navigate('TrainType')
   }
 
-  const handleAutoModeButtonPress = useCallback(async () => {
-    setNavigationState((prev) => ({
-      ...prev,
-      autoModeEnabled: !prev.autoModeEnabled,
-    }))
-  }, [setNavigationState])
-
   const handleAllStopsButtonPress = useCallback(() => {
     const stopStations = stations.filter(
       (s) => s.stopCondition !== StopCondition.Not
@@ -399,9 +398,7 @@ const SelectBoundScreen: React.FC = () => {
               {translate('selectBoundSettings')}
             </Button>
           ) : null}
-          <Button onPress={handleAutoModeButtonPress}>
-            {autoModeButtonText}
-          </Button>
+          <Button onPress={toggleAutoModeEnabled}>{autoModeButtonText}</Button>
         </View>
       </View>
     </ScrollView>

src/store/atoms/navigation.ts

@@ -18,7 +18,6 @@ export interface NavigationState {
   // 実際の次の停車駅を保持している
   stationForHeader: Station | null
   enabledLanguages: AvailableLanguage[]
-  autoModeEnabled: boolean
   fetchedTrainTypes: TrainType[]
   fromBuilder: boolean
 }
@@ -30,7 +29,6 @@ export const initialNavigationState: NavigationState = {
   leftStations: [],
   stationForHeader: null,
   enabledLanguages: ALL_AVAILABLE_LANGUAGES,
-  autoModeEnabled: false,
   fetchedTrainTypes: [],
   fromBuilder: false,
 }