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

This tutorial demonstrates building a blog's user home page with post adding and display functionality. Previous sections covered sign-up and sign-in. This part focuses on data transfer between pages via routing, post saving, and post retrieval.

A sample landing page UX is provided:

Getting Started:

Clone the repository and install dependencies using:

npm install
npm start

Server-Side Enhancements:

New Express server endpoints handle post retrieval and creation. Retrieving 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=`, [post_id], (q_err, q_res) => {
    res.json(q_res.rows);
  });
});

Adding a new post:

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(, , , , NOW())`, values, (q_err, q_res) => {
    if (q_err) return next(q_err);
    res.json(q_res.rows);
  });
});

Client-Side Development:

The client application now includes a landing page and a post display page. The routing is updated:

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

Landing Page (landing/index.js):

Upon successful login/signup, users are redirected to the landing page, receiving email, UID, and username via the route's state.

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

State variables track posts (posts) and a refresh flag (refresh). useEffect loads user posts:

useEffect(() => {
  loadAllPostsOfUser();
}, []);

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

The UI iterates through posts, displaying titles; clicking a title navigates to /post. A modal allows new post creation. A modal component (Modal.js) manages visibility:

const Modal = ({ handleClose, show, children }) => {
  // ...
};

Modal styling is in modal.css. The landing page includes a button to open the modal, a form for submitting new posts, and the post list. The handleSubmit function sends data to /api/post/posttodb.

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));
};

Post Display Page (post.js):

This page displays individual posts. It uses useLocation to get post_id, email, and username. useEffect fetches post details via /api/get/post.

import { useLocation } from 'react-router-dom';
// ...
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]);

Conclusion:

This completes the implementation of the blog's post adding and display features. The next tutorial will cover post editing and deletion. The example utilizes React hooks effectively.

The above is the detailed content of Creating a Blogging App Using React, Part 3: Add & Display Posts. For more information, please follow other related articles on the PHP Chinese website!