Navigation refactoring, handling extension page params (#1651)

* decentralizing page url-params management -- PoC / tsc 4.1 random fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fixes, tweak example-extension for demo

Signed-off-by: Roman <ixrock@gmail.com>

* lint fixes, revert tests

Signed-off-by: Roman <ixrock@gmail.com>

* removed occasional changes related to typescript 4.1

Signed-off-by: Roman <ixrock@gmail.com>

* updated example with 2 menu-items targeting same page with different params

Signed-off-by: Roman <ixrock@gmail.com>

* fix: merge page url chunks with native URL()-api, simplified default page-params registration

Signed-off-by: Roman <ixrock@gmail.com>

* fix: make lint happy

Signed-off-by: Roman <ixrock@gmail.com>

* fix: unit-tests

Signed-off-by: Roman <ixrock@gmail.com>

* renaming by jim's request: UrlParam => PageParam (type), createUrlParam => createPageParam (helper)

Signed-off-by: Roman <ixrock@gmail.com>

* fix: reverting NamespaceStore public-api breaking changes

Signed-off-by: Roman <ixrock@gmail.com>

* lint fix

Signed-off-by: Roman <ixrock@gmail.com>

* fine-tuning

Signed-off-by: Roman <ixrock@gmail.com>

* yes, lint always unhappy

Signed-off-by: Roman <ixrock@gmail.com>

* fix build

Signed-off-by: Roman <ixrock@gmail.com>

* small fixes

Signed-off-by: Roman <ixrock@gmail.com>

* fix merge-conflicts

Signed-off-by: Roman <ixrock@gmail.com>

* removed `isSystem` page-param's init field exposed to extensions-api

Signed-off-by: Roman <ixrock@gmail.com>

src/renderer/components/table/table.tsx

@@ -1,19 +1,17 @@
 import "./table.scss";
 
 import React from "react";
+import { orderBy } from "lodash";
 import { observer } from "mobx-react";
-import { computed, observable } from "mobx";
+import { observable } from "mobx";
 import { autobind, cssNames, noop } from "../../utils";
 import { TableRow, TableRowElem, TableRowProps } from "./table-row";
 import { TableHead, TableHeadElem, TableHeadProps } from "./table-head";
 import { TableCellElem } from "./table-cell";
 import { VirtualList } from "../virtual-list";
-import { navigation, setQueryParams } from "../../navigation";
-import orderBy from "lodash/orderBy";
+import { createPageParam } from "../../navigation";
 import { ItemObject } from "../../item.store";
 
-// todo: refactor + decouple search from location
-
 export type TableSortBy = string;
 export type TableOrderBy = "asc" | "desc" | string;
 export type TableSortParams = { sortBy: TableSortBy; orderBy: TableOrderBy };
@@ -43,6 +41,16 @@ export interface TableProps extends React.DOMAttributes<HTMLDivElement> {
   getTableRow?: (uid: string) => React.ReactElement<TableRowProps>;
 }
 
+export const sortByUrlParam = createPageParam({
+  name: "sort",
+  isSystem: true,
+});
+
+export const orderByUrlParam = createPageParam({
+  name: "order",
+  isSystem: true,
+});
+
 @observer
 export class Table extends React.Component<TableProps> {
   static defaultProps: TableProps = {
@@ -53,18 +61,13 @@ export class Table extends React.Component<TableProps> {
     sortSyncWithUrl: true,
   };
 
-  @observable sortParamsLocal = this.props.sortByDefault;
-
-  @computed get sortParams(): Partial<TableSortParams> {
-    if (this.props.sortSyncWithUrl) {
-      const sortBy = navigation.searchParams.get("sortBy");
-      const orderBy = navigation.searchParams.get("orderBy");
-
-      return { sortBy, orderBy };
-    }
-
-    return this.sortParamsLocal || {};
-  }
+  @observable sortParams: Partial<TableSortParams> = Object.assign(
+    this.props.sortSyncWithUrl ? {
+      sortBy: sortByUrlParam.get(),
+      orderBy: orderByUrlParam.get(),
+    } : {},
+    this.props.sortByDefault,
+  );
 
   renderHead() {
     const { sortable, children } = this.props;
@@ -101,29 +104,24 @@ export class Table extends React.Component<TableProps> {
   }
 
   getSorted(items: any[]) {
-    const { sortParams } = this;
-    const sortingCallback = this.props.sortable[sortParams.sortBy] || noop;
+    const { sortBy, orderBy: order } = this.sortParams;
+    const sortingCallback = this.props.sortable[sortBy] || noop;
 
-    return orderBy(
-      items,
-      sortingCallback,
-      sortParams.orderBy as any
-    );
+    return orderBy(items, sortingCallback, order as any);
   }
 
   @autobind()
-  protected onSort(params: TableSortParams) {
+  protected onSort({ sortBy, orderBy }: TableSortParams) {
+    this.sortParams = { sortBy, orderBy };
     const { sortSyncWithUrl, onSort } = this.props;
 
     if (sortSyncWithUrl) {
-      setQueryParams(params);
-    }
-    else {
-      this.sortParamsLocal = params;
+      sortByUrlParam.set(sortBy);
+      orderByUrlParam.set(orderBy);
     }
 
     if (onSort) {
-      onSort(params);
+      onSort({ sortBy, orderBy });
     }
   }