Add pagination to changelog

mixpanel · May 8, 2024 · b3a1dfa · b3a1dfa
1 parent 0091786
commit b3a1dfa
Showing 1 changed file with 73 additions and 24 deletions.
diff --git a/components/changelog-index.js b/components/changelog-index.js
@@ -1,3 +1,4 @@
+import React, { useState, useEffect } from 'react';
 import { getPagesUnderRoute } from "nextra/context";
 import ExtendedButton from '/components/ExtendedButton/ExtendedButton'
 import Link from "next/link";
@@ -33,29 +34,77 @@ const renderMedia = (page) => {
   return "";
 };
 
-export default function ChangelogIndex() {
-  return getPagesUnderRoute("/changelogs").map((page) => {
-    return (
-      <div key={page.route} className="mb-10">
-        <h3>
-          <Link
-            href={page.route}
-            style={{ color: "inherit", textDecoration: "none" }}
-            className="block font-semibold mt-8 text-2xl "
-          >
-            {page.meta?.title || page.frontMatter?.title || page.name}
-          </Link>
-        </h3>
-        {page.frontMatter?.date ? (
-          <p className="opacity-50 text-sm mt-1 mb-2 leading-7">
-            {page.frontMatter.date}
-          </p>
-        ) : null}
-
-        {renderMedia(page)}
+export default function ChangelogIndex({ more = "Read more" }) {
+  const allPages = getPagesUnderRoute("/changelogs");
+  const itemsPerPage = 10;
+  const [displayedPages, setDisplayedPages] = useState([]);
+  const [pageIndex, setPageIndex] = useState(0);
 
-        <ExtendedButton  title="Read more" link={page.route}></ExtendedButton>
-      </div>
-    );
-  });
+  // Load initial or additional pages
+  useEffect(() => {
+    console.log(pageIndex);  // Check the current page index
+    const morePages = allPages.slice(pageIndex, pageIndex + itemsPerPage);
+    setDisplayedPages(prev => [...prev, ...morePages]);
+  }, [pageIndex]);
+
+  const loadMore = () => {
+    setPageIndex(prev => prev + itemsPerPage);
+  };
+
+  return (
+    <div>
+      {displayedPages.map((page) => (
+        <div key={page.route} className="mb-10">
+          <h3>
+            <Link
+              href={page.route}
+              style={{ color: "inherit", textDecoration: "none" }}
+              className="block font-semibold mt-8 text-2xl "
+            >
+              {page.meta?.title || page.frontMatter?.title || page.name}
+            </Link>
+          </h3>
+          {page.frontMatter?.date ? (
+            <p className="opacity-50 text-sm mt-1 mb-2 leading-7">
+              {page.frontMatter.date}
+            </p>
+          ) : null}
+
+          {renderMedia(page)}
+
+          <p className="opacity-80 mt-6 leading-7">
+          {page.frontMatter?.description}{" "}
+          <span className="inline-block">
+            <Link
+              href={page.route}
+              className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
+            >
+              {more + " →"}
+            </Link>
+          </span>
+        </p>
+        </div>
+      ))}
+    {pageIndex + itemsPerPage < allPages.length && (
+      <button onClick={loadMore} className="text-white 
+      
+      // Background
+      bg-gradient-to-b from-purple50 to-purple100 hover:from-purple50 hover:to-purple100 active:from-purple50 active:to-purple140
+  
+      // Shadow
+      shadow-sm hover:shadow-md
+  
+      // Shadow
+      rounded-full hover:rounded-lg 
+      
+      // Font 
+      font-medium  text-md 
+      
+      // Padding
+      px-7 py-2.5">
+        Load More
+      </button>
+    )}
+  </div>
+  );
 }