Blog Page

• Blog Page

Blog Page

ExampleBlog Page

Updating filtered blogs based on selected categoryID

BlogPage Component

import React, { useState, useEffect } from "react";

import { Link, useParams, useNavigate } from "react-router-dom";

import Navbar from "../../components/Navbar";
import Categories from "../../components/Categories";
import Footer from "../../components/Footer";

import "./index.css";

const data = require("../../dummy-data.json");
const blogsData = data.blogPosts.reverse();

export default function BlogPage() {
  const navigate = useNavigate();
  const { blogId } = useParams();

  const [blog, setBlog] = useState(null);

  useEffect(() => {
    const blogRes = blogsData.filter((blog) => blog.id == blogId);
    if (blogRes.length) {
      setBlog(blogRes[0]);
    }
  }, [blogId]);

  const navigateToAuthorProfile = () => {
    navigate("/profile");
  };

  if (!blog) {
    return null;
  }

  return (
    <>
      <Navbar />
      <main className="container">
        <img src={blog.image} className="my-3 cover-img" alt="..." />
        <div className="row g-5">
          <div className="col-md-8">
            <article className="blog-post">
              <div className="my-5">
                <h2 className="blog-post-title">{blog.title}</h2>
                <p className="blog-post-meta">
                  {blog.updatedAt.slice(0, 10)} by{" "}
                  <Link to={"/profile/" + blog.author.id}>
                    {blog.author.firstName} {blog.author.lastName}
                  </Link>
                </p>
                <p>{blog.description}</p>
                <Categories blog={blog} />
              </div>
              <hr />
              {blog.content.map((content, index) => {
                return (
                  <div key={index} className="my-5">
                    <h2 className="my-3">{content.sectionHeader}</h2>
                    <p>{content.sectionText}</p>
                  </div>
                );
              })}
            </article>
          </div>
          <div className="author col-md-4" onClick={navigateToAuthorProfile}>
            <div className="position-sticky my-5" style={{ top: "2rem" }}>
              <div className="p-4 mb-3 bg-light rounded">
                <h4 className="fst-italic">About the author</h4>
                <img src={blog.author.image} className="avatar" alt="..." />
                <p>{blog.author.bio.substring(0, 100)}...</p>
              </div>
            </div>
          </div>
        </div>
      </main>
      <Footer />
    </>
  );
}

BlogsPage Component Styles

.cover-img {
  object-fit: cover;
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

.author {
}
.author:hover {
  cursor: pointer;
}

.avatar {
  display: block;
  border-radius: 50%;
  width: 50%;
  margin: 16px auto;
}