Añadir plantilla

Base para front

1 files changed, 210 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Pages/Email/index.js b/front/odiparpack/app/containers/Pages/Email/index.js
new file mode 100644
index 0000000..93285cb
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/Email/index.js
@@ -0,0 +1,210 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/emailData';
+import {
+  EmailHeader,
+  EmailList,
+  EmailSidebar,
+  ComposeEmail,
+  Notification
+} from 'ba-components';
+import {
+  fetchMailAction,
+  openMailAction,
+  filterAction,
+  composeAction,
+  discardAction,
+  searchAction,
+  sendAction,
+  moveAction,
+  deleteAction,
+  toggleStaredAction,
+  closeNotifAction
+} from 'ba-actions/EmailActions';
+
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    minHeight: 600,
+    zIndex: 1,
+    background: theme.palette.grey[50],
+    overflow: 'hidden',
+    display: 'flex',
+    boxShadow: theme.shadows[2]
+  }
+});
+
+// validation functions
+const email = value => (
+  value && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)
+    ? 'Invalid email'
+    : ''
+);
+
+class Email extends React.Component {
+  state = {
+    to: '',
+    subject: '',
+    validMail: '',
+    mobileOpen: false,
+  };
+
+  componentDidMount() {
+    this.props.fetchData(data);
+  }
+
+  handleChange = (event, name) => {
+    if (name === 'to') {
+      this.setState({ validMail: email(event.target.value) });
+    }
+    this.setState({
+      [name]: event.target.value,
+    });
+  };
+
+  handleReply = (mail) => {
+    this.props.compose();
+    this.setState({
+      to: mail.get('name'),
+      subject: 'Reply: ' + mail.get('subject'),
+    });
+  }
+
+  handleCompose = () => {
+    this.props.compose();
+    this.setState({
+      to: '  ',
+      subject: '  ',
+    });
+  }
+
+  handleDrawerToggle = () => {
+    this.setState(state => ({ mobileOpen: !state.mobileOpen }));
+  };
+
+  render() {
+    const {
+      classes,
+      emailData,
+      openMail,
+      goto,
+      currentPage,
+      openFrm,
+      discard,
+      search,
+      keyword,
+      sendEmail,
+      moveTo,
+      remove,
+      toggleStar,
+      closeNotif,
+      messageNotif
+    } = this.props;
+    const {
+      to,
+      subject,
+      validMail,
+      mobileOpen
+    } = this.state;
+    const title = brand.name + ' - Email';
+    const description = brand.desc;
+    return (
+      <div className={classes.root}>
+        <Helmet>
+          <title>{title}</title>
+          <meta name="description" content={description} />
+          <meta property="og:title" content={title} />
+          <meta property="og:description" content={description} />
+          <meta property="twitter:title" content={title} />
+          <meta property="twitter:description" content={description} />
+        </Helmet>
+        <Notification close={() => closeNotif()} message={messageNotif} />
+        <EmailHeader search={search} handleDrawerToggle={this.handleDrawerToggle} />
+        <EmailSidebar
+          compose={this.handleCompose}
+          goto={goto}
+          selected={currentPage}
+          handleDrawerToggle={this.handleDrawerToggle}
+          mobileOpen={mobileOpen}
+        />
+        <EmailList
+          emailData={emailData}
+          openMail={openMail}
+          filterPage={currentPage}
+          keyword={keyword}
+          moveTo={moveTo}
+          remove={remove}
+          toggleStar={toggleStar}
+          reply={this.handleReply}
+        />
+        <ComposeEmail
+          to={to}
+          subject={subject}
+          compose={this.handleCompose}
+          validMail={validMail}
+          sendEmail={sendEmail}
+          inputChange={this.handleChange}
+          open={openFrm}
+          closeForm={discard}
+        />
+      </div>
+    );
+  }
+}
+
+Email.propTypes = {
+  classes: PropTypes.object.isRequired,
+  emailData: PropTypes.object.isRequired,
+  fetchData: PropTypes.func.isRequired,
+  openMail: PropTypes.func.isRequired,
+  goto: PropTypes.func.isRequired,
+  compose: PropTypes.func.isRequired,
+  discard: PropTypes.func.isRequired,
+  search: PropTypes.func.isRequired,
+  sendEmail: PropTypes.func.isRequired,
+  moveTo: PropTypes.func.isRequired,
+  remove: PropTypes.func.isRequired,
+  toggleStar: PropTypes.func.isRequired,
+  keyword: PropTypes.string.isRequired,
+  currentPage: PropTypes.string.isRequired,
+  openFrm: PropTypes.bool.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'email';
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  keyword: state.getIn([reducer, 'keywordValue']),
+  initValues: state.getIn([reducer, 'formValues']),
+  emailData: state.getIn([reducer, 'inbox']),
+  currentPage: state.getIn([reducer, 'currentPage']),
+  openFrm: state.getIn([reducer, 'openFrm']),
+  messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchMailAction, dispatch),
+  openMail: bindActionCreators(openMailAction, dispatch),
+  goto: bindActionCreators(filterAction, dispatch),
+  search: bindActionCreators(searchAction, dispatch),
+  moveTo: bindActionCreators(moveAction, dispatch),
+  remove: bindActionCreators(deleteAction, dispatch),
+  toggleStar: bindActionCreators(toggleStaredAction, dispatch),
+  compose: () => dispatch(composeAction),
+  discard: () => dispatch(discardAction),
+  sendEmail: bindActionCreators(sendAction, dispatch),
+  closeNotif: () => dispatch(closeNotifAction),
+});
+
+const EmailMapped = connect(
+  mapStateToProps,
+  constDispatchToProps
+)(Email);
+
+export default withStyles(styles)(EmailMapped);