solves #25

frontend/generate/templates/actions.tpl

@@ -4,7 +4,8 @@
 // MODIFY THE FILE ABOVE IF YOUR NOT SATISFIED 
 // THIS WARNING DOESN'T APPLY TO .tpl FILES...
 
-import Cookies from 'js-cookie';
+
+import SmartActions from '../actions/SmartActions';
 
 import {
 {% for obj in data %}
@@ -22,7 +23,6 @@ import {
     {{obj.NAME}}_EL_IS_SAVING,
     {{obj.NAME}}_EL_SAVING_HAS_ERROR,
     {{obj.NAME}}_EL_SHARE_SAVED_TIME,
-    {{obj.NAME}}_EL_SAVING_DATA_SUCCESS,
     {% endif %}
 
 {% endfor %}
@@ -31,94 +31,7 @@ import {
 //////////////////////////////////
 // generic function definitions
 
-function _FetchData(pk, api_end_point, _IsLoading, _FetchDataSuccess, _Invalidated, _HasError, pk_required=false) {
-    if (pk_required && (typeof pk == 'undefined')){
-        throw "pk shouldn't be empty when requesting a specific element";
-    }
-    if (pk != ""){
-        api_end_point += pk + '/';
-    }
-    return (dispatch) => {
-        dispatch(_IsLoading(true));
-        let token = Cookies.get('csrftoken');
-        fetch(api_end_point, {credentials: 'same-origin',headers: {'X-CSRFToken': token}})
-            .then((response) => {
-                if (!response.ok) {
-                    throw Error(response.statusText);
-                }
-                return response;
-            })
-            .then((response) => response.json())
-            .then((obj) => {
-                dispatch(_Invalidated(false));
-                dispatch(_FetchDataSuccess(obj));
-                dispatch(_IsLoading(false));
-            })
-            .catch((e) => {
-                dispatch(_HasError(true, e));
-                dispatch(_IsLoading(false));
-            });
-    };
-}
-
-
-
-function _ElSaveData(data, api_end_point, _ElIsSaving, _ElFetchDataSuccess, _ElShareSavedTime, _ElInvalidated, _ElHasError) {
-    return (dispatch) => {
-        let method = "POST";
-        let pk = "";
-        if ('id' in data){
-            method = "PUT";
-            pk = data.id + '/';
-        }
-        let __apiAttr = '';
-        if ('__apiAttr' in data && data.__apiAttr != '' ){
-            __apiAttr = data.__apiAttr + '/';
-        }
-
-        let errorStatusText = '';
-
-        dispatch(_ElIsSaving(true));
-        let token = Cookies.get('csrftoken');
-        let f = fetch(api_end_point+__apiAttr+pk, {
-            method: method,
-            credentials: 'same-origin',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json',
-                'X-CSRFToken': token
-            },
-            body: JSON.stringify(data)
-        })
-        .then((response) => {
-            if (!response.ok) {
-                errorStatusText = response.statusText;
-                throw response;
-            }
-            return response.json();
-        })
-        .then((_El) => {
-            dispatch(_ElInvalidated(false));
-            dispatch(_ElFetchDataSuccess(_El)); // we use the same here
-            dispatch(_ElShareSavedTime());
-            dispatch(_ElIsSaving(false));
-        })
-        .catch((e) => {
-            if (typeof e.json == 'function'){
-                return e.json()
-            } else {
-                return new Promise(function(resolve, reject) {resolve(e)});
-            }
-        })
-        .then( (errorContent) => {
-            if (typeof errorContent != 'undefined'){
-                dispatch(_ElHasError(true, {message: errorStatusText, content: errorContent}));
-                dispatch(_ElIsSaving(false));
-            }
-        })
-    };
-}
-
+const smartActions = new SmartActions();
 /////////////////////////////////
 
 {% for obj in data %}
@@ -164,7 +77,7 @@ export function {{obj.name}}FetchDataSuccess({{obj.name}},  setInvalidateFalse=t
 
 
 export function {{obj.name}}FetchData(pk="") {
-    return _FetchData(
+    return smartActions._FetchData(
         pk, 
         "{{obj.api_end_point}}", 
         {{obj.name}}IsLoading, 
@@ -218,7 +131,7 @@ export function {{obj.name}}ElFetchDataSuccess({{obj.name}}El, setInvalidateFals
 
 
 export function {{obj.name}}ElFetchData(pk) {
-    return _FetchData(
+    return smartActions._FetchData(
         pk, 
         "{{obj.api_end_point}}", 
         {{obj.name}}ElIsLoading, 
@@ -255,7 +168,7 @@ export function {{obj.name}}ElShareSavedTime() {
 }
 
 export function {{obj.name}}ElSaveData(data) {
-    return  _ElSaveData(data, "{{obj.api_end_point}}", {{obj.name}}ElIsSaving, {{obj.name}}ElFetchDataSuccess, {{obj.name}}ElShareSavedTime, {{obj.name}}ElInvalidated, {{obj.name}}ElSavingHasError) 
+    return  smartActions._ElSaveData(data, "{{obj.api_end_point}}", {{obj.name}}ElIsSaving, {{obj.name}}ElFetchDataSuccess, {{obj.name}}ElShareSavedTime, {{obj.name}}ElInvalidated, {{obj.name}}ElSavingHasError) 
 }
 {% endif %}
 

frontend/src/actions/SmartActions.js

+import Cookies from 'js-cookie';
+
+
+export default class SmartActions {
+  fetching = [];
+
+  shouldFetchEndPoint(endPoint) {
+    const now = Date.now();
+    // clear the list of old fetchs
+    // The same request won't be sent if the same one was sent within the past 500 ms
+    // Redux wasn't updating quick enough to prevent side effects of fetching the same stuff multiple times.
+    this.fetching = this.fetching.filter(obj => now - obj.fetchSendAt < 500)
+    if (this.fetching.find(obj => obj.endPoint == endPoint)) {
+      return false;
+    } else {
+      this.fetching.push({ endPoint, fetchSendAt: now });
+      return true;
+    }
+  }
+
+  _FetchData(pk, api_end_point, _IsLoading, _FetchDataSuccess, _Invalidated, _HasError, pk_required = false) {
+    if (pk_required && (typeof pk == 'undefined')) {
+      throw "pk shouldn't be empty when requesting a specific element";
+    }
+    if (pk != "") {
+      api_end_point += pk + '/';
+    }
+
+    if (!this.shouldFetchEndPoint(api_end_point)) {
+      return () => { };
+    }
+
+    return (dispatch) => {
+      dispatch(_IsLoading(true));
+      let token = Cookies.get('csrftoken');
+      fetch(api_end_point, { credentials: 'same-origin', headers: { 'X-CSRFToken': token } })
+        .then((response) => {
+          if (!response.ok) {
+            throw Error(response.statusText);
+          }
+          return response;
+        })
+        .then((response) => response.json())
+        .then((obj) => {
+          dispatch(_Invalidated(false));
+          dispatch(_FetchDataSuccess(obj));
+          dispatch(_IsLoading(false));
+        })
+        .catch((e) => {
+          dispatch(_HasError(true, e));
+          dispatch(_IsLoading(false));
+        });
+    };
+  }
+
+
+
+  _ElSaveData(data, api_end_point, _ElIsSaving, _ElFetchDataSuccess, _ElShareSavedTime, _ElInvalidated, _ElHasError) {
+    return (dispatch) => {
+      let method = "POST";
+      let pk = "";
+      if ('id' in data) {
+        method = "PUT";
+        pk = data.id + '/';
+      }
+      let __apiAttr = '';
+      if ('__apiAttr' in data && data.__apiAttr != '') {
+        __apiAttr = data.__apiAttr + '/';
+      }
+
+      let errorStatusText = '';
+
+      dispatch(_ElIsSaving(true));
+      let token = Cookies.get('csrftoken');
+      let f = fetch(api_end_point + __apiAttr + pk, {
+        method: method,
+        credentials: 'same-origin',
+        headers: {
+          'Accept': 'application/json',
+          'Content-Type': 'application/json',
+          'X-CSRFToken': token
+        },
+        body: JSON.stringify(data)
+      })
+        .then((response) => {
+          if (!response.ok) {
+            errorStatusText = response.statusText;
+            throw response;
+          }
+          return response.json();
+        })
+        .then((_El) => {
+          dispatch(_ElInvalidated(false));
+          dispatch(_ElFetchDataSuccess(_El)); // we use the same here
+          dispatch(_ElShareSavedTime());
+          dispatch(_ElIsSaving(false));
+        })
+        .catch((e) => {
+          if (typeof e.json == 'function') {
+            return e.json()
+          } else {
+            return new Promise(function (resolve, reject) { resolve(e) });
+          }
+        })
+        .then((errorContent) => {
+          if (typeof errorContent != 'undefined') {
+            dispatch(_ElHasError(true, { message: errorStatusText, content: errorContent }));
+            dispatch(_ElIsSaving(false));
+          }
+        })
+    };
+  }
+}
\ No newline at end of file