Commit 83ecd677 authored by Florent Chehab's avatar Florent Chehab
Browse files

Pending Moderation moved to new setup

parent 6d3d2c3a
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 PropTypes from "prop-types";
import withStyles from "@material-ui/core/styles/withStyles"; import withStyles from "@material-ui/core/styles/withStyles";
import compose from "recompose/compose"; import compose from "recompose/compose";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import AppBar from "@material-ui/core/AppBar"; import AppBar from "@material-ui/core/AppBar";
import Toolbar from "@material-ui/core/Toolbar"; import Toolbar from "@material-ui/core/Toolbar";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Typography from "@material-ui/core/Typography"; import Typography from "@material-ui/core/Typography";
import CloseIcon from "@material-ui/icons/Close"; import CloseIcon from "@material-ui/icons/Close";
import Slide from "@material-ui/core/Slide";
import Divider from "@material-ui/core/Divider"; import Divider from "@material-ui/core/Divider";
import editorStyle from "./editorStyle"; import editorStyle from "./editorStyle";
...@@ -30,21 +31,53 @@ const styles = theme => ({ ...@@ -30,21 +31,53 @@ const styles = theme => ({
} }
}); });
function Transition(props) {
return <Slide direction="up" {...props} />;
}
class PendingModeration extends React.Component { /**
state = { * Class to handle models that are pending moderation.
versionInView: 0 *
} * @class PendingModeration
* @extends {Component}
*/
class PendingModeration extends Component {
componentWillMount() { componentWillMount() {
// TODO REMOVE THIS
let tmp = _pick(this.props.factory, ["props", "renderCore", "renderTitle"]); let tmp = _pick(this.props.factory, ["props", "renderCore", "renderTitle"]);
tmp = _omit(tmp, ["props.children"]); tmp = _omit(tmp, ["props.children"]);
this.newFactory = _cloneDeep(tmp); 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) { renderPendingModerationInfo(rawModelData) {
return ( return (
<div> <div>
...@@ -73,45 +106,51 @@ class PendingModeration extends React.Component { ...@@ -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 * Close the panel and make sure to update parent
rawModelData.id = this.newFactory.props.rawModelData.id; *
* @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 ( return (
<div> <div>
{this.renderPendingModerationInfo(rawModelData)} <AppBar className={classes.appBar} >
<br></br> <Toolbar>
{this.newFactory.renderTitle(rawModelData)} <IconButton color="inherit" onClick={() => this.closePanel()} aria-label="Close">
{this.newFactory.renderCore(rawModelData)} <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> </div>
); );
} }
render() { render() {
const { classes } = this.props; return <div></div>;
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>
);
} }
} }
...@@ -123,6 +162,8 @@ PendingModeration.propTypes = { ...@@ -123,6 +162,8 @@ PendingModeration.propTypes = {
handleApproveModeration: PropTypes.func.isRequired, handleApproveModeration: PropTypes.func.isRequired,
open: PropTypes.bool.isRequired, open: PropTypes.bool.isRequired,
userCanModerate: PropTypes.bool.isRequired, userCanModerate: PropTypes.bool.isRequired,
openFullScreenDialog: PropTypes.func.isRequired,
closeFullScreenDialog: PropTypes.func.isRequired,
}; };
PendingModeration.defaultProps = { PendingModeration.defaultProps = {
...@@ -131,7 +172,15 @@ PendingModeration.defaultProps = { ...@@ -131,7 +172,15 @@ PendingModeration.defaultProps = {
handleClosePendingModeration: () => console.error("Dev forgot something...") handleClosePendingModeration: () => console.error("Dev forgot something...")
}; };
const mapDispatchToProps = (dispatch) => {
return {
openFullScreenDialog: (innerNodes) => dispatch(openFullScreenDialog(innerNodes)),
closeFullScreenDialog: () => dispatch(closeFullScreenDialog()),
};
};
export default compose( export default compose(
withStyles(styles, { withTheme: true }), withStyles(styles, { withTheme: true }),
connect(() => Object(), mapDispatchToProps)
)(PendingModeration); )(PendingModeration);
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment