chore: add map and list styles

src/renderer/components/BackgroundMaps/BackgroundMapInfo.js

@@ -28,11 +28,17 @@ const m = defineMessages({
  * @typedef BackgroundMapInfoProps
  * @prop {string} id
  * @prop {string} idBeingViewed
- * @prop {React.Dispatch<React.SetStateAction<string | false>>} setMapValue
+ * @prop {string} url
+ * @prop {()=>void} unsetMapValue
  */
 
 /** @param {BackgroundMapInfoProps} props */
-export const BackgroundMapInfo = ({ id, idBeingViewed, setMapValue }) => {
+export const BackgroundMapInfo = ({
+  id,
+  idBeingViewed,
+  unsetMapValue,
+  url
+}) => {
   const shouldLoad = React.useMemo(() => id === idBeingViewed, [
     id,
     idBeingViewed
@@ -54,7 +60,12 @@ export const BackgroundMapInfo = ({ id, idBeingViewed, setMapValue }) => {
         {!data ? (
           <Loading />
         ) : (
-          <MapInfo backgroundMap={data} id={id} setMapValue={setMapValue} />
+          <MapInfo
+            backgroundMap={data}
+            id={id}
+            unsetMapValue={unsetMapValue}
+            url={url}
+          />
         )}
       </Paper>
     </Fade>
@@ -65,13 +76,13 @@ export const BackgroundMapInfo = ({ id, idBeingViewed, setMapValue }) => {
  * @typedef MapInfoProps
  * @prop {import('@mapeo/map-server/dist/lib/stylejson').StyleJSON} backgroundMap
  * @prop {string} id
- * @prop {React.Dispatch<React.SetStateAction<string | false>>} setMapValue
+ * @prop {()=>void} unsetMapValue
+ * @prop {string} url
  */
 
 /** @param {MapInfoProps} props */
-const MapInfo = ({ backgroundMap, id, setMapValue }) => {
+const MapInfo = ({ backgroundMap, id, unsetMapValue, url }) => {
   const { name } = backgroundMap
-  const mutation = useMapServerMutation('delete', `/styles/${id}`)
 
   const classes = useStyles()
 
@@ -85,16 +96,10 @@ const MapInfo = ({ backgroundMap, id, setMapValue }) => {
    *
    * @param {string} mapId
    */
+
+  // To Do, useMapServerMutation.mutate()
   function deleteMap (mapId) {
-    try {
-      // mutation.mutate(mapId)
-      // setMapValue(false)
-    } catch (err) {
-      remote.dialog.showErrorBox(
-        t(m.deleteErrorTitle),
-        t(m.deleteErrorDescription) + ': ' + err
-      )
-    }
+    return
   }
 
   return (
@@ -114,10 +119,7 @@ const MapInfo = ({ backgroundMap, id, setMapValue }) => {
       </Paper>
 
       {/* Map */}
-      <MapBox
-        style={'mapbox://styles/mapbox/streets-v11'}
-        containerStyle={{ height: '40%', width: '100%' }}
-      />
+      <MapBox style={url} containerStyle={{ height: '40%', width: '100%' }} />
 
       {/* Text under map: */}
       <div style={{ padding: 40 }}>

src/renderer/components/BackgroundMaps/MapCard.js

@@ -60,7 +60,7 @@ export const MapCard = ({ offlineMap, setMap, mapBeingViewed }) => {
               height: '100%',
               width: '100%'
             }}
-            style='mapbox://styles/mapbox/streets-v11'
+            style={offlineMap.url}
           />
         </div>
         <div className={classes.text}>

src/renderer/components/BackgroundMaps/SidePanel.js

@@ -5,6 +5,7 @@ import { remote } from 'electron'
 import * as React from 'react'
 import { defineMessages, useIntl } from 'react-intl'
 import { useMapServerMutation } from '../../hooks/useMapServerMutation'
+import { useMapServerQuery } from '../../hooks/useMapServerQuery'
 import Loader from '../Loader'
 import { MapCard } from './MapCard'
 
@@ -24,28 +25,18 @@ const m = defineMessages({
 /**
  * @typedef SidePanelProps
  * @prop {()=>void} openSettings
- * @prop {import('../Settings/BackgroundMaps').MapServerStyleInfo[]|false} offlineMaps
  * @prop {string|false} mapValue
- * @prop {boolean} isFetching
  * @prop {React.Dispatch<React.SetStateAction<string | false>>} setMapValue
- * @prop {unknown} error
  */
 
 /** @param {SidePanelProps} param */
-export const SidePanel = ({
-  openSettings,
-  offlineMaps,
-  mapValue,
-  setMapValue,
-  isFetching,
-  error
-}) => {
+export const SidePanel = ({ openSettings, mapValue, setMapValue }) => {
   const { formatMessage: t } = useIntl()
 
-  if (error) console.log(error)
-
   const classes = useStyles()
 
+  const { data, isLoading } = useMapServerQuery('/styles', true)
+
   const mutation = useMapServerMutation('post', `/tilesets/import`)
 
   async function selectMbTileFile () {
@@ -93,10 +84,10 @@ export const SidePanel = ({
         </Button>
       </div>
 
-      {isFetching ? (
+      {isLoading ? (
         <Loader />
-      ) : offlineMaps ? (
-        offlineMaps.map(offlineMap => (
+      ) : data ? (
+        data.map(offlineMap => (
           <MapCard
             setMap={setMapValue}
             key={offlineMap.id}

src/renderer/components/Settings/BackgroundMaps.js

@@ -23,25 +23,23 @@ const m = defineMessages({
 export const BackgroundMaps = ({ openSettings }) => {
   const { formatMessage: t } = useIntl()
 
-  /** @type {MapServerStyleInfo[]|false} */
-  const initialMapState = /** {const} */ (false)
-
   /** @type {MapServerStyleInfo['id']|false} */
   const initialMapId = /** {const} */ (false)
 
   const [mapValue, setMapValue] = React.useState(initialMapId)
 
-  const { data, isFetching, error } = useMapServerQuery('/styles')
+  const { data } = useMapServerQuery('/styles')
+
+  function unsetMapValue () {
+    setMapValue(false)
+  }
 
   return (
     <React.Fragment>
       <SidePanel
         mapValue={mapValue}
-        offlineMaps={data || false}
         openSettings={openSettings}
         setMapValue={setMapValue}
-        isFetching={isFetching}
-        error={error}
       />
 
       {!mapValue || !data ? (
@@ -66,7 +64,8 @@ export const BackgroundMaps = ({ openSettings }) => {
               key={offlineMap.id}
               idBeingViewed={mapValue}
               id={offlineMap.id}
-              setMapValue={setMapValue}
+              unsetMapValue={unsetMapValue}
+              url={offlineMap.url}
             />
           ))}
         </React.Fragment>

src/renderer/hooks/useMapServerMutation.js

@@ -18,9 +18,10 @@ export function useMapServerMutation (mutationType, resourcePath) {
   return useMutation({
     mutationFn: bodyFromMutation =>
       kyFunction(MAP_SERVER_URL + resourcePath, bodyFromMutation),
-    onSuccess: () =>
+    onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: [`/${resourcePath.split('/')[1]}`]
       })
+    }
   })
 }

src/renderer/hooks/useMapServerQuery.js

@@ -9,7 +9,6 @@ const MAP_SERVER_URL = 'http://127.0.0.1:' + window.mapServerPort
 export function useMapServerQuery (resourcePath, enabled) {
   return useQuery({
     queryKey: [resourcePath],
-    queryFn: () => ky.get(MAP_SERVER_URL + resourcePath).json(),
-    enabled
+    queryFn: () => ky.get(MAP_SERVER_URL + resourcePath).json()
   })
 }