Añadir plantilla

Base para front

1 files changed, 110 insertions, 0 deletions

diff --git a/front/odiparpack/app/containers/Pages/SocialMedia/index.js b/front/odiparpack/app/containers/Pages/SocialMedia/index.js
new file mode 100644
index 0000000..3a5ae2c
--- /dev/null
+++ b/front/odiparpack/app/containers/Pages/SocialMedia/index.js
@@ -0,0 +1,110 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+import brand from 'ba-api/brand';
+import { bindActionCreators } from 'redux';
+import { connect } from 'react-redux';
+import data from 'ba-api/timelineData';
+import {
+  fetchAction,
+  postAction,
+  toggleLikeAction,
+  fetchCommentAction,
+  postCommentAction,
+  closeNotifAction
+} from 'ba-actions/SocmedActions';
+import { Timeline, WritePost, SideSection, Notification } from 'ba-components';
+import { Grid } from '@material-ui/core';
+
+class SocialMedia extends React.Component {
+  componentDidMount() {
+    this.props.fetchData(data);
+  }
+
+  render() {
+    const title = brand.name + ' - Social Media';
+    const description = brand.desc;
+    const {
+      dataProps,
+      submitPost,
+      submitLike,
+      submitComment,
+      fetchComment,
+      commentIndex,
+      closeNotif,
+      messageNotif,
+    } = this.props;
+    return (
+      <div>
+        <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} />
+        <Grid
+          container
+          alignItems="flex-start"
+          justify="flex-start"
+          direction="row"
+          spacing={3}
+        >
+          <Grid item md={8} xs={12}>
+            <div>
+              <WritePost submitPost={submitPost} />
+              <Timeline
+                dataTimeline={dataProps}
+                onlike={submitLike}
+                submitComment={submitComment}
+                fetchComment={fetchComment}
+                commentIndex={commentIndex}
+              />
+            </div>
+          </Grid>
+          <Grid item md={4} xs={12}>
+            <SideSection />
+          </Grid>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+SocialMedia.propTypes = {
+  fetchData: PropTypes.func.isRequired,
+  submitPost: PropTypes.func.isRequired,
+  submitLike: PropTypes.func.isRequired,
+  submitComment: PropTypes.func.isRequired,
+  dataProps: PropTypes.object.isRequired,
+  fetchComment: PropTypes.func.isRequired,
+  commentIndex: PropTypes.number.isRequired,
+  closeNotif: PropTypes.func.isRequired,
+  messageNotif: PropTypes.string.isRequired,
+};
+
+const reducer = 'socmed';
+const mapStateToProps = state => ({
+  force: state, // force state from reducer
+  dataProps: state.getIn([reducer, 'dataTimeline']),
+  commentIndex: state.getIn([reducer, 'commentIndex']),
+  messageNotif: state.getIn([reducer, 'notifMsg']),
+});
+
+const constDispatchToProps = dispatch => ({
+  fetchData: bindActionCreators(fetchAction, dispatch),
+  submitPost: bindActionCreators(postAction, dispatch),
+  submitComment: bindActionCreators(postCommentAction, dispatch),
+  submitLike: bindActionCreators(toggleLikeAction, dispatch),
+  fetchComment: bindActionCreators(fetchCommentAction, dispatch),
+  closeNotif: () => dispatch(closeNotifAction),
+});
+
+const SocialMediaMapped = connect(
+  mapStateToProps,
+  constDispatchToProps
+)(SocialMedia);
+
+export default SocialMediaMapped;