fix(map): Fix Bug caused by cancel collection [IOPLAT-4165]

natgeosociety · Jan 26, 2021 · 00a5376 · 00a5376
1 parent 7284f4d
commit 00a5376
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 20 deletions.
diff --git a/packages/earth-map/src/components/collection/collection-new/CollectionNew.tsx b/packages/earth-map/src/components/collection/collection-new/CollectionNew.tsx
@@ -20,11 +20,12 @@
 import React, { useState } from 'react';
 import { useForm } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { back, push, replace } from 'redux-first-router';
+import { replace } from 'redux-first-router';
+import Link from 'redux-first-router-link';
 
 import { Card, Input, setupErrors } from '@marapp/earth-shared';
 
-import { IRouter } from '../../../modules/router/model';
+import { EarthRoutes, IRouter } from '../../../modules/router/model';
 import PlacesService from '../../../services/PlacesService';
 
 interface IProps {
@@ -34,6 +35,7 @@ interface IProps {
 
 const CollectionNew = (props: IProps) => {
   const { privateGroups, router } = props;
+  const { prev } = router;
   const { t } = useTranslation();
   const canCreateCollection = !!privateGroups.length;
   const [saveError, setSaveError] = useState(null);
@@ -57,19 +59,6 @@ const CollectionNew = (props: IProps) => {
     }
   };
 
-  const onCancel = () => {
-    // When navigating back to earth view keep track of the current coordinates and active layers, if available
-    const canGoBack = !!router.prev.pathname;
-
-    if (canGoBack) {
-      back();
-    }
-    // if the user just hit the /collection/new from the start
-    else {
-      push('/earth');
-    }
-  };
-
   return (
     <form
       className="marapp-qa-collection-new ng-form ng-form-dark"
@@ -137,13 +126,15 @@ const CollectionNew = (props: IProps) => {
         >
           {t('Create Collection')}
         </button>
-        <button
-          onClick={onCancel}
-          type="button"
+        <Link
           className="marapp-qa-cancel-collection ng-button ng-button-secondary"
+          to={{
+            type: EarthRoutes.EARTH,
+            query: prev.query,
+          }}
         >
           {t('Cancel')}
-        </button>
+        </Link>
       </Card>
     </form>
   );

diff --git a/packages/earth-map/src/components/url/component.tsx b/packages/earth-map/src/components/url/component.tsx
@@ -67,6 +67,10 @@ interface IUrl {
   paramsFromUrl: {};
 }
 
+/**
+ * Dispatches actions based on with payload created from query params
+ * TODO: Could be removed entirely if we find another way to apply side effects based on query params
+ */
 class UrlComponent extends PureComponent<IUrl, any> {
   public componentDidMount() {
     const { urlProps, paramsFromUrl } = this.props;

diff --git a/packages/earth-map/src/modules/router/model.ts b/packages/earth-map/src/modules/router/model.ts
@@ -2,6 +2,7 @@ export interface IRouter {
   type: EarthRoutes;
   payload: any;
   prev: any;
+  query: any;
 }
 
 export enum EarthRoutes {

diff --git a/packages/earth-map/src/routes.tsx b/packages/earth-map/src/routes.tsx
@@ -142,7 +142,9 @@ export const CONFIG = {
   basename: MAP_BASE_URL,
   location: 'router',
   querySerializer: {
-    stringify: qs.stringify,
+    stringify: (params) => {
+      return qs.stringify(params, { arrayFormat: 'comma' });
+    },
     parse: (url) => {
       return qs.parse(url, {
         arrayFormat: 'comma',