add mapEnabled to appContext
This commit is contained in:
parent
7fad31235f
commit
a5032103a0
|
@ -1,10 +1,9 @@
|
|||
import { useEffect, useRef } from 'react';
|
||||
import { Typography, styled } from '@mui/material';
|
||||
import { styled } from '@mui/material';
|
||||
import { runningInBrowser } from 'utils/common';
|
||||
|
||||
import 'leaflet/dist/leaflet.css';
|
||||
import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'; // Re-uses images from ~leaflet package
|
||||
import { t } from 'i18next';
|
||||
runningInBrowser() && require('leaflet-defaulticon-compatibility');
|
||||
const L = runningInBrowser()
|
||||
? (require('leaflet') as typeof import('leaflet'))
|
||||
|
@ -22,37 +21,25 @@ const MapBoxContainer = styled('div')`
|
|||
|
||||
interface MapBoxProps {
|
||||
location: { latitude: number; longitude: number };
|
||||
showMap: boolean;
|
||||
}
|
||||
|
||||
const MapBox: React.FC<MapBoxProps> = ({ location, showMap }) => {
|
||||
const MapBox: React.FC<MapBoxProps> = ({ location }) => {
|
||||
const mapBoxContainerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
if (showMap) {
|
||||
const mapContainer = mapBoxContainerRef.current;
|
||||
const position: L.LatLngTuple = [
|
||||
location.latitude,
|
||||
location.longitude,
|
||||
];
|
||||
const mapContainer = mapBoxContainerRef.current;
|
||||
const position: L.LatLngTuple = [location.latitude, location.longitude];
|
||||
|
||||
if (mapContainer && !mapContainer.hasChildNodes()) {
|
||||
const map = L.map(mapContainer).setView(position, ZOOM_LEVEL);
|
||||
L.tileLayer(LAYER_TILE_URL, {
|
||||
attribution: LAYER_TILE_ATTRIBUTION,
|
||||
}).addTo(map);
|
||||
L.marker(position).addTo(map).openPopup();
|
||||
}
|
||||
if (mapContainer && !mapContainer.hasChildNodes()) {
|
||||
const map = L.map(mapContainer).setView(position, ZOOM_LEVEL);
|
||||
L.tileLayer(LAYER_TILE_URL, {
|
||||
attribution: LAYER_TILE_ATTRIBUTION,
|
||||
}).addTo(map);
|
||||
L.marker(position).addTo(map).openPopup();
|
||||
}
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<MapBoxContainer ref={showMap && mapBoxContainerRef}>
|
||||
{showMap && <Typography> {t('ENABLE_MAP')}</Typography>}
|
||||
</MapBoxContainer>
|
||||
</>
|
||||
);
|
||||
return <MapBoxContainer ref={mapBoxContainerRef} />;
|
||||
};
|
||||
|
||||
export default MapBox;
|
||||
|
|
|
@ -33,7 +33,6 @@ 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 +98,6 @@ 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 openExif = () => setShowExif(true);
|
||||
const closeExif = () => setShowExif(false);
|
||||
|
@ -168,11 +166,6 @@ export function FileInfo({
|
|||
setParsedExifData(parsedExifData);
|
||||
}, [exif]);
|
||||
|
||||
useEffect(() => {
|
||||
const mapEnabled = getMapEnabled();
|
||||
setShowMap(mapEnabled);
|
||||
}, []);
|
||||
|
||||
if (!file) {
|
||||
return <></>;
|
||||
}
|
||||
|
@ -224,7 +217,7 @@ export function FileInfo({
|
|||
icon={<LocationOnOutlined />}
|
||||
title={t('LOCATION')}
|
||||
caption={
|
||||
!showMap ? (
|
||||
!appContext.mapEnabled ? (
|
||||
t('ENABLE_MAP_INSTRUCTION')
|
||||
) : (
|
||||
<Link
|
||||
|
@ -244,7 +237,9 @@ export function FileInfo({
|
|||
}
|
||||
/>
|
||||
|
||||
<MapBox location={location} showMap={showMap} />
|
||||
{appContext.mapEnabled && (
|
||||
<MapBox location={location} />
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<InfoItem
|
||||
|
|
|
@ -5,25 +5,9 @@ import { useContext } from 'react';
|
|||
import { logError } from 'utils/sentry';
|
||||
import EnableMap from '../EnableMap';
|
||||
import DisableMap from '../DisableMap';
|
||||
import { updateMapEnabledStatus } from 'services/userService';
|
||||
|
||||
const ModifyMapEnabled = ({
|
||||
open,
|
||||
onClose,
|
||||
onRootClose,
|
||||
mapEnabled,
|
||||
setMapEnabled,
|
||||
}) => {
|
||||
const { somethingWentWrong } = useContext(AppContext);
|
||||
|
||||
const updateMapEnabled = async (enabled: boolean) => {
|
||||
try {
|
||||
await updateMapEnabledStatus(enabled);
|
||||
setMapEnabled(enabled);
|
||||
} catch (e) {
|
||||
logError(e, 'Error while updating mapEnabled');
|
||||
}
|
||||
};
|
||||
const ModifyMapEnabled = ({ open, onClose, onRootClose, mapEnabled }) => {
|
||||
const { somethingWentWrong, updateMapEnabled } = useContext(AppContext);
|
||||
|
||||
const disableMap = async () => {
|
||||
try {
|
||||
|
|
|
@ -1,21 +1,17 @@
|
|||
import { Box, DialogProps, Stack } from '@mui/material';
|
||||
import { EnteDrawer } from 'components/EnteDrawer';
|
||||
import Titlebar from 'components/Titlebar';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useContext, useEffect, useState } from 'react';
|
||||
import { t } from 'i18next';
|
||||
import { EnteMenuItem } from 'components/Menu/EnteMenuItem';
|
||||
import { MenuItemGroup } from 'components/Menu/MenuItemGroup';
|
||||
import ModifyMapEnabled from './ModifyMapEnabled';
|
||||
import { LS_KEYS } from 'utils/storage/localStorage';
|
||||
import { useLocalState } from 'hooks/useLocalState';
|
||||
import { getMapEnabledStatus } from 'services/userService';
|
||||
import { AppContext } from 'pages/_app';
|
||||
|
||||
export default function MapSettings({ open, onClose, onRootClose }) {
|
||||
const { mapEnabled, updateMapEnabled } = useContext(AppContext);
|
||||
const [modifyMapEnabledView, setModifyMapEnabledView] = useState(false);
|
||||
const [mapEnabled, setMapEnabled] = useLocalState(
|
||||
LS_KEYS.MAP_ENABLED,
|
||||
false
|
||||
);
|
||||
|
||||
const openModifyMapEnabled = () => setModifyMapEnabledView(true);
|
||||
const closeModifyMapEnabled = () => setModifyMapEnabledView(false);
|
||||
|
@ -26,7 +22,7 @@ export default function MapSettings({ open, onClose, onRootClose }) {
|
|||
}
|
||||
const main = async () => {
|
||||
const remoteMapValue = await getMapEnabledStatus();
|
||||
setMapEnabled(remoteMapValue);
|
||||
updateMapEnabled(remoteMapValue);
|
||||
};
|
||||
main();
|
||||
}, [open]);
|
||||
|
@ -77,7 +73,6 @@ export default function MapSettings({ open, onClose, onRootClose }) {
|
|||
<ModifyMapEnabled
|
||||
open={modifyMapEnabledView}
|
||||
mapEnabled={mapEnabled}
|
||||
setMapEnabled={setMapEnabled}
|
||||
onClose={closeModifyMapEnabled}
|
||||
onRootClose={handleRootClose}
|
||||
/>
|
||||
|
|
|
@ -36,6 +36,7 @@ import {
|
|||
import {
|
||||
getFamilyPortalRedirectURL,
|
||||
getRoadmapRedirectURL,
|
||||
updateMapEnabledStatus,
|
||||
} from 'services/userService';
|
||||
import { CustomError } from 'utils/error';
|
||||
import {
|
||||
|
@ -76,6 +77,7 @@ import {
|
|||
import exportService from 'services/export';
|
||||
import { ExportStage } from 'constants/export';
|
||||
import { REDIRECTS } from 'constants/redirects';
|
||||
import { getLocalMapEnabled, setLocalMapEnabled } from 'utils/storage';
|
||||
|
||||
const redirectMap = new Map([
|
||||
[REDIRECTS.ROADMAP, getRoadmapRedirectURL],
|
||||
|
@ -102,7 +104,9 @@ type AppContextType = {
|
|||
redirectURL: string;
|
||||
setRedirectURL: (url: string) => void;
|
||||
mlSearchEnabled: boolean;
|
||||
mapEnabled: boolean;
|
||||
updateMlSearchEnabled: (enabled: boolean) => Promise<void>;
|
||||
updateMapEnabled: (enabled: boolean) => Promise<void>;
|
||||
startLoading: () => void;
|
||||
finishLoading: () => void;
|
||||
closeMessageDialog: () => void;
|
||||
|
@ -147,6 +151,7 @@ export default function App(props) {
|
|||
const [redirectName, setRedirectName] = useState<string>(null);
|
||||
const [redirectURL, setRedirectURL] = useState(null);
|
||||
const [mlSearchEnabled, setMlSearchEnabled] = useState(false);
|
||||
const [mapEnabled, setMapEnabled] = useState(false);
|
||||
const isLoadingBarRunning = useRef(false);
|
||||
const loadingBar = useRef(null);
|
||||
const [dialogMessage, setDialogMessage] = useState<DialogBoxAttributes>();
|
||||
|
@ -249,6 +254,10 @@ export default function App(props) {
|
|||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
setMapEnabled(getLocalMapEnabled());
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isElectron()) {
|
||||
return;
|
||||
|
@ -394,6 +403,16 @@ export default function App(props) {
|
|||
}
|
||||
};
|
||||
|
||||
const updateMapEnabled = async (enabled: boolean) => {
|
||||
try {
|
||||
await updateMapEnabledStatus(enabled);
|
||||
setLocalMapEnabled(enabled);
|
||||
setMapEnabled(enabled);
|
||||
} catch (e) {
|
||||
logError(e, 'Error while updating mapEnabled');
|
||||
}
|
||||
};
|
||||
|
||||
const startLoading = () => {
|
||||
!isLoadingBarRunning.current && loadingBar.current?.continuousStart();
|
||||
isLoadingBarRunning.current = true;
|
||||
|
@ -493,6 +512,8 @@ export default function App(props) {
|
|||
setThemeColor,
|
||||
somethingWentWrong,
|
||||
setDialogBoxAttributesV2,
|
||||
mapEnabled,
|
||||
updateMapEnabled,
|
||||
}}>
|
||||
{(loading || !isI18nReady) && (
|
||||
<Overlay
|
||||
|
|
|
@ -28,7 +28,7 @@ import { B64EncryptionResult } from 'types/crypto';
|
|||
import { getLocalFamilyData, isPartOfFamily } from 'utils/user/family';
|
||||
import { AxiosResponse } from 'axios';
|
||||
import { APPS, getAppName } from 'constants/apps';
|
||||
import { setMapEnabled } from 'utils/storage';
|
||||
import { setLocalMapEnabled } from 'utils/storage';
|
||||
|
||||
const ENDPOINT = getEndpoint();
|
||||
|
||||
|
@ -457,7 +457,7 @@ export const updateFaceSearchEnabledStatus = async (newStatus: boolean) => {
|
|||
export const syncMapEnabled = async () => {
|
||||
try {
|
||||
const status = await getMapEnabledStatus();
|
||||
setMapEnabled(status);
|
||||
setLocalMapEnabled(status);
|
||||
} catch (e) {
|
||||
logError(e, 'failed to sync map enabled status');
|
||||
throw e;
|
||||
|
|
|
@ -27,10 +27,10 @@ export function getUserLocale(): Language {
|
|||
return getData(LS_KEYS.LOCALE)?.value;
|
||||
}
|
||||
|
||||
export function getMapEnabled(): boolean {
|
||||
export function getLocalMapEnabled(): boolean {
|
||||
return getData(LS_KEYS.MAP_ENABLED)?.value ?? false;
|
||||
}
|
||||
|
||||
export function setMapEnabled(value: boolean) {
|
||||
export function setLocalMapEnabled(value: boolean) {
|
||||
setData(LS_KEYS.MAP_ENABLED, { value });
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue