1 files changed, 135 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/Comment.js b/front/odiparpack/app/components/SocialMedia/Comment.js
new file mode 100644
index 0000000..9ead6e7
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/Comment.js
@@ -0,0 +1,135 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Type from 'ba-styles/Typography.scss';
+import { withStyles } from '@material-ui/core/styles';
+import Send from '@material-ui/icons/Send';
+import CommentIcon from '@material-ui/icons/Comment';
+import CloseIcon from '@material-ui/icons/Close';
+import dummy from 'ba-api/dummyContents';
+import {
+  Typography,
+  List,
+  ListItem,
+  Avatar,
+  Input,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  IconButton,
+  Fab,
+  Slide,
+  Divider,
+  withMobileDialog,
+} from '@material-ui/core';
+import styles from './jss/socialMedia-jss';
+
+const Transition = React.forwardRef(function Transition(props, ref) { // eslint-disable-line
+  return <Slide direction="up" ref={ref} {...props} />;
+});
+
+class Comment extends React.Component {
+  state = {
+    comment: ''
+  };
+
+  handleChange = event => {
+    this.setState({ comment: event.target.value });
+  };
+
+  handleSubmit = comment => {
+    this.props.submitComment(comment);
+    this.setState({ comment: '' });
+  }
+
+  render() {
+    const {
+      open,
+      handleClose,
+      classes,
+      dataComment,
+      fullScreen
+    } = this.props;
+    const { comment } = this.state;
+    const getItem = dataArray => dataArray.map(data => (
+      <Fragment key={data.get('id')}>
+        <ListItem>
+          <div className={classes.commentContent}>
+            <div className={classes.commentHead}>
+              <Avatar alt="avatar" src={data.get('avatar')} className={classes.avatar} />
+              <section>
+                <Typography variant="subtitle1">{data.get('from')}</Typography>
+                <Typography variant="caption"><span className={classNames(Type.light, Type.textGrey)}>{data.get('date')}</span></Typography>
+              </section>
+            </div>
+            <Typography className={classes.commentText}>{data.get('message')}</Typography>
+          </div>
+        </ListItem>
+        <Divider variant="inset" />
+      </Fragment>
+    ));
+
+    return (
+      <div>
+        <Dialog
+          fullScreen={fullScreen}
+          open={open}
+          onClose={handleClose}
+          aria-labelledby="form-dialog-title"
+          TransitionComponent={Transition}
+          maxWidth="md"
+        >
+          <DialogTitle id="form-dialog-title">
+            <CommentIcon />
+            {' '}
+            {dataComment !== undefined && dataComment.size}
+            &nbsp;Comment
+            {dataComment !== undefined && dataComment.size > 1 ? 's' : ''}
+            <IconButton onClick={handleClose} className={classes.buttonClose} aria-label="Close">
+              <CloseIcon />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent>
+            <List>
+              {dataComment !== undefined && getItem(dataComment)}
+            </List>
+          </DialogContent>
+          <DialogActions className={classes.commentAction}>
+            <div className={classes.commentForm}>
+              <Avatar alt="avatar" src={dummy.user.avatar} className={classes.avatarMini} />
+              <Input
+                placeholder="Write Comment"
+                onChange={this.handleChange}
+                value={comment}
+                className={classes.input}
+                inputProps={{
+                  'aria-label': 'Comment',
+                }}
+              />
+              <Fab size="small" onClick={() => this.handleSubmit(comment)} color="secondary" aria-label="send" className={classes.button}>
+                <Send />
+              </Fab>
+            </div>
+          </DialogActions>
+        </Dialog>
+      </div>
+    );
+  }
+}
+
+Comment.propTypes = {
+  open: PropTypes.bool.isRequired,
+  handleClose: PropTypes.func.isRequired,
+  submitComment: PropTypes.func.isRequired,
+  classes: PropTypes.object.isRequired,
+  dataComment: PropTypes.object,
+  fullScreen: PropTypes.bool.isRequired,
+};
+
+Comment.defaultProps = {
+  dataComment: undefined
+};
+
+const CommentResponsive = withMobileDialog()(Comment);
+export default withStyles(styles)(CommentResponsive);