SHARE
TWEET

Untitled

a guest Jun 15th, 2019 53 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React  from "react";
  2. import TextField from '@material-ui/core/TextField';
  3. import Button from '@material-ui/core/Button';
  4. const Comment = (props) => (
  5.     <form onSubmit={props.onSubmit}>
  6.         <TextField
  7.             type="text"
  8.             id="outlined-multiline-static"
  9.             label="Write A Comment"
  10.             multiline
  11.             name="comment_body"
  12.             value={props.commentBody}
  13.             rows="10"
  14.             fullWidth
  15.             margin="normal"
  16.             variant="outlined"
  17.             onChange={props.commentChange}
  18.         />
  19.         <Button type="submit" variant="outlined" component="span" color="primary">
  20.             Post A Comment
  21.         </Button>
  22.     </form>
  23.  
  24. )
  25. export default Comment;
  26.      
  27. import React from "react";
  28. import Button from '@material-ui/core/Button';
  29. import Grid from '@material-ui/core/Grid';
  30. import Typography from '@material-ui/core/Typography';
  31. import Paper from '@material-ui/core/Paper';
  32. import Divider from '@material-ui/core/Divider';
  33. import Image from './Image';
  34. import Axios from '../Axios';
  35. import moment from 'moment';
  36. import Comment from './Comment';
  37.  
  38. class ImageContainer extends React.Component{
  39.     state = {
  40.       isComment: false,
  41.       comment_body: ""
  42.     }
  43.  
  44.     handleCommentChange = (e) => {
  45.         this.setState({
  46.            comment_body: e.target.value
  47.         })            
  48.     }
  49.  
  50.     writeComment = (id)  => {
  51.         this.setState({
  52.             isComment: this.state.isComment ? '' : id // check if you state is filled to toggle on/off comment
  53.         })  
  54.     }
  55.  
  56.     commentSubmit = (e) => {
  57.         e.preventDefault();
  58.         console.log(this.state.comment_body); // doesn't get console.log
  59.         Axios.post('/images/newComment', this.state.comment_body).then( (response )=> {
  60.             const newComment = { ...response.data};
  61.             console.log(newComment);
  62.             this.setState({
  63.                 comment_body: ''
  64.             })
  65.         })
  66.     }
  67.  
  68.     render(){
  69.        const { img, deleteImg } = this.props
  70.        return(
  71.            <Grid item sm={12} md={12} style={{ margin: '30px 0px'}}>
  72.                <Paper style={{padding:'20px 20px'}}>
  73.          {/* // empty image_title */}
  74.                <Typography style={{ padding: '30px 5px', letterSpacing:'8px', textTransform:'uppercase'}} variant="h4" align="center">{img.image_title}</Typography>
  75.                <Divider style={{ width: '150px', margin:'10px auto', backgroundColor:'#000000'}} variant="middle" />
  76.                <Image image_url={img.img_url} />  
  77.                <Typography variant="h6" align="center">{img.user.username}</Typography>
  78.                <Typography variant="h6" align="center">{moment(img.created_at).calendar()}</Typography>
  79.                <Button onClick ={() => this.writeComment(img.id)} variant="outlined" component="span" color="primary">
  80.             {this.state.isComment === img.id ? "Close" : "Write A Comment"}
  81.                </Button>
  82.             {/* here were prevent comments being selected for all items in the array, renders the comment form you clicked on.  */}
  83.             {this.state.isComment === img.id ?
  84.                <Comment onSubmit={this.commentSubmit}
  85.                             commentBody={this.state.comment_body }
  86.                             commentChange={this.handleCommentChange}/>
  87.             : null}
  88.             {/* hide delete button when user enters comment */}
  89.             {!this.state.isComment ? <Button style={{margin: '0px 20px'}} onClick={deleteImg} variant="outlined" component="span" color="primary">
  90.                 Delete
  91.             </Button> : null}
  92.  
  93.             </Paper>                              
  94.         </Grid>        
  95.       )
  96.    }
  97. }
  98.  
  99. export default ImageContainer
  100.      
  101. import React  from "react";
  102. import TextField from '@material-ui/core/TextField';
  103. import Button from '@material-ui/core/Button';
  104. const Comment = (props) => {
  105.     // <form onSubmit={props.onSubmit}>
  106.  
  107.     return(
  108.         <div>
  109.         <TextField
  110.             type="text"
  111.             id="outlined-multiline-static"
  112.             label="Write A Comment"
  113.             multiline
  114.             name="comment_body"
  115.             value={props.commentBody}
  116.             rows="10"
  117.             fullWidth
  118.             margin="normal"
  119.             variant="outlined"
  120.             onChange={props.commentChange}
  121.         />
  122.         <Button onSubmit={props.onSubmit} type="submit" variant="outlined" component="span" color="primary">
  123.             Post A Comment
  124.         </Button>
  125.         </div>
  126.     );
  127.     // </form>
  128.  
  129. }
  130. export default Comment;
  131.      
  132. router.post('/newComment', async (req, res) => {
  133.     const comment = new Comment({
  134.         comment_body: req.body.comment_body,
  135.         user_id: req.user.id
  136.     })
  137.  
  138.     comment.save().then( (comment) => {
  139.         return res.status(200).json(comment);
  140.     })
  141. })
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top