+
+
+ {!mapValue || !offlineMaps ? (
+
{t(m.mapBackgroundTitle)}
@@ -117,31 +81,16 @@ export const BGMaps = ({ setCurrentTab }) => {
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
) : (
- // Lazy loading each one here: aka will only load when clicked
+ // Lazy loading each one here: aka will only load when clicked
{offlineMaps.map(offlineMap => (
-
@@ -149,42 +98,3 @@ export const BGMaps = ({ setCurrentTab }) => {
)
}
-
-const useStyles = makeStyles({
- sidePanel: {
- width: 'auto',
- borderRight: '1px solid #E0E0E0',
- height: '100%',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- minWidth: '35%'
- },
- buttonContainer: {
- display: 'flex',
- justifyContent: 'space-between',
- padding: 20
- },
- button: {
- textTransform: 'none'
- },
- firstButton: {
- marginRight: 10
- },
- noMapContainer: {
- padding: 40
- },
- backHeader: {
- justifyContent: 'flex-start',
- alignSelf: 'flex-start',
- paddingLeft: 20,
- paddingTop: 20,
- paddingBottom: 20,
- width: '100%',
- display: 'flex',
- textTransform: 'none',
- '& :first-child': {
- marginRight: 20
- }
- }
-})
diff --git a/src/renderer/components/Settings/index.js b/src/renderer/components/Settings/index.js
index 3d6f5ef5..39bb5d09 100644
--- a/src/renderer/components/Settings/index.js
+++ b/src/renderer/components/Settings/index.js
@@ -14,45 +14,11 @@ const m = defineMessages({
aboutMapeo: 'About Mapeo'
})
-const useStyles = makeStyles({
- container: {
- display: 'flex',
- textAlign: 'start',
- height: '100%',
- flex: 1
- },
- tabs: {
- padding: '6px 24px 6px 40',
- textTransform: 'none',
- textAlign: 'left',
- display: 'flex',
- width: 'auto',
- minWidth: '30%',
- fontSize: 16,
- lineHeight: '30px',
- height: '100%',
- '& .MuiTab-wrapper': {
- justifyContent: 'flex-start',
- flexDirection: 'row',
- alignItems: 'center'
- },
- '& .MuiSvgIcon-root': {
- marginRight: 20,
- marginLeft: 20
- },
- '& .MuiTabs-root': {
- flex: 1
- }
- }
-})
-
const FADE_DURATION = 700
-/** @typedef {import('./SettingsMenu').SettingsTabs} SettingsTabs */
-
/** @typedef {'BackgroundMap' | 'AboutMapeo'} SettingTabId */
-/** @type {SettingsTabs[]} */
+/** @type {import('./SettingsMenu').SettingsTabs[]} */
const tabs = /** @typedef {const} */ [
{
tabId: 'BackgroundMap',
@@ -78,15 +44,13 @@ const tabs = /** @typedef {const} */ [
export const Settings = ({ reset, setReset, fadeIn }) => {
const [menuVisible, setMenuVisibility] = React.useState(true)
- /** @type {SettingsTabs['tabId'] | false} */
+ /** @type {import('./SettingsMenu').SettingsTabs['tabId'] | false} */
const initialState = /** {const} */ (false)
const [tabValue, setTabValue] = React.useState(initialState)
const classes = useStyles()
- // bit hacky: when user presses settingsTab, we DO NOT WANT background map to be selected
- // because when background map is selected, the entire settings menu is hidden
if (reset) {
setReset(false)
if (tabValue === 'BackgroundMap') setTabValue(false)
@@ -101,6 +65,7 @@ export const Settings = ({ reset, setReset, fadeIn }) => {
if (!menuVisible) setMenuVisibility(true)
}, [tabValue, menuVisible])
+ // Controlling most of the fade in animations here
return (
@@ -119,7 +84,11 @@ export const Settings = ({ reset, setReset, fadeIn }) => {
{tabValue === 'BackgroundMap' && (
- {
+ setTabValue(false)
+ }}
+ />
)}
@@ -133,3 +102,35 @@ export const Settings = ({ reset, setReset, fadeIn }) => {
)
}
+
+const useStyles = makeStyles({
+ container: {
+ display: 'flex',
+ textAlign: 'start',
+ height: '100%',
+ flex: 1
+ },
+ tabs: {
+ padding: '6px 24px 6px 40',
+ textTransform: 'none',
+ textAlign: 'left',
+ display: 'flex',
+ width: 'auto',
+ minWidth: '30%',
+ fontSize: 16,
+ lineHeight: '30px',
+ height: '100%',
+ '& .MuiTab-wrapper': {
+ justifyContent: 'flex-start',
+ flexDirection: 'row',
+ alignItems: 'center'
+ },
+ '& .MuiSvgIcon-root': {
+ marginRight: 20,
+ marginLeft: 20
+ },
+ '& .MuiTabs-root': {
+ flex: 1
+ }
+ }
+})
diff --git a/tsconfig.json b/tsconfig.json
index 1f74d142..3e1a1baf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -10,6 +10,8 @@
"allowJs": true,
"checkJs": false,
"noEmit": true,
+ "strict": true,
+ "alwaysStrict": true,
"typeRoots": ["types", "node_modules/@types"]
},
"include": ["src/main/**/*", "src/workers/**/*", "index.js", "types/**/*"],
From 9f3a03542e43b143f4ec457ffa42982f74aad71a Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Wed, 20 Apr 2022 20:59:18 -0300
Subject: [PATCH 24/45] chore: translations
---
messages/renderer/en.json | 48 ++++++++++++++++++++++++---------------
1 file changed, 30 insertions(+), 18 deletions(-)
diff --git a/messages/renderer/en.json b/messages/renderer/en.json
index f860287d..60b562d7 100644
--- a/messages/renderer/en.json
+++ b/messages/renderer/en.json
@@ -1,4 +1,16 @@
{
+ "renderer.components.BackgroundMaps.BGMapInfo.createOfflineArea": {
+ "description": "Button to create an offline area",
+ "message": "Create Offline Area"
+ },
+ "renderer.components.BackgroundMaps.BGMapInfo.deleteStyle": {
+ "description": "Button to delete style",
+ "message": "Delete Style"
+ },
+ "renderer.components.BackgroundMaps.BGMapInfo.offlineAreas": {
+ "description": "Title for Offline Areas",
+ "message": "Offline Areas"
+ },
"renderer.components.BackgroundMaps.MapCard.areas": {
"description": "indicates how many offline areas",
"message": "offline areas"
@@ -63,13 +75,25 @@
"description": "Level of detail seen on map - can see villages on map",
"message": "Village"
},
- "renderer.components.BackgroundMaps.OfflineMapInfo.createOfflineArea": {
- "description": "Button to create an offline area",
- "message": "Create Offline Area"
+ "renderer.components.BackgroundMaps.OfflineAreaCard.mb": {
+ "description": "Abbreviation for megabytes",
+ "message": "MB"
},
- "renderer.components.BackgroundMaps.OfflineMapInfo.offlineAreas": {
- "description": "Title for Offline Areas",
- "message": "Offline Areas"
+ "renderer.components.BackgroundMaps.OfflineAreaCard.zoomLevel": {
+ "description": "indicated zoom level",
+ "message": "Zoom Level"
+ },
+ "renderer.components.BackgroundMaps.SidePanel.addMap": {
+ "description": "Button to add map background",
+ "message": "Add Map Background"
+ },
+ "renderer.components.BackgroundMaps.SidePanel.backToSettings": {
+ "description": "button to go back to settings",
+ "message": "Back to Settings"
+ },
+ "renderer.components.BackgroundMaps.SidePanel.createOfflineMap": {
+ "description": "Button to create an offline area for a map backgroun",
+ "message": "Create Offline Map"
},
"renderer.components.Home.mapeditor": {
"description": "MapEditor tab label",
@@ -536,18 +560,6 @@
"description": "Name to show for an observation when it does not match any preset",
"message": "Observation"
},
- "renderer.components.Settings.BGMaps.addMap": {
- "description": "Button to add map background",
- "message": "Add Map Background"
- },
- "renderer.components.Settings.BGMaps.backToSettings": {
- "description": "button to go back to settings",
- "message": "Back to Settings"
- },
- "renderer.components.Settings.BGMaps.createOfflineMap": {
- "description": "Button to create an offline area for a map backgroun",
- "message": "Create Offline Map"
- },
"renderer.components.Settings.BGMaps.mapBackgroundTitle": {
"description": "Title for description of offline maps",
"message": "Managing Map Backgrounds and Offline Areas"
From 9e4edb46a638518e8e49a2d7d120f6d5af77b164 Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Wed, 20 Apr 2022 21:05:07 -0300
Subject: [PATCH 25/45] chore: Added type checking
---
src/renderer/components/BackgroundMaps/BGMapInfo.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/renderer/components/BackgroundMaps/BGMapInfo.js b/src/renderer/components/BackgroundMaps/BGMapInfo.js
index a7f03222..94c0721a 100644
--- a/src/renderer/components/BackgroundMaps/BGMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BGMapInfo.js
@@ -1,3 +1,4 @@
+// @ts-check
import { Button, Fade, makeStyles, Paper, Typography } from '@material-ui/core'
import * as React from 'react'
import { defineMessages, useIntl } from 'react-intl'
From c36ab9e35ae35e131a869f31f47895fad13785a9 Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Mon, 25 Apr 2022 19:59:22 -0300
Subject: [PATCH 26/45] chore: Cleaned up buttons
---
.../components/BackgroundMaps/BGMapInfo.js | 25 +++++++++++-
.../components/BackgroundMaps/MapCard.js | 4 +-
.../components/BackgroundMaps/SidePanel.js | 38 ++++++++++++++++++-
.../components/Settings/AboutMapeo.js | 27 +++++++++++++
src/renderer/components/Settings/index.js | 9 +++--
5 files changed, 95 insertions(+), 8 deletions(-)
create mode 100644 src/renderer/components/Settings/AboutMapeo.js
diff --git a/src/renderer/components/BackgroundMaps/BGMapInfo.js b/src/renderer/components/BackgroundMaps/BGMapInfo.js
index 94c0721a..caf8cba4 100644
--- a/src/renderer/components/BackgroundMaps/BGMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BGMapInfo.js
@@ -8,6 +8,7 @@ import DeleteIcon from '@material-ui/icons/DeleteForeverOutlined'
import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
import Loading from '../Loading'
import { OfflineAreaCard } from './OfflineAreaCard'
+import { remote } from 'electron'
const m = defineMessages({
// Title for Offline Areas
@@ -15,7 +16,11 @@ const m = defineMessages({
// Button to create an offline area
createOfflineArea: 'Create Offline Area',
// Button to delete style
- deleteStyle: 'Delete Style'
+ deleteStyle: 'Delete Style',
+ // Title for error message when deleting style
+ deleteErrorTitle: 'Error Deleting Style',
+ // Description for error message when deleting style,
+ deleteErrorDescription: 'There was an error deleting the style'
})
/** @typedef {{id:string, size:number, zoomLevel:number, title:string}} OfflineArea */
@@ -113,6 +118,22 @@ const MapInfo = ({ bgMap }) => {
accessToken: MAPBOX_ACCESS_TOKEN
})
+ /**
+ *
+ * @param {string} mapId
+ */
+ function deleteMap (mapId) {
+ // To do: Api Call to delete map
+ try {
+ return
+ } catch (err) {
+ remote.dialog.showErrorBox(
+ t(m.deleteErrorTitle),
+ t(m.deleteErrorDescription) + ': ' + err
+ )
+ }
+ }
+
return (
{/* Banner */}
@@ -120,7 +141,7 @@ const MapInfo = ({ bgMap }) => {
{styleTitle}
- {}}>
+ deleteMap(bgMap.styleId)}>
{t(m.deleteStyle)}
diff --git a/src/renderer/components/BackgroundMaps/MapCard.js b/src/renderer/components/BackgroundMaps/MapCard.js
index 170e9b09..1815e497 100644
--- a/src/renderer/components/BackgroundMaps/MapCard.js
+++ b/src/renderer/components/BackgroundMaps/MapCard.js
@@ -66,8 +66,8 @@ export const MapCard = ({ offlineMap, setMap, mapBeingViewed }) => {
/>
-
{offlineMap.mapTitle}
-
+ {offlineMap.mapTitle}
+
{offlineMap.size} {t(m.mb)}
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index 62e02cac..5b5d84b4 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -1,6 +1,7 @@
// @ts-check
import { Button, makeStyles } from '@material-ui/core'
import ChevronLeft from '@material-ui/icons/ChevronLeft'
+import { remote } from 'electron'
import * as React from 'react'
import { defineMessages, useIntl } from 'react-intl'
import Loader from '../Loader'
@@ -12,7 +13,12 @@ const m = defineMessages({
// Button to create an offline area for a map backgroun
createOfflineMap: 'Create Offline Map',
// button to go back to settings
- backToSettings: 'Back to Settings'
+ backToSettings: 'Back to Settings',
+ // Title for import errot pop up dialog,
+ importErrorTitle: 'Background Maps Import Error',
+ // Description of map import error
+ importErrorDescription:
+ 'There was an error importing the background maps. Please try again.'
})
/**
* @typedef SidePanelProps
@@ -33,6 +39,35 @@ export const SidePanel = ({
const classes = useStyles()
+ async function selectMbTileFile () {
+ const result = await remote.dialog.showOpenDialog({
+ filters: [{ name: 'MbTiles', extensions: ['mbtiles'] }],
+ properties: ['openFile']
+ })
+
+ if (result.canceled) return
+
+ if (!result.filePaths || !result.filePaths.length) return
+
+ try {
+ const filePath = result.filePaths[0]
+ // to do: Api call to import map
+ } catch (err) {
+ onError(err)
+ }
+
+ /**
+ *
+ * @param {string} err
+ */
+ function onError (err) {
+ remote.dialog.showErrorBox(
+ t(m.importErrorTitle),
+ t(m.importErrorDescription) + ': ' + err
+ )
+ }
+ }
+
return (
@@ -41,6 +76,7 @@ export const SidePanel = ({
diff --git a/src/renderer/components/Settings/AboutMapeo.js b/src/renderer/components/Settings/AboutMapeo.js
new file mode 100644
index 00000000..e22dd3a5
--- /dev/null
+++ b/src/renderer/components/Settings/AboutMapeo.js
@@ -0,0 +1,27 @@
+// @ts-check
+import * as React from 'react'
+import { makeStyles, Typography } from '@material-ui/core'
+import { defineMessages, useIntl } from 'react-intl'
+import buildConfig from '../../../build-config'
+
+const m = defineMessages({
+ // Used to indicate the version of mapeo the user is using
+ version: 'Version'
+})
+
+export const AboutMapeo = () => {
+ const classes = useStyles()
+ const { formatMessage: t } = useIntl()
+
+ return (
+
+ {t(m.version) + ': ' + buildConfig.version}
+
+ )
+}
+
+const useStyles = makeStyles({
+ container: {
+ padding: 40
+ }
+})
diff --git a/src/renderer/components/Settings/index.js b/src/renderer/components/Settings/index.js
index 39bb5d09..eb6b76fe 100644
--- a/src/renderer/components/Settings/index.js
+++ b/src/renderer/components/Settings/index.js
@@ -8,6 +8,7 @@ import { BGMaps } from './BGMaps'
import { makeStyles } from '@material-ui/core'
import Fade from '@material-ui/core/Fade'
import Paper from '@material-ui/core/Paper'
+import { AboutMapeo } from './AboutMapeo'
const m = defineMessages({
backgroundMap: 'Background Map',
@@ -94,9 +95,11 @@ export const Settings = ({ reset, setReset, fadeIn }) => {
)}
{tabValue === 'AboutMapeo' && (
-
-
Build About Mapeo Here
-
+
+
+
+
)}
From d1ef2b4a92abd9b864caadc7c67c09cc87ceecd2 Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Mon, 25 Apr 2022 19:59:47 -0300
Subject: [PATCH 27/45] chore: translations
---
messages/renderer/en.json | 20 ++++++++++++++++++++
1 file changed, 20 insertions(+)
diff --git a/messages/renderer/en.json b/messages/renderer/en.json
index 60b562d7..182c5fbd 100644
--- a/messages/renderer/en.json
+++ b/messages/renderer/en.json
@@ -3,6 +3,14 @@
"description": "Button to create an offline area",
"message": "Create Offline Area"
},
+ "renderer.components.BackgroundMaps.BGMapInfo.deleteErrorDescription": {
+ "description": "Description for error message when deleting style,",
+ "message": "There was an error deleting the style"
+ },
+ "renderer.components.BackgroundMaps.BGMapInfo.deleteErrorTitle": {
+ "description": "Title for error message when deleting style",
+ "message": "Error Deleting Style"
+ },
"renderer.components.BackgroundMaps.BGMapInfo.deleteStyle": {
"description": "Button to delete style",
"message": "Delete Style"
@@ -95,6 +103,14 @@
"description": "Button to create an offline area for a map backgroun",
"message": "Create Offline Map"
},
+ "renderer.components.BackgroundMaps.SidePanel.importErrorDescription": {
+ "description": "Description of map import error",
+ "message": "There was an error importing the background maps. Please try again."
+ },
+ "renderer.components.BackgroundMaps.SidePanel.importErrorTitle": {
+ "description": "Title for import errot pop up dialog,",
+ "message": "Background Maps Import Error"
+ },
"renderer.components.Home.mapeditor": {
"description": "MapEditor tab label",
"message": "Territory"
@@ -560,6 +576,10 @@
"description": "Name to show for an observation when it does not match any preset",
"message": "Observation"
},
+ "renderer.components.Settings.AboutMapeo.version": {
+ "description": "Used to indicate the version of mapeo the user is using",
+ "message": "Version"
+ },
"renderer.components.Settings.BGMaps.mapBackgroundTitle": {
"description": "Title for description of offline maps",
"message": "Managing Map Backgrounds and Offline Areas"
From 9986517048c8d3393c7f0207d22b5a789cbf3351 Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Mon, 25 Apr 2022 20:14:23 -0300
Subject: [PATCH 28/45] chore: linting fix for CI
---
src/renderer/components/BackgroundMaps/BGMapInfo.js | 1 -
src/renderer/components/BackgroundMaps/SidePanel.js | 2 +-
2 files changed, 1 insertion(+), 2 deletions(-)
diff --git a/src/renderer/components/BackgroundMaps/BGMapInfo.js b/src/renderer/components/BackgroundMaps/BGMapInfo.js
index caf8cba4..5d5b4779 100644
--- a/src/renderer/components/BackgroundMaps/BGMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BGMapInfo.js
@@ -125,7 +125,6 @@ const MapInfo = ({ bgMap }) => {
function deleteMap (mapId) {
// To do: Api Call to delete map
try {
- return
} catch (err) {
remote.dialog.showErrorBox(
t(m.deleteErrorTitle),
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index 5b5d84b4..4b7c2d97 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -50,7 +50,7 @@ export const SidePanel = ({
if (!result.filePaths || !result.filePaths.length) return
try {
- const filePath = result.filePaths[0]
+ // const filePath = result.filePaths[0]
// to do: Api call to import map
} catch (err) {
onError(err)
From 222be4c40dc29ace380d25743b1f3365e4fbeafa Mon Sep 17 00:00:00 2001
From: ErikSin <67773827+ErikSin@users.noreply.github.com>
Date: Tue, 6 Dec 2022 20:49:06 -0800
Subject: [PATCH 29/45] chore: updated components with tanstack hooks
---
.../{BGMapInfo.js => BackgroundMapInfo.js} | 106 +++++-------------
.../components/BackgroundMaps/MapCard.js | 25 ++---
.../components/BackgroundMaps/SidePanel.js | 24 ++--
.../Settings/{BGMaps.js => BackgroundMaps.js} | 61 +++-------
src/renderer/components/Settings/index.js | 4 +-
src/renderer/hooks/useMapServerQuery.d.ts | 2 +-
6 files changed, 73 insertions(+), 149 deletions(-)
rename src/renderer/components/BackgroundMaps/{BGMapInfo.js => BackgroundMapInfo.js} (55%)
rename src/renderer/components/Settings/{BGMaps.js => BackgroundMaps.js} (54%)
diff --git a/src/renderer/components/BackgroundMaps/BGMapInfo.js b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
similarity index 55%
rename from src/renderer/components/BackgroundMaps/BGMapInfo.js
rename to src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
index 5d5b4779..f03c0a61 100644
--- a/src/renderer/components/BackgroundMaps/BGMapInfo.js
+++ b/src/renderer/components/BackgroundMaps/BackgroundMapInfo.js
@@ -7,8 +7,9 @@ import DeleteIcon from '@material-ui/icons/DeleteForeverOutlined'
import { MAPBOX_ACCESS_TOKEN } from '../../../../config'
import Loading from '../Loading'
-import { OfflineAreaCard } from './OfflineAreaCard'
import { remote } from 'electron'
+import { useMapServerQuery } from '../../hooks/useMapServerQuery'
+// import { useMapServerMutation } from '../../hooks/useMapServerMutation'
const m = defineMessages({
// Title for Offline Areas
@@ -23,67 +24,23 @@ const m = defineMessages({
deleteErrorDescription: 'There was an error deleting the style'
})
-/** @typedef {{id:string, size:number, zoomLevel:number, title:string}} OfflineArea */
-
-/** @typedef {{styleId:string, styleJson:import('mapbox-gl').Style, styleTitle:string, offlineAreas:OfflineArea[]}} BGMap */
-
/**
- * @typedef BGMapInfoProps
- * @prop {string} bgMapId
- * @prop {string} mapIDBeingViewed
+ * @typedef BackgroundMapInfoProps
+ * @prop {string} id
+ * @prop {string} idBeingViewed
+ * @prop {React.Dispatch>} setMapValue
*/
-/** @param {BGMapInfoProps} props */
-export const BGMapInfo = ({ bgMapId, mapIDBeingViewed }) => {
- const shouldLoad = React.useMemo(() => bgMapId === mapIDBeingViewed, [
- bgMapId,
- mapIDBeingViewed
+/** @param {BackgroundMapInfoProps} props */
+export const BackgroundMapInfo = ({ id, idBeingViewed, setMapValue }) => {
+ const shouldLoad = React.useMemo(() => id === idBeingViewed, [
+ id,
+ idBeingViewed
])
- /** @type {BGMap | null} */
- const initialBgMap = /** {const} */ (null)
-
- const [bgMap, setbgMap] = React.useState(initialBgMap)
-
- React.useEffect(() => {
- /**
- * @param {string} stylesId
- * @returns {Promise}
- */
- async function getMapInfo (stylesId) {
- // To do: Api Call to get map info
- return {
- styleId: bgMapId,
- styleJson: { layers: [], sources: {}, version: 1 },
- styleTitle: `Map ${bgMapId}`,
- offlineAreas: [
- {
- title: 'offline-area-1',
- size: 100,
- zoomLevel: 10,
- id: 'idMap1'
- },
- {
- title: 'offline-area-2',
- size: 200,
- zoomLevel: 20,
- id: 'idMap2'
- },
- {
- title: 'offline-area-3',
- size: 300,
- zoomLevel: 30,
- id: 'idMap3'
- }
- ]
- }
- }
-
- if (shouldLoad) {
- getMapInfo(bgMapId).then(styles => setbgMap(styles))
- }
- }, [shouldLoad, bgMapId])
+ const { data } = useMapServerQuery(`/styles/${id}`, shouldLoad)
+ // Lazy loading each one here: aka will only load when clicked
return shouldLoad ? (
{
flex: 1,
width: '100%',
height: '100%',
- padding: !bgMap ? 40 : 0
+ padding: !data ? 40 : 0
}}
>
- {!bgMap ?
) : null
@@ -102,13 +63,15 @@ export const BGMapInfo = ({ bgMapId, mapIDBeingViewed }) => {
/**
* @typedef MapInfoProps
- * @prop {BGMap} bgMap
- *
+ * @prop {import('@mapeo/map-server/dist/lib/stylejson').StyleJSON} backgroundMap
+ * @prop {string} id
+ * @prop {React.Dispatch>} setMapValue
*/
/** @param {MapInfoProps} props */
-const MapInfo = ({ bgMap }) => {
- const { offlineAreas, styleTitle } = bgMap
+const MapInfo = ({ backgroundMap, id, setMapValue }) => {
+ const { name } = backgroundMap
+ // const mutation = useMapServerMutation('delete', `/styles/${id}`)
const classes = useStyles()
@@ -123,8 +86,9 @@ const MapInfo = ({ bgMap }) => {
* @param {string} mapId
*/
function deleteMap (mapId) {
- // To do: Api Call to delete map
try {
+ // mutation.mutate(mapId)
+ // setMapValue(false)
} catch (err) {
remote.dialog.showErrorBox(
t(m.deleteErrorTitle),
@@ -137,10 +101,10 @@ const MapInfo = ({ bgMap }) => {
{/* Banner */}
- {styleTitle}
+ {name}
- deleteMap(bgMap.styleId)}>
+ deleteMap(id)}>
{t(m.deleteStyle)}
@@ -164,18 +128,6 @@ const MapInfo = ({ bgMap }) => {
{t(m.createOfflineArea)}
-
- {/* List of offline areas Card */}
-
- {offlineAreas.map(offlineArea => (
-
)
diff --git a/src/renderer/components/BackgroundMaps/MapCard.js b/src/renderer/components/BackgroundMaps/MapCard.js
index 1815e497..acd42dcb 100644
--- a/src/renderer/components/BackgroundMaps/MapCard.js
+++ b/src/renderer/components/BackgroundMaps/MapCard.js
@@ -16,9 +16,9 @@ const m = defineMessages({
/**
* @typedef MapCardProps
- * @prop {import('../Settings/BGMaps').OfflineMap} offlineMap
- * @prop {React.Dispatch
>} setMap
- * @prop {import('../Settings/BGMaps').OfflineMap['mapId'] |false } mapBeingViewed
+ * @prop {import('../Settings/BackgroundMaps').MapServerStyleInfo} offlineMap
+ * @prop {React.Dispatch>} setMap
+ * @prop {import('../Settings/BackgroundMaps').MapServerStyleInfo['id'] |false } mapBeingViewed
*/
/** @param {MapCardProps} param */
@@ -26,10 +26,10 @@ export const MapCard = ({ offlineMap, setMap, mapBeingViewed }) => {
const classes = useStyles()
const { formatMessage: t } = useIntl()
- const isBeingViewed = React.useMemo(
- () => offlineMap.mapId === mapBeingViewed,
- [offlineMap, mapBeingViewed]
- )
+ const isBeingViewed = React.useMemo(() => offlineMap.id === mapBeingViewed, [
+ offlineMap,
+ mapBeingViewed
+ ])
const Mapbox = React.useMemo(
() =>
@@ -48,7 +48,7 @@ export const MapCard = ({ offlineMap, setMap, mapBeingViewed }) => {
setMap(offlineMap.mapId)}
+ onClick={() => setMap(offlineMap.id)}
>
{
height: '100%',
width: '100%'
}}
- // We need to replace this style with a styleJSON, but for the purpose of this demo, im just using the url in order not to build a dummy styleJSON (only accepts an entire styleJSON)
- // style={offlineMap.styleJson}
style='mapbox://styles/mapbox/streets-v11'
/>
- {offlineMap.mapTitle}
+ {offlineMap.name}
- {offlineMap.size} {t(m.mb)}
-
-
- {offlineMap.offlineAreaCount} {t(m.areas)}
+ {offlineMap.bytesStored} {t(m.mb)}
diff --git a/src/renderer/components/BackgroundMaps/SidePanel.js b/src/renderer/components/BackgroundMaps/SidePanel.js
index 4b7c2d97..cbb04517 100644
--- a/src/renderer/components/BackgroundMaps/SidePanel.js
+++ b/src/renderer/components/BackgroundMaps/SidePanel.js
@@ -4,6 +4,7 @@ import ChevronLeft from '@material-ui/icons/ChevronLeft'
import { remote } from 'electron'
import * as React from 'react'
import { defineMessages, useIntl } from 'react-intl'
+import { useMapServerMutation } from '../../hooks/useMapServerMutation'
import Loader from '../Loader'
import { MapCard } from './MapCard'
@@ -23,8 +24,9 @@ const m = defineMessages({
/**
* @typedef SidePanelProps
* @prop {()=>void} openSettings
- * @prop {import('../Settings/BGMaps').OfflineMap[]|false} offlineMaps
+ * @prop {import('../Settings/BackgroundMaps').MapServerStyleInfo[]|false} offlineMaps
* @prop {string|false} mapValue
+ * @prop {boolean} isFetching
* @prop {React.Dispatch>} setMapValue
*/
@@ -33,12 +35,15 @@ export const SidePanel = ({
openSettings,
offlineMaps,
mapValue,
- setMapValue
+ setMapValue,
+ isFetching
}) => {
const { formatMessage: t } = useIntl()
const classes = useStyles()
+ const mutation = useMapServerMutation('post', `/tilesets/import`)
+
async function selectMbTileFile () {
const result = await remote.dialog.showOpenDialog({
filters: [{ name: 'MbTiles', extensions: ['mbtiles'] }],
@@ -50,8 +55,8 @@ export const SidePanel = ({
if (!result.filePaths || !result.filePaths.length) return
try {
- // const filePath = result.filePaths[0]
- // to do: Api call to import map
+ const filePath = result.filePaths[0]
+ mutation.mutate({ filePath })
} catch (err) {
onError(err)
}
@@ -82,23 +87,20 @@ export const SidePanel = ({
>
{t(m.addMap)}
- {/*
- {t(m.createOfflineMap)}
- */}
+