From 82a7fb1429d7704f6d66622ae9509f878ade9131 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Thu, 11 Jan 2024 10:32:17 +0300
Subject: [PATCH 1/3] Add related blogs header

---
 src/APP/pages/blog/sections/RelatedBlogs.jsx | 35 +++++++++++---------
 1 file changed, 20 insertions(+), 15 deletions(-)

diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx
index 04ea6083..4ffed94d 100644
--- a/src/APP/pages/blog/sections/RelatedBlogs.jsx
+++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx
@@ -30,21 +30,26 @@ function RelatedBlogs({ blogId, categoryId }) {
       {isLoading && <p>Loading blogs...</p>}
 
       {isSuccess && (
-        <div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
-          {Array.isArray(filteredRelatedBlogs) &&
-          filteredRelatedBlogs.length > 0 ? (
-            filteredRelatedBlogs.filter(function(blog){
-              if(blog.id === blogId ) {
-                return false;
-              }
-              return true;
-            }).map((blog) => (
-              <BlogCard key={blog.id} blog={blog} />
-            ))
-          ) : (
-            <p>No related blogs found!</p>
-          )}
-        </div>
+        <>
+          <h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">
+            Related Blogs
+          </h2>
+          <div className="grid sm:grid-cols-2 gap-16 grid-cols-1 py-16">
+            {Array.isArray(filteredRelatedBlogs) &&
+            filteredRelatedBlogs.length > 0 ? (
+              filteredRelatedBlogs
+                .filter(function (blog) {
+                  if (blog.id === blogId) {
+                    return false;
+                  }
+                  return true;
+                })
+                .map((blog) => <BlogCard key={blog.id} blog={blog} />)
+            ) : (
+              <p className="text-lg italic">No related blogs found!</p>
+            )}
+          </div>
+        </>
       )}
     </>
   );

From 11596e7edf77522c39a0091e0ac8dbe2ab623e0c Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Thu, 11 Jan 2024 16:27:37 +0300
Subject: [PATCH 2/3] conditionally render related blogs

---
 src/APP/pages/blog/sections/RelatedBlogs.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/APP/pages/blog/sections/RelatedBlogs.jsx b/src/APP/pages/blog/sections/RelatedBlogs.jsx
index 4ffed94d..b669aca9 100644
--- a/src/APP/pages/blog/sections/RelatedBlogs.jsx
+++ b/src/APP/pages/blog/sections/RelatedBlogs.jsx
@@ -29,7 +29,7 @@ function RelatedBlogs({ blogId, categoryId }) {
       {isError && <p>Error loading blogs!</p>}
       {isLoading && <p>Loading blogs...</p>}
 
-      {isSuccess && (
+      {isSuccess && filteredRelatedBlogs.length > 0 && (
         <>
           <h2 className="text-2xl text-gray-500 font-semibold underline decoration-green-600 underline-offset-2">
             Related Blogs

From ae632239d619a197ae00e0e97c93318eca420302 Mon Sep 17 00:00:00 2001
From: felixNyalenda <felixasejunior@gmail.com>
Date: Thu, 11 Jan 2024 16:30:44 +0300
Subject: [PATCH 3/3] conditionally render related blogs

---
 src/APP/pages/blogs/sections/BlogsWrapper.jsx | 13 +------------
 1 file changed, 1 insertion(+), 12 deletions(-)

diff --git a/src/APP/pages/blogs/sections/BlogsWrapper.jsx b/src/APP/pages/blogs/sections/BlogsWrapper.jsx
index 77ba83c4..2d1a199d 100644
--- a/src/APP/pages/blogs/sections/BlogsWrapper.jsx
+++ b/src/APP/pages/blogs/sections/BlogsWrapper.jsx
@@ -1,4 +1,3 @@
-
 /* eslint-disable operator-linebreak */
 /* eslint-disable react/jsx-indent */
 import React, { useState, useEffect, useContext } from "react";
@@ -16,14 +15,11 @@ import {
 
 import { filterBlogsByCat } from "../../../../utilities/FilterBlogs";
 
-
 function SearchResults({ searchText }) {
   return (
     <h3 className="text-black text-xl md:text-3xl font-semibold leading-8 md:leading-loose text-center">
-
       Showing results for
-      <span className="text-primary">"{searchText}"</span>
-
+      <span className="text-primary"> "{searchText}"</span>
     </h3>
   );
 }
@@ -34,7 +30,6 @@ function BlogsWrapper() {
   const [selectedCat, setSelectedCat] = useState("");
   const [page, setPage] = useState(1);
 
-
   const {
     data: blogsData,
     refetch: refetchBlogsData,
@@ -54,7 +49,6 @@ function BlogsWrapper() {
     setPage((prevState) => (prevState = index));
   };
 
-
   const handleFilter = (categoryId) => {
     setSelectedCat(categoryId);
   };
@@ -66,12 +60,10 @@ function BlogsWrapper() {
   const allBlogs =
     filteredBlogs && Array.isArray(filteredBlogs)
       ? filteredBlogs.map((blog) => <BlogCard key={blog.id} blog={blog} />)
-
       : null;
 
   return (
     <div className="flex flex-col items-start md:items-center gap-6 px-4 pt-4 xl:px-14 w-full mb-10">
-
       {isError && <Error500 />}
       {isLoading && (
         <div className="w-full flex flex-col items-center justify-center gap-5 py-10">
@@ -82,7 +74,6 @@ function BlogsWrapper() {
       {isSuccess && (
         <>
           <div className="w-full md:w-fit overflow-x-auto md:overflow-auto flex flex-row items-center gap-4 md:px-3 md:gap-3 md:mb-2">
-
             {statusBlogCategories === "error" && (
               <p>Error loading blog categories!</p>
             )}
@@ -102,7 +93,6 @@ function BlogsWrapper() {
             blogCategories &&
             Array.isArray(blogCategories)
               ? blogCategories.map((blog) => (
-
                   <button
                     type="button"
                     key={blog.id}
@@ -113,7 +103,6 @@ function BlogsWrapper() {
                   >
                     {blog.name}
                   </button>
-
                 ))
               : null}
           </div>