Implement Search Pagination

[aahei]

Implement Search Pagination

Description

• Create a SearchPagination component
• Remove the search result limit on WebSoc fuzzy search (may lower the performance)
  In addition:
• Create stc/helpers/constants.ts to store PAGE_SIZE
• Add the "No results found" prompt.

The current config is:

• fetch all results at a time
• display 10 records on a page

Screenshots

Final Checks:

• Verify successful deployment
• Delete branch

(optional)

• Write tests
• Write documentation

[js0mmer]

LGTM! Great work 🔥

[js0mmer]

Also, I'm guessing the issue you opened for performance improvements is meant for a new task/PR. I'm going to go ahead and unlink it from this PR so it doesn't close when this one merges.

[aahei]

Just an inaccurate test:
Before improvement, it takes around 4000-5000 ms to load the course results with an empty query (~5900 results).
After improvement, it takes 2000-3000 ms.

[aahei]

Improvement: load only the first 5 pages initially, but when the user jumps to the 3rd page or after, load all pages.

[aahei]

Peterportal

Improvement: load only the first 5 pages initially, but when the user jumps to the 3rd page or after, load all pages.

This is a temporary solution. Currently, PPAPI does not support range search, see #310. We will change it to the actual range search upon the PPAPI update release.

[ethanwong16]

LGTM! Just requested some minor changes :)) thanks!

[aahei]

Next todo: merge to Master

[aahei]

Next todo: test, also test #366

[js0mmer]

Optimization seems to have broken for going past page 3. Gets stuck in an infinite loop. Dark mode theming needed for pagination component.

[aahei]

Optimization seems to have broken for going past page 3. Gets stuck in an infinite loop. Dark mode theming needed for pagination component.

Thank you for noting this. It didn't happen when I tested it, so it might be some side effect when merging with the new code since this functionality was written a long time ago. I will try to investigate this on this weekend.

[js0mmer]

Optimization seems to have broken for going past page 3. Gets stuck in an infinite loop. Dark mode theming needed for pagination component.

Thank you for noting this. It didn't happen when I tested it, so it might be some side effect when merging with the new code since this functionality was written a long time ago. I will try to investigate this on this weekend.

Honestly, I think we can leave out the first 5 pages limiter. I've tested locally and performance seems to be fine with this current version of fuzzy search. I think we should also lower the search delay from 500ms to 300ms so response times are a bit faster.

[js0mmer]

Optimization seems to have broken for going past page 3. Gets stuck in an infinite loop. Dark mode theming needed for pagination component.

Thank you for noting this. It didn't happen when I tested it, so it might be some side effect when merging with the new code since this functionality was written a long time ago. I will try to investigate this on this weekend.

Honestly, I think we can leave out the first 5 pages limiter. I've tested locally and performance seems to be fine with this current version of fuzzy search. I think we should also lower the search delay from 500ms to 300ms so response times are a bit faster.

Nevermind, seems like it is necessary given that changing between catalogue/roadmap tabs slows down when searching the additional results.

[js0mmer]

Found a solution: moving the states for hasFullResults and lastQuery into the redux slice seems to prevent these infinite loops. Will implement along with theming then this should be good to go.

[github-actions]

Deployed staging instance to https://staging-297.peterportal.org