Cancel dashboard ajax requests when query is changed

assets/js/app.js

@@ -1,5 +1,6 @@
 import css from "../css/app.css"
 import "./polyfills/closest"
+import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import "phoenix_html"
 
 const triggers = document.querySelectorAll('[data-dropdown-trigger]')

assets/js/dashboard/api.js

@@ -1,5 +1,7 @@
 import {formatISO} from './date'
 
+let abortController = new AbortController()
+
 function serialize(obj) {
   var str = [];
   for (var p in obj)
@@ -9,6 +11,11 @@ function serialize(obj) {
   return str.join("&");
 }
 
+export function cancelAll() {
+  abortController.abort()
+  abortController = new AbortController()
+}
+
 export function serializeQuery(query, extraQuery=[]) {
   query = Object.assign({}, query, {
     date: query.date ? formatISO(query.date) : undefined,
@@ -22,7 +29,7 @@ export function serializeQuery(query, extraQuery=[]) {
 
 export function get(url, query, ...extraQuery) {
   url = url + serializeQuery(query, extraQuery)
-  return fetch(url)
+  return fetch(url, {signal: abortController.signal})
     .then( response => {
       if (!response.ok) { throw response }
       return response.json()

assets/js/dashboard/index.js

@@ -11,6 +11,7 @@ import Countries from './stats/countries'
 import Devices from './stats/devices'
 import Conversions from './stats/conversions'
 import {parseQuery} from './query'
+import * as api from './api'
 
 class Stats extends React.Component {
   constructor(props) {
@@ -20,6 +21,7 @@ class Stats extends React.Component {
 
   componentDidUpdate(prevProps) {
     if (prevProps.location.search !== this.props.location.search) {
+      api.cancelAll()
       this.setState({query: parseQuery(this.props.location.search, this.props.site)})
     }
   }