Enable multi-language repo search and selection #244
Conversation
Updated the hero component to allow users to select multiple programming languages via checkboxes, both from main and 'other' languages. Modified the repo page logic to accept and process multiple languages, fetching and merging results from GitHub for each selected language. This enhances the search experience by supporting multi-language queries. (commit desc by copilot)
|
@offbeatjs is attempting to deploy a commit to the Max Programming's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
This implementation is very nice, and the UI is good too. With the UX, there is a problem that the user has to click on the search button, which is in line with the input.
A better way to handle this would be to have a search button below like this
[ SEARCH YOUR LANGUAGE ]
[________________________________________________]
[ Type a language (optional)... ]
OR SELECT FROM THE LIST BELOW
[ ] JavaScript [ ] Python [ ] C++ ...
[ ] Rust [ ] HTML [ ] TypeScript ...
[ OTHER LANGUAGES ]
+-------------------+
| SEARCH |
+-------------------+
There was a problem hiding this comment.
We can make this button better. And maybe remove that button beside the input at the top
|
@offbeatjs I have reviewed the code and it's good but the implementation doesn't work. I have requested some changes to make the implementation perfect. Please let me know if you get stuck anywhere or you don't understand something ✌️ |
|
Thanks for the awesome insights ! I'll do this asap |
Co-authored-by: Usman Sabuwala <[email protected]>
fixed the requested changes - added search button below - directory move from `/(public)/repos/[language]/_components` to `/(public)/repos/_components`
|
Could you check this up ? |
There was a problem hiding this comment.
Loving it so far @offbeatjs!
I've left a few comments for further improvements
- Replaced CSV params with Array - Moved the search bar up, and the button where it was.
There was a problem hiding this comment.
We can make this button better. And maybe remove that button beside the input at the top
src/app/(public)/repos/page.tsx
Outdated
| const langs = raw | ||
| .flatMap(r => r.split(',')) // handles comma-separated and multi params | ||
| .map(s => decodeURIComponent(s.trim())) | ||
| .filter(Boolean); |
There was a problem hiding this comment.
We no longer need this because out raw is already a string[]
There was a problem hiding this comment.
Also let's add a loading.tsx file under /repos folder so that we get a loading skeleton while the data is being fetched
Co-authored-by: Usman Sabuwala <[email protected]>
Refactored the hero search form to separate the input and submit button, improving accessibility and layout. Added a loading skeleton for the repos page to enhance user experience during data fetching. Also simplified language parameter parsing in the repos page. - the repos/loading.tsx is exact same as the /repos/[language]/loading.tsx
|
Let me know if there are further changes needed. |
2 participants
Updated the hero component to allow users to select multiple programming languages via checkboxes, both from main and 'other' languages. Modified the repo page logic to accept and process multiple languages, fetching and merging results from GitHub for each selected language. This enhances the search experience by supporting multi-language queries.
(commit desc by copilot)
what's changed tl;dr