From f0e961ac3d8f9eb55867a0abda47103ea0cb4002 Mon Sep 17 00:00:00 2001
From: Isaiah Hamilton <70828596+Isaiah-Hamilton@users.noreply.github.com>
Date: Fri, 24 Jun 2022 23:11:58 -0400
Subject: [PATCH] chore: update pagination logic

---
 apps/temp-docs/components/pagination.tsx   |  53 +++-----
 apps/temp-docs/pages/discussions/index.tsx | 135 ++++++++++-----------
 2 files changed, 82 insertions(+), 106 deletions(-)

diff --git a/apps/temp-docs/components/pagination.tsx b/apps/temp-docs/components/pagination.tsx
index 44758cfee6e..61cb5db6a87 100644
--- a/apps/temp-docs/components/pagination.tsx
+++ b/apps/temp-docs/components/pagination.tsx
@@ -1,41 +1,36 @@
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { IconArrowLeft, IconArrowRight } from '@supabase/ui'
+
+const pagination = ({ currentPage, totalCount }: { currentPage: number, totalCount: number }) => {
+  // TODO: not sure if this is the most efficient way to do this. may need to refactor.
+  const totalArray = Array.from({ length: totalCount }, (_, i: number) => i + 1)
+  const pages = totalArray.filter((page: number) => {
+    return page >= currentPage - 2 && page <= currentPage + 2
+  })
 
-const pagination = () => {
-  const router = useRouter()
-  const Page: any = router.query.page || 1
-  const page = parseInt(Page)
   return (
     <ul className="flex justify-center space-x-1 text-xs font-medium">
       <li>
         <Link href="/discussions?page=1">
           <a className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-3 w-3"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M12.707 5.293a1 1 0 010 1.414L9.414 10l3.293 3.293a1 1 0 01-1.414 1.414l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
+            <IconArrowLeft
+              className="stroke-2 transition group-hover:-translate-x-1"
+              height={12.5}
+            />
           </a>
         </Link>
       </li>
-      {[1, 2, 3, 4, 5].map((element: any, i: number) => {
+      {pages.map((page: number, i: number) => {
         i = i + 1
         return (
           <li key={i}>
-            <Link href={`/discussions?page=${i}`}>
+            <Link href={`/discussions?page=${page}`}>
               <a
                 className={`border-scale-600 inline-flex h-8 w-8 items-center justify-center rounded border ${
-                  page === i ? 'bg-brand-900' : 'bg-scale-300'
+                  currentPage === page ? 'bg-brand-900' : 'bg-scale-300'
                 }`}
               >
-                {i}
+                {page}
               </a>
             </Link>
           </li>
@@ -44,18 +39,10 @@ const pagination = () => {
       <li>
         <Link href="/discussions?page=1">
           <a className="border-scale-600 bg-scale-300 inline-flex h-8 w-8 items-center justify-center rounded border">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              className="h-3 w-3"
-              viewBox="0 0 20 20"
-              fill="currentColor"
-            >
-              <path
-                fill-rule="evenodd"
-                d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
-                clip-rule="evenodd"
-              />
-            </svg>
+            <IconArrowRight
+              className="stroke-2 transition group-hover:-translate-x-1"
+              height={12.5}
+            />
           </a>
         </Link>
       </li>
diff --git a/apps/temp-docs/pages/discussions/index.tsx b/apps/temp-docs/pages/discussions/index.tsx
index 50ca240d84a..7f41182dce0 100644
--- a/apps/temp-docs/pages/discussions/index.tsx
+++ b/apps/temp-docs/pages/discussions/index.tsx
@@ -6,9 +6,9 @@ import Image from 'next/image'
 import Link from 'next/link'
 import Pagination from '../../components/pagination'
 
-export async function getStaticProps(context: { query: { page: number } }) {
+export async function getServerSideProps(context: { query: { page: number } }) {
   const Page: any = context.query?.page || 1
-  const page = parseInt(Page)
+  const page: number = parseInt(Page)
 
   const httpLink = createHttpLink({
     uri: 'https://api.github.com/graphql',
@@ -101,15 +101,16 @@ export async function getStaticProps(context: { query: { page: number } }) {
   return {
     props: {
       data,
+      page,
     },
   }
 }
 
-const discussions = ({ data }: any) => {
+const discussions = ({ data, page }: {data: any, page: number}) => {
   const meta_title = 'Discussions'
   const meta_description = 'Discuss Supabase with other developers and users.'
 
-  // TODO: This was a quick hack to show emojis in discussions. could be replaced with a proper solution.
+  // TODO: This was a quick hack to show emojis in discussions. should be replaced with a proper solution.
   const emojiInput = [':zap:', ':ship:', ':bulb:', ':question:', ':raised_hands:']
   const emojiOutput = ['⚡️', '🚢', '💡', '❓', '🙌']
 
@@ -201,80 +202,68 @@ const discussions = ({ data }: any) => {
           })}
         </div>
         <div className="space-y-6">
-          {data.repository.discussions.nodes.map((discussion: any) => {
-            return (
-              <div className="border-scale-600 border-b pb-6 md:pb-0" key={discussion.id}>
-                <Link href={`/discussions/${discussion.number}`}>
-                  <a className="mb-6 items-center justify-between md:mx-6 md:flex">
-                    <div className="flex items-center">
-                      <div className="item-center flex items-center md:space-x-6">
-                        <div className="item-center bg-scale-400 border-scale-600 hidden h-fit items-center space-x-1 rounded-xl border py-1 pl-1 pr-2 md:flex">
-                          <IconArrowUp className="stroke-2" height={15} />
-                          <span>{discussion.upvoteCount}</span>
-                        </div>
-                        <div className="rounded-lg bg-gray-400 px-3 py-2 md:px-5 md:py-4">
-                          {getEmoji(discussion.category.emoji)}
-                        </div>
-                      </div>
-                      <div className="ml-6">
-                        <h2 className="text-base font-semibold md:max-w-sm md:text-lg lg:max-w-4xl">
-                          {discussion.title}
-                        </h2>
-                        <span className="text-scale-1000 text-xs">
-                          <Link href={discussion.author.url}>
-                            <a>{discussion.author.login}</a>
-                          </Link>
-                          <span>{` asked ${getTimeSinceCreated(discussion.createdAt)} • `}</span>
-                          <span className={discussion.answer?.isAnswer ? 'text-brand-900' : ''}>
-                            {discussion.answer?.isAnswer ? 'Answered' : 'Unanswered'}
-                          </span>
-                        </span>
-                      </div>
-                    </div>
-                    <div className="ml-16 mt-2 flex items-center space-x-2 md:ml-0 md:mt-0">
-                      <div className="flex items-center -space-x-2">
-                        {/* TODO: this is a hack because I couldn't find a participant query for graphql. could be replaced with a proper solution. */}
-                        {discussion.comments.totalCount === 0 ? (
-                          <div>
-                            <Image
-                              className="rounded-full"
-                              src={discussion.author.avatarUrl}
-                              height={30}
-                              width={30}
-                            />
+          {data.repository.discussions.nodes
+            .slice(page * 10 - 10, page * 10)
+            .map((discussion: any) => {
+              return (
+                <div className="border-scale-600 border-b pb-6 md:pb-0" key={discussion.id}>
+                  <Link href={`/discussions/${discussion.number}`}>
+                    <a className="mb-6 items-center justify-between md:mx-6 md:flex">
+                      <div className="flex items-center">
+                        <div className="item-center flex items-center md:space-x-6">
+                          <div className="item-center bg-scale-400 border-scale-600 hidden h-fit items-center space-x-1 rounded-xl border py-1 pl-1 pr-2 md:flex">
+                            <IconArrowUp className="stroke-2" height={15} />
+                            <span>{discussion.upvoteCount}</span>
                           </div>
-                        ) : (
-                          discussion.comments.nodes.map((comment: any) => {
-                            return (
-                              <div>
-                                <Image
-                                  className="rounded-full"
-                                  src={comment.author.avatarUrl}
-                                  height={30}
-                                  width={30}
-                                />
-                              </div>
-                            )
-                          })
-                        )}
+                          <div className="rounded-lg bg-gray-400 px-3 py-2 md:px-5 md:py-4">
+                            {getEmoji(discussion.category.emoji)}
+                          </div>
+                        </div>
+                        <div className="ml-6">
+                          <h2 className="text-base font-semibold md:max-w-sm md:text-lg lg:max-w-4xl">
+                            {discussion.title}
+                          </h2>
+                          <span className="text-scale-1000 text-xs">
+                            <Link href={discussion.author.url}>
+                              <a>{discussion.author.login}</a>
+                            </Link>
+                            <span>{` asked ${getTimeSinceCreated(discussion.createdAt)} • `}</span>
+                            <span className={discussion.answer?.isAnswer ? 'text-brand-900' : ''}>
+                              {discussion.answer?.isAnswer ? 'Answered' : 'Unanswered'}
+                            </span>
+                          </span>
+                        </div>
                       </div>
-                      <div
-                        className={`item-center flex items-center space-x-1 ${
-                          discussion.answer?.isAnswer ? 'text-brand-900' : ''
-                        }`}
-                      >
-                        <IconCheckCircle className="stroke-2" height={15} />
-                        <span>{discussion.comments.totalCount}</span>
+                      <div className="ml-16 mt-2 flex items-center space-x-2 md:ml-0 md:mt-0">
+                        <div className="flex items-center -space-x-2">
+                          <Link href={discussion.author.url}>
+                            <a>
+                              <Image
+                                className="rounded-full"
+                                src={discussion.author.avatarUrl}
+                                height={30}
+                                width={30}
+                              />
+                            </a>
+                          </Link>
+                        </div>
+                        <div
+                          className={`item-center flex items-center space-x-1 ${
+                            discussion.answer?.isAnswer ? 'text-brand-900' : ''
+                          }`}
+                        >
+                          <IconCheckCircle className="stroke-2" height={15} />
+                          <span>{discussion.comments.totalCount}</span>
+                        </div>
                       </div>
-                    </div>
-                  </a>
-                </Link>
-              </div>
-            )
-          })}
+                    </a>
+                  </Link>
+                </div>
+              )
+            })}
         </div>
         <div>
-          <Pagination />
+          <Pagination currentPage={page} totalCount={data.repository.discussions.totalCount} />
         </div>
       </div>
     </Layout>