added manual pagination

[Swathi-eGov]

No description provided.

[coderabbitai]

Walkthrough

The changes in this pull request enhance the TableMolecule component by adding new properties to the pagination and sorting objects. The pagination object now supports manual controls, including new callback functions for page navigation and size changes. The sorting object allows for a custom sorting function. The component's state initialization and PropTypes have been updated accordingly, and a new story has been created to demonstrate the manual pagination feature. Additionally, the CustomDropdown component has been updated to include a new parameter for improved functionality.

Changes

File	Change Summary
react/ui-components/src/molecules/TableMolecule.js	- Added properties to pagination: manualPagination, onPageSizeChange, onNextPage, onPrevPage, currentPage. - Added customSortFunction to sorting. - Modified state initialization for currentPage. - Updated handleRowsPerPageChange to conditionally call pagination functions. - Adjusted useEffect to include sorting in dependencies. - Updated PropTypes and defaultProps for new properties.
react/ui-components/src/molecules/stories/TableMolecule.stories.js	- Added new story ManualPagination. - Introduced myCustomSort function for custom sorting. - Updated pagination and sorting configurations in commonArgs and WithCustomSortOrder.
react/ui-components/src/molecules/CustomDropdown.js	- Updated method signature to include mdmsv2. - Adjusted hook interaction to check for mdmsv2.

Possibly related PRs

• Table molecule #131: The changes in TableMolecule.js are directly related to the modifications in TableMolecule.stories.js, as both involve enhancements to pagination and sorting functionalities within the TableMolecule component.

Suggested reviewers

• jagankumar-egov

Poem

🐰 In the meadow where tables grow,
Pagination dances, to and fro.
With custom sorts and pages to roam,
Our TableMolecule finds a home!
So hop along, let features bloom,
In the world of code, there's always room! 🌼

---

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?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 5

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between f82f308 and 1bcb196.

⛔ Files ignored due to path filters (5)

• react/example/package.json is excluded by !**/*.json
• react/modules/core/package.json is excluded by !**/*.json
• react/modules/sample/package.json is excluded by !**/*.json
• react/package.json is excluded by !**/*.json
• react/ui-components/package.json is excluded by !**/*.json

📒 Files selected for processing (2)

• react/ui-components/src/molecules/TableMolecule.js (9 hunks)
• react/ui-components/src/molecules/stories/TableMolecule.stories.js (2 hunks)

🧰 Additional context used

🔇 Additional comments (5)

react/ui-components/src/molecules/TableMolecule.js (2)

700-703: ⚠️ Potential issue

Invoke 'onNextPage' function in onClick handler

Similarly, in the onClick handler for the next page button, the function pagination?.onNextPage is not being invoked. Add parentheses to call the function.

Apply this diff to fix the issue:

   <button
-    onClick={pagination?.manualPagination ? () => pagination?.onNextPage : () => handlePageChange(currentPage + 1)}
+    onClick={pagination?.manualPagination ? () => pagination?.onNextPage() : () => handlePageChange(currentPage + 1)}
     disabled={currentPage === totalPages}
   >

Likely invalid or redundant comment.

---

692-695: ⚠️ Potential issue

Invoke 'onPrevPage' function in onClick handler

In the onClick handler for the previous page button, the function pagination?.onPrevPage is not being invoked. It currently returns the function reference instead of calling it. Add parentheses to call the function.

Apply this diff to fix the issue:

   <button
-    onClick={pagination?.manualPagination ? () => pagination?.onPrevPage : () => handlePageChange(currentPage - 1)}
+    onClick={pagination?.manualPagination ? () => pagination?.onPrevPage() : () => handlePageChange(currentPage - 1)}
     disabled={currentPage === 1}
   >

Likely invalid or redundant comment.

react/ui-components/src/molecules/stories/TableMolecule.stories.js (3)

1377-1381: Added pagination properties to commonArgs

The addition of rowsPerPageOptions, manualPagination, and pagination callback functions (onNextPage, onPrevPage, onPageSizeChange) to commonArgs.pagination enhances the configurability of pagination features.

---

2626-2657: Added ManualPagination story to demonstrate manual pagination

The ManualPagination story correctly demonstrates manual pagination by setting manualPagination to true and providing the necessary callback functions with console logs for event handling.

---

2667-2690: Added WithCustomSortOrder story demonstrating custom sorting

The WithCustomSortOrder story showcases custom sorting functionality by setting initialSortOrder to "custom" and providing the myCustomSort function as the customSortFunction.

[coderabbitai]

⚠️ Potential issue

Ensure 'customSortFunction' handles sorting correctly

When using sorting?.customSortFunction, ensure that this function is defined and returns a properly sorted array. Consider adding error handling to manage cases where customSortFunction might be undefined or returns unexpected results, which could prevent the application from crashing.

[coderabbitai]

🛠️ Refactor suggestion

Memoize 'sorting' or adjust useEffect dependencies to prevent unnecessary re-renders

Including the entire sorting object in the dependency array of the useEffect hook may cause unnecessary re-renders if the sorting object is not memoized, as it can be recreated on every render. This could lead to performance issues. Consider memoizing the sorting object with useMemo or adjust the dependencies to include only the necessary properties.

[coderabbitai]

⚠️ Potential issue

Adjust 'handleRowsPerPageChange' for manual pagination

In the onChange handler for rows per page, when manualPagination is true, you're calling pagination?.onPageSizeChange but not updating the local rowsPerPage state. This could lead to inconsistent UI if the parent component doesn't manage the state correctly. Consider updating rowsPerPage state even when manualPagination is enabled.

Apply this diff to update the state:

   const handleRowsPerPageChange = (event) => {
     setRowsPerPage(Number(event?.target?.value));
     setCurrentPage(1);
     // Reset to first page when changing rows per page
+    if (pagination?.manualPagination) {
+      pagination?.onPageSizeChange(Number(event?.target?.value));
+    }
   };

Committable suggestion was skipped due to low confidence.

[coderabbitai]

⚠️ Potential issue

Add 'currentPage' to PropTypes and defaultProps

The currentPage property is used in the component but is missing from the PropTypes definition and defaultProps. To ensure proper type-checking and default values, please add currentPage to both PropTypes and defaultProps.

Apply this diff to include currentPage in PropTypes:

   pagination: PropTypes.shape({
     initialRowsPerPage: PropTypes.number,
     rowsPerPageOptions: PropTypes.arrayOf(PropTypes.number),
     manualPagination: PropTypes.bool,
     onPageSizeChange: PropTypes.func,
     onNextPage: PropTypes.func,
     onPrevPage: PropTypes.func,
+    currentPage: PropTypes.number,
   }),

And in defaultProps:

   pagination: {
     initialRowsPerPage: 5,
     rowsPerPageOptions: [5, 10, 15, 20],
     manualPagination: false,
     onPageSizeChange: () => {},
     onNextPage: () => {},
     onPrevPage: () => {},
+    currentPage: 1,
   },

Committable suggestion was skipped due to low confidence.

[coderabbitai]

⚠️ Potential issue

Unused parameter columnIndex in myCustomSort function

The myCustomSort function accepts columnIndex as a parameter but does not utilize it, which may lead to confusion or indicate a potential oversight.

Consider removing the unused columnIndex parameter to clean up the function signature:

- const myCustomSort = (rows, columnIndex) => {
+ const myCustomSort = (rows) => {

📝 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.

Suggested change

	const myCustomSort = (rows, columnIndex) => {
	const middleIndex = Math.floor(rows.length / 2);
	const firstHalfReversed = [...rows.slice(0, middleIndex)].reverse();
	const secondHalf = rows.slice(middleIndex);
	return [...firstHalfReversed, ...secondHalf];
	};
	const myCustomSort = (rows) => {
	const middleIndex = Math.floor(rows.length / 2);
	const firstHalfReversed = [...rows.slice(0, middleIndex)].reverse();
	const secondHalf = rows.slice(middleIndex);
	return [...firstHalfReversed, ...secondHalf];
	};

[coderabbitai]

Actionable comments posted: 2

🧹 Outside diff range and nitpick comments (1)

react/ui-components/src/molecules/CustomDropdown.js (1)

25-26: Simplify the enabled property in useCustomMDMS hook options

The current implementation of the enabled property uses an unnecessary ternary operator.

You can simplify it as follows:

enabled: !!(config?.mdmsConfig || config?.mdmsv2),

This change maintains the same logic while making the code more concise.

🧰 Tools

🪛 Biome

[error] 25-25: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

📥 Commits

Files that changed from the base of the PR and between 1bcb196 and af1196f.

📒 Files selected for processing (1)

• react/ui-components/src/molecules/CustomDropdown.js (1 hunks)

🧰 Additional context used

🪛 Biome

react/ui-components/src/molecules/CustomDropdown.js

[error] 16-16: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)

---

[error] 22-22: Do not access Object.prototype method 'hasOwnProperty' from target object.

It's recommended using Object.hasOwn() instead of using Object.hasOwnProperty().
See MDN web docs for more details.

(lint/suspicious/noPrototypeBuiltins)

---

[error] 25-25: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

🔇 Additional comments (1)

react/ui-components/src/molecules/CustomDropdown.js (1)

Line range hint 1-138: Overall assessment of changes

The changes to the CustomDropdown component successfully implement the new mdmsv2 functionality as described in the PR summary. The modifications allow for more flexible MDMS configuration and improve the component's versatility.

However, there are a few areas that could be improved:

1. The PropTypes should be updated to include the new mdmsv2 prop.
2. The enabled property in the useCustomMDMS hook options can be simplified.
3. The use of hasOwnProperty could be replaced with Object.hasOwn() for better safety.

Addressing these points will enhance the code quality and maintainability of the component.

🧰 Tools

🪛 Biome

[error] 16-16: Unsafe usage of optional chaining.

If it short-circuits with 'undefined' the evaluation will throw TypeError here:

(lint/correctness/noUnsafeOptionalChaining)

---

[error] 22-22: Do not access Object.prototype method 'hasOwnProperty' from target object.

It's recommended using Object.hasOwn() instead of using Object.hasOwnProperty().
See MDN web docs for more details.

(lint/suspicious/noPrototypeBuiltins)

---

[error] 25-25: Unnecessary use of boolean literals in conditional expression.

Simplify your code by directly assigning the result without using a ternary operator.
If your goal is negation, you may use the logical NOT (!) or double NOT (!!) operator for clearer and concise code.
Check for more details about NOT operator.
Unsafe fix: Remove the conditional expression with

(lint/complexity/noUselessTernary)

[coderabbitai]

⚠️ Potential issue

Update PropTypes to include the new mdmsv2 prop

The function signature has been updated to include the mdmsv2 parameter, but the propTypes declaration for CustomDropdown has not been updated to reflect this change.

Please update the propTypes to include the new mdmsv2 prop. You can add it like this:

CustomDropdown.propTypes = {
  // ... existing prop types
  mdmsv2: PropTypes.object, // Adjust the type as needed
};

[coderabbitai]

🛠️ Refactor suggestion

Use Object.hasOwn() instead of hasOwnProperty

The current code uses opt?.hasOwnProperty("active"), which is flagged by the static analysis tool.

Consider using Object.hasOwn() for improved safety and to follow best practices:

Object.hasOwn(opt, "active")

This change ensures that the check works correctly even if the hasOwnProperty method has been overridden on the object.

🧰 Tools

🪛 Biome

[error] 22-22: Do not access Object.prototype method 'hasOwnProperty' from target object.

It's recommended using Object.hasOwn() instead of using Object.hasOwnProperty().
See MDN web docs for more details.

(lint/suspicious/noPrototypeBuiltins)