Creating a Blogging App Using React, Part 3: Add & Display Posts

In the previous parts of this tutorial series, you saw how to implement the sign-up and sign-in functionality. In this part of the tutorial, you'll implement the user home page and allow the adding and displaying of blog posts.

I've created a simple UX layout to help you visualise the landing page of the blog. This will help you follow the post better. The functionalities to be covered are:

how to pass data between two pages via the route
how to save a post
how to open the chosen post

Getting Started

Let's get started by cloning the source code from this repository. Once the repository is cloned, you will be able to see the client-side code. Navigate to the project directory, and run the following command to install all the essential dependencies.

1	npm install
2	npm start

The Server

So far in the tutorial, we have been able to register and check if a user is present with the system. Now, we will see how to add and retrieve posts. To do this, we need to add a few more endpoints in the express server.

To get all posts from the database, we'll use the following get call.

app.get('/api/get/allposts', (req, res, next ) => {
  pool.query(`SELECT * FROM posts`, 
            (q_err, q_res) => {
                  res.json(q_res.rows)
  })
})

To get a specific post from the database, the query should contain the required post id. With this information, the following get endpoint can be used to retrieve a specific post.

app.get('/api/get/post', (req, res, next) => {
  const post_id = req.query.post_id

  pool.query(`SELECT * FROM posts
              WHERE pid=$1`,
            [ post_id ], (q_err, q_res) => {
                res.json(q_res.rows)
      })
} )

When you want to insert a new post into the database, you can use the following endpoint with a post call.

app.post('/api/post/posttodb', (req, res, next) => {
  const values = [ req.body.title, 
                   req.body.body,
                   req.body.uid, 
                   req.body.username]
  pool.query(`INSERT INTO posts(title, body, user_id, author, date_created)
              VALUES($1, $2, $3, $4, NOW() )`,
           values, (q_err, q_res) => {
          if(q_err) return next(q_err);
          res.json(q_res.rows)
    })
})

The above changes are adequate to prepare the client for displaying and adding new posts to the database. The previous posts talk about how to set up the server and get started with the project.

The Client

A little recap: so far in the series, the client application has a sign-in and sign-up page. In this tutorial, we are going to build the landing page and a page for displaying the post.

We will modify our initial routes array to include a new route for /post and another for /landing.

const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  .
  .
  {
    path: "/landing",
    element: <Landing />,
  },
  {
    path: "/post",
    element: <Post />,
  }
]);

The Landing Page

Once the user signs in or signs up, they will be redirected to the landing page. /landing/index.js will have the code discussed below.

During redirection, the email, UID, and user name will be sent to the landing page. On the landing page, we will extract this information from the location.

import { useLocation } from 'react-router-dom';
.
.
const { state } = useLocation();
const { email, username, uid } = state;

We are going to define the following state variables:

showModal: decide if the modal has to be shown or not.
posts: array of posts to be shown to the user on the landing page. By default, it will be an empty array.
refresh: reload the page, if true.

1	const [showModal, setShowModal] = useState(false)
2	const [refresh, setRefresh] = useState(false)
3	const [posts, setPosts] = useState([])
4

When the landing page is loaded, the useEffect hook will be called. The [] in the definition of useEffect specifies that useEffect will be called only once. Inside this useEffect, we will load all the user's posts.

1	useEffect(()=>{
2	loadAllPostsOfUser()
3	},[])

The loadAllPostsOfUser will use the /api/get/allposts endpoint to fetch all the user's posts. Once the response arrives, we will populate the state posts. An interesting thing about React functional hooks is that changes will reflect automatically. When the state of the post changes, the UI will render again.

const loadAllPostsOfUser = () => {
    axios.get('/api/get/allposts')
      .then(res => setPosts(res.data) )
      .catch((err) => console.log(err))
}

Now that we have the posts, let's build the UI as seen in the mock UX. For this, we will iterate through the posts and display the post title. On clicking the post title, we will navigate to a new route called /post. During navigation, we'll send details of the post_id to /post to load the right post.

const openPost = (post_id) => {
    navigate(`/post`, {
      email: email,
      uid: uid,
      username: username,
      post_id: post_id
    })
  }
.
.
return (
<div className="post_container">
    {posts.map((post, index) => 
    <React.Fragment>
      <span>{index + 1}</span>
      <span className="post_title" onClick={()=>openPost(post.id)}>{post.name}</span>
    </React.Fragment>
    )}
</div>
)

Now, let's work on the header of the landing page. The header has the following items:

a button to open a modal for creating a new post
a button to sign out of the application
a title that welcomes the user, along with their email ID. The username and email are fetched from the location object.

const openAddNewPostModal = () => {
    setShowModal(true)
}
.
.
.
<div className='title'>
    Hello {username} [{email}]!
    <button onClick={()=>openAddNewPostModal()}>Add New Post</button>
    <button onClick={()=>signOutOfSystem()}>Sign out</button>
</div>

Next, we are going to create modal.js and modal.css. The modal will be seen when the user clicks on the Add New Post button. The modal appears below.

The modal takes the following properties:

handleClose: a function that will be called when the user closes the modal.
show: a boolean parameter that decides if the modal should be shown or hidden
children: a Node that has the elements to be shown inside the modal

1	const Modal = ({ handleClose, show, children }) => {
2	...
3	};

The modal strongly depends on its CSS. We will import the modal's CSS from modal.css. If the modal is shown, the parameter show will be true. With show equal to true, the classname display-block with the property display: block will be applied to the body of the modal. This will make the children visible in the modal. And when show is false, display-none with the property display:none will be applied. This will hide the children inside the modal.

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";
    ....
};

Now, showing children elements inside the modal is simple. The modal has a button that can be used to close and hide it. Modal.css has the styling required to change the look and feel of the modal. And {children} will be passed from landing.js.

import './modal.css';

const Modal = ({ handleClose, show, children }) => {
  const showHideClassName = show ? "modal display-block" : "modal display-none";

  return (
    <div className={showHideClassName}>
      <section className="modal-main">
        {children}
        <button className="buttonPosition" type="button" onClick={handleClose}>
          Close
        </button>
      </section>
    </div>
  );
};

Modal.css will have the following code.

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width:100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
  
.modal-main {
  position:fixed;
  background: white;
  width: 80%;
  height: 500px;
  border-radius: 20px;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: column;
  padding: 50px;
}

.display-block {
  display: block;
}

.display-none {
  display: none;
}

Our next goal is to call modal.js from landing.js. For this, we will use the showModal state variable to decide if the modal needs to be visible or not. handleClose is a function passed from landing.js to modal.js. handleClose will set the value of showModal. The handleSubmit function will call the endpoint /api/post/posttodb with details of the post and the user. This endpoint will add a new post in the database.

...
import './index.css';
import Modal from './modal'
...

function Landing() {
 ...
  const { email, username, uid } = state;
  const [showModal, setShowModal] = useState(false)
 ...

  useEffect(()=>{
    setShowModal(false)
  }, [refresh])

 ...

  const openAddNewPostModal = () => {
    setShowModal(true)
  }

  const handleSubmit = (event) => {
    event.preventDefault()
    const data = {title: event.target.title.value,
                  body: event.target.body.value,
                  username: username,
                  uid: uid}

    axios.post('/api/post/posttodb', data)
      .then(response => console.log(response))
      .catch((err) => console.log(err))
      .then(setTimeout(() => setRefresh(!refresh), 700) )
  }

  return (
    <div className="container">
     ...
      <Modal show={showModal} handleClose={()=>setShowModal(!showModal)}>
          <form onSubmit={handleSubmit} className='modalContainer'>
            <span>Title of the Blog</span><input type='text'/>
            <span>Subject</span><textarea/>
            <button type='submit'>Submit</button>
            </form>
      </Modal>
      ...
    </div>
  );
}

export default Landing;

Once the post is successfully added to the database, the value of refresh will be toggled. Any change in the refresh value will call the useEffect shown below. This will set false to showModal and hide the modal. Also, the whole landing.js page will be reloaded. Consequently, the newly added post will be seen in the list of posts.

1	useEffect(()=>{
2	setShowModal(false)
3	}, [refresh])

The last step in adding a post is to show it in the UI. For this, we will create two files: post.js and post.css. The post.js page will be loaded when the user clicks on the image name in landing.js. Our post.js page appears as below.

Upon loading post.js, the post_id, usename, email, and uid will be available through the useLocation hook. With the post_id, we will call the /api/get/post endpoint to fetch the post.

  useEffect(()=>{
    if(post_id && uid) {
      axios.get('/api/get/post',
        {params: {post_id: post_id}} )
        .then(res => res.data.length !== 0
                ?   setPost({likes: res.data[0].likes,
                        like_user_ids: res.data[0].like_user_id,
                        post_title: res.data[0].title,
                        post_body: res.data[0].body,
                        post_author: res.data[0].author
                      })
                 : null
              )
        .catch((err) => console.log(err) )
    }
  }, [post_id])

Once the post is retrieved from the database, the state variable post will be populated with its details. As soon as the state variable is modified, the UI will render again with the post. We will use the optional chaining operator (?) to make sure the UI does not break when the state variable post is empty.

import React, { useEffect, useState } from 'react';
import { useLocation } from 'react-router-dom';
import './post.css';
import './index.css';
import axios from 'axios';

function Post() {
  const { state } = useLocation();
  const { email, username, uid, post_id } = state || {username: 'Tuts+ Envato', email: 'tuts@envato.com', uid: '123', post_id: 1}
  const [post, setPost] = useState()
  
  useEffect(()=>{
    if(post_id && uid) {
      axios.get('/api/get/post',
        {params: {post_id: post_id}} )
        .then(res => res.data.length !== 0
                ?   setPost({likes: res.data[0].likes,
                        like_user_ids: res.data[0].like_user_id,
                        post_title: res.data[0].title,
                        post_body: res.data[0].body,
                        post_author: res.data[0].author
                      })
                 : null
              )
        .catch((err) => console.log(err) )
    }
  }, [post_id])

  const signOutOfSystem = () => {
  ...
  }
  
  return (
    <div className="container">
       <div className='title'>
      Hello {username} [{email}]!

      {!uid && <div>Seems like you are not logged in!</div>}
      <button onClick={()=>signOutOfSystem()}>Sign out</button>
      </div>
      <br/>
      <div>
        {post?.post_title} by {post.post_author}
      </div>
      <br/>
      <br/>
      <section>
        {post?.post_body}
      </section>
      <br/>
      <br/>
      <aside>
        {post.likes > 0 ? <div>Liked by {post?.likes} readers</div>: null} 
      </aside>
    </div>
  );
}

export default Post;

Conclusion

With this, we have built landing.js, modal.js, and post.js to add and show posts in our blog. Also, we have designed and developed the get post, add post, and show all posts endpoints in our Express server.

The entire workflow is extremely interesting. It has many components that come together quite easily with the help of functional React hooks. We have taken a closer look at a few commonly used hooks like useLocation, useNavigation, useState, and useEffect. As you start building this blog by yourself, you will see how often these hooks are used in React.

The next part of this tutorial focuses on how to edit and delete a post. Try to implement this functionality yourself—before reading the next post!