#27 Renaming next to client

.github/workflows/lint.yml

@@ -18,8 +18,8 @@ jobs:
 
       - name: Install Dependencies
         run: npm ci
-        working-directory: ./next
+        working-directory: ./client
 
       - name: Run Lint
         run: npm run lint
-        working-directory: ./next
+        working-directory: ./client

client/src/app/blog/_navigation/Navigation.tsx

@@ -0,0 +1,42 @@
+import React, { FunctionComponent } from 'react';
+import styles from './styles.module.scss';
+import Link from 'next/link';
+import qs from 'qs';
+
+interface Props {
+  pageNumber: number;
+  currentPageCount: number;
+  category: string | undefined;
+}
+
+const Navigation: FunctionComponent<Props> = ({ currentPageCount, pageNumber, category }) => {
+  const queryParamsPrevious = {
+    category,
+    page: pageNumber - 1
+  };
+
+  const queryParamsNext = {
+    category,
+    page: pageNumber + 1
+  };
+
+  const queryStringPrevious = qs.stringify(queryParamsPrevious);
+  const queryStringNext = qs.stringify(queryParamsNext);
+
+  return (
+    <div className={styles.container}>
+      {Boolean(pageNumber > 1) && (
+        <Link href={`/blog?${queryStringPrevious}`}>
+          Previous
+        </Link>
+      )}
+      {currentPageCount !== pageNumber && (
+        <Link href={`/blog?${queryStringNext}`}>
+          Next
+        </Link>
+      )}
+    </div>
+  );
+};
+
+export default Navigation;

client/src/app/blog/_navigation/styles.module.scss

@@ -0,0 +1,16 @@
+@import '@/styles/vars';
+
+.container {
+  display: flex;
+  margin-inline: auto;
+  gap: 1rem;
+  margin-top: 2rem;
+
+  a {
+    color: darken($color-text, 40%);
+
+    &:hover {
+      color: $color-accent;
+    }
+  }
+}

next/src/app/blog/page.tsx → client/src/app/blog/page.tsx

@@ -6,15 +6,19 @@ import React from 'react';
 import { db } from '@/scripts/fetch';
 import Categories from '@/components/categories/Categories';
 import SearchBar from '@/app/blog/(search-bar)/SearchBar';
+import Navigation from '@/app/blog/_navigation/Navigation';
 
 interface Props {
   searchParams: {
     category?: string;
+    page?: string;
   };
 }
 
-const Page: NextPage<Props> = async ({ searchParams: { category } }) => {
-  const posts = category ? await db.getPostsByCategory(category) : await db.getPosts();
+const Page: NextPage<Props> = async ({ searchParams: { category, page } }) => {
+  const pageNumber = parseInt(page ?? '1');
+
+  const posts = category ? await db.getPostsByCategory(category, pageNumber) : await db.getPosts(pageNumber);
   const categories = await db.getCategories();
 
   return (
@@ -26,6 +30,9 @@ const Page: NextPage<Props> = async ({ searchParams: { category } }) => {
         <div className={`${gStyles.blogs} ${styles.blogs}`}>
           {posts.data.map((post) => <BlogPostItem post={post} key={post.id} />)}
         </div>
+        {Boolean(posts.meta.pagination.pageCount > 1) && (
+          <Navigation pageNumber={pageNumber} currentPageCount={posts.meta.pagination.pageCount} category={category} />
+        )}
       </section>
     </main>
   );

next/src/scripts/fetch.ts → client/src/scripts/fetch.ts

@@ -24,19 +24,19 @@ export const fetchWrapper = async <T>(url: string | URL) => {
 };
 
 export const db = {
-  getPosts: async () => {
+  getPosts: async (page: number ) => {
     const queryParams = {
       sort: ['publishedAt:desc'],
       pagination: {
         pageSize: 10,
-        page: 1
+        page
       }
     };
 
     const queryString = qs.stringify(queryParams);
     return await fetchWrapper<PostsFetchResponse>(`/posts?${queryString}`);
   },
-  getPostsByCategory: async (category: string) => {
+  getPostsByCategory: async (category: string, page: number) => {
     const queryParams = {
       sort: ['publishedAt:desc'],
       filters: {
@@ -48,7 +48,7 @@ export const db = {
       },
       pagination: {
         pageSize: 10,
-        page: 1
+        page
       }
     };