Implemented Club Suggestions Dropdown and fixed UI updates for saved edits to clubs by glopes2023 · Pull Request #114 · cornell-dti/redi

glopes2023 · 2026-03-10T00:04:17Z

Summary

frontend/app/(auth)/edit-clubs.tsx

This pull requests allows for users to select from a suggestions dropdown that pulls from the list of all current Cornell student orgs.

Implemented a script that pulls the CampusGroups rss feed and exports a list of club names and categories that could be useful for matching logic later
Implemented a dropdown list in edit-clubs.tsx that filters based on what the user types into the text entry, matching to the clubs list
Fixed bug with edit-clubs where saved changes wouldn't immediately register in the profile edit page by passing the new clubs to the profile context

Test Plan

Tested in dev sandbox

edit-clubs-demo.mov

Notes

Next Steps: Seems like the save button functionality isn't implemented for the profile edit page? Should be a similar fix to above

…after saving

netlify · 2026-03-10T00:04:23Z

✅ Deploy Preview for redi-love ready!

Name	Link
🔨 Latest commit	`ca9f5b3`
🔍 Latest deploy log	https://app.netlify.com/projects/redi-love/deploys/69b36429fbe0f40008059938
😎 Deploy Preview	https://deploy-preview-114--redi-love.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

clementroze

design-wise looks good (i'l let the others look closely at the code)

i would just add an edge case where you can add custom names

maybe like this in the major selection where it says "use XXX":

abrar-amin

I think this is pretty good! If Clement is happy with the UI, I am happy with the UI (though double check the behavior of my add hometown PR just so that the app looks consistent).

Aside from minor/pedantic points, lgtm!

abrar-amin · 2026-03-10T01:29:55Z

frontend/app/(auth)/edit-clubs.tsx

+  const filterSuggestions = (text: string, currentClubs: string[]) =>
+    CLUBS.filter(
+      (c) =>
+        c.name.toLowerCase().includes(text.toLowerCase()) &&


nit: since text doesn't change for the whole method call, you may as well just call toLowerCase() once and then use that in filter

abrar-amin · 2026-03-10T01:36:08Z

frontend/app/(auth)/edit-clubs.tsx

            placeholder="e.g., Debate, Sports, Drama"
            value={editValue}
-            onChangeText={setEditValue}
+            onChangeText={handleEditValueChange}


Not your fault (prob Claudia's fault), but setEditValue and having the state just have editValue just sounds so vague..

abrar-amin · 2026-03-10T01:36:45Z

frontend/app/(auth)/edit-clubs.tsx

+  suggestionsContainer: {
+    backgroundColor: AppColors.backgroundDimmer,
+    borderRadius: 12,
+    overflow: 'hidden',


i'm not sure how @clementroze feels about this, but I think our styling for adding clubs and adding hometown should match

Yeah I feel like we could talk about the styling in the work session tomorrow, because there are a few things I was wondering if would be a better UX and more user friendly

abrar-amin · 2026-03-10T01:37:55Z

scripts/fetch-clubs.ts

@@ -0,0 +1,74 @@
+/**
+ * Fetches Cornell club data from the CampusGroups RSS feed and writes


I'm not quite sure if the number of clubs changes a ton... but if you wanted to resume farm, you could add some kind of work flow that checks for new clubs every once and a while and makes a PR to the repo

abrar-amin · 2026-03-10T01:39:31Z

Also, I think we can ignore SonarCloud on this one?? It's primarily yelling at the backend script for fetching from the RSS feed.

laylaliuuu

Absolutely awesome work on your first PR! The autocomplete dropdown is a great UX upgrade, and standardizing the club data is going to be a total game-changer for our future matching algorithms.

I've left a few comments on the files, and for some, we can discuss it with Clement to see which design is most user-friendly, and for some future suggestions, we can discuss them with the team to see what the best engineering decision is for this.

Great work!

laylaliuuu · 2026-03-10T01:14:51Z

frontend/app/(auth)/edit-clubs.tsx

+    CLUBS.filter(
+      (c) =>
+        c.name.toLowerCase().includes(text.toLowerCase()) &&
+        !currentClubs.includes(c.name)


Nice logic here to ensure that dropdown doesn't suggest a club that user has alrady added to their profile

laylaliuuu · 2026-03-10T02:01:38Z

frontend/app/(auth)/edit-clubs.tsx

            returnKeyType="done"
            onSubmitEditing={addClub}
          />
+          {suggestions.length > 0 && (


I love the autocomplete feature! And it's pretty consistent with other fields of editing as well. One quick UX thing we could discuss with clement is that right now, as I type the number of suggested changes (from 5 down to 1, etc.), the container dynamically resizes, which I personally think maybe we can have a fix size container.

I also wonder when on the actual mobile device, with the mobile keyboard open, will you still see the "Add" button?

Because right now, "select your major" is using similar autocomplete stuff, and it looks off: 1) without "Add" button 2)the position of popup looks odd. 3) I personally don't like the fact that as number of suggested changes the container dynamically resizes (we can talk about it with Clement)

laylaliuuu · 2026-03-10T02:20:59Z

frontend/constants/clubs.ts

@@ -0,0 +1,6107 @@
+// Auto-generated by scripts/fetch-clubs.ts — do not edit manually


I took a look at the auto-generated clubs.ts list, this is awesome! Standardizing the club names is going to make building the matching algorithm definetely easier. Also, absolutely brilliant move grabbing the category field from CampusGroups along with the names, which opens up a whole new layer of category-based matching for us in the future.

Just thinking of some possible long term suggestion:

Because this list is hardcoded into the app's files, if a new club is created at Cornell mid-semester, it will not appear in the app. The only way to update the list is to run the script, build a new version of the app, and wait for Apple/Google to approve a brand new App Store update. Long-term fix could be to move this data to a backend database in the Firebase and fetch it on the app so it's always up-to-date.

Right now it's a manual script, we could set up a GitHub Action (cron job) to run this script automatically on the 1st of every month an dpush any new clubs directly to the backend database.

+1 on the pushing to our database for these! It'll make it easier to access and not add more to the codebase clutter. We can also talk about moving the majors into DB as well, but since those are more intertwined within each College and the clubs aren't, I think we can just focus on moving this exact format into DB.

You'll need to create a new collection (Clubs) and fields are name and category.

Having it on the backend would be nice since we can do fun stuff in backend with regards to matching if we know all of the possible clubs at Cornell.

laylaliuuu · 2026-03-10T02:23:16Z

scripts/fetch-clubs.ts

+ * Run with: npx tsx scripts/fetch-clubs.ts
+ */
+
+import * as fs from 'fs';


It would be great if you could just address those warnings. Usually, it's always best not to ignore any warnings just to be safe.

laylaliuuu · 2026-03-10T02:24:13Z

scripts/fetch-clubs.ts

@@ -0,0 +1,74 @@
+/**
+ * Fetches Cornell club data from the CampusGroups RSS feed and writes


I love that you wrote a scraper for this instead of doing it by hand! Amazing automation!!

laylaliuuu · 2026-03-10T02:27:11Z

scripts/fetch-clubs.ts

+}
+
+function extractTag(xml: string, tag: string): string {
+  const match = xml.match(new RegExp(`<${tag}>([\\s\\S]*?)<\\/${tag}>`));


Quick thought on this, since right now we are using Regex to parse, and it works for how CampusGroups is structured right now. I wonder, let's say if we have a weird character like "Ben & Jerry Club", will the "&" throw off the Regex?

I'm also wondering as a heads-up for the future, if CampusGroups ever changes their structure or format, this Regex will most likely break. If that happens, we might need to find an alternative or safer way to do it. Definitely not a blocker for this PR, just something to keep in the back of mind if the script ever suddenly stops working

laylaliuuu · 2026-03-10T02:33:18Z

scripts/fetch-clubs.ts

+      const name = decodeHtmlEntities(extractTag(item, 'groupName'));
+      const rawCategory = extractTag(item, 'category');
+      // Category can be semicolon-separated — use the first one
+      const category = decodeHtmlEntities(rawCategory.split(';')[0].trim());


I think the category is separated by "," not ";", at least that's what it shows in club.ts file. It might fail to separate the list and save the entire multi-category string anyway, and later for the future matching algorithm, it will fail too.

jacquelinecai

Great work on your first PR, Gillio! Everyone's pretty much covered most of the comments I had, but I would emphasize not storing all clubs in our codebase since it does get incredibly bulky. The fetching can also be done faster if most clubs are already in the DB anyways.

jacquelinecai · 2026-03-10T03:20:45Z

frontend/constants/clubs.ts

@@ -0,0 +1,6107 @@
+// Auto-generated by scripts/fetch-clubs.ts — do not edit manually


+1 on the pushing to our database for these! It'll make it easier to access and not add more to the codebase clutter. We can also talk about moving the majors into DB as well, but since those are more intertwined within each College and the clubs aren't, I think we can just focus on moving this exact format into DB.

You'll need to create a new collection (Clubs) and fields are name and category.

glopes2023 · 2026-03-12T00:56:34Z

Screen.Recording.2026-03-11.at.8.44.16.PM.mov

This most recent commit covers the following:

Handled edge case when no result is found (as per Clément’s suggestion)
Adjusted the flex behavior from the results container (originally flexed based on number of entries)

Note:

There is still flex when switching from results to no results as the suggestions render from the inputted text, however, wasn’t sure how it would look keeping the container completely static.
It would be a lot of empty space on the screen if we had a fixed container, but we could fill the space with a default list (Like the one in the major selection flow) but it would make responsiveness slow given how big the club list is

UX changes (Please lmk what we think about the direction)

Added scroll behavior to selections but capped list rendering at 20 entries to keep it responsive
Removed add button and the text modification step for entries selected from suggestions (Adding clubs now has a more similar flow to adding fields of study)
Kept the 'save' button for editing added clubs

Future thoughts
I am also considering migrating the club data to our backend and maybe having a go at messing with firebase and making some api endpoints, but i want to run all the UI stuff by u guys before I work on that. (Ik this step is probably necessary before this PR can be merged)

jacquelinecai

I think this looks a lot better! There might need to be some UI changes once we test on physical device with keyboard interaction and stuff but that can be in a separate PR fs! Once everyone approves this PR, TPMs can help you merge since the duplication is only from the clubs.ts file.

abrar-amin · 2026-03-12T22:14:14Z

For future PRs with videos, make sure to use the physical keyboard on the simulator

laylaliuuu

I like the new UI changes a lot more than before. Nice job. Just need to double test it on an actual mobile device to see what it looks like with the keyboard open.

sonarqubecloud · 2026-03-13T01:13:29Z

Quality Gate failed

Failed conditions
96.7% Duplication on New Code (required ≤ 3%)

See analysis details on SonarQube Cloud

glopes2023 added 2 commits March 9, 2026 19:36

Implemented Club Suggestions Dropdown in edit-clubs

8132b4f

Fixed bug with club edits not properly updating to profile edit page …

4f567c1

…after saving

glopes2023 requested review from abrar-amin, clementroze, jacquelinecai, laylaliuuu and nadia-choop March 10, 2026 00:04

clementroze reviewed Mar 10, 2026

View reviewed changes

abrar-amin approved these changes Mar 10, 2026

View reviewed changes

laylaliuuu requested changes Mar 10, 2026

View reviewed changes

laylaliuuu closed this Mar 10, 2026

laylaliuuu reopened this Mar 10, 2026

jacquelinecai requested changes Mar 10, 2026

View reviewed changes

Made some UX adjustments

3947449

jacquelinecai approved these changes Mar 12, 2026

View reviewed changes

"Here's the actual change"

37b11d5

laylaliuuu approved these changes Mar 12, 2026

View reviewed changes

Final Adjustments

ca9f5b3

laylaliuuu merged commit 9ae7401 into main Mar 13, 2026
10 of 11 checks passed

laylaliuuu deleted the add_activities_section branch March 13, 2026 01:17

		@@ -0,0 +1,74 @@
		/**
		* Fetches Cornell club data from the CampusGroups RSS feed and writes

		@@ -0,0 +1,6107 @@
		// Auto-generated by scripts/fetch-clubs.ts — do not edit manually

Conversation

glopes2023 commented Mar 10, 2026

Summary

Test Plan

Notes

Uh oh!

netlify bot commented Mar 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for redi-love ready!

Uh oh!

clementroze left a comment

Choose a reason for hiding this comment

Uh oh!

abrar-amin 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!

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!

abrar-amin commented Mar 10, 2026

Uh oh!

laylaliuuu 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!

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!

jacquelinecai left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

glopes2023 commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jacquelinecai left a comment

Choose a reason for hiding this comment

Uh oh!

abrar-amin commented Mar 12, 2026

Uh oh!

laylaliuuu left a comment

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Mar 13, 2026

Quality Gate failed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

netlify bot commented Mar 10, 2026 •

edited

Loading

glopes2023 commented Mar 12, 2026 •

edited

Loading