Removed nasty clone deep from history and pending moderation

frontend/src/components/university/shared/GenericModule.js

@@ -152,8 +152,9 @@ class GenericModule extends CustomComponentForAPI {
   }
 
   customRender() {
-    const { classes } = this.props;
-    const userCanModerate = this.userCanModerate();
+    const { classes, rawModelData } = this.props,
+      userCanModerate = this.userCanModerate();
+
 
     return (
       <div>
@@ -172,13 +173,14 @@ class GenericModule extends CustomComponentForAPI {
           __apiAttr={this.props.__apiAttr}
         />
         <History
-          factory={this}
+          renderer={this}
+          modelInfo={{ contentTypeId: rawModelData.content_type_id, id: rawModelData.id }}
           open={this.state.historyOpen}
           handleHistoryWasClosed={this.handleHistoryWasClosed}
           handleRestoreVersion={this.handleRestoreVersion}
         />
         <PendingModeration
-          factory={this}
+          renderer={this}
           open={this.state.pendingModerationOpen}
           handleClosePendingModeration={this.handleClosePendingModeration}
           handleEditPendingModeration={this.handleEditPendingModeration}

frontend/src/components/university/shared/History.js

@@ -22,9 +22,6 @@ import Loading from "../../other/Loading";
 import dateTimeStrToStr from "../../../utils/dateTimeStrToStr";
 
 import editorStyle from "./editorStyle";
-import _omit from "lodash/omit";
-import _pick from "lodash/pick";
-import _cloneDeep from "lodash/cloneDeep";
 
 import getActions from "../../../api/getActions";
 
@@ -54,13 +51,6 @@ class History extends Component {
     this.setState({ versionInView: this.state.versionInView + step });
   }
 
-  // TODO remove this
-  componentWillMount() {
-    let tmp = _pick(this.props.factory, ["props", "renderCore", "renderTitle"]);
-    tmp = _omit(tmp, ["props.children"]);
-    this.newFactory = _cloneDeep(tmp);
-  }
-
   /**
    * Returns the versions matching the props.
    *
@@ -84,11 +74,8 @@ class History extends Component {
    * @memberof History
    */
   getContentTypeAndId() {
-    // eslint-disable-next-line react/prop-types
-    const { rawModelData } = this.props.factory.props,
-      { content_type_id, id } = rawModelData;
-
-    return { content_type_id, id };
+    const { contentTypeId, id } = this.props.modelInfo;
+    return { contentTypeId, id };
   }
 
   /**
@@ -102,14 +89,14 @@ class History extends Component {
       return false;
     }
 
-    const { content_type_id, id } = this.getContentTypeAndId(),
+    const { contentTypeId, id } = this.getContentTypeAndId(),
       versions = this.getVersions();
     if (versions.length === 0) {
       return false;
     }
     const lastVersion = versions[0];
 
-    return lastVersion.content_type_id == content_type_id
+    return lastVersion.content_type_id == contentTypeId
       && lastVersion.id == id;
   }
 
@@ -124,8 +111,8 @@ class History extends Component {
       this.props.openFullScreenDialog(this.renderPanel());
       // Load the data as necessary
       if (!this.dataIsReady() && !this.props.versions.isLoading) {
-        const { content_type_id, id } = this.getContentTypeAndId();
-        this.props.readVersions(content_type_id, id);
+        const { contentTypeId, id } = this.getContentTypeAndId();
+        this.props.readVersions(contentTypeId, id);
       }
     }
   }
@@ -187,8 +174,9 @@ class History extends Component {
       activeStep = this.state.versionInView,
       maxSteps = versions.length;
 
-    Object.assign(this.newFactory.props.rawModelData, versions[activeStep]);
-    const { rawModelData } = this.newFactory.props;
+    // eslint-disable-next-line react/prop-types
+    let { rawModelData } = this.props.renderer.props;
+    const newRawModelData = Object.assign({}, rawModelData, versions[activeStep]);
     return (
       <div>
         <MobileStepper
@@ -210,10 +198,10 @@ class History extends Component {
           }
         />
         <br></br>
-        {this.renderVersionInfo(rawModelData)}
+        {this.renderVersionInfo(newRawModelData)}
         <br></br>
-        {this.newFactory.renderTitle(rawModelData)}
-        {this.newFactory.renderCore(rawModelData)}
+        {this.props.renderer.renderTitle(newRawModelData)}
+        {this.props.renderer.renderCore(newRawModelData)}
       </div>
     );
   }
@@ -258,7 +246,6 @@ class History extends Component {
 
 History.propTypes = {
   classes: PropTypes.object.isRequired,
-  factory: PropTypes.object.isRequired,
   handleRestoreVersion: PropTypes.func.isRequired,
   readVersions: PropTypes.func.isRequired,
   handleHistoryWasClosed: PropTypes.func.isRequired,
@@ -268,6 +255,8 @@ History.propTypes = {
   theme: PropTypes.object.isRequired,
   openFullScreenDialog: PropTypes.func.isRequired,
   closeFullScreenDialog: PropTypes.func.isRequired,
+  modelInfo: PropTypes.object.isRequired,
+  renderer: PropTypes.object.isRequired,
 };
 
 History.defaultProps = {
@@ -285,7 +274,7 @@ const mapStateToProps = (state) => {
 
 const mapDispatchToProps = (dispatch) => {
   return {
-    readVersions: (content_type_id, id) => dispatch(getActions("versions").readSpecific(content_type_id + "/" + id)),
+    readVersions: (contentTypeId, id) => dispatch(getActions("versions").readSpecific(`${contentTypeId}/${id}`)),
     resetVersions: () => dispatch(getActions("versions").setInvalidatedSpecific(true)),
     openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
     closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),

frontend/src/components/university/shared/PendingModeration.js

@@ -16,10 +16,6 @@ import Divider from "@material-ui/core/Divider";
 
 import editorStyle from "./editorStyle";
 
-import _omit from "lodash/omit";
-import _pick from "lodash/pick";
-import _cloneDeep from "lodash/cloneDeep";
-
 const styles = theme => ({
   ...editorStyle(theme),
   editButton: {
@@ -40,13 +36,6 @@ const styles = theme => ({
  */
 class PendingModeration extends Component {
 
-  componentWillMount() {
-    // TODO REMOVE THIS
-    let tmp = _pick(this.props.factory, ["props", "renderCore", "renderTitle"]);
-    tmp = _omit(tmp, ["props.children"]);
-    this.newFactory = _cloneDeep(tmp);
-  }
-
   /**
    * Customization to handle opening the app full screen dialog when needed.
    *
@@ -65,10 +54,11 @@ class PendingModeration extends Component {
    * @memberof PendingModeration
    */
   getRawModelDataFromPending() {
-    let rawModelData = Object.assign({}, this.props.factory.props.rawModelData.pending_moderation[0].new_object);
+    const { renderer } = this.props;
+    let pendingRawModelData = Object.assign({}, renderer.props.rawModelData.pending_moderation[0].new_object);
     // we have to copy the original ID
-    rawModelData.id = this.newFactory.props.rawModelData.id;
-    return rawModelData;
+    pendingRawModelData.id = renderer.props.rawModelData.id;
+    return pendingRawModelData;
   }
 
   /**
@@ -125,7 +115,7 @@ class PendingModeration extends Component {
    */
   renderPendingModerationPanel() {
     const { classes } = this.props,
-      rawModelData = this.getRawModelDataFromPending();
+      pendingModelData = this.getRawModelDataFromPending();
 
     return (
       <div>
@@ -140,10 +130,10 @@ class PendingModeration extends Component {
           </Toolbar>
         </AppBar>
         <Paper className={classes.paper}>
-          {this.renderPendingModerationInfo(rawModelData)}
+          {this.renderPendingModerationInfo(pendingModelData)}
           <br></br>
-          {this.newFactory.renderTitle(rawModelData)}
-          {this.newFactory.renderCore(rawModelData)}
+          {this.props.renderer.renderTitle(pendingModelData)}
+          {this.props.renderer.renderCore(pendingModelData)}
         </Paper>
       </div>
     );
@@ -156,7 +146,6 @@ class PendingModeration extends Component {
 
 PendingModeration.propTypes = {
   classes: PropTypes.object.isRequired,
-  factory: PropTypes.object.isRequired,
   handleEditPendingModeration: PropTypes.func.isRequired,
   handleClosePendingModeration: PropTypes.func.isRequired,
   handleApproveModeration: PropTypes.func.isRequired,
@@ -164,6 +153,7 @@ PendingModeration.propTypes = {
   userCanModerate: PropTypes.bool.isRequired,
   openFullScreenDialog: PropTypes.func.isRequired,
   closeFullScreenDialog: PropTypes.func.isRequired,
+  renderer: PropTypes.object.isRequired,
 };
 
 PendingModeration.defaultProps = {