1 files changed, 169 insertions, 0 deletions
diff --git a/front/odiparpack/app/components/SocialMedia/WritePost.js b/front/odiparpack/app/components/SocialMedia/WritePost.js
new file mode 100644
index 0000000..3452aea
--- /dev/null
+++ b/front/odiparpack/app/components/SocialMedia/WritePost.js
@@ -0,0 +1,169 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Dropzone from 'react-dropzone';
+import { withStyles } from '@material-ui/core/styles';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+import Send from '@material-ui/icons/Send';
+import ActionDelete from '@material-ui/icons/Delete';
+import dummy from 'ba-api/dummyContents';
+import { IconButton, Fab, MenuItem, FormControl, Avatar, Paper, Select, Tooltip } from '@material-ui/core';
+import styles from './jss/writePost-jss';
+
+
+function isImage(file) {
+  const fileName = file.name || file.path;
+  const suffix = fileName.substr(fileName.indexOf('.') + 1).toLowerCase();
+  if (suffix === 'jpg' || suffix === 'jpeg' || suffix === 'bmp' || suffix === 'png') {
+    return true;
+  }
+  return false;
+}
+
+class WritePost extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      privacy: 'public',
+      files: [],
+      message: ''
+    };
+    this.onDrop = this.onDrop.bind(this);
+  }
+
+  onDrop(filesVal) {
+    const { files } = this.state;
+    let oldFiles = files;
+    const filesLimit = 2;
+    oldFiles = oldFiles.concat(filesVal);
+    if (oldFiles.length > filesLimit) {
+      console.log('Cannot upload more than ' + filesLimit + ' items.');
+    } else {
+      this.setState({ files: filesVal });
+    }
+  }
+
+  handleRemove(file, fileIndex) {
+    const thisFiles = this.state.files;
+    // This is to prevent memory leaks.
+    window.URL.revokeObjectURL(file.preview);
+
+    thisFiles.splice(fileIndex, 1);
+    this.setState({ files: thisFiles });
+  }
+
+  handleChange = event => {
+    this.setState({ privacy: event.target.value });
+  };
+
+  handleWrite = event => {
+    this.setState({ message: event.target.value });
+  };
+
+  handlePost = (message, files, privacy) => {
+    // Submit Post to reducer
+    this.props.submitPost(message, files, privacy);
+    // Reset all fields
+    this.setState({
+      privacy: 'public',
+      files: [],
+      message: ''
+    });
+  }
+
+  render() {
+    const { classes } = this.props;
+    let dropzoneRef;
+    const { privacy, files, message } = this.state;
+    const acceptedFiles = ['image/jpeg', 'image/png', 'image/bmp'];
+    const fileSizeLimit = 3000000;
+    const deleteBtn = (file, index) => (
+      <div className={classNames(classes.removeBtn, 'middle')}>
+        <IconButton onClick={() => this.handleRemove(file, index)}>
+          <ActionDelete className="removeBtn" />
+        </IconButton>
+      </div>
+    );
+    const previews = filesArray => filesArray.map((file, index) => {
+      const path = URL.createObjectURL(file) || '/pic' + file.path;
+      if (isImage(file)) {
+        return (
+          <div key={index.toString()}>
+            <figure><img src={path} alt="preview" /></figure>
+            {deleteBtn(file, index)}
+          </div>
+        );
+      }
+      return false;
+    });
+    return (
+      <div className={classes.statusWrap}>
+        <Paper>
+          <Avatar alt="avatar" src={dummy.user.avatar} className={classes.avatarMini} />
+          <textarea
+            row="2"
+            placeholder="What's on your mind?"
+            value={message}
+            onChange={this.handleWrite}
+          />
+          <Dropzone
+            className={classes.hiddenDropzone}
+            accept={acceptedFiles.join(',')}
+            acceptClassName="stripes"
+            onDrop={this.onDrop}
+            maxSize={fileSizeLimit}
+            ref={(node) => { dropzoneRef = node; }}
+          >
+            {({ getRootProps, getInputProps }) => (
+              <div {...getRootProps()}>
+                <input {...getInputProps()} />
+              </div>
+            )}
+          </Dropzone>
+          <div className={classes.preview}>
+            {previews(files)}
+          </div>
+          <div className={classes.control}>
+            <Tooltip id="tooltip-upload" title="Upload Photo">
+              <IconButton
+                className={classes.button}
+                component="button"
+                onClick={() => {
+                  dropzoneRef.open();
+                }}
+              >
+                <PhotoCamera />
+              </IconButton>
+            </Tooltip>
+            <div className={classes.privacy}>
+              <FormControl className={classes.formControl}>
+                <Select
+                  value={privacy}
+                  onChange={this.handleChange}
+                  name="privacy"
+                  className={classes.selectEmpty}
+                >
+                  <MenuItem value="public">Public</MenuItem>
+                  <MenuItem value="friends">Friends</MenuItem>
+                  <MenuItem value="private">Only Me</MenuItem>
+                </Select>
+              </FormControl>
+            </div>
+            <Tooltip id="tooltip-post" title="Post">
+              <Fab onClick={() => this.handlePost(message, files, privacy)} size="small" color="secondary" aria-label="send" className={classes.sendBtn}>
+                <Send />
+              </Fab>
+            </Tooltip>
+          </div>
+        </Paper>
+      </div>
+    );
+  }
+}
+
+WritePost.propTypes = {
+  classes: PropTypes.object.isRequired,
+  submitPost: PropTypes.func.isRequired
+};
+
+export default withStyles(styles)(WritePost);