PR3: Add debounce logic to user search by Pikalot · Pull Request #1742 · SCE-Development/Clark

Pikalot · 2025-07-01T20:12:33Z

Merge #1748 first.
This PR builds on top of PR2 (search UI) and introduces debounce logic to reduce API calls during user input.
Officer and Admin can search for users.
UI screenshots:

Light mode:
Dark mode:

weslayer

boing boing

adarshm11 · 2025-07-11T00:58:27Z

+    .then(items => {
+      res.status(OK).send({ items, total, rowsPerPage: ROWS_PER_PAGE, });
+    })
+    .catch((e) => {


you can remove the "e" in the catch, since you're not using it

Done! Removed!

evanugarte · 2025-07-14T02:45:46Z

+    const parts = query.trim().split(/\s+/);
+    const first = parts[0];
+    const last = parts[parts.length - 1];
+    const nameRegex = new RegExp(`^${first}.*${last}`, 'i');


what if we do a match using whatever the user typed

so if i was searching for person one, i could match it by typing pone

Suggested change

const nameRegex = new RegExp(`^${first}.*${last}`, 'i');

const query = req.body.query.replace(/\s/g, '');

const pattern = new RegExp(`.*${query}.*`);

another example the above would match on would be person o, as right now the pr's logic is expecting the entire first and last name to by typed out to do a match

New suggestion: Instead of matching the first and last name, the backend will match the record using the input sequence:

const query = req.body.query.replace(/\s/g, ''); const fuzzyPattern = query.split('').join('.*'); const pattern = new RegExp(fuzzyPattern, 'i');

This trades off O(n) performance for maximum flexibility. Note: this approach does not ignore discrepancies in middle names.

evanugarte · 2025-07-14T02:46:00Z

+        {
+          $expr: {
+            $regexMatch: {
+              input: { $concat: ['$firstName', ' ', '$lastName'] },


see other comment about regex change, we can just do

Suggested change

input: { $concat: ['$firstName', ' ', '$lastName'] },

input: { $concat: ['$firstName', '$lastName'] },

evanugarte · 2025-07-14T02:47:12Z

+  const limit = Math.min(Number(req.body.limit) || ROWS_PER_PAGE, ROWS_PER_PAGE);
+  let maybeOr = {};
+  const query = req.body.query;
+  if (query) {


if the user didnt pass a query in should we even bother displaying suggestions?

if (!req.body.query) { return res.status(OK).send({ items: [] }); }

evanugarte · 2025-07-14T02:48:37Z

+    };
+  }
+
+  const sortColumn = req.query.sort || 'joinDate';


is there a way to have mongodb return the result based on best match? https://stackoverflow.com/a/27224578

Done!

Implement scoring approach:

const aScore = Math.min(tokenScores(aName, input), tokenScores(aEmail, input)); const bScore = Math.min(tokenScores(bName, input), tokenScores(bEmail, input)); return aScore - bScore;

evanugarte · 2025-07-14T02:49:05Z

+  User.find(maybeOr, { password: 0, }, { skip, limit })
+    .sort({ [sortColumn] : sortOrder })
+    .then(items => {
+      res.status(OK).send({ items, total, rowsPerPage: ROWS_PER_PAGE, });


total and rowsPerPage are unused in the frontend, can we remove it

evanugarte · 2025-07-14T02:49:19Z

+      res.status(OK).send({ items, total, rowsPerPage: ROWS_PER_PAGE, });
+    })
+    .catch(() => {
+      res.sendStatus(BAD_REQUEST);


import logger and log the error, would be good for debugging

evanugarte · 2025-07-14T02:49:51Z

+const ROWS_PER_PAGE = 20;
+
+// Search for all members using either first name, last name or email
+router.post('/shortcutsearchusers', async function(req, res) {


this api can go in User.js instead of a new file

Done! Migrated codes to user.js

evanugarte · 2025-07-17T17:58:45Z

+
+    it('Should return status code 401 if access level is invalid', async () => {
+      accessLevel = MEMBERSHIP_STATE.MEMBER;
+      setTokenStatus(accessLevel >= requiredLevel, {accessLevel});


each line with accessLevel >= requiredLevel, please hardcode it to true/false, it will read much easier

evanugarte · 2025-07-17T17:59:31Z

+      if (str.startsWith(token)) return score + 0; // highest score for exact match
+      else if (str.includes(token)) return score + 1; // lower score for partial match
+      else return score + 2; // lowest score for no match


Suggested change

if (str.startsWith(token)) return score + 0; // highest score for exact match

else if (str.includes(token)) return score + 1; // lower score for partial match

else return score + 2; // lowest score for no match

if (str.startsWith(token)) return score + 0; // highest score for exact match

if (str.includes(token)) return score + 1; // lower score for partial match

return score + 2; // lowest score for no match

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

Pikalot requested review from evanugarte and weslayer July 1, 2025 20:13

weslayer approved these changes Jul 1, 2025

View reviewed changes

Base automatically changed from devTA_search_ui to devTA_shortcut_key July 3, 2025 20:54

Base automatically changed from devTA_shortcut_key to dev July 5, 2025 05:30

Pikalot changed the base branch from dev to devTA_search_ui July 5, 2025 07:50

Pikalot force-pushed the devTA_searching_debounce_logic branch 2 times, most recently from 1d1df62 to 99399bc Compare July 5, 2025 11:16

Base automatically changed from devTA_search_ui to dev July 7, 2025 04:40

Pikalot force-pushed the devTA_searching_debounce_logic branch 15 times, most recently from eb64d34 to 391560a Compare July 9, 2025 06:05

adarshm11 reviewed Jul 11, 2025

View reviewed changes

Comment thread src/Components/ShortcutKeyModal/SearchModal.js Outdated

adarshm11 approved these changes Jul 11, 2025

View reviewed changes

Pikalot force-pushed the devTA_searching_debounce_logic branch 3 times, most recently from 7fb53f2 to abef8fd Compare July 13, 2025 19:40

evanugarte reviewed Jul 14, 2025

View reviewed changes

evanugarte mentioned this pull request Jul 14, 2025

Add Keyboard Shortcut #1738

Closed

Pikalot force-pushed the devTA_searching_debounce_logic branch 4 times, most recently from c13cf4c to cc96df4 Compare July 17, 2025 07:43

Added a unit test for regex search, removed limit on frontend

b568e60

Pikalot force-pushed the devTA_searching_debounce_logic branch from cc96df4 to b568e60 Compare July 17, 2025 07:58

evanugarte approved these changes Jul 17, 2025

View reviewed changes

Pikalot and others added 2 commits July 17, 2025 11:31

Update api/main_endpoints/routes/User.js

4e6f162

Co-authored-by: Evan Ugarte <36345325+evanugarte@users.noreply.github.com>

Hardcoded setTokenWithStatus() in api test for regex search unit

c5da20b

adarshm11 approved these changes Jul 19, 2025

View reviewed changes

akshtshrma24 approved these changes Jul 19, 2025

View reviewed changes

adarshm11 merged commit 1de82d2 into dev Jul 19, 2025
4 checks passed

adarshm11 deleted the devTA_searching_debounce_logic branch July 19, 2025 05:42

	const nameRegex = new RegExp(`^${first}.*${last}`, 'i');
	const query = req.body.query.replace(/\s/g, '');
	const pattern = new RegExp(`.${query}.`);

	input: { $concat: ['$firstName', ' ', '$lastName'] },
	input: { $concat: ['$firstName', '$lastName'] },

Conversation

Pikalot commented Jul 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

weslayer left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Pikalot Jul 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Pikalot commented Jul 1, 2025 •

edited

Loading

Pikalot Jul 14, 2025 •

edited

Loading