Pending Moderation moved to new setup

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

-import React from "react";
+import React, { Component } from "react";
+import { connect } from "react-redux";
+import { openFullScreenDialog, closeFullScreenDialog } from "../../../actions/fullScreenDialog";
+
 import PropTypes from "prop-types";
 import withStyles from "@material-ui/core/styles/withStyles";
 import compose from "recompose/compose";
 import Button from "@material-ui/core/Button";
-import Dialog from "@material-ui/core/Dialog";
 import Paper from "@material-ui/core/Paper";
 import AppBar from "@material-ui/core/AppBar";
 import Toolbar from "@material-ui/core/Toolbar";
 import IconButton from "@material-ui/core/IconButton";
 import Typography from "@material-ui/core/Typography";
 import CloseIcon from "@material-ui/icons/Close";
-import Slide from "@material-ui/core/Slide";
 import Divider from "@material-ui/core/Divider";
 
 import editorStyle from "./editorStyle";
@@ -30,21 +31,53 @@ const styles = theme => ({
   }
 });
 
-function Transition(props) {
-  return <Slide direction="up" {...props} />;
-}
 
-class PendingModeration extends React.Component {
-  state = {
-    versionInView: 0
-  }
+/**
+ * Class to handle models that are pending moderation.
+ *
+ * @class PendingModeration
+ * @extends {Component}
+ */
+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.
+   *
+   * @memberof PendingModeration
+   */
+  componentDidUpdate(prevProps) {
+    if (this.props.open && !prevProps.open) { // a bit of rendering optimization
+      this.props.openFullScreenDialog(this.renderPendingModerationPanel());
+    }
+  }
+
+  /**
+   * Retrieve the raw model data from the pending moderation data
+   *
+   * @returns
+   * @memberof PendingModeration
+   */
+  getRawModelDataFromPending() {
+    let rawModelData = Object.assign({}, this.props.factory.props.rawModelData.pending_moderation[0].new_object);
+    // we have to copy the original ID
+    rawModelData.id = this.newFactory.props.rawModelData.id;
+    return rawModelData;
+  }
+
+  /**
+   * Renders top of the panel
+   *
+   * @param {object} rawModelData
+   * @returns
+   * @memberof PendingModeration
+   */
   renderPendingModerationInfo(rawModelData) {
     return (
       <div>
@@ -73,45 +106,51 @@ class PendingModeration extends React.Component {
     );
   }
 
-  renderPendingModeration() {
-    let rawModelData = this.props.factory.props.rawModelData.pending_moderation[0].new_object;
-    // we have to copy the original ID
-    rawModelData.id = this.newFactory.props.rawModelData.id;
+
+  /**
+   * Close the panel and make sure to update parent
+   *
+   * @memberof PendingModeration
+   */
+  closePanel() {
+    this.props.handleClosePendingModeration();
+    this.props.closeFullScreenDialog();
+  }
+
+  /**
+   * Renders the panel content
+   *
+   * @returns
+   * @memberof PendingModeration
+   */
+  renderPendingModerationPanel() {
+    const { classes } = this.props,
+      rawModelData = this.getRawModelDataFromPending();
+
     return (
       <div>
-        {this.renderPendingModerationInfo(rawModelData)}
-        <br></br>
-        {this.newFactory.renderTitle(rawModelData)}
-        {this.newFactory.renderCore(rawModelData)}
+        <AppBar className={classes.appBar} >
+          <Toolbar>
+            <IconButton color="inherit" onClick={() => this.closePanel()} aria-label="Close">
+              <CloseIcon />
+            </IconButton>
+            <Typography variant="h6" color="inherit" className={classes.flex}>
+              Version en attente de modération
+            </Typography>
+          </Toolbar>
+        </AppBar>
+        <Paper className={classes.paper}>
+          {this.renderPendingModerationInfo(rawModelData)}
+          <br></br>
+          {this.newFactory.renderTitle(rawModelData)}
+          {this.newFactory.renderCore(rawModelData)}
+        </Paper>
       </div>
     );
   }
 
   render() {
-    const { classes } = this.props;
-    return (
-      <div>
-        <Dialog
-          fullScreen
-          open={this.props.open}
-          TransitionComponent={Transition}
-        >
-          <AppBar className={classes.appBar} >
-            <Toolbar>
-              <IconButton color="inherit" onClick={() => { this.props.handleClosePendingModeration(); }} aria-label="Close">
-                <CloseIcon />
-              </IconButton>
-              <Typography variant="h6" color="inherit" className={classes.flex}>
-                Version en attente de modération
-              </Typography>
-            </Toolbar>
-          </AppBar>
-          <Paper className={classes.paper}>
-            {this.props.open ? this.renderPendingModeration() : <div></div>}
-          </Paper>
-        </Dialog>
-      </div>
-    );
+    return <div></div>;
   }
 }
 
@@ -123,6 +162,8 @@ PendingModeration.propTypes = {
   handleApproveModeration: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
   userCanModerate: PropTypes.bool.isRequired,
+  openFullScreenDialog: PropTypes.func.isRequired,
+  closeFullScreenDialog: PropTypes.func.isRequired,
 };
 
 PendingModeration.defaultProps = {
@@ -131,7 +172,15 @@ PendingModeration.defaultProps = {
   handleClosePendingModeration: () => console.error("Dev forgot something...")
 };
 
+const mapDispatchToProps = (dispatch) => {
+  return {
+    openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
+    closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),
+  };
+};
+
 
 export default compose(
   withStyles(styles, { withTheme: true }),
+  connect(() => Object(), mapDispatchToProps)
 )(PendingModeration);