candidate_parameters: replace $.ajax with lorisFetch

modules/candidate_parameters/jsx/CandidateInfo.js

@@ -11,6 +11,8 @@ import {
   ButtonElement,
   TextareaElement,
 } from 'jsx/Form';
+import CandidateParametersClient from './CandidateParametersClient';
+import lorisFetch from 'jslib/lorisFetch';
 
 /**
  * Candiate info component
@@ -35,6 +37,7 @@ class CandidateInfo extends Component {
       isLoaded: false,
       loadedData: 0,
     };
+    this.client = new CandidateParametersClient();
     this.setFormData = this.setFormData.bind(this);
     this.onSubmit = this.onSubmit.bind(this);
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -46,34 +49,28 @@ class CandidateInfo extends Component {
    */
   componentDidMount() {
     const {t} = this.props;
-    let that = this;
-    $.ajax(
-      this.props.dataURL,
-      {
-        dataType: 'json',
-        success: function(data) {
-          let formData = {
-            flaggedCaveatemptor: data.flagged_caveatemptor,
-            flaggedOther: data.flagged_other,
-            flaggedReason: data.flagged_reason,
-          };
+    this.client.getData(this.props.candID, this.props.tabName)
+      .then((data) => {
+        let formData = {
+          flaggedCaveatemptor: data.flagged_caveatemptor,
+          flaggedOther: data.flagged_other,
+          flaggedReason: data.flagged_reason,
+        };
 
-          // Add parameter values to formData
-          Object.assign(formData, data.parameter_values);
+        // Add parameter values to formData
+        Object.assign(formData, data.parameter_values);
 
-          that.setState({
-            Data: data,
-            isLoaded: true,
-            formData: formData,
-          });
-        },
-        error: function(data, errorCode, errorMsg) {
-          that.setState({
-            error: t('An error occured while loading the page.', {ns: 'loris'}),
-          });
-        },
-      }
-    );
+        this.setState({
+          Data: data,
+          isLoaded: true,
+          formData: formData,
+        });
+      })
+      .catch(() => {
+        this.setState({
+          error: t('An error occured while loading the page.', {ns: 'loris'}),
+        });
+      });
   }
 
   /**
@@ -334,37 +331,43 @@ class CandidateInfo extends Component {
 
     formData.append('tab', this.props.tabName);
     formData.append('candID', this.state.Data.candID);
-    $.ajax(
-      {
-        type: 'POST',
-        url: self.props.action,
-        data: formData,
-        cache: false,
-        contentType: false,
-        processData: false,
-        success: function(data) {
+    lorisFetch(self.props.action, {
+      method: 'POST',
+      body: formData,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          let errorMessage = '';
+          let text = await response.text();
+          if (text) {
+            try {
+              errorMessage = JSON.parse(text).message || '';
+            } catch (err) {
+              errorMessage = '';
+            }
+          }
+          let error = new Error('request_failed');
+          error.lorisMessage = errorMessage;
+          throw error;
+        }
+        self.setState(
+          {
+            updateResult: 'success',
+          }
+        );
+        self.showAlertMessage();
+      })
+      .catch((err) => {
+        if (err.lorisMessage !== undefined && err.lorisMessage !== '') {
           self.setState(
             {
-              updateResult: 'success',
+              updateResult: 'error',
+              errorMessage: err.lorisMessage,
             }
           );
           self.showAlertMessage();
-        },
-        error: function(err) {
-          if (err.responseText !== '') {
-            let errorMessage = JSON.parse(err.responseText).message;
-            self.setState(
-              {
-                updateResult: 'error',
-                errorMessage: errorMessage,
-              }
-            );
-            self.showAlertMessage();
-          }
-        },
-
-      }
-    );
+        }
+      });
   }
 
   /**
@@ -390,8 +393,8 @@ class CandidateInfo extends Component {
   }
 }
 CandidateInfo.propTypes = {
-  dataURL: PropTypes.string,
-  tabName: PropTypes.string,
+  candID: PropTypes.string.isRequired,
+  tabName: PropTypes.string.isRequired,
   action: PropTypes.string,
   t: PropTypes.string.isRequired,
 };

modules/candidate_parameters/jsx/CandidateParameters.js

@@ -48,6 +48,7 @@ class CandidateParameters extends Component {
           <TabContent
             action={actionURL}
             dataURL={`${dataURL}&data=${tabList[key].id}`}
+            candID={this.props.candID}
             tabName={tabList[key].id}
           />
         </TabPane>
@@ -161,4 +162,3 @@ window.addEventListener('load', () => {
     </div>
   );
 });
-

modules/candidate_parameters/jsx/CandidateParametersClient.js

@@ -0,0 +1,31 @@
+import {Http} from 'jslib';
+
+/**
+ * Candidate parameters JSON client.
+ */
+class CandidateParametersClient extends Http.Client {
+  /**
+   * @constructor
+   */
+  constructor() {
+    super('/candidate_parameters');
+  }
+
+  /**
+   * Fetch candidate tab JSON data.
+   *
+   * @param {string} candID
+   * @param {string} tabName
+   * @return {Promise<any>}
+   */
+  getData(candID, tabName) {
+    const query = new Http.Query()
+      .addParam({field: 'candID', value: candID})
+      .addParam({field: 'data', value: tabName});
+    return this
+      .setSubEndpoint('ajax/getData.php')
+      .get(query);
+  }
+}
+
+export default CandidateParametersClient;

modules/candidate_parameters/jsx/ConsentStatus.js

@@ -6,6 +6,8 @@ import swal from 'sweetalert2';
 
 import {VerticalTabs, TabPane} from 'Tabs';
 import Loader from 'Loader';
+import CandidateParametersClient from './CandidateParametersClient';
+import lorisFetch from 'jslib/lorisFetch';
 import {
   FormElement,
   StaticElement,
@@ -35,6 +37,7 @@ class ConsentStatus extends Component {
       submitDisabled: false,
       showHistory: false,
     };
+    this.client = new CandidateParametersClient();
 
     /**
      * Bind component instance to custom methods
@@ -55,14 +58,12 @@ class ConsentStatus extends Component {
   }
 
   /**
-   * Retrieve data from the provided URL and save it in state
+   * Retrieve data and save it in state.
    */
   fetchData() {
     const {t} = this.props;
-    $.ajax(this.props.dataURL, {
-      method: 'GET',
-      dataType: 'json',
-      success: (data) => {
+    this.client.getData(this.props.candID, this.props.tabName)
+      .then((data) => {
         let formData = {};
         let consents = data.consents;
         for (let cStatus in consents) {
@@ -98,14 +99,13 @@ class ConsentStatus extends Component {
           formData: formData,
           isLoaded: true,
         });
-      },
-      error: (error) => {
+      })
+      .catch((error) => {
         console.error(error);
         this.setState({
           error: true,
         });
-      },
-    });
+      });
   }
 
   /**
@@ -265,14 +265,20 @@ class ConsentStatus extends Component {
     // Disable submit button to prevent form resubmission
     this.setState({submitDisabled: true});
 
-    $.ajax({
-      type: 'POST',
-      url: this.props.action,
-      data: formData,
-      cache: false,
-      contentType: false,
-      processData: false,
-      success: (data) => {
+    lorisFetch(this.props.action, {
+      method: 'POST',
+      body: formData,
+    })
+      .then(async (response) => {
+        if (!response.ok) {
+          let errorMessage = await response.text();
+          if (!errorMessage) {
+            errorMessage = t('Failed to update!', {ns: 'candidate_parameters'});
+          }
+          let error = new Error('request_failed');
+          error.lorisMessage = errorMessage;
+          throw error;
+        }
         swal.fire({
           title: t('Success!', {ns: 'loris'}),
           text: t('Update successful.', {ns: 'candidate_parameters'}),
@@ -287,21 +293,20 @@ class ConsentStatus extends Component {
           }
           );
         this.fetchData();
-      },
-      error: (error) => {
+      })
+      .catch((error) => {
         console.error(error);
         // Enable submit button for form resubmission
         this.setState({submitDisabled: false});
-        let errorMessage = error.responseText ||
+        let errorMessage = error.lorisMessage ||
           t('Failed to update!', {ns: 'candidate_parameters'});
         swal.fire({
           title: t('Error!', {ns: 'loris'}),
           text: errorMessage,
           type: 'error',
           confirmButtonText: t('OK', {ns: 'loris'}),
         });
-      },
-    });
+      });
   }
 
   /**
@@ -574,9 +579,9 @@ class ConsentStatus extends Component {
 }
 
 ConsentStatus.propTypes = {
-  dataURL: PropTypes.string.isRequired,
+  candID: PropTypes.string.isRequired,
   action: PropTypes.string.isRequired,
-  tabName: PropTypes.string,
+  tabName: PropTypes.string.isRequired,
   t: PropTypes.string.isRequired,
 };