Append current search url when select mini app url to open (#36)

Author: MykolaGolubyev

package-lock.json

@@ -23,8 +23,7 @@
   ],
   "dependencies": {
     "react": "16.8.5",
-    "react-dom": "16.8.5",
-    "url-search-params-polyfill": "^5.1.0"
+    "react-dom": "16.8.5"
   },
   "scripts": {
     "start": "react-scripts-ts start",

package.json

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { currentUrlMatchesRegexp } from './urlUtils';
+import { appendUrlSearch, currentUrlMatchesRegexp } from './urlUtils';
 
 export interface Props {
     component: React.ComponentType;
@@ -16,11 +16,19 @@ export function MiniAppUrlsSelection({component: Component, urlRegexp, urlsByLab
 
     return (
         <div>
-            {Object.keys(urlsByLabel).map(label => (
-                <div>
-                    <a href={urlsByLabel[label]}>{label}</a>
-                </div>
-            ))}
+            {Object.keys(urlsByLabel).map(label => {
+                const url = urlsByLabel[label];
+                return (
+                    <div key={label}>
+                        <a href={url} onClick={(e) => selectUrl(e, url)}>{label}</a>
+                    </div>
+                );
+            })}
         </div>
     );
+
+    function selectUrl(e: React.MouseEvent<HTMLElement>, url: string) {
+        e.preventDefault();
+        document.location.href = appendUrlSearch(url, document.location.search);
+    }
 }

src/components/miniapp/MiniAppUrlsSelection.tsx

@@ -0,0 +1,8 @@
+import { appendUrlSearch } from './urlUtils';
+
+describe('url utils', () => {
+    it('append url search', () => {
+       expect(appendUrlSearch('/just/path', '?a=2&b=3')).toEqual('/just/path?a=2&b=3');
+       expect(appendUrlSearch('/just/path?c=3', '?a=2')).toEqual('/just/path?c=3&a=2');
+    });
+});

src/components/miniapp/urlUtils.test.ts

@@ -4,4 +4,9 @@ export function currentUrl() {
 
 export function currentUrlMatchesRegexp(urlRegexp: RegExp) {
     return urlRegexp.test(currentUrl());
+}
+
+export function appendUrlSearch(originalUrl: string, search: string) {
+    const hasSearch = originalUrl.indexOf('?') !== -1;
+    return originalUrl + (hasSearch ? '&' : '?') + search.replace('?', '');
 }

src/components/miniapp/urlUtils.ts

@@ -1,5 +1,3 @@
-import 'url-search-params-polyfill';
-
 import { ComponentViewerState } from './ComponentViewerState';
 import { Registry, Registries } from '../';
 import { DemoEntryAndRegistry } from '../registry/DemoEntryAndRegistry';