fixed logic to load maps

Signed-off-by: Giuseppe Macri <[email protected]>

examples/demo-app/src/actions.js

@@ -97,11 +97,13 @@ export function onExportFileSuccess({response = {}, provider, options}) {
   };
 }
 
-export function onLoadCloudMapSuccess({response, provider, loadParams}) {
+export function onLoadCloudMapSuccess({provider, loadParams}) {
   return dispatch => {
-    if (provider.getMapUrl) {
-      const mapUrl = provider.getMapUrl(false, loadParams);
-      dispatch(push(mapUrl));
+    const mapUrl = provider?.getMapUrl(loadParams);
+    debugger;
+    if (mapUrl) {
+      const url = `demo/map/${provider.name}?path=${mapUrl}`;
+      dispatch(push(url));
     }
   };
 }

examples/demo-app/src/cloud-providers/carto/carto-provider.js

@@ -1,3 +1,23 @@
+// Copyright (c) 2023 Uber Technologies, Inc.
+//
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+//
+// The above copyright notice and this permission notice shall be included in
+// all copies or substantial portions of the Software.
+//
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+// THE SOFTWARE.
+
 import {OAuthApp} from '@carto/toolkit';
 import Console from 'global/console';
 import CartoIcon from './carto-icon';

examples/demo-app/src/cloud-providers/dropbox/dropbox-provider.js

@@ -199,39 +199,31 @@ export default class DropboxProvider extends Provider {
       return await this._shareFile(metadata);
     }
 
-    // save private map save map url
-    this._loadParam = {path: metadata.path_lower};
-
-    return this._loadParam;
+    return {id: metadata.id, path: metadata.path_lower};
   }
 
   /**
    * download the map content
    * @param loadParams
    */
   async downloadMap(loadParams) {
-    const token = this.getAccessToken();
-    if (!token) {
-      this.login(() => this.downloadMap(loadParams));
-    }
-    const result = await this._dropbox.filesDownload(loadParams);
+    const {path} = loadParams;
+    const result = await this._dropbox.filesDownload({path});
     const json = await this._readFile(result.fileBlob);
 
     const response = {
       map: json,
       format: KEPLER_FORMAT
     };
 
-    this._loadParam = loadParams;
     return Promise.resolve(response);
   }
 
   getUserName() {
     // load user from
     if (window.localStorage) {
       const jsonString = window.localStorage.getItem('dropbox');
-      const user = jsonString && JSON.parse(jsonString).user;
-      return user;
+      return jsonString && JSON.parse(jsonString).user;
     }
     return null;
   }
@@ -269,14 +261,10 @@ export default class DropboxProvider extends Provider {
 
   /**
    * Get the map url of current map, this url can only be accessed by current logged in user
-   * @param {boolean} fullUrl
    */
-  getMapUrl(fullURL = true) {
-    const {path} = this._loadParam;
-    const mapLink = `demo/map/dropbox?path=${path}`;
-    return fullURL
-      ? `${window.location.protocol}//${window.location.host}/${mapLink}`
-      : `/${mapLink}`;
+  getMapUrl(loadParams) {
+    const {path} = loadParams;
+    return path;
   }
 
   getManagementUrl() {
@@ -475,6 +463,7 @@ export default class DropboxProvider extends Provider {
           id,
           updatedAt: new Date(client_modified).getTime(),
           loadParams: {
+            id,
             path: path_lower
           }
         };

examples/demo-app/src/cloud-providers/foursquare/foursquare-provider.js

@@ -2,7 +2,7 @@ import FSQIcon from './foursquare-icon';
 import {Provider, KEPLER_FORMAT} from '@kepler.gl/cloud-providers';
 import {Auth0Client} from '@auth0/auth0-spa-js';
 
-const NAME = 'Foursquare';
+const NAME = 'foursquare';
 const DISPLAY_NAME = 'Foursquare';
 const APP_NAME = 'Kepler.gl';
 
@@ -18,15 +18,16 @@ const FOURSQUARE_KEPLER_GL_IMPORT_SOURCE = 'kepler.gl-raw';
  * @param model Foursquare Map
  * @return {MapItem} Map
  */
-function convertFSQModelToMapItem(model) {
+function convertFSQModelToMapItem(model, baseApi) {
   return {
     id: model.id,
     title: model.name,
     thumbnail: model.previewReadPath,
     updatedAt: model.updatedAt,
     description: model.description,
     loadParams: {
-      mapId: model.id
+      id: model.id,
+      path: `${baseApi}/${model.id}`
     }
   };
 }
@@ -131,17 +132,17 @@ export default class FoursquareProvider extends Provider {
       }
     );
     const data = await response.json();
-    return data.items.map(convertFSQModelToMapItem);
+    return data.items.map(map => convertFSQModelToMapItem(map, `${this.apiURL}/v1/maps`));
   }
 
   async downloadMap(loadParams) {
-    const {mapId} = loadParams;
-    if (!mapId) {
+    const {id} = loadParams;
+    if (!id) {
       return Promise.reject('No Map is was provider as part of loadParams');
     }
     const headers = await this.getHeaders();
 
-    const response = await fetch(`${this.apiURL}/v1/maps/${mapId}`, {
+    const response = await fetch(`${this.apiURL}/v1/maps/${id}`, {
       method: 'GET',
       headers
     });
@@ -154,6 +155,11 @@ export default class FoursquareProvider extends Provider {
     });
   }
 
+  getMapUrl(loadParams) {
+    const {id} = loadParams;
+    return `${this.apiURL}/v1/maps/${id}`;
+  }
+
   getManagementUrl() {
     return this._folderLink;
   }

src/cloud-providers/src/provider.ts

@@ -22,6 +22,11 @@ import Upload from './upload';
 import {MapData, ExportFileOptions, Millisecond, SavedMap} from '@kepler.gl/types';
 import {ComponentType} from 'react';
 
+export type MapItemLoadParams = {
+  id: string;
+  path: string;
+};
+
 export type MapListItem = {
   id: string;
   title: string;
@@ -125,11 +130,10 @@ export default class Provider {
 
   /**
    * This method is called by kepler.gl demo app to pushes a new location to history, becoming the current location.
-   * @param fullURL - Whether to return the full url with domain, or just the location
    * @returns mapUrl
    * @public
    */
-  getMapUrl(fullURL: boolean = true): string {
+  getMapUrl(loadParams: MapItemLoadParams): string {
     return '';
   }