From a99c30ff11f92965194ca3612f237440984f7d7f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=9B=90=EB=8D=94?= <wonderbotsupport@naver.com>
Date: Sat, 23 Jan 2021 11:47:22 +0900
Subject: [PATCH] feat: added paginator

---
 components/Paginator.tsx | 35 ++++++++++++++++++++++++++++
 pages/index.tsx          | 15 ++++++++----
 pages/list/votes.tsx     | 50 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 96 insertions(+), 4 deletions(-)
 create mode 100644 components/Paginator.tsx
 create mode 100644 pages/list/votes.tsx

diff --git a/components/Paginator.tsx b/components/Paginator.tsx
new file mode 100644
index 0000000..a52ed2c
--- /dev/null
+++ b/components/Paginator.tsx
@@ -0,0 +1,35 @@
+import Link from 'next/link'
+
+const Paginator = ({ currentPage, totalPage }:PaginatorProps):JSX.Element => {
+	const pages = [currentPage === 1 ? 2 : currentPage === 2 ? 1 : currentPage - 2, currentPage === 1 || currentPage === 2 ? 3 : currentPage - 1, currentPage, currentPage === 1 || currentPage === 2 ? 4 : currentPage + 1, currentPage === 1 || currentPage === 2 ? 5 : currentPage + 2]
+	return <div className='flex flex-col items-center my-12 text-center justify-center'>
+		<div className='flex text-gray-700 dark:text-gray-400'>
+			<Link href={{ pathname: '/list/votes', query: { page: currentPage - 1} }}>
+				<a className={`${currentPage === 1 ? 'hidden' : ''} h-12 w-12 mr-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-400 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
+					<i className='fas fa-chevron-left'></i>
+				</a>
+			</Link>
+			<div className='flex h-12 font-medium rounded-full bg-gray-200 dark:bg-discord-black'>
+				<a className={`w-12 md:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover order-1${currentPage === 1 ? '' : ' rounded-l-full'}`}>{pages[0]}</a>
+				<a className={`w-12 md:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover order-6${(pages[3]) >= totalPage ? ' rounded-r-full' : ''}`}>{pages[1]}</a>
+				<a className={`w-12 md:flex justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in bg-gray-300 dark:bg-very-black text-gray-900 dark:text-white ${currentPage === 1 ? 'order-first rounded-l-full' : currentPage === 2 ? 'order-2' : 'order-7'}`}>{pages[2]}</a>
+				<a className={`${(pages[3]) >= totalPage ? 'hidden ' : `md:flex ${(pages[4]) >= totalPage ? 'rounded-r-full' : ''}`}w-12 justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover order-8`}>{pages[3]}</a>
+				<a className={`${(pages[4]) >= totalPage ? 'hidden ' : 'md:flex rounded-r-full'}w-12 justify-center items-center hidden cursor-pointer leading-5 transition duration-150 ease-in hover:bg-gray-400 dark:hover:bg-discord-dark-hover order-9`}>{pages[4]}</a>
+				<a className='w-12 h-12 md:hidden flex justify-center items-center cursor-pointer leading-5 transition duration-150 ease-in text-gray-900 dark:text-white hover:bg-gray-400 dark:hover:bg-discord-dark-hover'>{pages[2]}</a>
+			</div>
+			<Link href={{ pathname: '/list/votes', query: { page: currentPage + 1} }}>
+				<a className={`${currentPage === totalPage ? 'hidden' : '' } h-12 w-12 ml-1 flex justify-center items-center rounded-full transition duration-150 ease-in bg-gray-200 dark:bg-discord-black hover:bg-gray-400 dark:hover:bg-discord-dark-hover cursor-pointer text-center`}>
+					<i className='fas fa-chevron-right'></i>
+				</a>
+			</Link>
+		</div>
+	</div>
+ 
+}
+
+interface PaginatorProps {
+  currentPage: number
+  totalPage: number
+}
+
+export default Paginator
\ No newline at end of file
diff --git a/pages/index.tsx b/pages/index.tsx
index 87eb866..49201fe 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,8 +1,12 @@
-import { NextPage, } from 'next'
+import { NextPage } from 'next'
 import dynamic from 'next/dynamic'
+import Paginator from '../components/Paginator'
+import Search from '../components/Search'
+import Tag from '../components/Tag'
 
 import { BotList } from '../types'
 import { Query } from '../utils'
+import { cats } from '../utils/Constants'
 
 const Advertisement = dynamic(()=> import('../components/Advertisement'))
 const Container = dynamic(()=> import('../components/Container'))
@@ -17,6 +21,11 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 					<h1 className='text-center text-gray-100 text-3xl font-bold sm:text-left'>
 						한국 디스코드봇 리스트
 					</h1>
+					<Search />
+					<h2 className='text-xl font-bold mt-10 mb-1'>카테고리로 찾아보기</h2>
+					<div className='flex flex-wrap '>
+						{ cats.map(t=> <Tag key={t} text={t} dark href={`/categories/${t}`}/>) }
+					</div>
 				</Container>
 			</div>
 			<Wave
@@ -35,9 +44,7 @@ const Index: NextPage<IndexProps> = ({ votes, newBots, trusted }) => {
 						votes.data.slice(0, 8).map(bot=> <BotCard key={bot.id} bot={bot} />)
 					}
 				</div>
-				<a className='mx-auto w-1/2 justify-center text-2xl bg-little-white dark:bg-discord-black text-black dark:text-gray-400 rounded flex hover:bg-little-white-hover dark:hover:bg-discord-dark-hover cursor-pointer px-4 py-4 mb-1'>
-					더보기
-				</a>
+				<Paginator totalPage={votes.totalPage} currentPage={votes.currentPage}/>
 				<h1 className='text-3xl font-bold mt-20'>
 					<i className='far fa-star mr-3 text-yellow-500' /> 새로운 봇
 				</h1>
diff --git a/pages/list/votes.tsx b/pages/list/votes.tsx
new file mode 100644
index 0000000..5e12437
--- /dev/null
+++ b/pages/list/votes.tsx
@@ -0,0 +1,50 @@
+import { NextPage, NextPageContext } from 'next'
+import { ParsedUrlQuery } from 'querystring'
+import Advertisement from '../../components/Advertisement'
+import BotCard from '../../components/BotCard'
+
+import Container from '../../components/Container'
+import Paginator from '../../components/Paginator'
+import { BotList } from '../../types'
+import { Query } from '../../utils'
+import NotFound from '../404'
+
+const Votes:NextPage<VotesProps> = ({ data }:VotesProps) => {
+	if(!data) return <NotFound />
+	return <Container paddingTop>
+		<h1 className='text-3xl font-bold mt-5'>
+			<i className='far fa-heart mr-3 text-pink-600' /> 하트 랭킹 - {data.currentPage}페이지
+		</h1>
+		<p className='text-base'>하트를 많이 받은 봇들의 순위입니다!</p>
+		<Advertisement />
+		<div className='grid gap-4 2xl:grid-cols-4 md:grid-cols-2 mt-20'>
+			{
+				data.data.map(bot => <BotCard key={bot.id} bot={bot} /> )
+			}
+		</div>
+		<Paginator totalPage={data.totalPage} currentPage={data.currentPage} />
+	</Container>
+}
+export const getServerSideProps = async (ctx:Context) => {
+	if(isNaN(Number(ctx.query.page))) ctx.query.page = '1'
+	const data = await Query.get.list.votes.load(Number(ctx.query.page))
+	return {
+		props: {
+			data
+		}
+	}
+}
+
+interface VotesProps {
+  data: BotList
+}
+
+interface Context extends NextPageContext {
+	query: URLQuery
+}
+
+interface URLQuery extends ParsedUrlQuery {
+	page: string
+}
+
+export default Votes