feat(tp): pagination for browse jobseekers page #915
Conversation
WalkthroughThe changes introduce pagination functionality for jobseeker profiles, allowing users to navigate through profiles in manageable chunks. A new Changes
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
CodeRabbit Configuration File (
|
…ui icons in pagination.tsx
…library to share across our apps; remove duplicated style files
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (4)
libs/shared-atomic-design-components/src/assets/images/chevron-down.svgis excluded by!**/*.svglibs/shared-atomic-design-components/src/assets/images/chevron-left.svgis excluded by!**/*.svglibs/shared-atomic-design-components/src/assets/images/chevron-right.svgis excluded by!**/*.svglibs/shared-atomic-design-components/src/assets/images/ellipsis-horizontal.svgis excluded by!**/*.svg
Files selected for processing (20)
- apps/redi-connect/src/components/organisms/Footer.tsx (2 hunks)
- apps/redi-connect/src/pages/app/applications/application-card/ApplicationCard.tsx (1 hunks)
- apps/redi-connect/src/pages/app/applications/application-card/MobileApplicationCard.tsx (1 hunks)
- apps/redi-talent-pool/src/components/molecules/AccordionForm.tsx (1 hunks)
- apps/redi-talent-pool/src/components/organisms/Footer.tsx (2 hunks)
- apps/redi-talent-pool/src/components/templates/LoggedIn.tsx (2 hunks)
- apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx (8 hunks)
- libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/atoms/Icon.scss (1 hunks)
- libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx (2 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/FaqItem.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/Paginate.scss (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/index.ts (1 hunks)
- libs/shared-atomic-design-components/src/lib/styles/global.scss (1 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx (3 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (1 hunks)
- libs/shared-shadcn-ui-components/src/index.ts (1 hunks)
Files skipped from review due to trivial changes (9)
- apps/redi-connect/src/pages/app/applications/application-card/ApplicationCard.tsx
- apps/redi-talent-pool/src/components/molecules/AccordionForm.tsx
- libs/shared-atomic-design-components/src/lib/atoms/FormDraggableAccordion.tsx
- libs/shared-atomic-design-components/src/lib/atoms/FormSelect.tsx
- libs/shared-atomic-design-components/src/lib/molecules/FaqItem.tsx
- libs/shared-atomic-design-components/src/lib/molecules/FilterDropdown.tsx
- libs/shared-atomic-design-components/src/lib/molecules/Paginate.scss
- libs/shared-atomic-design-components/src/lib/styles/global.scss
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx
Additional comments not posted (31)
libs/shared-shadcn-ui-components/src/index.ts (1)
2-2: LGTM!The export statement for the
paginationcomponent is correctly added.The code changes are approved.
libs/shared-atomic-design-components/src/lib/molecules/index.ts (1)
7-7: LGTM!The export statement for the
Paginatecomponent is correctly added.The code changes are approved.
libs/shared-atomic-design-components/src/lib/atoms/Icon.scss (1)
36-38: LGTM!The style rule for the
.Iconcomponent in the disabled state is correctly added.The code changes are approved.
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx (3)
1-16: LGTM!The imports and interface are correctly defined.
The code changes are approved.
33-50: LGTM!The functions are correctly implemented.
The code changes are approved.
99-120: LGTM!The return statement is correctly implemented.
The code changes are approved.
apps/redi-talent-pool/src/components/templates/LoggedIn.tsx (3)
Line range hint
9-17: LGTM!The imports and interface are correctly defined.
The code changes are approved.
Line range hint
40-40: LGTM!The return statement is correctly implemented.
The code changes are approved.
29-29: Removeconsole.logstatement.The
console.logstatement should be removed in production code.Apply this diff to remove the
console.logstatement:- console.log('logging current user as type', userType)Likely invalid or redundant comment.
libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (7)
1-17: LGTM!The imports and
Paginationcomponent are correctly defined.The code changes are approved.
20-30: LGTM!The
PaginationContentcomponent is correctly implemented.The code changes are approved.
32-38: LGTM!The
PaginationItemcomponent is correctly implemented.The code changes are approved.
46-64: LGTM!The
PaginationLinkcomponent is correctly implemented.The code changes are approved.
66-88: LGTM!The
PaginationPreviouscomponent is correctly implemented.The code changes are approved.
90-112: LGTM!The
PaginationNextcomponent is correctly implemented.The code changes are approved.
114-127: LGTM!The
PaginationEllipsiscomponent is correctly implemented.The code changes are approved.
apps/redi-connect/src/pages/app/applications/application-card/MobileApplicationCard.tsx (1)
98-100: LGTM!The icon update from
"chevron"to"chevronDown"is straightforward and likely intended to improve the visual representation of the dropdown indicator.The code changes are approved.
libs/shared-atomic-design-components/src/lib/atoms/Icon.tsx (2)
14-16: LGTM!The new icons
ChevronDown,ChevronLeft,ChevronRight, andEllipsisHorizontalare correctly imported and follow the existing pattern.The code changes are approved.
Also applies to: 21-21
55-55: LGTM!The updates to the
Iconsobject are correctly implemented and enhance the flexibility and specificity of the icon components available in the application.The code changes are approved.
Also applies to: 60-62
apps/redi-connect/src/components/organisms/Footer.tsx (2)
92-93: LGTM!Updating the
keyprop for each list item in the support links section to include theindexensures that each list item has a distinct key, improving rendering performance and reducing the likelihood of rendering issues.The code changes are approved.
117-118: LGTM!Updating the
keyprop for each list item in the legal links section to include theindexensures that each list item has a distinct key, improving rendering performance and reducing the likelihood of rendering issues.The code changes are approved.
apps/redi-talent-pool/src/components/organisms/Footer.tsx (2)
98-99: LGTM!The updated key generation logic ensures unique keys for each list item, improving React's rendering performance.
The code changes are approved.
123-124: LGTM!The updated key generation logic ensures unique keys for each list item, improving React's rendering performance.
The code changes are approved.
apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx (8)
13-13: LGTM!The import statement for the
Paginatecomponent is correct and necessary for the new pagination functionality.The code changes are approved.
27-27: LGTM!The import statement for the
useStatehook is correct and necessary for managing the current page number state.The code changes are approved.
45-45: LGTM!The
JOBSEEKER_CARDS_PER_PAGEconstant is correctly defined and will be used for pagination logic.The code changes are approved.
50-50: LGTM!The usage of the
useStatehook to manage thecurrentPageNumberstate is correct and necessary for tracking the active page number.The code changes are approved.
109-117: LGTM!The filtering logic based on the
onlyFavoritesflag is correct and ensures that only the relevant jobseeker profiles are considered for pagination.The code changes are approved.
119-124: LGTM!The slicing logic for
filteredJobseekerProfilesis correct and ensures that only the profiles relevant to the current page are displayed.The code changes are approved.
126-129: LGTM!The calculation logic for the total number of items and pages is correct and necessary for the pagination component.
The code changes are approved.
421-427: LGTM!The conditional rendering logic for the
Paginatecomponent is correct and ensures that the pagination component is displayed only when necessary.The code changes are approved.
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx
Outdated
Show resolved
Hide resolved
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- libs/shared-shadcn-ui-components/README.md (1 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx (3 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (1 hunks)
Files skipped from review due to trivial changes (1)
- libs/shared-shadcn-ui-components/README.md
Files skipped from review as they are similar to previous changes (2)
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx
libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx
Outdated
Show resolved
Hide resolved
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx
Outdated
Show resolved
Hide resolved
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx
Outdated
Show resolved
Hide resolved
libs/shared-atomic-design-components/src/lib/molecules/Paginate.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx (8 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.scss (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx (1 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/index.ts (1 hunks)
- libs/shared-shadcn-ui-components/src/index.ts (1 hunks)
Files skipped from review due to trivial changes (1)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.scss
Additional comments not posted (10)
libs/shared-shadcn-ui-components/src/index.ts (2)
1-1: LGTM!The change in the filename casing is consistent with the common convention of using PascalCase for component filenames.
2-2: LGTM!The new export for the
Paginationcomponent enhances the overall component library by making the pagination functionality available for use.The PR summary indicates that this component is part of the implementation for ticket #682, which introduces a pagination feature for the "browse jobseekers" page. The provided visual representations demonstrate how the pagination adapts based on the user's position within the list, enhancing the user experience by facilitating easier navigation through jobseeker profiles.
libs/shared-atomic-design-components/src/lib/molecules/index.ts (1)
7-7: LGTM!The export statement for the
Paginationcomponent is correctly implemented and follows the existing pattern of exporting components from this index file. The addition of the export statement is consistent with the PR objective of introducing a pagination feature.libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx (2)
1-16: LGTM!The imports and the interface are correctly defined.
22-119: LGTM!The
Paginatecomponent is correctly implemented with proper handling of the pagination logic and rendering.apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx (5)
45-45: LGTM!The code changes are approved.
50-50: LGTM!The code changes are approved.
106-129: LGTM!The code changes are approved.
397-419: LGTM!The code changes are approved.
421-427: LGTM!The code changes are approved.
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (3)
libs/shared-shadcn-ui-components/README.md (3)
35-35: Fix the preposition usage.Please consider using "in" instead of "on" in the following sentence:
-On this step, you must rename the generated file from the lower-cased name `component-name.tsx` to the Pascal-cased `ComponentName.tsx` name following the convention we are using in the codebase. +In this step, you must rename the generated file from the lower-cased name `component-name.tsx` to the Pascal-cased `ComponentName.tsx` name following the convention we are using in the codebase.Tools
LanguageTool
[uncategorized] ~35-~35: The preposition “in” seems more likely in this position than the preposition “on”.
Context: ...so install missing dependencies for it. On this step, you must rename the generate...(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_ON_IN)
40-40: Specify the language for the code block.Please consider specifying the language for the fenced code block to improve syntax highlighting and readability.
Apply this diff to specify the language:
-``` +```typescript export * from './components/ui/ComponentName'
45-49: Specify the language for the code block.Please consider specifying the language for the fenced code block to improve syntax highlighting and readability.
Apply this diff to specify the language:
-``` +```typescript import { Button as ShadcnButton } from '@talent-connect/shared-shadcn-ui-components'Tools
Markdownlint
47-47: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- libs/shared-shadcn-ui-components/README.md (2 hunks)
Additional context used
LanguageTool
libs/shared-shadcn-ui-components/README.md
[uncategorized] ~35-~35: The preposition “in” seems more likely in this position than the preposition “on”.
Context: ...so install missing dependencies for it. On this step, you must rename the generate...(AI_EN_LECTOR_REPLACEMENT_PREPOSITION_ON_IN)
Markdownlint
libs/shared-shadcn-ui-components/README.md
39-39: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
47-47: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
Additional comments not posted (3)
libs/shared-shadcn-ui-components/README.md (3)
15-15: LGTM!The changes are approved.
17-18: LGTM!The changes are approved. The segment addresses the question raised in the previous review comments.
19-20: LGTM!The changes are approved.
There was a problem hiding this comment.
Actionable comments posted: 4
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (5)
- libs/shared-shadcn-ui-components/README.md (2 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx (2 hunks)
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (1 hunks)
- libs/shared-utils/src/index.ts (1 hunks)
- libs/shared-utils/src/lib/tailwind-classnames-util.ts (1 hunks)
Files skipped from review due to trivial changes (3)
- libs/shared-shadcn-ui-components/src/components/ui/button.tsx
- libs/shared-utils/src/index.ts
- libs/shared-utils/src/lib/tailwind-classnames-util.ts
Additional context used
LanguageTool
libs/shared-shadcn-ui-components/README.md
[uncategorized] ~19-~19: Possible missing comma found.
Context: ...ncorporate the prefix to prevent naming conflicts since we are layeringTailwindCSScla...(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~37-~37: Possible missing comma found.
Context: ...to the Pascal-casedComponentName.tsxname following the convention we use in the ...(AI_HYDRA_LEO_MISSING_COMMA)
Markdownlint
libs/shared-shadcn-ui-components/README.md
41-41: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
49-49: null
Fenced code blocks should have a language specified(MD040, fenced-code-language)
Additional comments not posted (8)
libs/shared-shadcn-ui-components/README.md (2)
42-42: Export statement is correct.The export statement correctly reflects the new Pascal-cased component name, ensuring consistency across the codebase.
50-51: Correct usage of import statement.The example demonstrates the correct usage of the
askeyword in import statements to avoid naming conflicts, which is a good practice.libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (6)
10-19: Review of thePaginationcomponent.The
Paginationcomponent is well-implemented as a functional component using React's ComponentProps for type safety. The use ofclassNamesfor dynamic class assignment is appropriate and follows best practices for conditional styling in React components.
- Correctness: The component correctly assigns roles and aria-labels, enhancing accessibility.
- Performance: As a simple wrapper, performance concerns are minimal.
- Maintainability: The code is clean and maintainable with clear display naming for debugging.
23-35: Review of thePaginationContentcomponent.This component serves as a container for pagination items. It uses
React.forwardRefwhich is a good practice for components that might need to handle refs passed to them, especially in a library setting.
- Correctness: Proper forwarding of refs and props.
- Performance: No significant concerns as it primarily handles layout.
- Maintainability: The use of
classNamesfor dynamic styling is consistent and maintainable.
52-69: Review of thePaginationLinkcomponent.This component is crucial for the functionality of the pagination, handling the active state and disabled state styling. The use of
buttonVariantsto dynamically set class names based on the state is a good practice.
- Correctness: Correct handling of
aria-currentand conditional class assignment.- Performance: Efficient use of conditional rendering for performance.
- Maintainability: The component is well-structured and easy to maintain.
72-94: Review of thePaginationPreviouscomponent.The component uses the
PaginationLinkcomponent internally, ensuring consistency in behavior and styling. The use of conditional classes for the disabled state is correctly implemented.
- Correctness: Proper use of
aria-labeland accessibility features.- Performance: No significant concerns as it is a simple wrapper around
PaginationLink.- Maintainability: The code is clean and follows the established patterns in the file.
98-120: Review of thePaginationNextcomponent.Similar to
PaginationPrevious, this component is well-implemented using thePaginationLinkfor consistency. The handling of the disabled state and accessibility features is correct.
- Correctness: Proper use of
aria-labeland accessibility features.- Performance: No significant concerns as it is a simple wrapper around
PaginationLink.- Maintainability: The code is clean and follows the established patterns in the file.
124-138: Review of thePaginationEllipsiscomponent.This component is used to indicate omitted pages in the pagination. The use of
aria-hiddenfor purely decorative elements is a good accessibility practice.
- Correctness: Correct use of accessibility attributes.
- Performance: No significant concerns as it is primarily for display.
- Maintainability: The code is clean and maintainable.
libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (3)
- apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx (8 hunks)
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx (1 hunks)
- libs/shared-shadcn-ui-components/README.md (2 hunks)
Files skipped from review as they are similar to previous changes (3)
- apps/redi-talent-pool/src/pages/app/browse/BrowseCompany.tsx
- libs/shared-atomic-design-components/src/lib/molecules/Pagination.tsx
- libs/shared-shadcn-ui-components/README.md
There was a problem hiding this comment.
Actionable comments posted: 0
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files selected for processing (1)
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx (1 hunks)
Files skipped from review as they are similar to previous changes (1)
- libs/shared-shadcn-ui-components/src/components/ui/pagination.tsx
What Github issue does this PR relate to? Insert link.
The frontend part for ticket #682.
What should the reviewer know?
This PR introduces the following changes:
Pagination.tsxcomponent implemented usingshadcn/uichevron.svgtochevron-down.svgand updating the icon naming in multiple componentschevron-left.svg,chevron-right.svg, andellipsis-horizontal.svgapps/redi-talent-pool/src/components/templates/LoggedIn.tsxScreenshots
Pagination with the first page active:
Pagination with the last page active:
Pagination with the
active page > 3oractive page < totalPages - 3:Summary by CodeRabbit
Summary by CodeRabbit
New Features
Paginationcomponent for flexible pagination controls.Bug Fixes
Documentation
TailwindCSSusage and component naming conventions for better developer guidance.