Added load more button in /blog endpoint, as it was asked in Design Audit

Author: NalinDalal

README.md

@@ -406,6 +406,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     </tr>
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/raj17ce"><img src="https://avatars.githubusercontent.com/u/116947399?v=4?s=100" width="100px;" alt="Raj Patel"/><br /><sub><b>Raj Patel</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=raj17ce" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/nalindalal"><img src="https://avatars.githubusercontent.com/u/116961144?v=4&size=64" width="100px;" alt="Nalin Dalal"/><br /><sub><b>Nalin Dalal</b></sub></a><br /><a href="https://github.com/asyncapi/website/commits?author=nalindalal" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package-lock.json

@@ -92,7 +92,6 @@
     "node-fetch": "^3.3.2",
     "node-fetch-2": "npm:node-fetch@^2.7.0",
     "postcss": "^8.4.35",
-    "prettier": "^3.3.3",
     "react": "^18",
     "react-dom": "^18",
     "react-ga": "^3.3.1",
@@ -156,6 +155,7 @@
     "inquirer": "^9.2.14",
     "jest": "^29.7.0",
     "postcss-import": "^16.0.1",
+    "prettier": "^3.5.2",
     "remark-cli": "^12.0.1",
     "remark-lint": "^10.0.0",
     "remark-mdx": "^3.0.1",

package.json

@@ -21,48 +21,52 @@ export default function BlogIndexPage() {
   const router = useRouter();
   const { navItems } = useContext(BlogContext);
 
-  const [posts, setPosts] = useState<IBlogPost[]>(
-    navItems
-      ? navItems.sort((i1: IBlogPost, i2: IBlogPost) => {
-          const i1Date = new Date(i1.date);
-          const i2Date = new Date(i2.date);
+  const [posts, setPosts] = useState<IBlogPost[]>([]);
+  const [isClient, setIsClient] = useState(false);
+  const [visiblePosts, setVisiblePosts] = useState(9); // Number of posts initially visible
 
-          if (i1.featured && !i2.featured) return -1;
-          if (!i1.featured && i2.featured) return 1;
+  useEffect(() => {
+    if (navItems) {
+      const sortedPosts = navItems.sort((i1: IBlogPost, i2: IBlogPost) => {
+        const i1Date = new Date(i1.date);
+        const i2Date = new Date(i2.date);
 
-          return i2Date.getTime() - i1Date.getTime();
-        })
-      : []
-  );
-  const [isClient, setIsClient] = useState(false);
+        if (i1.featured && !i2.featured) return -1;
+        if (!i1.featured && i2.featured) return 1;
+
+        return i2Date.getTime() - i1Date.getTime();
+      });
 
-  const onFilter = (data: IBlogPost[]) => setPosts(data);
-  const toFilter = [
-    {
-      name: 'type'
-    },
-    {
-      name: 'authors',
-      unique: 'name'
-    },
-    {
-      name: 'tags'
+      setPosts(sortedPosts);
     }
-  ];
+  }, [navItems]);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  const loadMore = () => {
+    setVisiblePosts((prev) => prev + 9); // Load additional 9 posts
+  };
+
+  const onFilter = (data: IBlogPost[]) => {
+    setPosts(data);
+    setVisiblePosts(9); // Reset visible posts on filter change
+  };
+
+  const toFilter = [{ name: 'type' }, { name: 'authors', unique: 'name' }, { name: 'tags' }];
+
   const clearFilters = () => {
     router.push(`${router.pathname}`, undefined, {
       shallow: true
     });
   };
+
   const showClearFilters = Object.keys(router.query).length > 0;
 
   const description = 'Find the latest and greatest stories from our community';
   const image = '/img/social/blog.webp';
 
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-
   return (
     <GenericLayout title='Blog' description={description} image={image} wide>
       <div className='relative px-4 pb-20 pt-8 sm:px-6 lg:px-8 lg:pb-28 lg:pt-12' id='main-content'>
@@ -122,7 +126,7 @@ export default function BlogIndexPage() {
             )}
             {Object.keys(posts).length > 0 && isClient && (
               <ul className='mx-auto mt-12 grid max-w-lg gap-5 lg:max-w-none lg:grid-cols-3'>
-                {posts.map((post, index) => (
+                {posts.slice(0, visiblePosts).map((post, index) => (
                   <BlogPostItem key={index} post={post} />
                 ))}
               </ul>
@@ -132,6 +136,17 @@ export default function BlogIndexPage() {
                 <Loader loaderText='Loading Blogs' className='mx-auto my-60' pulsating />
               </div>
             )}
+            {visiblePosts < posts.length && isClient && (
+              <div className='mt-8 flex justify-center'>
+                <button
+                  type='button'
+                  className='rounded-md bg-primary-500 px-6 py-3 text-white shadow-md transition duration-300 hover:bg-primary-600'
+                  onClick={loadMore}
+                >
+                  Load More
+                </button>
+              </div>
+            )}
           </div>
         </div>
       </div>