initial commit

pages/posts/[[...slug]].tsx

@@ -0,0 +1,116 @@
+import { ContentContainer, Page } from "@/components/layouts/layouts";
+import { Input } from "@/components/ui/input";
+import { Footer } from "@/components/utils/Footer";
+import { NavBar } from "@/components/utils/NavBar";
+import { PostList } from "@/components/utils/PostList";
+import { SEO } from "@/components/utils/SEO";
+import { PostCountPerPagination } from "@/consts/consts";
+import { Config } from "@/data/config";
+import { sortedPosts } from "@/lib/post-process";
+import { paginateArray } from "@/lib/utils";
+import { fontFzxbs } from "@/styles/font";
+import { TPostListItem } from "@/types/post-list";
+import { GetStaticPaths, GetStaticProps } from "next";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { ChangeEvent, KeyboardEvent, useEffect, useState } from "react";
+import { LuPenTool } from "react-icons/lu";
+
+type PostsPageProps = {
+  pageAmount: number;
+  pageNumber: number;
+  postList: TPostListItem[];
+};
+
+export default function PostsPage(props: PostsPageProps) {
+  const router = useRouter();
+  const [pageNumber, setPageNumber] = useState<string>(props.pageNumber.toString());
+
+  const handleEnterKeyJump = (event: KeyboardEvent<HTMLInputElement>) => {
+    setPageNumber(pageNumber.replace(/[^\d]/g, ""));
+    if (parseInt(pageNumber) > 0 && parseInt(pageNumber) < props.pageAmount + 1) {
+      (event.key === "Go" || event.key === "Enter") && router.push(`/posts/${pageNumber}`);
+      return;
+    }
+  };
+
+  const handleChangePageNumber = (event: ChangeEvent<HTMLInputElement>) => {
+    setPageNumber(event.target.value);
+  };
+
+  useEffect(() => {
+    setPageNumber(props.pageNumber.toString().replace(/[^\d]/g, ""));
+  }, [props.pageNumber]);
+
+  return (
+    <Page>
+      <SEO
+        title={`${Config.SiteTitle} - All published posts`}
+        description={"Here is the list page for all published posts. Click here for more details."}
+        coverURL={Config.PageCovers.websiteCoverURL}
+      />
+      <NavBar />
+      <ContentContainer>
+        <h2 className={`my-5 flex justify-center text-2xl ${fontFzxbs.className} font-bold`}>
+          <LuPenTool className="mx-2 my-auto" />
+          {"ALL POSTS"}
+        </h2>
+        <hr />
+        <PostList data={props.postList} />
+        <div className="my-5 flex justify-between text-base font-bold">
+          {props.pageNumber !== 1 && (
+            <Link href={`/posts/${props.pageNumber - 1}`} className="link-button my-auto">
+              {"< PREV"}
+            </Link>
+          )}
+          <div className="my-auto font-bold flex justify-center">
+            <Input
+              onKeyDown={handleEnterKeyJump}
+              onChange={handleChangePageNumber}
+              className="my-auto mx-2 w-11 h-6"
+              value={pageNumber}
+            />
+            <div className="my-auto">{`  /  ${props.pageAmount}`}</div>
+          </div>
+          {props.pageNumber !== props.pageAmount && (
+            <Link href={`/posts/${props.pageNumber + 1}`} className="link-button my-auto">
+              {"NEXT >"}
+            </Link>
+          )}
+        </div>
+      </ContentContainer>
+      <Footer />
+    </Page>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = () => {
+  const allPaths: { params: { slug?: string[] } }[] = [{ params: { slug: [] } }];
+
+  const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);
+
+  for (let i = 0; i < pageAmount; i++) {
+    allPaths.push({ params: { slug: [(i + 1).toString()] } });
+  }
+
+  return { paths: allPaths, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps<PostsPageProps> = async (context) => {
+  const params = (context.params?.slug as string[]) ?? [];
+
+  const pageNumber = params[0] ? parseInt(params[0]) : 1;
+  let postList: TPostListItem[] = [];
+
+  postList = paginateArray(sortedPosts.allPostList, PostCountPerPagination, pageNumber);
+
+  const pageAmount = Math.ceil(sortedPosts.allPostList.length / PostCountPerPagination);
+
+  return {
+    props: {
+      pageAmount: pageAmount,
+      pageNumber: pageNumber,
+      postList: postList,
+    },
+  };
+};