degmods/degmods.com
5
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: admin blog page pagination

Browse Source
This commit is contained in:
enes 2024-11-05 14:11:11 +01:00
parent 847aab29d7
commit 73a7b1c1ee
1 changed files with 37 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
src/pages/blogs/index.tsx
View File

@ -8,6 +8,8 @@ import '../../styles/filters.css'
import '../../styles/pagination.css'
import '../../styles/search.css'
import '../../styles/styles.css'
import { PaginationWithPageNumbers } from 'components/Pagination'
import { scrollIntoView } from 'utils'
export const BlogsPage = () => {
const blogs = useLoaderData() as Partial<BlogCardDetails>[] | undefined
@ -80,10 +82,31 @@ export const BlogsPage = () => {
return filtered
}, [blogs, searchTerm, filterOptions.sort, filterOptions.nsfw])
// Pagination logic
const [currentPage, setCurrentPage] = useState(1)
const scrollTargetRef = useRef<HTMLDivElement>(null)
const MAX_BLOGS_PER_PAGE = 16
const totalBlogs = filteredBlogs.length
const totalPages = Math.ceil(totalBlogs / MAX_BLOGS_PER_PAGE)
const startIndex = (currentPage - 1) * MAX_BLOGS_PER_PAGE
const endIndex = startIndex + MAX_BLOGS_PER_PAGE
const currentMods = filteredBlogs.slice(startIndex, endIndex)
const handlePageChange = (page: number) => {
if (page >= 1 && page <= totalPages) {
scrollIntoView(scrollTargetRef.current)
setCurrentPage(page)
}
}
return (
<div className='InnerBodyMain'>
<div className='ContainerMain'>
<div className='IBMSecMainGroup IBMSecMainGroupAlt'>
<div
className='IBMSecMainGroup IBMSecMainGroupAlt'
ref={scrollTargetRef}
>
<div className='IBMSecMain'>
<div className='SearchMainWrapper'>
<div className='IBMSMTitleMain'>
@ -156,48 +179,22 @@ export const BlogsPage = () => {
</div>
</div>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMList'>
{filteredBlogs &&
filteredBlogs.map((b) => <BlogCard key={b.id} {...b} />)}
</div>
</div>
<div className='IBMSecMain'>
<div className='PaginationMain'>
<div className='PaginationMainInside'>
<a
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
href='#'
>
<i className='fas fa-chevron-left'></i>
</a>
<div className='PaginationMainInsideBoxGroup'>
<a className='PaginationMainInsideBox PMIBActive' href='#'>
<p>1</p>{' '}
</a>
<a className='PaginationMainInsideBox' href='#'>
<p>2</p>{' '}
</a>
<a className='PaginationMainInsideBox' href='#'>
<p>3</p>
</a>
<p className='PaginationMainInsideBox PMIBDots'>...</p>
<a className='PaginationMainInsideBox' href='#'>
<p>8</p>
</a>
</div>
<a
className='PaginationMainInsideBox PaginationMainInsideBoxArrows'
href='#'
>
<i className='fas fa-chevron-right'></i>
</a>
</div>
</div>
<div className='IBMSecMain IBMSMListWrapper'>
<div className='IBMSMList'>
{currentMods &&
currentMods.map((b) => <BlogCard key={b.id} {...b} />)}
</div>
</div>
{totalPages > 1 && (
<PaginationWithPageNumbers
currentPage={currentPage}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
)}
</div>
</div>
</div>