import React  from "react";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
const Comment = (props) => (
    <form onSubmit={props.onSubmit}>
        <TextField
            type="text"
            id="outlined-multiline-static"
            label="Write A Comment"
            multiline
            name="comment_body"
            value={props.commentBody}
            rows="10"
            fullWidth
            margin="normal"
            variant="outlined"
            onChange={props.commentChange}
        />
        <Button type="submit" variant="outlined" component="span" color="primary">
            Post A Comment
        </Button>
    </form>

)
export default Comment;

import React from "react";
import Button from '@material-ui/core/Button';
import Grid from '@material-ui/core/Grid';
import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
import Divider from '@material-ui/core/Divider';
import Image from './Image';
import Axios from '../Axios';
import moment from 'moment';
import Comment from './Comment';

class ImageContainer extends React.Component{
    state = {
      isComment: false,
      comment_body: ""
    }

    handleCommentChange = (e) => {
        this.setState({
           comment_body: e.target.value
        })
    }

    writeComment = (id)  => {
        this.setState({
            isComment: this.state.isComment ? '' : id // check if you state is filled to toggle on/off comment
        })
    }

    commentSubmit = (e) => {
        e.preventDefault();
        console.log(this.state.comment_body); // doesn't get console.log
        Axios.post('/images/newComment', this.state.comment_body).then( (response )=> {
            const newComment = { ...response.data};
            console.log(newComment);
            this.setState({
                comment_body: ''
            })
        })
    }

    render(){
       const { img, deleteImg } = this.props
       return(
           <Grid item sm={12} md={12} style={{ margin: '30px 0px'}}>
               <Paper style={{padding:'20px 20px'}}>
         {/* // empty image_title */}
               <Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center">{img.image_title}</Typography>
               <Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" />
               <Image image_url={img.img_url} />
               <Typography variant="h6" align="center">{img.user.username}</Typography>
               <Typography variant="h6" align="center">{moment(img.created_at).calendar()}</Typography>
               <Button onClick ={() => this.writeComment(img.id)} variant="outlined" component="span" color="primary">
            {this.state.isComment === img.id ? "Close" : "Write A Comment"}
               </Button>
            {/* here were prevent comments being selected for all items in the array, renders the comment form you clicked on.  */}
            {this.state.isComment === img.id ?
               <Comment onSubmit={this.commentSubmit}
                            commentBody={this.state.comment_body }
                            commentChange={this.handleCommentChange}/>
            : null}
            {/* hide delete button when user enters comment */}
            {!this.state.isComment ? <Button style={{margin: '0px 20px'}} onClick={deleteImg} variant="outlined" component="span" color="primary">
                Delete
            </Button> : null}

            </Paper>
        </Grid>
      )
   }
}

export default ImageContainer

import React  from "react";
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
const Comment = (props) => {
    // <form onSubmit={props.onSubmit}>

    return(
        <div>
        <TextField
            type="text"
            id="outlined-multiline-static"
            label="Write A Comment"
            multiline
            name="comment_body"
            value={props.commentBody}
            rows="10"
            fullWidth
            margin="normal"
            variant="outlined"
            onChange={props.commentChange}
        />
        <Button onSubmit={props.onSubmit} type="submit" variant="outlined" component="span" color="primary">
            Post A Comment
        </Button>
        </div>
    );
    // </form>

}
export default Comment;

router.post('/newComment', async (req, res) => {
    const comment = new Comment({
        comment_body: req.body.comment_body,
        user_id: req.user.id
    })

    comment.save().then( (comment) => {
        return res.status(200).json(comment);
    })
})