mirror of
https://github.com/supabase/supabase.git
synced 2026-10-05 09:25:06 +03:00
chore: update pagination logic
This commit is contained in:
Isaiah Hamilton committed
1 parent
f028d5fafd
commit
f0e961ac3d
2 files changed
+82
-106
No files matched your search
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in new issue
Block a user