feat(sorter.tsx): after clicking a sort field, query params will generate to allow sharability

#94

client/src/components/sorter.tsx

@@ -45,12 +45,48 @@ export function sortByDate(x: {metadata: {creationTimestamp: string}}) {
     return -Date.parse(x.metadata.creationTimestamp);
 }
 
+function getFieldName (field: TODO) {
+    if(typeof field === 'function') {
+        return field.name
+    }
+    return field
+}
+
 export default class Sorter extends Base<SorterProps, SorterStates> {
+
+    onClickHandler() {
+        const {sort} = this.props;
+
+        if(sort) {
+            this.sort()
+            const url = new URL(window.location.href);
+            const fieldName = getFieldName(sort.field)
+
+            url.searchParams.set('sortKey', fieldName)
+            url.searchParams.set('sortDir', sort.direction)
+
+            window.history.pushState({}, '', url.search + url.hash);
+        }
+    }
+
+    componentDidMount() {
+        const {sort} = this.props;
+
+        const urlParams = new URLSearchParams(window.location.search);
+        
+        const sortKey = urlParams.get('sortKey')
+        const sortDir = urlParams.get('sortDir')
+
+        if(sort && getFieldName(sort.field) === sortKey) {
+            sort.direction = sortDir as Direction
+            sort.onSort(sort)
+        }
+    }
+    
     render() {
         const {children, sort} = this.props;
-
         return (
-            <div className={sort ? 'sorter' : undefined} onClick={() => sort && this.sort()}>
+            <div className={sort ? 'sorter' : undefined} onClick={()=>this.onClickHandler()}>
                 <span>{children}</span>
                 {sort && (
                     <span className={`sorter_arrows ${this.isSelected() && 'sorter_active'}`}>