add getter and setter for mapEnabled local state

apps/photos/src/components/PhotoViewer/FileInfo/index.tsx

@@ -21,7 +21,6 @@ import LocationOnOutlined from '@mui/icons-material/LocationOnOutlined';
 import TextSnippetOutlined from '@mui/icons-material/TextSnippetOutlined';
 import FolderOutlined from '@mui/icons-material/FolderOutlined';
 import BackupOutlined from '@mui/icons-material/BackupOutlined';
-import { getData, LS_KEYS } from 'utils/storage/localStorage';
 
 import {
     PhotoPeopleList,
@@ -34,6 +33,7 @@ import { ObjectLabelList } from 'components/MachineLearning/ObjectList';
 import { AppContext } from 'pages/_app';
 import { t } from 'i18next';
 import { GalleryContext } from 'pages/gallery';
+import { getMapEnabled } from 'utils/storage';
 
 export const FileInfoSidebar = styled((props: DialogProps) => (
     <EnteDrawer {...props} anchor="right" />
@@ -99,7 +99,7 @@ export function FileInfo({
     const [showExif, setShowExif] = useState(false);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const [updateMLDataIndex, setUpdateMLDataIndex] = useState(0);
-    const [showMap, setShowMap] = useState('false');
+    const [showMap, setShowMap] = useState(false);
 
     const openExif = () => setShowExif(true);
     const closeExif = () => setShowExif(false);
@@ -169,10 +169,8 @@ export function FileInfo({
     }, [exif]);
 
     useEffect(() => {
-        const mapEnabled = getData(LS_KEYS.MAPENABLED);
-        if (mapEnabled !== null) {
-            setShowMap(mapEnabled.mapEnabled);
-        }
+        const mapEnabled = getMapEnabled();
+        setShowMap(mapEnabled);
     }, [file, showInfo]);
 
     if (!file) {

apps/photos/src/pages/gallery/index.tsx

@@ -37,6 +37,7 @@ import {
     justSignedUp,
     setIsFirstLogin,
     setJustSignedUp,
+    setMapEnabled,
 } from 'utils/storage';
 import {
     getMapEnabledStatus,
@@ -109,7 +110,7 @@ import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 import UploadInputs from 'components/UploadSelectorInputs';
 import useFileInput from 'hooks/useFileInput';
 import { User } from 'types/user';
-import { getData, LS_KEYS, setData } from 'utils/storage/localStorage';
+import { getData, LS_KEYS } from 'utils/storage/localStorage';
 import { CenteredFlex } from 'components/Container';
 import { checkConnectivity } from 'utils/common';
 import { SYNC_INTERVAL_IN_MICROSECONDS } from 'constants/gallery';
@@ -593,9 +594,7 @@ export default function Gallery() {
             await syncTrash(collections, setTrashedFiles);
             await syncEntities();
             const mapEnabled = await getMapEnabledStatus();
-            setData(LS_KEYS.MAP_ENABLED, {
-                value: mapEnabled,
-            });
+            setMapEnabled(mapEnabled);
         } catch (e) {
             switch (e.message) {
                 case ServerErrorCodes.SESSION_EXPIRED:

apps/photos/src/utils/storage/index.ts

@@ -26,3 +26,11 @@ export function setLivePhotoInfoShownCount(count) {
 export function getUserLocale(): Language {
     return getData(LS_KEYS.LOCALE)?.value;
 }
+
+export function getMapEnabled(): boolean {
+    return getData(LS_KEYS.MAP_ENABLED)?.value ?? false;
+}
+
+export function setMapEnabled(value: boolean) {
+    setData(LS_KEYS.MAP_ENABLED, { value });
+}