beenull/ente
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

add mapEnabled to appContext

Browse source
This commit is contained in:
Abhinav 2023-06-30 13:22:36 +05:30
parent 7fad31235f
commit a5032103a0
7 changed files with 46 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
apps/photos/src/components/PhotoViewer/FileInfo/MapBox.tsx
View file

@ -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;

13
apps/photos/src/components/PhotoViewer/FileInfo/index.tsx
View file

@ -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

20
apps/photos/src/components/Sidebar/MapSetting/ModifyMapEnabled.tsx
View file

@ -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 {

13
apps/photos/src/components/Sidebar/MapSetting/index.tsx
View file

@ -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}
/>

21
apps/photos/src/pages/_app.tsx
View file

@ -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

4
apps/photos/src/services/userService.ts
View file

@ -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;

4
apps/photos/src/utils/storage/index.ts
View file

@ -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 });
}