feat: add pagination in blog page #3638
Conversation
Adi-204
requested review from
derberg,
akshatnema,
magicmatatjahu,
anshgoyalevil,
Mayaleeeee and
asyncapi-bot-eve
as code owners
WalkthroughThe changes refine the filtering logic by skipping properties with the key Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant BI as BlogIndexPage
participant BP as BlogPagination
U->>BI: Load Blog Index Page
BI->>BP: Render pagination controls (currentPage, totalBlogs, blogsPerPage)
U->>BP: Clicks Next/Previous or a page number button
BP->>BI: Invoke paginate(pageNumber)
BI->>BI: Update state (currentPage) and recalc currentPosts
BI->>U: Render updated blog posts
Assessment against linked issues
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
Documentation and Community
|
|
Hello, @coderabbitai[bot]! 👋🏼 |
✅ Deploy Preview for asyncapi-website ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@asyncapi-bot Thank you for the welcome message and information about the available commands! I'll proceed with reviewing the PR changes. 🐰 (curious to review the changes) ✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
pages/blog/index.tsx (2)
1-16: Fix import sorting.The imports need to be sorted according to the project's ESLint rules.
Run ESLint autofix to sort the imports properly.
🧰 Tools
🪛 ESLint
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
1-190: Fix formatting issues to pass pipeline.Multiple formatting issues need to be addressed:
- Remove trailing commas in object literals
- Fix spacing around arrow functions
- Correct indentation
- Add proper line breaks
Run Prettier to automatically fix these formatting issues:
npx prettier --write pages/blog/index.tsx🧰 Tools
🪛 ESLint
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 58-58: Delete
,(prettier/prettier)
[error] 58-58: Unexpected trailing comma.
(comma-dangle)
[error] 62-62: Delete
,(prettier/prettier)
[error] 62-62: Unexpected trailing comma.
(comma-dangle)
[error] 63-63: Delete
,(prettier/prettier)
[error] 63-63: Unexpected trailing comma.
(comma-dangle)
[error] 83-86: Expected blank line after variable declarations.
(newline-after-var)
[error] 85-85: Delete
,(prettier/prettier)
[error] 85-85: Unexpected trailing comma.
(comma-dangle)
[error] 87-96: Expected blank line before this statement.
(padding-line-between-statements)
[error] 90-90: Delete
,(prettier/prettier)
[error] 90-90: Unexpected trailing comma.
(comma-dangle)
[error] 94-94: Delete
,(prettier/prettier)
[error] 94-94: Unexpected trailing comma.
(comma-dangle)
[error] 95-95: Delete
,(prettier/prettier)
[error] 95-95: Unexpected trailing comma.
(comma-dangle)
[error] 99-99: Replace
=>with·=>·(prettier/prettier)
[error] 100-100: Expected blank line after variable declarations.
(newline-after-var)
[error] 100-100: Replace
1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)with⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····(prettier/prettier)
[error] 101-101: Expected blank line before this statement.
(padding-line-between-statements)
[error] 101-101: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 101-101: Delete
·(prettier/prettier)
[error] 102-102: A space is required after ','.
(comma-spacing)
[error] 102-102: Insert
·(prettier/prettier)
[error] 159-160: Delete
⏎·············(prettier/prettier)
[error] 179-179: Delete
··(prettier/prettier)
[error] 180-180: Delete
··(prettier/prettier)
[error] 181-181: Delete
··(prettier/prettier)
[error] 182-182: Delete
··(prettier/prettier)
[error] 183-183: Delete
··(prettier/prettier)
[error] 184-184: Delete
··(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 58-58: Delete
,prettier/prettier
[error] 58-58: Unexpected trailing comma. comma-dangle
[error] 62-62: Delete
,prettier/prettier
[error] 62-62: Unexpected trailing comma. comma-dangle
[error] 63-63: Delete
,prettier/prettier
[error] 63-63: Unexpected trailing comma. comma-dangle
[error] 83-83: Expected blank line after variable declarations. newline-after-var
[error] 85-85: Delete
,prettier/prettier
[error] 85-85: Unexpected trailing comma. comma-dangle
[error] 87-87: Expected blank line before this statement. padding-line-between-statements
[error] 90-90: Delete
,prettier/prettier
[error] 90-90: Unexpected trailing comma. comma-dangle
[error] 94-94: Delete
,prettier/prettier
[error] 94-94: Unexpected trailing comma. comma-dangle
[error] 95-95: Delete
,prettier/prettier
[error] 95-95: Unexpected trailing comma. comma-dangle
[error] 99-99: Replace
=>with·=>·prettier/prettier
[error] 100-100: Expected blank line after variable declarations. newline-after-var
[error] 100-100: Replace
1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)with⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····prettier/prettier
[error] 101-101: Expected blank line before this statement. padding-line-between-statements
[error] 101-101: Trailing spaces not allowed. no-trailing-spaces
[error] 101-101: Delete
·prettier/prettier
[error] 102-102: A space is required after ','. comma-spacing
[error] 102-102: Insert
·prettier/prettier
[error] 159-159: Delete
⏎·············prettier/prettier
[error] 179-179: Delete
··prettier/prettier
[error] 180-180: Delete
··prettier/prettier
[error] 181-181: Delete
··prettier/prettier
[error] 182-182: Delete
··prettier/prettier
[error] 183-183: Delete
··prettier/prettier
🧹 Nitpick comments (8)
components/icons/Next.tsx (1)
1-20: LGTM! Just add a newline at EOF.The SVG icon implementation is clean and follows best practices. Just fix the formatting issue to pass the pipeline.
} +🧰 Tools
🪛 ESLint
[error] 20-20: Newline required at end of file but not found.
(eol-last)
[error] 20-20: Insert
⏎(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 20-20: Newline required at end of file but not found. eol-last
[error] 20-20: Insert
⏎prettier/prettiercomponents/icons/Previous.tsx (1)
1-20: LGTM! Just add a newline at EOF.The SVG icon implementation is clean and consistent with Next.tsx.
} +🧰 Tools
🪛 ESLint
[error] 20-20: Newline required at end of file but not found.
(eol-last)
[error] 20-20: Insert
⏎(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 20-20: Newline required at end of file but not found. eol-last
[error] 20-20: Insert
⏎prettier/prettiercomponents/navigation/BlogPagination.tsx (3)
37-37: Consider making pagesToShow configurable.The
pagesToShowconstant is hardcoded to 6. Consider making it a prop to allow customization based on screen size or user preferences.- const pagesToShow: number = 6; + const pagesToShow: number = props.pagesToShow ?? 6;
99-112: Consider responsive design for pagination width.The current implementation uses a fixed width (
w-[35vw]) which might not be optimal for all screen sizes.- <div className="flex w-[35vw] justify-center gap-3"> + <div className="flex w-full max-w-[600px] justify-center gap-3">🧰 Tools
🪛 ESLint
[error] 99-99: Replace
"flex·w-[35vw]·justify-center·gap-3"with'flex·w-[35vw]·justify-center·gap-3'(prettier/prettier)
[error] 99-99: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 99-99: Replace "flex·w-[35vw]·justify-center·gap-3" with 'flex·w-[35vw]·justify-center·gap-3' prettier/prettier
[error] 99-99: Unexpected usage of doublequote. jsx-quotes
81-124: LGTM! Fix JSX quotes to pass linting.The pagination implementation is well-structured with proper accessibility attributes. Just update the JSX quotes from double to single quotes to pass the linting rules.
Example fix:
- aria-label="Blog pagination" + aria-label='Blog pagination'🧰 Tools
🪛 ESLint
[error] 82-85: Replace
⏎······aria-label="Blog·pagination"⏎······className="mt-8·flex·items-center·justify-center·gap-2·p-4"⏎····with·aria-label='Blog·pagination'·className='mt-8·flex·items-center·justify-center·gap-2·p-4'(prettier/prettier)
[error] 83-83: Unexpected usage of doublequote.
(jsx-quotes)
[error] 84-84: Unexpected usage of doublequote.
(jsx-quotes)
[error] 89-89: Replace
"Previous·page"with'Previous·page'(prettier/prettier)
[error] 89-89: Unexpected usage of doublequote.
(jsx-quotes)
[error] 90-90: Replace
"bg-white"with'bg-white'(prettier/prettier)
[error] 90-90: Unexpected usage of doublequote.
(jsx-quotes)
[error] 91-91: Replace
"text-[#212525]·font-inter·text-[14px]·font-normal"with'text-[#212525]·font-inter·text-[14px]·font-normal'(prettier/prettier)
[error] 91-91: Unexpected usage of doublequote.
(jsx-quotes)
[error] 92-92: Replace
"Previous"with'Previous'(prettier/prettier)
[error] 92-92: Unexpected usage of doublequote.
(jsx-quotes)
[error] 99-99: Replace
"flex·w-[35vw]·justify-center·gap-3"with'flex·w-[35vw]·justify-center·gap-3'(prettier/prettier)
[error] 99-99: Unexpected usage of doublequote.
(jsx-quotes)
[error] 116-116: Replace
"bg-white"with'bg-white'(prettier/prettier)
[error] 116-116: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Replace
"text-[#212525]·font-inter·text-[14px]·font-normal"with'text-[#212525]·font-inter·text-[14px]·font-normal'(prettier/prettier)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-118: Replace
"Next"with'Next'(prettier/prettier)
[error] 118-118: Unexpected usage of doublequote.
(jsx-quotes)
🪛 GitHub Actions: PR testing - if Node project
[error] 82-82: Replace
⏎······aria-label="Blog·pagination"⏎······className="mt-8·flex·items-center·justify-center·gap-2·p-4"⏎····with·aria-label='Blog·pagination'·className='mt-8·flex·items-center·justify-center·gap-2·p-4'prettier/prettier
[error] 83-83: Unexpected usage of doublequote. jsx-quotes
[error] 84-84: Unexpected usage of doublequote. jsx-quotes
[error] 89-89: Replace "Previous·page" with 'Previous·page' prettier/prettier
[error] 89-89: Unexpected usage of doublequote. jsx-quotes
[error] 90-90: Replace "bg-white" with 'bg-white' prettier/prettier
[error] 90-90: Unexpected usage of doublequote. jsx-quotes
[error] 91-91: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal' prettier/prettier
[error] 91-91: Unexpected usage of doublequote. jsx-quotes
[error] 92-92: Replace "Previous" with 'Previous' prettier/prettier
[error] 92-92: Unexpected usage of doublequote. jsx-quotes
[error] 99-99: Replace "flex·w-[35vw]·justify-center·gap-3" with 'flex·w-[35vw]·justify-center·gap-3' prettier/prettier
[error] 99-99: Unexpected usage of doublequote. jsx-quotes
[error] 116-116: Replace "bg-white" with 'bg-white' prettier/prettier
[error] 116-116: Unexpected usage of doublequote. jsx-quotes
[error] 117-117: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal' prettier/prettier
[error] 117-117: Unexpected usage of doublequote. jsx-quotes
[error] 118-118: Replace "Next" with 'Next' prettier/prettier
[error] 118-118: Unexpected usage of doublequote. jsx-quotes
components/helpers/applyFilter.ts (1)
136-143: Consider using an enum or const object for non-filterable keys.The implementation correctly excludes the page parameter from filtering. Consider using an enum or const object for better type safety and maintainability.
+const NON_FILTERABLE_KEYS = { + PAGE: 'page', +} as const; + export const onFilterApply = ( inputData: DataObject[], onFilter: (result: DataObject[], query: Filter) => void, query: Filter ): void => { - const nonFilterableKeys = ['page']; let result = inputData; if (query && Object.keys(query).length >= 1) { Object.keys(query).forEach((property) => { - if (nonFilterableKeys.includes(property)) { + if (property === NON_FILTERABLE_KEYS.PAGE) { return; // Skip non-filterable keys like 'page' }pages/blog/index.tsx (2)
80-102: Enhance page number validation and URL handling.The page number parsing logic could be more robust to handle edge cases.
Consider these improvements:
- const currentPageNumber = Math.max(1, Number.isNaN(parseInt(router.query.page as string, 10)) ? 1 : parseInt(router.query.page as string, 10)); + const parsePage = (page: string | string[] | undefined) => { + if (!page || Array.isArray(page)) return 1; + const parsed = parseInt(page, 10); + return Number.isNaN(parsed) ? 1 : Math.max(1, parsed); + }; + const currentPageNumber = parsePage(router.query.page);Also, remove trailing commas in the router.push options to fix the linting errors.
🧰 Tools
🪛 ESLint
[error] 83-86: Expected blank line after variable declarations.
(newline-after-var)
[error] 85-85: Delete
,(prettier/prettier)
[error] 85-85: Unexpected trailing comma.
(comma-dangle)
[error] 87-96: Expected blank line before this statement.
(padding-line-between-statements)
[error] 90-90: Delete
,(prettier/prettier)
[error] 90-90: Unexpected trailing comma.
(comma-dangle)
[error] 94-94: Delete
,(prettier/prettier)
[error] 94-94: Unexpected trailing comma.
(comma-dangle)
[error] 95-95: Delete
,(prettier/prettier)
[error] 95-95: Unexpected trailing comma.
(comma-dangle)
[error] 99-99: Replace
=>with·=>·(prettier/prettier)
[error] 100-100: Expected blank line after variable declarations.
(newline-after-var)
[error] 100-100: Replace
1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)with⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····(prettier/prettier)
[error] 101-101: Expected blank line before this statement.
(padding-line-between-statements)
[error] 101-101: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 101-101: Delete
·(prettier/prettier)
[error] 102-102: A space is required after ','.
(comma-spacing)
[error] 102-102: Insert
·(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 83-83: Expected blank line after variable declarations. newline-after-var
[error] 85-85: Delete
,prettier/prettier
[error] 85-85: Unexpected trailing comma. comma-dangle
[error] 87-87: Expected blank line before this statement. padding-line-between-statements
[error] 90-90: Delete
,prettier/prettier
[error] 90-90: Unexpected trailing comma. comma-dangle
[error] 94-94: Delete
,prettier/prettier
[error] 94-94: Unexpected trailing comma. comma-dangle
[error] 95-95: Delete
,prettier/prettier
[error] 95-95: Unexpected trailing comma. comma-dangle
[error] 99-99: Replace
=>with·=>·prettier/prettier
[error] 100-100: Expected blank line after variable declarations. newline-after-var
[error] 100-100: Replace
1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)with⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····prettier/prettier
[error] 101-101: Expected blank line before this statement. padding-line-between-statements
[error] 101-101: Trailing spaces not allowed. no-trailing-spaces
[error] 101-101: Delete
·prettier/prettier
[error] 102-102: A space is required after ','. comma-spacing
[error] 102-102: Insert
·prettier/prettier
159-184: Simplify empty state logic and fix indentation.The empty state check could be simplified, and the pagination component's indentation needs to be fixed.
Consider this improvement for the empty state check:
- {(Object.keys(posts).length === 0 || - Object.keys(currentPosts).length === 0) && ( + {!posts.length || !currentPosts.length && (Also, fix the indentation of the BlogPagination component to match the surrounding code.
🧰 Tools
🪛 ESLint
[error] 159-160: Delete
⏎·············(prettier/prettier)
[error] 179-179: Delete
··(prettier/prettier)
[error] 180-180: Delete
··(prettier/prettier)
[error] 181-181: Delete
··(prettier/prettier)
[error] 182-182: Delete
··(prettier/prettier)
[error] 183-183: Delete
··(prettier/prettier)
[error] 184-184: Delete
··(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 159-159: Delete
⏎·············prettier/prettier
[error] 179-179: Delete
··prettier/prettier
[error] 180-180: Delete
··prettier/prettier
[error] 181-181: Delete
··prettier/prettier
[error] 182-182: Delete
··prettier/prettier
[error] 183-183: Delete
··prettier/prettier
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
components/helpers/applyFilter.ts(1 hunks)components/icons/Next.tsx(1 hunks)components/icons/Previous.tsx(1 hunks)components/navigation/BlogPagination.tsx(1 hunks)pages/blog/index.tsx(4 hunks)
🧰 Additional context used
🪛 ESLint
components/icons/Previous.tsx
[error] 20-20: Newline required at end of file but not found.
(eol-last)
[error] 20-20: Insert ⏎
(prettier/prettier)
components/icons/Next.tsx
[error] 20-20: Newline required at end of file but not found.
(eol-last)
[error] 20-20: Insert ⏎
(prettier/prettier)
components/navigation/BlogPagination.tsx
[error] 34-34: Delete ,
(prettier/prettier)
[error] 34-34: Unexpected trailing comma.
(comma-dangle)
[error] 82-85: Replace ⏎······aria-label="Blog·pagination"⏎······className="mt-8·flex·items-center·justify-center·gap-2·p-4"⏎···· with ·aria-label='Blog·pagination'·className='mt-8·flex·items-center·justify-center·gap-2·p-4'
(prettier/prettier)
[error] 83-83: Unexpected usage of doublequote.
(jsx-quotes)
[error] 84-84: Unexpected usage of doublequote.
(jsx-quotes)
[error] 89-89: Replace "Previous·page" with 'Previous·page'
(prettier/prettier)
[error] 89-89: Unexpected usage of doublequote.
(jsx-quotes)
[error] 90-90: Replace "bg-white" with 'bg-white'
(prettier/prettier)
[error] 90-90: Unexpected usage of doublequote.
(jsx-quotes)
[error] 91-91: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal'
(prettier/prettier)
[error] 91-91: Unexpected usage of doublequote.
(jsx-quotes)
[error] 92-92: Replace "Previous" with 'Previous'
(prettier/prettier)
[error] 92-92: Unexpected usage of doublequote.
(jsx-quotes)
[error] 99-99: Replace "flex·w-[35vw]·justify-center·gap-3" with 'flex·w-[35vw]·justify-center·gap-3'
(prettier/prettier)
[error] 99-99: Unexpected usage of doublequote.
(jsx-quotes)
[error] 116-116: Replace "bg-white" with 'bg-white'
(prettier/prettier)
[error] 116-116: Unexpected usage of doublequote.
(jsx-quotes)
[error] 117-117: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal'
(prettier/prettier)
[error] 117-117: Unexpected usage of doublequote.
(jsx-quotes)
[error] 118-118: Replace "Next" with 'Next'
(prettier/prettier)
[error] 118-118: Unexpected usage of doublequote.
(jsx-quotes)
[error] 126-126: Newline required at end of file but not found.
(eol-last)
[error] 126-126: Insert ⏎
(prettier/prettier)
pages/blog/index.tsx
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 58-58: Delete ,
(prettier/prettier)
[error] 58-58: Unexpected trailing comma.
(comma-dangle)
[error] 62-62: Delete ,
(prettier/prettier)
[error] 62-62: Unexpected trailing comma.
(comma-dangle)
[error] 63-63: Delete ,
(prettier/prettier)
[error] 63-63: Unexpected trailing comma.
(comma-dangle)
[error] 83-86: Expected blank line after variable declarations.
(newline-after-var)
[error] 85-85: Delete ,
(prettier/prettier)
[error] 85-85: Unexpected trailing comma.
(comma-dangle)
[error] 87-96: Expected blank line before this statement.
(padding-line-between-statements)
[error] 90-90: Delete ,
(prettier/prettier)
[error] 90-90: Unexpected trailing comma.
(comma-dangle)
[error] 94-94: Delete ,
(prettier/prettier)
[error] 94-94: Unexpected trailing comma.
(comma-dangle)
[error] 95-95: Delete ,
(prettier/prettier)
[error] 95-95: Unexpected trailing comma.
(comma-dangle)
[error] 99-99: Replace => with ·=>·
(prettier/prettier)
[error] 100-100: Expected blank line after variable declarations.
(newline-after-var)
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····
(prettier/prettier)
[error] 101-101: Expected blank line before this statement.
(padding-line-between-statements)
[error] 101-101: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 101-101: Delete ·
(prettier/prettier)
[error] 102-102: A space is required after ','.
(comma-spacing)
[error] 102-102: Insert ·
(prettier/prettier)
[error] 159-160: Delete ⏎·············
(prettier/prettier)
[error] 179-179: Delete ··
(prettier/prettier)
[error] 180-180: Delete ··
(prettier/prettier)
[error] 181-181: Delete ··
(prettier/prettier)
[error] 182-182: Delete ··
(prettier/prettier)
[error] 183-183: Delete ··
(prettier/prettier)
[error] 184-184: Delete ··
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
components/icons/Previous.tsx
[error] 20-20: Newline required at end of file but not found. eol-last
[error] 20-20: Insert ⏎ prettier/prettier
components/icons/Next.tsx
[error] 20-20: Newline required at end of file but not found. eol-last
[error] 20-20: Insert ⏎ prettier/prettier
components/navigation/BlogPagination.tsx
[error] 34-34: Delete , prettier/prettier
[error] 34-34: Unexpected trailing comma. comma-dangle
[error] 82-82: Replace ⏎······aria-label="Blog·pagination"⏎······className="mt-8·flex·items-center·justify-center·gap-2·p-4"⏎···· with ·aria-label='Blog·pagination'·className='mt-8·flex·items-center·justify-center·gap-2·p-4' prettier/prettier
[error] 83-83: Unexpected usage of doublequote. jsx-quotes
[error] 84-84: Unexpected usage of doublequote. jsx-quotes
[error] 89-89: Replace "Previous·page" with 'Previous·page' prettier/prettier
[error] 89-89: Unexpected usage of doublequote. jsx-quotes
[error] 90-90: Replace "bg-white" with 'bg-white' prettier/prettier
[error] 90-90: Unexpected usage of doublequote. jsx-quotes
[error] 91-91: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal' prettier/prettier
[error] 91-91: Unexpected usage of doublequote. jsx-quotes
[error] 92-92: Replace "Previous" with 'Previous' prettier/prettier
[error] 92-92: Unexpected usage of doublequote. jsx-quotes
[error] 99-99: Replace "flex·w-[35vw]·justify-center·gap-3" with 'flex·w-[35vw]·justify-center·gap-3' prettier/prettier
[error] 99-99: Unexpected usage of doublequote. jsx-quotes
[error] 116-116: Replace "bg-white" with 'bg-white' prettier/prettier
[error] 116-116: Unexpected usage of doublequote. jsx-quotes
[error] 117-117: Replace "text-[#212525]·font-inter·text-[14px]·font-normal" with 'text-[#212525]·font-inter·text-[14px]·font-normal' prettier/prettier
[error] 117-117: Unexpected usage of doublequote. jsx-quotes
[error] 118-118: Replace "Next" with 'Next' prettier/prettier
[error] 118-118: Unexpected usage of doublequote. jsx-quotes
[error] 126-126: Newline required at end of file but not found. eol-last
[error] 126-126: Insert ⏎ prettier/prettier
pages/blog/index.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 58-58: Delete , prettier/prettier
[error] 58-58: Unexpected trailing comma. comma-dangle
[error] 62-62: Delete , prettier/prettier
[error] 62-62: Unexpected trailing comma. comma-dangle
[error] 63-63: Delete , prettier/prettier
[error] 63-63: Unexpected trailing comma. comma-dangle
[error] 83-83: Expected blank line after variable declarations. newline-after-var
[error] 85-85: Delete , prettier/prettier
[error] 85-85: Unexpected trailing comma. comma-dangle
[error] 87-87: Expected blank line before this statement. padding-line-between-statements
[error] 90-90: Delete , prettier/prettier
[error] 90-90: Unexpected trailing comma. comma-dangle
[error] 94-94: Delete , prettier/prettier
[error] 94-94: Unexpected trailing comma. comma-dangle
[error] 95-95: Delete , prettier/prettier
[error] 95-95: Unexpected trailing comma. comma-dangle
[error] 99-99: Replace => with ·=>· prettier/prettier
[error] 100-100: Expected blank line after variable declarations. newline-after-var
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎···· prettier/prettier
[error] 101-101: Expected blank line before this statement. padding-line-between-statements
[error] 101-101: Trailing spaces not allowed. no-trailing-spaces
[error] 101-101: Delete · prettier/prettier
[error] 102-102: A space is required after ','. comma-spacing
[error] 102-102: Insert · prettier/prettier
[error] 159-159: Delete ⏎············· prettier/prettier
[error] 179-179: Delete ·· prettier/prettier
[error] 180-180: Delete ·· prettier/prettier
[error] 181-181: Delete ·· prettier/prettier
[error] 182-182: Delete ·· prettier/prettier
[error] 183-183: Delete ·· prettier/prettier
⏰ Context from checks skipped due to timeout of 180000ms (4)
- GitHub Check: Redirect rules - asyncapi-website
- GitHub Check: Header rules - asyncapi-website
- GitHub Check: Pages changed - asyncapi-website
- GitHub Check: Lighthouse CI
🔇 Additional comments (1)
pages/blog/index.tsx (1)
70-78: LGTM! Well-implemented state management.Good use of:
- Constant for blogs per page
- State management for current page
- Memoization to optimize performance
|
@Adi-204 use "npm run lint:fix" to fix the lint errors |
|
But I am facing issue in linting code. My PR is failing on that and if I run npm run lint:fix below error shown. It would be great if you help me figure out. https://asyncapi.slack.com/files/U0867GV384D/F08BF2JEL1J/image.png |
|
You opened 2 PRs with the same title maybe you can close one |
It shows file not found 😅 |
There was a problem hiding this comment.
Actionable comments posted: 2
🔭 Outside diff range comments (1)
pages/blog/index.tsx (1)
1-16: Fix import sorting to resolve linting errors.The imports need to be sorted according to the project's linting rules.
Run
npm run lint:fixto automatically sort the imports.🧰 Tools
🪛 ESLint
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
🪛 GitHub Actions: PR testing - if Node project
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
🧹 Nitpick comments (1)
pages/blog/index.tsx (1)
173-177: Consider enhancing loading state handling.The current loading state only shows during initial client-side rendering. Consider also showing it during page transitions for a better user experience.
+ const [isLoading, setIsLoading] = useState(false); + + useEffect(() => { + const handleStart = () => setIsLoading(true); + const handleComplete = () => setIsLoading(false); + + router.events.on('routeChangeStart', handleStart); + router.events.on('routeChangeComplete', handleComplete); + + return () => { + router.events.off('routeChangeStart', handleStart); + router.events.off('routeChangeComplete', handleComplete); + }; + }, [router]); - {Object.keys(currentPosts).length > 0 && !isClient && ( + {(Object.keys(currentPosts).length > 0 && !isClient) || isLoading && (
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
pages/blog/index.tsx(4 hunks)
🧰 Additional context used
🪛 ESLint
pages/blog/index.tsx
[error] 1-16: Run autofix to sort these imports!
(simple-import-sort/imports)
[error] 58-58: Delete ,
(prettier/prettier)
[error] 58-58: Unexpected trailing comma.
(comma-dangle)
[error] 62-62: Delete ,
(prettier/prettier)
[error] 62-62: Unexpected trailing comma.
(comma-dangle)
[error] 63-63: Delete ,
(prettier/prettier)
[error] 63-63: Unexpected trailing comma.
(comma-dangle)
[error] 83-86: Expected blank line after variable declarations.
(newline-after-var)
[error] 85-85: Delete ,
(prettier/prettier)
[error] 85-85: Unexpected trailing comma.
(comma-dangle)
[error] 87-96: Expected blank line before this statement.
(padding-line-between-statements)
[error] 90-90: Delete ,
(prettier/prettier)
[error] 90-90: Unexpected trailing comma.
(comma-dangle)
[error] 94-94: Delete ,
(prettier/prettier)
[error] 94-94: Unexpected trailing comma.
(comma-dangle)
[error] 95-95: Delete ,
(prettier/prettier)
[error] 95-95: Unexpected trailing comma.
(comma-dangle)
[error] 99-99: Replace => with ·=>·
(prettier/prettier)
[error] 100-100: Expected blank line after variable declarations.
(newline-after-var)
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····
(prettier/prettier)
[error] 101-101: Expected blank line before this statement.
(padding-line-between-statements)
[error] 101-101: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 101-101: Delete ·
(prettier/prettier)
[error] 102-102: A space is required after ','.
(comma-spacing)
[error] 102-102: Insert ·
(prettier/prettier)
[error] 159-160: Delete ⏎·············
(prettier/prettier)
[error] 179-179: Delete ··
(prettier/prettier)
[error] 180-180: Delete ··
(prettier/prettier)
[error] 181-181: Delete ··
(prettier/prettier)
[error] 182-182: Delete ··
(prettier/prettier)
[error] 183-183: Delete ··
(prettier/prettier)
[error] 184-184: Delete ··
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
pages/blog/index.tsx
[error] 1-1: Run autofix to sort these imports! simple-import-sort/imports
[error] 58-58: Delete , prettier/prettier
[error] 58-58: Unexpected trailing comma. comma-dangle
[error] 62-62: Delete , prettier/prettier
[error] 62-62: Unexpected trailing comma. comma-dangle
[error] 63-63: Delete , prettier/prettier
[error] 63-63: Unexpected trailing comma. comma-dangle
[error] 83-83: Expected blank line after variable declarations. newline-after-var
[error] 85-85: Delete , prettier/prettier
[error] 85-85: Unexpected trailing comma. comma-dangle
[error] 87-87: Expected blank line before this statement. padding-line-between-statements
[error] 90-90: Delete , prettier/prettier
[error] 90-90: Unexpected trailing comma. comma-dangle
[error] 94-94: Delete , prettier/prettier
[error] 94-94: Unexpected trailing comma. comma-dangle
[error] 95-95: Delete , prettier/prettier
[error] 95-95: Unexpected trailing comma. comma-dangle
[error] 99-99: Replace => with ·=>· prettier/prettier
[error] 100-100: Expected blank line after variable declarations. newline-after-var
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎···· prettier/prettier
[error] 101-101: Expected blank line before this statement. padding-line-between-statements
[error] 101-101: Trailing spaces not allowed. no-trailing-spaces
[error] 101-101: Delete · prettier/prettier
[error] 102-102: A space is required after ','. comma-spacing
[error] 102-102: Insert · prettier/prettier
🔇 Additional comments (2)
pages/blog/index.tsx (2)
70-78: LGTM! Well-structured pagination state management.The pagination state is properly implemented with:
- A reasonable page size of 9 blogs
- Efficient post slicing using useMemo to prevent unnecessary recalculations
159-184: LGTM! Clean UI integration of pagination.The pagination UI is well integrated with:
- Proper empty state handling for both posts and currentPosts
- Correct placement of the BlogPagination component
- Appropriate prop passing for pagination controls
🧰 Tools
🪛 ESLint
[error] 159-160: Delete
⏎·············(prettier/prettier)
[error] 179-179: Delete
··(prettier/prettier)
[error] 180-180: Delete
··(prettier/prettier)
[error] 181-181: Delete
··(prettier/prettier)
[error] 182-182: Delete
··(prettier/prettier)
[error] 183-183: Delete
··(prettier/prettier)
[error] 184-184: Delete
··(prettier/prettier)
pages/blog/index.tsx
Outdated
| useEffect(()=>{ | ||
| const currentPageNumber = Math.max(1, Number.isNaN(parseInt(router.query.page as string, 10)) ? 1 : parseInt(router.query.page as string, 10)); | ||
| setCurrentPage(currentPageNumber); | ||
| },[router.query.page]); |
There was a problem hiding this comment.
Fix formatting in useEffect hook.
The useEffect implementation has spacing and formatting issues.
Apply these formatting fixes:
- useEffect(()=>{
+ useEffect(() => {
const currentPageNumber = Math.max(
1,
Number.isNaN(parseInt(router.query.page as string, 10))
? 1
: parseInt(router.query.page as string, 10)
);
setCurrentPage(currentPageNumber);
- },[router.query.page]);
+ }, [router.query.page]);📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| useEffect(()=>{ | |
| const currentPageNumber = Math.max(1, Number.isNaN(parseInt(router.query.page as string, 10)) ? 1 : parseInt(router.query.page as string, 10)); | |
| setCurrentPage(currentPageNumber); | |
| },[router.query.page]); | |
| useEffect(() => { | |
| const currentPageNumber = Math.max( | |
| 1, | |
| Number.isNaN(parseInt(router.query.page as string, 10)) | |
| ? 1 | |
| : parseInt(router.query.page as string, 10) | |
| ); | |
| setCurrentPage(currentPageNumber); | |
| }, [router.query.page]); |
🧰 Tools
🪛 ESLint
[error] 99-99: Replace => with ·=>·
(prettier/prettier)
[error] 100-100: Expected blank line after variable declarations.
(newline-after-var)
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎····
(prettier/prettier)
[error] 101-101: Expected blank line before this statement.
(padding-line-between-statements)
[error] 101-101: Trailing spaces not allowed.
(no-trailing-spaces)
[error] 101-101: Delete ·
(prettier/prettier)
[error] 102-102: A space is required after ','.
(comma-spacing)
[error] 102-102: Insert ·
(prettier/prettier)
🪛 GitHub Actions: PR testing - if Node project
[error] 99-99: Replace => with ·=>· prettier/prettier
[error] 100-100: Expected blank line after variable declarations. newline-after-var
[error] 100-100: Replace 1,·Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10) with ⏎······1,⏎······Number.isNaN(parseInt(router.query.page·as·string,·10))·?·1·:·parseInt(router.query.page·as·string,·10)⏎···· prettier/prettier
[error] 101-101: Expected blank line before this statement. padding-line-between-statements
[error] 101-101: Trailing spaces not allowed. no-trailing-spaces
[error] 101-101: Delete · prettier/prettier
[error] 102-102: A space is required after ','. comma-spacing
[error] 102-102: Insert · prettier/prettier
pages/blog/index.tsx
Outdated
| const paginate = (pageNumber: number) => { | ||
| setCurrentPage(pageNumber); | ||
| const { query } = router; | ||
| const newQuery = { | ||
| ...query, | ||
| page: pageNumber, | ||
| }; | ||
| router.push( | ||
| { | ||
| pathname: router.pathname, | ||
| query: newQuery, | ||
| }, | ||
| undefined, | ||
| { | ||
| shallow: true, | ||
| }, | ||
| ); | ||
| }; |
There was a problem hiding this comment.
Fix formatting in paginate function.
The function logic is correct but contains linting errors with trailing commas and spacing.
Apply these formatting fixes:
const paginate = (pageNumber: number) => {
setCurrentPage(pageNumber);
const { query } = router;
const newQuery = {
...query,
- page: pageNumber,
+ page: pageNumber
};
router.push(
{
pathname: router.pathname,
- query: newQuery,
+ query: newQuery
},
undefined,
{
- shallow: true,
+ shallow: true
}
);
};📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const paginate = (pageNumber: number) => { | |
| setCurrentPage(pageNumber); | |
| const { query } = router; | |
| const newQuery = { | |
| ...query, | |
| page: pageNumber, | |
| }; | |
| router.push( | |
| { | |
| pathname: router.pathname, | |
| query: newQuery, | |
| }, | |
| undefined, | |
| { | |
| shallow: true, | |
| }, | |
| ); | |
| }; | |
| const paginate = (pageNumber: number) => { | |
| setCurrentPage(pageNumber); | |
| const { query } = router; | |
| const newQuery = { | |
| ...query, | |
| page: pageNumber | |
| }; | |
| router.push( | |
| { | |
| pathname: router.pathname, | |
| query: newQuery | |
| }, | |
| undefined, | |
| { | |
| shallow: true | |
| } | |
| ); | |
| }; |
🧰 Tools
🪛 ESLint
[error] 83-86: Expected blank line after variable declarations.
(newline-after-var)
[error] 85-85: Delete ,
(prettier/prettier)
[error] 85-85: Unexpected trailing comma.
(comma-dangle)
[error] 87-96: Expected blank line before this statement.
(padding-line-between-statements)
[error] 90-90: Delete ,
(prettier/prettier)
[error] 90-90: Unexpected trailing comma.
(comma-dangle)
[error] 94-94: Delete ,
(prettier/prettier)
[error] 94-94: Unexpected trailing comma.
(comma-dangle)
[error] 95-95: Delete ,
(prettier/prettier)
[error] 95-95: Unexpected trailing comma.
(comma-dangle)
🪛 GitHub Actions: PR testing - if Node project
[error] 83-83: Expected blank line after variable declarations. newline-after-var
[error] 85-85: Delete , prettier/prettier
[error] 85-85: Unexpected trailing comma. comma-dangle
[error] 87-87: Expected blank line before this statement. padding-line-between-statements
[error] 90-90: Delete , prettier/prettier
[error] 90-90: Unexpected trailing comma. comma-dangle
[error] 94-94: Delete , prettier/prettier
[error] 94-94: Unexpected trailing comma. comma-dangle
[error] 95-95: Delete , prettier/prettier
[error] 95-95: Unexpected trailing comma. comma-dangle
|
Sorry Sir for 2 PRs with the same title because I implemented a completely different approach in this second PR. |
|
@Adi-204 this might help to fix that error |
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## master #3638 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 20 20
Lines 732 732
=========================================
Hits 732 732 ☔ View full report in Codecov by Sentry. |
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
pages/blog/index.tsx (2)
70-78: Consider making blogsPerPage configurable.The pagination implementation looks good, but consider making
blogsPerPageconfigurable through environment variables or component props for better flexibility.-const blogsPerPage = 9; +const blogsPerPage = process.env.NEXT_PUBLIC_BLOGS_PER_PAGE ? parseInt(process.env.NEXT_PUBLIC_BLOGS_PER_PAGE, 10) : 9;
21-194: Consider implementing infinite scroll as an alternative.While the current pagination implementation is solid, consider adding infinite scroll as an alternative navigation method for better mobile user experience. This could be implemented as a user preference.
Example implementation approach:
- Add a user preference setting for pagination style (traditional/infinite scroll)
- Use
IntersectionObserverfor infinite scroll- Keep URL-based navigation for deep linking
Would you like me to provide a detailed implementation plan for this enhancement?
📜 Review details
Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
components/icons/Next.tsx(1 hunks)components/icons/Previous.tsx(1 hunks)components/navigation/BlogPagination.tsx(1 hunks)pages/blog/index.tsx(3 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- components/icons/Next.tsx
- components/navigation/BlogPagination.tsx
- components/icons/Previous.tsx
🔇 Additional comments (5)
pages/blog/index.tsx (5)
2-2: LGTM! Import changes are appropriate.The added imports for React hooks and the BlogPagination component are necessary for implementing the pagination functionality.
Also applies to: 7-7
52-66: LGTM! Filter changes maintain pagination state.The modifications to
clearFiltersandshowClearFilterscorrectly handle the pagination state while clearing other filters.
80-98: Fix formatting in paginate function.The function logic is correct but contains linting errors with trailing commas and spacing.
100-107: Fix formatting in useEffect hook.The useEffect implementation has spacing and formatting issues.
164-189: LGTM! UI integration is well implemented.The changes correctly:
- Handle empty states
- Use currentPosts for pagination
- Integrate the BlogPagination component
|
@vishvamsinh28 thank you sir for lint error fixing. |
|
@vishvamsinh28 sir what is this Lighthouse CI / Lighthouse CI (pull_request_target) error? Can you please explain a bit? |
Description
Added pagination feature on blog page.
Related issue(s)
Fixes #3570
Summary by CodeRabbit
New Features
Refactor