Skip to content

Instantly share code, notes, and snippets.

@devaman

devaman/FullPost.js

Created December 27, 2017 17:35
Show Gist options
  • Save devaman/63cced9d87754b90f64a213c9d5f16a8 to your computer and use it in GitHub Desktop.
Save devaman/63cced9d87754b90f64a213c9d5f16a8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. devaman created this gist Dec 27, 2017.
    55 changes: 55 additions & 0 deletions FullPost.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,55 @@
    import React, { Component } from 'react';
    import axios from 'axios';
    import './FullPost.css';
    import Spinner from '../../../components/Spinner/Spinner';

    class FullPost extends Component {
    state = {
    loadedPost: null,
    loading: false
    }
    componentDidMount() {
    console.log(this.props)
    this.loadData();

    }
    componentDidUpdate() {
    this.loadData();

    }
    loadData() {
    if (this.props.match.params.id) {
    if (!this.state.loadedPost || (this.state.loadedPost && this.state.loadedPost.id !== +this.props.match.params.id)) {
    this.setState({ loading: true })
    axios.get('https://jsonplaceholder.typicode.com/posts/' + this.props.match.params.id)
    .then(res => {
    // console.log(res);
    this.setState({ loadedPost: res.data, loading: false });
    })
    }
    }
    }
    render() {
    let post = <p style={{ textAlign: 'center' }}>Please select a Post!</p>;

    if (this.props.match.params.id || this.state.loading) {
    post = <Spinner />;
    }
    if (this.state.loadedPost && !this.state.loading)
    post = (
    <div className="FullPost">
    <h1>{this.state.loadedPost.title}</h1>
    <p>{this.state.loadedPost.body}</p>
    <div className="Edit">
    <button className="Delete">Delete</button>
    </div>
    </div>

    );


    return post;
    }
    }

    export default FullPost;