fix(Maps): custom pmtiles file downloads

Author: jakeaturner

admin/inertia/components/DownloadURLModal.tsx

@@ -16,14 +16,19 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
   onPreflightSuccess,
   ...modalProps
 }) => {
-  const [url, setUrl] = useState<string>(suggestedURL || '')
+  const [url, setUrl] = useState<string>('')
   const [messages, setMessages] = useState<string[]>([])
-  const [passedPreflight, setPassedPreflight] = useState<boolean>(false)
+  const [loading, setLoading] = useState<boolean>(false)
 
   async function runPreflightCheck(downloadUrl: string) {
     try {
+      setLoading(true)
       setMessages([`Running preflight check for URL: ${downloadUrl}`])
       const res = await api.downloadRemoteMapRegionPreflight(downloadUrl)
+      if (!res) {
+        throw new Error('An unknown error occurred during the preflight check.')
+      }
+
       if ('message' in res) {
         throw new Error(res.message)
       }
@@ -32,11 +37,15 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
         ...prev,
         `Preflight check passed. Filename: ${res.filename}, Size: ${(res.size / (1024 * 1024)).toFixed(2)} MB`,
       ])
-      setPassedPreflight(true)
+
+      if (onPreflightSuccess) {
+        onPreflightSuccess(downloadUrl)
+      }
     } catch (error) {
       console.error('Preflight check failed:', error)
       setMessages((prev) => [...prev, `Preflight check failed: ${error.message}`])
-      setPassedPreflight(false)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -49,6 +58,8 @@ const DownloadURLModal: React.FC<DownloadURLModalProps> = ({
       confirmIcon="ArrowDownTrayIcon"
       cancelText="Cancel"
       confirmVariant="primary"
+      confirmLoading={loading}
+      cancelLoading={loading}
       large
     >
       <div className="flex flex-col pb-4">

admin/inertia/components/MarkdocRenderer.tsx

@@ -43,8 +43,6 @@ interface MarkdocRendererProps {
 }
 
 const MarkdocRenderer: React.FC<MarkdocRendererProps> = ({ content }) => {
-  console.log('Markdoc content:', content)
-
   return <div className="tracking-wide">{Markdoc.renderers.react(content, React, { components })}</div>
 }
 

admin/inertia/components/StyledModal.tsx

@@ -8,9 +8,11 @@ export type StyledModalProps = {
   title: string
   cancelText?: string
   cancelIcon?: StyledButtonProps['icon']
+  cancelLoading?: boolean
   confirmText?: string
   confirmIcon?: StyledButtonProps['icon']
   confirmVariant?: StyledButtonProps['variant']
+  confirmLoading?: boolean
   open: boolean
   onCancel?: () => void
   onConfirm?: () => void
@@ -26,9 +28,11 @@ const StyledModal: React.FC<StyledModalProps> = ({
   onClose,
   cancelText = 'Cancel',
   cancelIcon,
+  cancelLoading = false,
   confirmText = 'Confirm',
   confirmIcon,
   confirmVariant = 'action',
+  confirmLoading = false,
   onCancel,
   onConfirm,
   icon,
@@ -77,6 +81,7 @@ const StyledModal: React.FC<StyledModalProps> = ({
                     if (onCancel) onCancel()
                   }}
                   icon={cancelIcon}
+                  loading={cancelLoading}
                 >
                   {cancelText}
                 </StyledButton>
@@ -88,6 +93,7 @@ const StyledModal: React.FC<StyledModalProps> = ({
                     if (onConfirm) onConfirm()
                   }}
                   icon={confirmIcon}
+                  loading={confirmLoading}
                 >
                   {confirmText}
                 </StyledButton>

admin/inertia/pages/settings/maps.tsx

@@ -66,21 +66,29 @@ export default function MapsManager(props: {
     }
   }
 
-  async function downloadFile(record: string) {
+  async function downloadCollection(record: CuratedCollectionWithStatus) {
     try {
-      //await api.downloadRemoteZimFile(record.download_url)
+      await api.downloadMapCollection(record.slug)
       invalidateDownloads()
+      addNotification({
+        type: 'success',
+        message: `Download for collection "${record.name}" has been queued.`,
+      })
     } catch (error) {
-      console.error('Error downloading file:', error)
+      console.error('Error downloading collection:', error)
     }
   }
 
-  async function downloadCollection(record: CuratedCollectionWithStatus) {
+  async function downloadCustomFile(url: string) {
     try {
-      await api.downloadMapCollection(record.slug)
+      await api.downloadRemoteMapRegion(url)
       invalidateDownloads()
+      addNotification({
+        type: 'success',
+        message: 'Download has been queued.',
+      })
     } catch (error) {
-      console.error('Error downloading collection:', error)
+      console.error('Error downloading custom file:', error)
     }
   }
 
@@ -120,8 +128,6 @@ export default function MapsManager(props: {
               return
             }
             downloadCollection(record)
-          } else {
-            downloadFile(record)
           }
           closeAllModals()
         }}
@@ -145,8 +151,12 @@ export default function MapsManager(props: {
     openModal(
       <DownloadURLModal
         title="Download Map File"
-        suggestedURL="https://github.com/Crosstalk-Solutions/project-nomad-maps/raw/refs/heads/master/"
+        suggestedURL="e.g. https://github.com/Crosstalk-Solutions/project-nomad-maps/raw/refs/heads/master/pmtiles/california.pmtiles"
         onCancel={() => closeAllModals()}
+        onPreflightSuccess={async (url) => {
+          await downloadCustomFile(url)
+          closeAllModals()
+        }}
       />,
       'download-map-file-modal'
     )