From c30ea793a43a6d7ca882b54006ec59eaac3f259e Mon Sep 17 00:00:00 2001
From: Matthew Zygowicz <ziggy@MacBook-Pro.localdomain>
Date: Sat, 3 Oct 2020 12:10:00 -0500
Subject: [PATCH] feat(sorter.tsx): after clicking a sort field, query params
 will generate to allow sharability

#94
---
 client/src/components/sorter.tsx | 40 ++++++++++++++++++++++++++++++--
 1 file changed, 38 insertions(+), 2 deletions(-)

diff --git a/client/src/components/sorter.tsx b/client/src/components/sorter.tsx
index c12e27d..ba4d0b8 100644
--- a/client/src/components/sorter.tsx
+++ b/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'}`}>