handle page reloading for GenericModalsWithForms + developers comments

DEVELOPERS.md

@@ -127,10 +127,14 @@ in the `accounts.Profile.delete_user` method (which anonymizes a user account).
 
 ### Adding new fields to the user Sound model
 
-When adding new fields to the `sounds.Sound` mode, we should make sure that we handle this fields correctly when 
+When adding new fields to the `sounds.Sound` model, we should make sure that we handle this fields correctly when 
 creating `DeletedSound` objects in the `sounds-models.on_delete_sound` function triggered by the `pre_delete` 
 signal of the `Sound` model.
 
+### Working with new modals for UX
+
+Upon creating a new modal for any UX, please consider using `handleGenericModal` or `handleGenericModalWithForm` in `modal.js`.
+These functions ease the logic behind modals: initialization, error handling, toast messages, and URL handles.
 
 ### Adding new search options in the search page
 

freesound/static/bw-frontend/src/components/modal.js

@@ -9,6 +9,8 @@ const bwPageElement = document.getElementsByClassName('bw-page')[0];
 const bindModalActivationElements = (querySelectorStr, handleModalFunction, container) => {
   container.querySelectorAll(querySelectorStr).forEach(element => {
     if (element.dataset.alreadyBinded !== undefined){ return; }
+    if (element.dataset.reloadOnSuccess === undefined){element.dataset.reloadOnSuccess=false}
+    else{element.dataset.reloadOnSuccess = JSON.parse(element.dataset.reloadOnSuccess)}
     element.dataset.alreadyBinded = true;
     element.addEventListener('click', (evt) => {
       evt.preventDefault();
@@ -90,9 +92,7 @@ const handleDefaultModal = (modalUrl, modalActivationParam, element) => {
 }
 
 const handleDefaultModalWithForm = (modalUrl, modalActivationParam, element) => {
-  handleGenericModalWithForm(modalUrl, undefined, undefined, (req) => {showToast(element.dataset.successMessage || 'Form submitted succesfully!')}, 
-  (req) => {showToast(element.dataset.errorMessage || "There were errors processing the form...")}, true, true, modalActivationParam, 
-  element.dataset.reloadOnSuccess || false);
+  handleGenericModalWithForm(modalUrl, undefined, undefined, (req) => {showToast(element.dataset.successMessage || 'Form submitted succesfully!')}, (req) => {showToast(element.dataset.errorMessage || "There were errors processing the form...")}, true, true, modalActivationParam, element.dataset.reloadOnSuccess);
 }
 
 const bindDefaultModals = (container) => {
@@ -200,7 +200,7 @@ const handleGenericModal = (fetchContentUrl, onLoadedCallback, onClosedCallback,
 };
 
 
-const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedCallback, onFormSubmissionSucceeded, onFormSubmissionError, doRequestAsync, showLoadingToast, modalActivationParam, triggerPageReloadOnSuccess=false) => {
+const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedCallback, onFormSubmissionSucceeded, onFormSubmissionError, doRequestAsync, showLoadingToast, modalActivationParam, triggerPageReloadOnSuccess) => {
   // This version of the generic modal is useful for modal contents that contain forms which, upon submission, will return HTML content if there were form errors
   // which should be used to replace the current contents of the form, and will return a JSON response if the form validated correctly in the backend. That JSON
   // response could include some relevant data or no data at all, but is used to differentiate from the HTML response
@@ -223,7 +223,8 @@ const handleGenericModalWithForm = (fetchContentUrl, onLoadedCallback, onClosedC
           if (onFormSubmissionSucceeded !== undefined){
             onFormSubmissionSucceeded(req);
           }
-          if(triggerPageReloadOnSuccess == true){
+          if(triggerPageReloadOnSuccess == "true"){
+            console.log(triggerPageReloadOnSuccess)
             location.reload()
           }
         }  else {