SHARE
TWEET

Post component

a guest Dec 11th, 2019 71 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import { getPoem } from '../api/publicAPI';
  3. import '../App.scss';
  4. import LikeButton from '../components/LikeButton';
  5.  
  6. export default class Post extends Component {
  7.  
  8.     constructor(props) {
  9.         super(props);
  10.  
  11.         this.state = {
  12.             poemId: undefined,
  13.             title: '',
  14.             body: '',
  15.             author: '',
  16.             createdAt: undefined,
  17.             updatedAt: undefined,
  18.             likeCount: 0
  19.         }
  20.     }
  21.  
  22.  
  23.     async componentDidMount() {
  24.         console.log('I was triggered during componentDidMount')
  25.         this.setState({ poemId: this.props.poemId });
  26.         let poem;
  27.         try {
  28.             poem = await getPoem(this.props.poemId);
  29.             console.log(`This poem: ${poem.title}`)
  30.             this.setState({
  31.                 title: poem.title,
  32.                 body: poem.body,
  33.                 author: poem.author,
  34.                 createdAt: poem.createdAt,
  35.                 updatedAt: poem.createdAt,
  36.                 likeCount: poem.likeCount
  37.             });
  38.         } catch (error) {
  39.             console.log(`This poem is ${poem} and does not exist.`)
  40.         }
  41.  
  42.  
  43.     }
  44.  
  45.     render() {
  46.         console.log('I was triggered during render')
  47.         if (this.state.createdAt === undefined) {
  48.             return (<div> 404. Poem does not exist!</div>)
  49.         }
  50.         return (
  51.             <div class="card">
  52.                 <div class="card-content">
  53.                     <p class="title">
  54.                         {this.state.body}
  55.                     </p>
  56.                     <p class="subtitle">
  57.                         {this.state.author}
  58.                     </p>
  59.                     <p>
  60.                         Created on {(new Date(this.state.createdAt).toDateString())}
  61.                     </p>
  62.                 </div>
  63.                 <footer class="card-footer">
  64.                     <p class="card-footer-item">
  65.                         <span>
  66.                             Last modified at {(new Date(this.state.updatedAt).toLocaleTimeString())} on {(new Date(this.state.updatedAt).toLocaleDateString())}
  67.                         </span>
  68.                     </p>
  69.                     <p class="card-footer-item">
  70.                         <span>
  71.                             <LikeButton poemId={this.state.poemId} likeCount={this.state.likeCount} />
  72.                         </span>
  73.                     </p>
  74.                 </footer>
  75.             </div>
  76.         )
  77.     }
  78. }
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