ReactPress Blog

Blog.js

import React, { Component } from 'react';
import { Container, Row, Col } from 'reactstrap';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';

import * as actionMethods from '../../store/actions/index.actions'; //Exports all action methods allowing easy import
import Post from '../../components/Post/Post';

class Blog extends Component{

  componentDidMount(){
    this.props.loadAllPosts(5);
  }

  readMoreHandler = (id) => {
    //Send selected post to Post component 
    this.props.history.push('/post?id=' + id);
  }

  render(){
    //Create a list of retrieved posts
    let postsList = <h1>No Posts Yet!</h1>;
    if(this.props.posts !== null){
      postsList = this.props.posts.map(post => {
        return <Post 
                key={post.id} 
                title={post.title.rendered} 
                excerpt={post.excerpt.rendered} 
                medialink={post.media_link} 
                postId={post.id}
                onReadMore={this.readMoreHandler}/>
      });
    }
    
    return(
      <Container>
        <Row>
          <Col><h1>All Posts</h1></Col>
        </Row>
        {postsList}
      </Container>
    )
  }
};

//Map store data and actions to props
const mapStateToProps = state => {
  return{
    posts: state.postsRed.posts,
    error: state.postsRed.error
  }
};

const mapDispatchToProps = dispatch => {
  return {
    loadAllPosts: (perpage) => {dispatch(actionMethods.loadAllPosts(perpage))}
  }
};

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Blog));

Post.js

import React from 'react';
import { Row, Col, Button } from 'reactstrap';
import ReactHtmlParser from 'react-html-parser';

import './Post.css';

const post = props => {

  let titleHtml = ReactHtmlParser(props.title);
  let excerptHtml = ReactHtmlParser(props.excerpt);
  //Use the same component to display Single Post
  return (
    <Row>
      <Col xs="12" md="12">{titleHtml}</Col>
      <Col xs="12" md="4">
        <img className="excerpt-img" alt={props.postId} src={props.medialink} />
      </Col>
      <Col xs="12" md="8">{excerptHtml}</Col>
      <Col xs="12" md="12" className="text-right">
        <Button color="primary" onClick={() => props.onReadMore(props.postId)}>Read More</Button>
      </Col>
    </Row>
  );
};

export default post;

SinglePost.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Container, Row, Col } from 'reactstrap';
import ReactHtmlParser from 'react-html-parser';

import * as actionMethods from '../../store/actions/index.actions';

class singlePost extends Component {

  componentDidMount(){
    //Call Load Post Action Method after retrieving ID from URL
    const params = new URLSearchParams(this.props.location.search);
    const pID = params.get('id');
    this.props.onLoadSinglePost(pID);
  }

  render(){
    let content = <h2>Post loading...</h2>;
    if(this.props.post !== null){
      content = (
        <React.Fragment>
          <Col xs="12" md="12">{ReactHtmlParser(this.props.post.title.rendered)}</Col>
          <Col xs="12" md="12"><img className="post-img" alt={this.props.post.title.rendered} src={this.props.post.medialink} /></Col>
          <Col xs="12" md="12">{ReactHtmlParser(this.props.post.content.rendered)}</Col>
        </React.Fragment>
      )
    }
    return (
      <Container>
      <Row>
        {content}
      </Row>
      </Container>
    );
  }
};

const mapStateToProps = state => {
  return {
    post: state.postsRed.singlePost,
    error: state.postsRed.error
  }
};

const mapDispatchToProps = dispatch => {
  return {
    onLoadSinglePost: (pid) => {dispatch(actionMethods.loadSinglePost(pid))}
  }
}


export default connect(mapStateToProps, mapDispatchToProps)(singlePost);