| import { siteConfig } from '@/lib/config' |
| import BlogPostCard from './BlogPostCard' |
| import BlogPostListEmpty from './BlogPostListEmpty' |
| import { useGlobal } from '@/lib/global' |
| import throttle from 'lodash.throttle' |
| import { useCallback, useEffect, useRef, useState } from 'react' |
| import { useRouter } from 'next/router' |
|
|
| |
| |
| |
| |
| |
| |
| |
| const BlogPostListScroll = ({ posts = [], currentSearch }) => { |
| const postsPerPage = parseInt(siteConfig('POSTS_PER_PAGE')) |
| const [page, updatePage] = useState(1) |
| const router = useRouter() |
| let filteredPosts = Object.assign(posts) |
| const searchKey = router?.query?.s || null |
| if (searchKey) { |
| filteredPosts = posts.filter(post => { |
| const tagContent = post?.tags ? post?.tags.join(' ') : '' |
| const searchContent = post.title + post.summary + tagContent |
| return searchContent.toLowerCase().includes(searchKey.toLowerCase()) |
| }) |
| } |
| const postsToShow = getPostByPage(page, filteredPosts, postsPerPage) |
|
|
| let hasMore = false |
| if (filteredPosts) { |
| const totalCount = filteredPosts.length |
| hasMore = page * postsPerPage < totalCount |
| } |
|
|
| const handleGetMore = () => { |
| if (!hasMore) return |
| updatePage(page + 1) |
| } |
|
|
| |
| const scrollTrigger = useCallback(throttle(() => { |
| const scrollS = window.scrollY + window.outerHeight |
| const clientHeight = targetRef ? (targetRef.current ? (targetRef.current.clientHeight) : 0) : 0 |
| if (scrollS > clientHeight + 100) { |
| handleGetMore() |
| } |
| }, 500)) |
|
|
| |
| useEffect(() => { |
| window.addEventListener('scroll', scrollTrigger) |
| return () => { |
| window.removeEventListener('scroll', scrollTrigger) |
| } |
| }) |
|
|
| const targetRef = useRef(null) |
| const { locale } = useGlobal() |
|
|
| if (!postsToShow || postsToShow.length === 0) { |
| return <BlogPostListEmpty currentSearch={currentSearch} /> |
| } else { |
| return <div id='posts-wrapper' ref={targetRef} className='w-full'> |
| |
| {/* 文章列表 */} |
| <div className='space-y-1 lg:space-y-4'> |
| {postsToShow?.map(post => ( |
| <BlogPostCard key={post.id} post={post} showSummary={true} /> |
| ))} |
| </div> |
| |
| <div> |
| <div onClick={() => { |
| handleGetMore() |
| }} |
| className='w-full my-4 py-4 text-center cursor-pointer dark:text-gray-200' |
| > {hasMore ? locale.COMMON.MORE : `${locale.COMMON.NO_MORE} 😰`} </div> |
| </div> |
| </div> |
| } |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| const getPostByPage = function (page, totalPosts, postsPerPage) { |
| return totalPosts.slice( |
| 0, |
| postsPerPage * page |
| ) |
| } |
|
|
| export default BlogPostListScroll |
|
|
