Update url with date query params

lmnts-dev · Feb 26, 2020 · a1e3212 · a1e3212
1 parent 297b1f8
commit a1e3212
Show file tree

Hide file tree

Showing 3 changed files with 85 additions and 25 deletions.
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -24,6 +24,7 @@
     "@reach/dialog": "^0.6.1",
     "@reach/router": "^1.2.1",
     "@reach/visually-hidden": "^0.6.1",
+    "@sanity/client": "^0.147.3",
     "babel-plugin-styled-components": "^1.10.6",
     "date-fns": "^2.9.0",
     "eslint-loader": "^3.0.0",
@@ -53,6 +54,7 @@
     "react-router-hash-link": "^1.2.2",
     "react-tilt": "^0.1.4",
     "react-truncate": "^2.4.0",
+    "set-query-string": "^2.2.0",
     "smooth-scroll": "^16.1.0",
     "styled-components": "^4.1.3",
     "styled-system": "^5.0.18"

diff --git a/web/src/components/library/CourseListings/CourseListings.js b/web/src/components/library/CourseListings/CourseListings.js
@@ -8,7 +8,8 @@
 import React, { PureComponent } from 'react';
 import { Link } from 'gatsby';
 import { navigate } from '@reach/router';
-import { isWithinInterval } from 'date-fns'
+import { isWithinInterval, format } from 'date-fns'
+import setQuery from 'set-query-string'
 
 // MapboxGL
 import mapboxgl from 'mapbox-gl';
@@ -523,30 +524,22 @@ class CourseListings extends PureComponent {
 
   // Functon to update our URL using history.push API
   updateURL() {
-    // If we are indeed filtering:
-    if (this.state.categoryFilter != '') {
-      const url = this.setParams({
-        show: this.state.categoryFilter.toLowerCase() + 's',
-        age_min: this.state.ageFilter.ageMin,
-        age_max: this.state.ageFilter.ageMax
-      });
-      //do not forget the "?" !
-      history.pushState({}, '', `?${url}`);
-    } else if (this.state.ageFilter.ageMin !== 0 && this.state.ageFilter.ageMax !== 0) {
-      const url = this.setParams({
-        show: 'all',
-        age_min: this.state.ageFilter.ageMin,
-        age_max: this.state.ageFilter.ageMax
-      });
-      history.pushState({}, '', `?${url}`);
-    }
-
-    // If it is  displaying all programs:
-    else {
-      const url = this.setParams({
-        show: 'all',
-      });
-      history.pushState({}, '', `?${url}`);
+    if (this.state.categoryFilter !== '') {
+      setQuery({show: this.state.categoryFilter.toLowerCase() + 's'}, {pushState: true})
+      if (this.state.ageFilter.ageMin !== 0 && this.state.ageFilter.ageMax !== 0) {
+        setQuery({age_min: this.state.ageFilter.ageMin, age_max: this.state.ageFilter.ageMax}, {pushState: true})
+      }
+      if (this.state.dateFilter.startDate !== '' && this.state.dateFilter.endDate !== '') {
+        setQuery({date_min: format(this.state.dateFilter.startDate, 'yyyy-MM-dd'), date_max: format(this.state.dateFilter.endDate, 'yyyy-MM-dd')}, {pushState: true})
+      }
+    } else {
+      setQuery({show: 'all'}, {pushState: true})
+      if (this.state.ageFilter.ageMin !== 0 && this.state.ageFilter.ageMax !== 0) {
+        setQuery({age_min: this.state.ageFilter.ageMin, age_max: this.state.ageFilter.ageMax}, {pushState: true})
+      }
+      if (this.state.dateFilter.startDate !== '' && this.state.dateFilter.endDate !== '') {
+        setQuery({date_min: format(this.state.dateFilter.startDate, 'yyyy-MM-dd'), date_max: format(this.state.dateFilter.endDate, 'yyyy-MM-dd')}, {pushState: true})
+      }
     }
 
   }