Fix/offline maps

.github/workflows/eas-cloud.yml

@@ -1,11 +1,11 @@
-# Native production pipeline 
+# Native production pipeline
 # Builds on EAS Cloud with auto submission
 name: EAS Build & Submit
 
 on:
-  workflow_dispatch: 
+  workflow_dispatch:
   push:
-    branches: 
+    branches:
       - main
     paths:
       - 'packages/app/**'
@@ -34,7 +34,6 @@ jobs:
         shell: bash
         working-directory: ${{ github.workspace }}/apps/expo
         run: echo "$(jq '.submit.production.ios.ascAppId = "${{ secrets.ASC_APP_ID }}"' eas.json)" > eas.json
-
       - name: Build on EAS
         working-directory: ./apps/expo
-        run: eas build --platform all --profile production --non-interactive --no-wait --auto-submit
+        run: eas build --platform all --profile production --non-interactive --no-wait --auto-submit

packages/app/hooks/navigation/useNavigationList.ts

@@ -52,17 +52,17 @@ export const useNavigationList = () => {
       text: 'Packs',
       iconSource: MaterialIcons,
     },
-    // ...((Platform.OS != 'web'
-    //   ? [
-    //       {
-    //         type: NavigationItemTypeEnum.LINK,
-    //         href: '/maps',
-    //         icon: 'map',
-    //         text: 'Downloaded Maps',
-    //         iconSource: Entypo,
-    //       },
-    //     ]
-    //   : []) as NavigationItem[]),
+    ...((Platform.OS != 'web'
+      ? [
+          {
+            type: NavigationItemTypeEnum.LINK,
+            href: '/maps',
+            icon: 'map',
+            text: 'Downloaded Maps',
+            iconSource: Entypo,
+          },
+        ]
+      : []) as NavigationItem[]),
     {
       type: NavigationItemTypeEnum.LINK,
       href: '/products',

packages/app/modules/map/components/MapPreviewCard/index.tsx

@@ -1,30 +1,72 @@
-import React, { type FC } from 'react';
+import React, { useEffect, useState, type FC } from 'react';
 import { StatusLabel } from './StatusLabel';
-import { View, RText, Card, YStack, Details } from '@packrat/ui';
-import useTheme from 'app/hooks/useTheme';
+import { View, RText, Card } from '@packrat/ui';
 import { TouchableOpacity } from 'react-native';
 import { MapImage } from './MapImage';
+import { Entypo } from '@expo/vector-icons';
+import { useDownloadMapProgress } from 'app/modules/map/hooks/useDownloadMapProgress';
+import { type OfflineMap } from 'app/modules/map/screens/OfflineMapsScreen';
 
 interface MapPreviewCardProps {
   id: string;
-  title: string;
-  isDownloaded: boolean;
+  item: OfflineMap;
   onShowMapClick: (id: string) => void;
 }
 
 export const MapPreviewCard: FC<MapPreviewCardProps> = ({
   id,
   onShowMapClick,
-  title,
-  isDownloaded,
+  item,
 }) => {
-  const { enableDarkMode, enableLightMode, isDark, isLight, currentTheme } =
-    useTheme();
+  const [isDownloaded, setIsDownloaded] = useState(item.downloaded);
+  const { downloadMap, isDownloading, progress } = useDownloadMapProgress(() =>
+    setIsDownloaded(true),
+  );
+
+  const handleDownloadMap = () => {
+    downloadMap({
+      name: item.name,
+      bounds: item.bounds,
+      styleURL: item.styleURL,
+      minZoom: item.minZoom,
+      maxZoom: item.maxZoom,
+      metadata: {
+        id: item.id,
+        userId: item.userId,
+      },
+    });
+  };
+
+  useEffect(() => {
+    setIsDownloaded(item.downloaded);
+  }, [item.downloaded]);
 
   return (
     <Card
-      title={title}
-      subtitle={isDownloaded ? <StatusLabel /> : null}
+      title={item.name}
+      subtitle={
+        isDownloaded ? (
+          <StatusLabel />
+        ) : (
+          <TouchableOpacity onPress={handleDownloadMap}>
+            {isDownloading ? (
+              <RText style={{ color: '#000' }}>{`${progress}%`}</RText>
+            ) : (
+              <View
+                style={{
+                  flexDirection: 'row',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  gap: 8,
+                }}
+              >
+                <Entypo name={'download'} size={16} color="grey" />
+                <RText>Download</RText>
+              </View>
+            )}
+          </TouchableOpacity>
+        )
+      }
       link=""
       image={<MapImage />}
       isFullWidth

packages/app/modules/map/constants.ts

@@ -0,0 +1 @@
+export const OFFLINE_MAP_STYLE_URL = 'mapbox://styles/mapbox/outdoors-v11';

packages/app/modules/map/hooks/useDownloadMap.tsx

@@ -1,29 +1,49 @@
 import { useAuthUser } from 'app/modules/auth';
 import { queryTrpc } from 'app/trpc';
+import { OFFLINE_MAP_STYLE_URL } from '../constants';
+
+export interface UserRemoteMap {
+  name: string;
+  styleURL: string;
+  bounds: any;
+  minZoom: number;
+  maxZoom: number;
+  owner_id: string;
+  metadata: {
+    userId: string;
+    id?: string;
+    shape?: string;
+  };
+}
 
 export const useDownloadMap = (onDownload) => {
   const { mutateAsync, isLoading } = queryTrpc.saveOfflineMap.useMutation();
   const authUser = useAuthUser();
 
   const handleDownloadMap = ({ mapName, bounds, shape }) => {
-    const downloadOptions = {
+    const downloadOptions: UserRemoteMap = {
       name: mapName,
-      styleURL: 'mapbox://styles/mapbox/outdoors-v11',
+      styleURL: OFFLINE_MAP_STYLE_URL,
       bounds,
       minZoom: 0,
       maxZoom: 8,
       owner_id: authUser.id,
       metadata: {
+        userId: authUser?.id,
         shape: JSON.stringify(shape),
       },
     };
 
-    alert(JSON.stringify(downloadOptions));
-
     // Save the map under user profile.
     mutateAsync(downloadOptions)
-      .then(() => {
-        onDownload(downloadOptions);
+      .then((data) => {
+        onDownload({
+          ...downloadOptions,
+          metadata: {
+            ...data.metadata,
+            id: data.id,
+          },
+        });
       })
       .catch((e) => {});
   };

packages/app/modules/map/hooks/useDownloadMapProgress.tsx

@@ -1,8 +1,9 @@
 import { offlineManager } from '@rnmapbox/maps';
+import { type OfflineCreatePackOptionsArgs } from '@rnmapbox/maps/lib/typescript/src/modules/offline/OfflineCreatePackOptions';
 import { useState } from 'react';
 import { Alert } from 'react-native';
 
-export const useDownloadMapProgress = () => {
+export const useDownloadMapProgress = (onDownloadEnd?: () => void) => {
   const [progress, setProgress] = useState(0);
   const [downloading, setDownloading] = useState(false);
 
@@ -11,6 +12,7 @@ export const useDownloadMapProgress = () => {
     setDownloading(true);
     if (offlineRegionStatus.percentage === 100) {
       Alert.alert('Map download successfully!');
+      onDownloadEnd?.();
       setDownloading(false);
     }
   };
@@ -19,7 +21,9 @@ export const useDownloadMapProgress = () => {
     Alert.alert(error.message);
   };
 
-  const downloadMap = async (optionsForDownload: any) => {
+  const downloadMap = async (
+    optionsForDownload: OfflineCreatePackOptionsArgs,
+  ) => {
     offlineManager
       .createPack(optionsForDownload, onDownloadProgress, errorListener)
       .catch((error: any) => {

packages/app/modules/map/screens/OfflineMapsScreen/OfflineMap.tsx

@@ -10,8 +10,9 @@ interface OfflineMapProps {
 export const OfflineMapComponent: FC<OfflineMapProps> = ({ map, onClose }) => {
   return (
     <Map
-      shapeURI={!map.downloaded ? getMapGEOURI(map.id) : undefined}
+      shapeURI={map.downloaded ? getMapGEOURI(map.id) : undefined}
       offlineMapName={map.name}
+      isFullScreenModeByDefault
       shouldEnableDownload={!map.downloaded}
       onExitFullScreen={onClose}
       initialBounds={map.bounds}