Added __apiParam to CustomComponentForApi and History use this class now

frontend/src/components/common/CustomComponentForAPI.js

@@ -48,6 +48,10 @@ class CustomComponentForAPI extends Component {
   // mapping should be : props_key => other_props_that contains the attribute to use
   __apiAttr = null;
 
+  // __apiParam should be an object
+  // mapping the prop that needs to be fetched to the parameter to be passed to the read function
+  __apiParam = null;
+
   constructor(props) {
     super(props);
 
@@ -175,6 +179,8 @@ class CustomComponentForAPI extends Component {
   performReadFromApi(propName) {
     if (this.__apiAttr && this.__apiAttr[propName]) {
       this.props.api[propName](this.props[this.__apiAttr[propName]]);
+    } else if (this.__apiParam && this.__apiParam[propName]) {
+      this.props.api[propName](this.__apiParam[propName]);
     } else {
       this.props.api[propName]();
     }

frontend/src/components/university/modules/common/History.js

-import React, { Component } from "react";
+import React from "react";
 import { openFullScreenDialog, closeFullScreenDialog } from "../../../../redux/actions/fullScreenDialog";
 
 import PropTypes from "prop-types";
@@ -22,6 +22,7 @@ import Loading from "../../../common/Loading";
 import dateTimeStrToStr from "../../../../utils/dateTimeStrToStr";
 
 import editorStyle from "../../editors/common/editorStyle";
+import CustomComponentForAPI from "../../../common/CustomComponentForAPI";
 
 import getActions from "../../../../redux/api/getActions";
 
@@ -30,17 +31,25 @@ import getActions from "../../../../redux/api/getActions";
 /**
  * Component to display the previous versions of module
  *
- * TODO: check if we can use CustomComponentForAPI
- *
  * @class History
  * @extends {Component}
  */
-class History extends Component {
+class History extends CustomComponentForAPI {
   // Store the version that is being viewed
   state = {
     versionInView: 1
   }
 
+  constructor(props) {
+    super(props);
+    const { contentTypeId, id } = props.modelInfo;
+
+    // set the __apiAttr here so that we can read the correct data
+    this.__apiParam = {
+      versions: { contentTypeId, id }
+    };
+  }
+
   /**
    * Move to next or previous version with step
    *
@@ -58,45 +67,7 @@ class History extends Component {
    * @memberof History
    */
   getVersions() {
-    if (!this.props.versions.readSucceeded.readAt) {
-      return [];
-    } else {
-      return this.props.versions.readSucceeded.data
-        .map((el) => { return el.data; }); // get the data inside the version
-    }
-  }
-
-  /**
-   * Get the information about the model from the props.
-   *
-   * @returns
-   * @memberof History
-   */
-  getContentTypeAndId() {
-    const { contentTypeId, id } = this.props.modelInfo;
-    return { contentTypeId, id };
-  }
-
-  /**
-   * Checks whether the versioned data is ready or not.
-   *
-   * @returns
-   * @memberof History
-   */
-  dataIsReady() {
-    if (this.props.versions.isInvalidated) {
-      return false;
-    }
-
-    const { contentTypeId, id } = this.getContentTypeAndId(),
-      versions = this.getVersions();
-    if (versions.length === 0) {
-      return false;
-    }
-    const lastVersion = versions[0];
-
-    return lastVersion.content_type_id == contentTypeId
-      && lastVersion.id == id;
+    return this.getLatestReadData("versions").map((el) => { return el.data; });
   }
 
   /**
@@ -106,6 +77,7 @@ class History extends Component {
    * @memberof Editor
    */
   componentDidMount() {
+    super.componentDidMount();
     this.forceUpdate();
   }
 
@@ -114,12 +86,8 @@ class History extends Component {
    *
    * @memberof History
    */
-  componentDidUpdate() {
-    // Load the data as necessary
-    if (!this.dataIsReady() && !this.props.versions.isLoading) {
-      const { contentTypeId, id } = this.getContentTypeAndId();
-      this.props.readVersions(contentTypeId, id);
-    }
+  componentDidUpdate(prevProps, prevState, snapshot) {
+    super.componentDidUpdate(prevProps, prevState, snapshot);
     this.props.openFullScreenDialog(this.renderPanel());
   }
 
@@ -141,6 +109,10 @@ class History extends Component {
    * @memberof History
    */
   renderPanel() {
+    if (!this.allApiDataIsReady()) {
+      return <Loading />;
+    }
+
     const { classes } = this.props;
     return (
       <>
@@ -168,13 +140,6 @@ class History extends Component {
    * @memberof History
    */
   renderHistory() {
-    if (this.props.versions.readFailed.failed) {
-      return <p>Nous sommes désolé, une erreur est survenue lors du chargement de l'historique</p>;
-    }
-
-    if (!this.dataIsReady()) {
-      return <Loading />;
-    }
     const { theme } = this.props,
       versions = this.getVersions(),
       activeStep = this.state.versionInView,
@@ -245,8 +210,17 @@ class History extends Component {
     );
   }
 
-  // Dumb render function for the component TODO remove ?
+  /**
+   * @override
+   *
+   * @returns
+   * @memberof History
+   */
   render() {
+    if (!this.allApiDataIsReady()) {
+      return <></>;
+    }
+
     return <></>;
   }
 }
@@ -254,7 +228,6 @@ class History extends Component {
 History.propTypes = {
   classes: PropTypes.object.isRequired,
   editFromVersion: PropTypes.func.isRequired,
-  readVersions: PropTypes.func.isRequired,
   closeHistoryPanel: PropTypes.func.isRequired,
   resetVersions: PropTypes.func.isRequired,
   versions: PropTypes.object.isRequired,
@@ -279,7 +252,9 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    readVersions: (contentTypeId, id) => dispatch(getActions("versions").readSpecific(`${contentTypeId}/${id}`)),
+    api: {
+      versions: (param) => dispatch(getActions("versions").readSpecific(`${param.contentTypeId}/${param.id}`)),
+    },
     resetVersions: () => dispatch(getActions("versions").setInvalidatedSpecific(true)),
     openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
     closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),