FIX Clear filter from url state

client/src/legacy/GridField.js

@@ -200,42 +200,68 @@ $.entwine('ss', function($) {
       }
     },
 
+    /**
+     * This will first retrieve state of the gridfield which is generated by PHP and sent to the
+     * browser as HTML via PJAX and stored in the data-schema attribute on all of the '3 dots'
+     * elements on each gridfield row
+     * 
+     * It will then update the browser location with the new state of the gridfield using
+     * window.ss.router
+     * 
+     * This allows users to bookmark different views in the CMS
+     */
     keepStateInHistory: function() {
       const newSchema = $(this).find('.gridfield-actionmenu__container').data('schema');
+      const gridFieldName = $(this).data('name');
       if (newSchema && newSchema.length > 0) {
         newSchema.filter( e => {
           if (e.type === 'link') {
-            const reqString = this.buildURLString(e.url)
-            const searchParam =  reqString ? '?' + reqString.join('&') : '';
-            window.ss.router.replace(window.location.pathname + searchParam, undefined, undefined, false);
+            const urlQueryString = this.buildUrlQueryString(e.url, gridFieldName);
+            window.ss.router.replace(window.location.pathname + urlQueryString, undefined, undefined, false);
           }
         })
       }
     },
 
     /**
-     * A params string can have duplicate keys.
-     * Function buildURLString splits string to "key => value" array
-     * and replaces values for existing keys with the new value
-     * and returns string with unique keys only
+     * Builds a url query string from the existing query string in window.location
+     * and overrides it with the params from the query string in the pjaxUrl param
+     * 
+     * For any query string params that relate to the gridState of the gridFieldName, only
+     * take these from the pjaxUrl param
      *
      * @param {string} url
      * @returns string
      */
-    buildURLString: function(url) {
-      const link = [window.location.origin, url].join('/');
-      const params = [window.location.search, (new URL(link)).searchParams.toString()].join('&').substring(1);
-      const newrequest = [];
-      const reqString = [];
-      params.split('&').forEach(param => {
-        const newVal = param.split('=');
-        newrequest[newVal[0]] = newVal[1] ? newVal[1] : '';
-      });
-      Object.keys(newrequest).forEach(param => {
-        reqString.push([param, newrequest[param]].join('='));
-      });
-
-      return reqString;
+    buildUrlQueryString: function(pjaxUrl, gridFieldName) {
+      const locationObj = {};
+      for (const param of window.location.search.replace(/^\?/, '').split('&')) {
+        const [key, val] = param.split('=');
+        // This regex will naively match the gridfield number \-[0-9]$, so if there are multiple
+        // gridfields with the same name (i.e. class) on the screen, it will be overly
+        // aggressive in removing their state. This limitation is because I couldn't find an
+        // easy way to extract the gridfield number from the gridfield
+        if (key.match(new RegExp(`^gridState\\-${gridFieldName}\\-[0-9]$`))) {
+          continue;
+        }
+        locationObj[key] = val;
+      }
+      const pjaxUrlObj = {};
+      const link = [window.location.origin, pjaxUrl].join('/');
+      const searchParams = (new URL(link)).searchParams;
+      for (const [key, val] of searchParams.entries()) {
+        pjaxUrlObj[key] = val;
+      }
+      const retObj = Object.assign(locationObj, pjaxUrlObj);
+      const retArr = [];
+      for (const key in retObj) {
+        if (key === '') {
+          continue;
+        }
+        const val = retObj[key];
+        retArr.push([key, val].join('='));
+      }
+      return retArr.length === 0 ? '' : '?' + retArr.join('&');
     }
   });