1 files changed, 177 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/Timeline.js b/front/odiparpack/app/components/SocialMedia/Timeline.js
new file mode 100644
index 0000000..e46826b
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/Timeline.js
@@ -0,0 +1,177 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ShareIcon from '@material-ui/icons/Share';
+import CommentIcon from '@material-ui/icons/Comment';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import {
+  Typography,
+  Card,
+  Menu,
+  MenuItem,
+  CardHeader,
+  CardMedia,
+  CardContent,
+  CardActions,
+  IconButton,
+  Icon,
+  Avatar,
+  Tooltip,
+} from '@material-ui/core';
+import Comment from './Comment';
+import styles from './jss/timeline-jss';
+
+
+const optionsOpt = [
+  'Option 1',
+  'Option 2',
+  'Option 3',
+];
+
+const ITEM_HEIGHT = 48;
+
+class Timeline extends React.Component {
+  state = {
+    anchorElOpt: null,
+    openComment: false,
+  };
+
+  handleClickOpt = event => {
+    this.setState({ anchorElOpt: event.currentTarget });
+  };
+
+  handleCloseOpt = () => {
+    this.setState({ anchorElOpt: null });
+  };
+
+  handleOpenComment = (data) => {
+    this.props.fetchComment(data);
+    this.setState({ openComment: true });
+  };
+
+  handleCloseComment = () => {
+    this.setState({ openComment: false });
+  };
+
+  render() {
+    const {
+      classes,
+      dataTimeline,
+      onlike,
+      commentIndex,
+      submitComment,
+    } = this.props;
+    const { anchorElOpt, openComment } = this.state;
+    const getItem = dataArray => dataArray.map(data => (
+      <li key={data.get('id')}>
+        <div className={classes.iconBullet}>
+          <Tooltip id={'tooltip-icon-' + data.get('id')} title={data.get('time')}>
+            <Icon className={classes.icon}>
+              {data.get('icon')}
+            </Icon>
+          </Tooltip>
+        </div>
+        <Card className={classes.cardSocmed}>
+          <CardHeader
+            avatar={
+              <Avatar alt="avatar" src={data.get('avatar')} className={classes.avatar} />
+            }
+            action={(
+              <IconButton
+                aria-label="More"
+                aria-owns={anchorElOpt ? 'long-menu' : null}
+                aria-haspopup="true"
+                className={classes.button}
+                onClick={this.handleClickOpt}
+              >
+                <MoreVertIcon />
+              </IconButton>
+            )}
+            title={data.get('name')}
+            subheader={data.get('date')}
+          />
+          { data.get('image') !== ''
+            && (
+              <CardMedia
+                className={classes.media}
+                image={data.get('image')}
+                title={data.get('name')}
+              />
+            )
+          }
+          <CardContent>
+            <Typography component="p">
+              {data.get('content')}
+            </Typography>
+          </CardContent>
+          <CardActions className={classes.actions}>
+            <IconButton aria-label="Like this" onClick={() => onlike(data)}>
+              <FavoriteIcon className={data.get('liked') ? classes.liked : ''} />
+            </IconButton>
+            <IconButton aria-label="Share">
+              <ShareIcon />
+            </IconButton>
+            <div className={classes.rightIcon}>
+              <Typography variant="caption" component="span">
+                {data.get('comments') !== undefined ? data.get('comments').size : 0}
+              </Typography>
+              <IconButton aria-label="Comment" onClick={() => this.handleOpenComment(data)}>
+                <CommentIcon />
+              </IconButton>
+            </div>
+          </CardActions>
+        </Card>
+      </li>
+    ));
+    return (
+      <Fragment>
+        <Menu
+          id="long-menu"
+          anchorEl={anchorElOpt}
+          open={Boolean(anchorElOpt)}
+          onClose={this.handleCloseOpt}
+          PaperProps={{
+            style: {
+              maxHeight: ITEM_HEIGHT * 4.5,
+              width: 200,
+            },
+          }}
+        >
+          {optionsOpt.map(option => (
+            <MenuItem key={option} selected={option === 'Edit Profile'} onClick={this.handleCloseOpt}>
+              {option}
+            </MenuItem>
+          ))}
+        </Menu>
+        <Comment
+          open={openComment}
+          handleClose={this.handleCloseComment}
+          submitComment={submitComment}
+          dataComment={dataTimeline.getIn([commentIndex, 'comments'])}
+        />
+        <ul className={classes.timeline}>
+          {getItem(dataTimeline)}
+        </ul>
+      </Fragment>
+    );
+  }
+}
+
+Timeline.propTypes = {
+  classes: PropTypes.object.isRequired,
+  onlike: PropTypes.func,
+  dataTimeline: PropTypes.object.isRequired,
+  fetchComment: PropTypes.func,
+  submitComment: PropTypes.func,
+  commentIndex: PropTypes.number,
+};
+
+Timeline.defaultProps = {
+  onlike: () => (false),
+  fetchComment: () => {},
+  submitComment: () => {},
+  commentIndex: 0,
+};
+
+export default withStyles(styles)(Timeline);