[Backoffice] Update in page pagination UIs vs functionalities

[HnKnA]

• Enhance pagination UI in Location page

Use 'Enter' click to submit the page change

Pagination_Update.online-video-cutter.com.1.mp4

[mochacr0]

Hi @HnKnA, I’ve been reading through your implementation, and I think it's coming along well. I have a suggestion regarding the pagination controls that you might want to consider:

Currently, we have states and their handlers (e.g., itemsPerPage with onItemsPerPageChange, and goToPage with onGoToPageChange/onGoToPageSubmit) that seem tightly coupled and are often used together. To ensure consistency and reduce the risk of mismatches, I suggest grouping related states and handlers into a single prop, such as a paginationControls object. This would make it clear that these values should always be passed together.

For example:

paginationControls?: {
  itemsPerPage: {
    value; //this is the current itemsPerPage state,
    onChange; //this is the current onItemsPerPageChange method,
  },
  goToPage: {
    value; //goToPage,
    onChange; //onGoToPageChange,
    onSubmit; //onGoToPageSubmit,
  }
}

Alternatively, if we need to keep itemsPerPage and goToPage separate, we could consider structuring them as distinct control props (itemsPerPageControl and goToPageControl). How do you think?

[HnKnA]

I prefer the approach of grouping related variables, and I will configure them today.

[mochacr0]

Hi @HnKnA, I’ve noted a few points for potential refactoring that you can consider. When you have time, could you please take a look and let me know if they make sense? Thank you!

Build failed

[vietvohoangnashtech]

We should move pagination css to Pagination.module.css.

[HnKnA]

I've configured and added the Pagination.module.css file as you proposed.

[vietvohoangnashtech]

Thanks for addressing the feedback.

[vietvohoangnashtech]

Should create common/hooks and put this hook function to file usePaganation.ts.
Additionally, update the tsconfig.json to add a path alias for @commonHooks pointing to the common/hooks directory.

[HnKnA]

I've created and started using usePagination.ts instead of PaginationService.ts, and I've also updated tsconfig.json with the @commonHooks path alias.

[vietvohoangnashtech]

Great, thanks. Please update optional param for usePagination and we can close this.

[vietvohoangnashtech]

I think you can move this code to common const, beside with:

[HnKnA]

I’ve updated the code to move PAGE_SIZE_OPTION to the common constants file

[vietvohoangnashtech]

Please make argument optional:

so that we can use this hook with default page value:
const { pageNo, totalPage, setTotalPage, changePage } = usePagination(); without

{
    initialPageNo: DEFAULT_PAGE_NUMBER,
    initialItemsPerPage: DEFAULT_PAGE_SIZE,
  }

argument.

[HnKnA]

The usePagination hook has been updated to make the arguments optional, with default values set for initialPageNo and initialItemsPerPage. Let me know if there’s anything else you’d like to adjust.

[sonarqubecloud]

Quality Gate passed for 'backoffice'

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[vietvohoangnashtech]

Thank you for addressing the feedback! Approved.