feat(riot-v5): handle page query param & refactor router & remove old…

… code

src/components/dialogs/add-registry-url.riot

@@ -32,8 +32,7 @@
   </material-popup>
   <script>
     import {
-      getRegistryServers,
-      updateHistory
+      getRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
 
@@ -58,7 +57,7 @@
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()
-        setTimeout(() => updateHistory(url), 100);
+        setTimeout(() => router.updateUrlQueryParam(url), 100);
       }
     }
   </script>

src/components/dialogs/change-registry-url.riot

@@ -33,8 +33,7 @@
   </material-popup>
   <script>
     import {
-      getRegistryServers,
-      updateHistory
+      getRegistryServers
     } from '../../scripts/utils';
     import router from '../../scripts/router';
     export default {
@@ -52,7 +51,7 @@
         router.home()
         this.props.onServerChange(url);
         this.props.onClose()
-        setTimeout(() => updateHistory(url), 100);
+        setTimeout(() => router.updateUrlQueryParam(url), 100);
       },
       getRegistryServers
     }

src/components/dialogs/remove-registry-url.riot

@@ -38,10 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
   </material-popup>
   <script>
     import {
-      getRegistryServers,
-      updateHistory
+      getRegistryServers
     } from '../../scripts/utils';
-    import router from '../../scripts/router';
     export default {
       remove(event) {
         const url = event.currentTarget.attributes.url && event.currentTarget.attributes.url.value;

src/components/tag-list/tag-list.riot

@@ -38,7 +38,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 
   <tag-table if="{ state.loadend }" tags="{state.tags}" asc="{state.asc}" page="{ state.page }"
     show-content-digest="{props.showContentDigest}" is-image-remove-activated="{props.isImageRemoveActivated}"
-    onReverseOrder="{ onReverseOrder }" registry-url="{ props.registryUrl }" pull-url="{ props.pullUrl }" on-notify="{ props.onNotify }"></tag-table>
+    onReverseOrder="{ onReverseOrder }" registry-url="{ props.registryUrl }" pull-url="{ props.pullUrl }"
+    on-notify="{ props.onNotify }"></tag-table>
 
   <pagination pages="{ getPageLabels(state.page, getNumPages(state.tags)) }" onPageUpdate="{onPageUpdate}"></pagination>
 
@@ -68,7 +69,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           tags: [],
           loadend: false,
           asc: true,
-          page: 1
+          page: router.getPageQueryParam() || 1
         }
       },
       onMounted(props, state) {
@@ -117,6 +118,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         this.update({
           page: page
         });
+        router.updatePageQueryParam(page);
       },
 
       onResize() {

src/scripts/router.js

@@ -15,28 +15,79 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 import { router, getCurrentRoute } from '@riotjs/route';
+import { encodeURI } from './utils';
 
-function baseUrl() {
-  return getCurrentRoute().replace(/#!(.*)/, '');
+function getQueryParams() {
+  const queries = {};
+  window.location.search
+    .slice(1)
+    .split('&')
+    .forEach((qs) => {
+      const splitIndex = qs.indexOf('=');
+      queries[qs.slice(0, splitIndex)] = splitIndex < 0 ? '' : qs.slice(splitIndex + 1);
+    });
+  return queries;
+}
+
+function updateQueryParams(qs) {
+  const queryParams = getQueryParams();
+  for (let key in qs) {
+    if (qs[key] === null) {
+      delete queryParams[key];
+    } else {
+      queryParams[key] = qs[key];
+    }
+  }
+  return queryParams;
+}
+
+function toSearchString(queries) {
+  let search = [];
+  for (let key in queries) {
+    if (queries[key] !== undefined) {
+      search.push(`${key}=${queries[key]}`);
+    }
+  }
+  return search.length === 0 ? '' : `?${search.join('&')}`;
+}
+
+function baseUrl(qs) {
+  const location = window.location;
+  const queryParams = updateQueryParams(qs);
+  return location.origin + location.pathname + toSearchString(queryParams);
 }
 
 export default {
   home() {
-    router.push(baseUrl());
+    router.push(baseUrl({ page: null }));
   },
   taglist(image) {
-    router.push(`${baseUrl()}#!/taglist/${image}`);
+    router.push(`${baseUrl({ page: null })}#!/taglist/${image}`);
   },
   getTagListImage() {
     return getCurrentRoute().replace(/^.*(#!)?\/?taglist\//, '');
   },
   history(image, tag) {
-    router.push(`${baseUrl()}#!/taghistory/image/${image}/tag/${tag}`);
+    router.push(`${baseUrl({ page: null })}#!/taghistory/image/${image}/tag/${tag}`);
   },
   getTagHistoryImage() {
     return getCurrentRoute().replace(/^.*(#!)?\/?taghistory\/image\/(.*)\/tag\/(.*)\/?$/, '$2');
   },
   getTagHistoryTag() {
     return getCurrentRoute().replace(/^.*(#!)?\/?taghistory\/image\/(.*)\/tag\/(.*)\/?$/, '$3');
   },
+  updateQueryString(qs) {
+    const search = toSearchString(updateQueryParams(qs));
+    history.pushState(null, '', search + window.location.hash);
+  },
+  updateUrlQueryParam(url) {
+    this.updateQueryString({ url: encodeURI(url) });
+  },
+  updatePageQueryParam(page) {
+    this.updateQueryString({ page });
+  },
+  getPageQueryParam() {
+    const queries = getQueryParams();
+    return queries['page'];
+  },
 };

src/scripts/utils.js

@@ -124,16 +124,6 @@ export function getPageLabels(page, nPages) {
   return pageLabels;
 }
 
-export function updateQueryString(qs) {
-  var search = '';
-  for (var key in qs) {
-    if (qs[key] !== undefined) {
-      search += (search.length > 0 ? '&' : '?') + key + '=' + qs[key];
-    }
-  }
-  history.pushState(null, '', search + window.location.hash);
-}
-
 export function stripHttps(url) {
   if (!url) {
     return '';
@@ -171,10 +161,15 @@ export function getRegistryServers(i) {
 }
 
 export function encodeURI(url) {
-  if (!url) { return; }
+  if (!url) {
+    return;
+  }
   return url.indexOf('&') < 0 ? window.encodeURIComponent(url) : btoa(url);
-};
+}
 
-export function updateHistory(url) {
-  updateQueryString({ url: encodeURI(url) })
+export function decodeURI(url) {
+  if (!url) {
+    return;
+  }
+  return url.startsWith('http') ? window.decodeURIComponent(url) : atob(url);
 }