feature: Add optional directional arrow to map (#914)

* feat: Added directional Arrow

* chore: build translations

* chore:clean up

* chore: PR clean up

* fix: change constant name

Co-authored-by: Andrew Chou <andrewchou@fastmail.com>

* fix: type with translations

Co-authored-by: Andrew Chou <andrewchou@fastmail.com>

messages/en.json

@@ -715,6 +715,15 @@
     "description": "Row label indicating details related to the user's device membership",
     "message": "(You) {deviceName}"
   },
+  "screens.Settings.MapSettings.batteryWarning": {
+    "message": "May drain battery faster"
+  },
+  "screens.Settings.MapSettings.directionalArrow": {
+    "message": "Use Directional Arrow"
+  },
+  "screens.Settings.MapSettings.mapSettingTitle": {
+    "message": "Map Settings"
+  },
   "screens.Settings.ProjectConfig.LeavePracticeMode.createOrJoinProject": {
     "message": "Create or join a project below"
   },
@@ -826,6 +835,10 @@
     "description": "Secondary text for language settings",
     "message": "Display language for App"
   },
+  "screens.Settings.mapSettings": {
+    "description": "Button to adjust settings for map",
+    "message": "Map Settings"
+  },
   "screens.Settings.projectConfig": {
     "description": "Primary text for project config settings",
     "message": "Project Configuration"

src/frontend/Navigation/AppStack.tsx

@@ -33,6 +33,7 @@ import { ConfirmLeavePracticeModeScreen } from "../screens/ConfirmLeavePracticeM
 import { CreateProjectScreen } from "../screens/CreateProject";
 import { Security } from "../screens/Security";
 import { AppPasscode } from "../screens/AppPasscode";
+import { MapSettings } from "../screens/Settings/MapSettings";
 
 const HomeTabs = createBottomTabNavigator(
   {
@@ -91,6 +92,7 @@ export const AppStack = createStackNavigator(
     CreateProject: CreateProjectScreen,
     Security: Security,
     AppPasscode: AppPasscode,
+    MapSettings,
   },
   {
     initialRouteName: "Home",

src/frontend/context/SettingsContext.tsx

@@ -19,6 +19,7 @@ export type SettingsState = {
     onboarding: boolean;
     appPasscode: boolean;
   };
+  directionalArrow: boolean;
 };
 
 type SettingsContextType = readonly [
@@ -33,6 +34,7 @@ const DEFAULT_SETTINGS: SettingsState = {
     onboarding: process.env.FEATURE_ONBOARDING === "true",
     appPasscode: process.env.FEATURE_PASSCODE === "true",
   },
+  directionalArrow: false,
 };
 
 const SettingsContext = React.createContext<SettingsContextType>([

src/frontend/hooks/useSettingsValue.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import SettingsContext, { SettingsState } from "../context/SettingsContext";
+
+export default function useSettingsValue<K extends keyof SettingsState>(
+  key: K
+): SettingsState[K] {
+  const [state] = React.useContext(SettingsContext);
+  return state[key];
+}

src/frontend/screens/MapScreen.js

@@ -5,7 +5,7 @@ import Text from "../sharedComponents/Text";
 
 import debug from "debug";
 
-import MapView from "../sharedComponents/MapView";
+import MapView from "../sharedComponents/Map/MapView";
 import Loading from "../sharedComponents/Loading";
 import { useDraftObservation } from "../hooks/useDraftObservation";
 import useMapStyle from "../hooks/useMapStyle";

src/frontend/screens/Settings/MapSettings.tsx

@@ -0,0 +1,61 @@
+import React, { useContext } from "react";
+import { FormattedMessage, defineMessages } from "react-intl";
+import { Switch } from "react-native";
+import { NavigationStackScreenComponent } from "react-navigation-stack";
+import SettingsContext from "../../context/SettingsContext";
+import { DARK_BLUE, LIGHT_GREY } from "../../lib/styles";
+
+import HeaderTitle from "../../sharedComponents/HeaderTitle";
+import IconButton from "../../sharedComponents/IconButton";
+import { BackIcon } from "../../sharedComponents/icons";
+import { List, ListItem, ListItemText } from "../../sharedComponents/List";
+
+const m = defineMessages({
+  mapSettingTitle: {
+    id: "screens.Settings.MapSettings.mapSettingTitle",
+    defaultMessage: "Map Settings",
+  },
+  directionalArrow: {
+    id: "screens.Settings.MapSettings.directionalArrow",
+    defaultMessage: "Use Directional Arrow",
+  },
+  batteryWarning: {
+    id: "screens.Settings.MapSettings.batteryWarning",
+    defaultMessage: "May drain battery faster",
+  },
+});
+
+export const MapSettings: NavigationStackScreenComponent = () => {
+  const [{ directionalArrow }, setSetting] = useContext(SettingsContext);
+  return (
+    <List>
+      <ListItem
+        onPress={() => setSetting("directionalArrow", !directionalArrow)}
+      >
+        <ListItemText
+          primary={<FormattedMessage {...m.directionalArrow} />}
+          secondary={<FormattedMessage {...m.batteryWarning} />}
+        />
+        <Switch
+          trackColor={{ false: LIGHT_GREY }}
+          thumbColor={directionalArrow ? DARK_BLUE : LIGHT_GREY}
+          value={directionalArrow}
+        />
+      </ListItem>
+    </List>
+  );
+};
+
+MapSettings.navigationOptions = () => ({
+  headerTitle: () => (
+    <HeaderTitle style={{}}>
+      <FormattedMessage {...m.mapSettingTitle} />
+    </HeaderTitle>
+  ),
+  headerLeft: ({ onPress }) =>
+    onPress && (
+      <IconButton onPress={onPress}>
+        <BackIcon />
+      </IconButton>
+    ),
+});

src/frontend/screens/Settings/Settings.js

@@ -98,6 +98,11 @@ const m = defineMessages({
     defaultMessage: "App Passcode and Device Security",
     description: "Description of security button in settings",
   },
+  mapSettings: {
+    id: "screens.Settings.mapSettings",
+    defaultMessage: "Map Settings",
+    description: "Button to adjust settings for map",
+  },
 });
 
 const Settings = () => {
@@ -126,6 +131,17 @@ const Settings = () => {
           secondary={<FormattedMessage {...m.projectConfigDesc} />}
         ></ListItemText>
       </ListItem>
+      <ListItem
+        onPress={() => navigate("MapSettings")}
+        testID="settingsMapSettingsButton"
+      >
+        <ListItemIcon iconName="map" />
+        <ListItemText
+          primary={<FormattedMessage {...m.mapSettings} />}
+          secondary="---------"
+        />
+      </ListItem>
+
       <ListItem
         onPress={() => navigate("CoordinateFormat")}
         testID="settingsCoodinatesButton"

src/frontend/sharedComponents/MapView.js → src/frontend/sharedComponents/Map/MapView.js

@@ -6,17 +6,18 @@ import ScaleBar from "react-native-scale-bar";
 import CheapRuler from "cheap-ruler";
 import validateColor from "validate-color";
 
-import ConfigContext from "../context/ConfigContext";
-import { LocationFollowingIcon, LocationNoFollowIcon } from "./icons";
-import IconButton from "./IconButton";
-import type { LocationContextType } from "../context/LocationContext";
-import type { ObservationsMap } from "../context/ObservationsContext";
-import type { MapStyleType } from "../hooks/useMapStyle";
-import { useIsFullyFocused } from "../hooks/useIsFullyFocused";
-import bugsnag from "../lib/logger";
-import config from "../../config.json";
-import Loading from "./Loading";
-import OfflineMapLayers from "./OfflineMapLayers";
+import ConfigContext from "../../context/ConfigContext";
+import { LocationFollowingIcon, LocationNoFollowIcon } from "../icons";
+import IconButton from "../IconButton";
+import type { LocationContextType } from "../../context/LocationContext";
+import type { ObservationsMap } from "../../context/ObservationsContext";
+import type { MapStyleType } from "../../hooks/useMapStyle";
+import { useIsFullyFocused } from "../../hooks/useIsFullyFocused";
+import bugsnag from "../../lib/logger";
+import config from "../../../config.json";
+import Loading from "../Loading";
+import OfflineMapLayers from "../OfflineMapLayers";
+import { UserLocation } from "./UserLocation";
 
 // This is the default zoom used when the map first loads, and also the zoom
 // that the map will zoom to if the user clicks the "Locate" button and the
@@ -391,7 +392,7 @@ class MapView extends React.Component<Props, State> {
             )}
             {styleType === "fallback" ? <OfflineMapLayers /> : null}
             {locationServicesEnabled ? (
-              <MapboxGL.UserLocation
+              <UserLocation
                 visible={isFocused}
                 minDisplacement={MIN_DISPLACEMENT}
               />

src/frontend/sharedComponents/Map/UserLocation.tsx

@@ -0,0 +1,23 @@
+import MapboxGL from "@react-native-mapbox-gl/maps";
+import * as React from "react";
+import useSettingsValue from "../../hooks/useSettingsValue";
+
+interface UserLocationProps {
+  visible: boolean;
+  minDisplacement: number;
+}
+
+export const UserLocation = ({
+  visible,
+  minDisplacement,
+}: UserLocationProps) => {
+  const directionalArrow = useSettingsValue("directionalArrow");
+
+  return (
+    <MapboxGL.UserLocation
+      visible={visible}
+      minDisplacement={directionalArrow ? 1 : minDisplacement}
+      showsUserHeadingIndicator={directionalArrow}
+    />
+  );
+};