Skip to content

Commit f907abc

Browse files
offbeatjsoffbeatjs
committed
send array as url search Params
- Replaced CSV params with Array - Moved the search bar up, and the button where it was.
1 parent 6e7bd4b commit f907abc

File tree

2 files changed

+64
-41
lines changed

2 files changed

+64
-41
lines changed

‎src/app/(public)/_components/hero.tsx‎

Lines changed: 58 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,22 @@ export function Hero() {
3030
function handleSearch(e: React.FormEvent) {
3131
e.preventDefault();
3232
const formData = new FormData(e.target as HTMLFormElement);
33-
let chosen = selected;
33+
let chosenLanguages = selected;
3434

3535
// Fallback: if no checkbox selected, use the single input value
36-
if (chosen.length === 0) {
37-
const typed = String(formData.get('search') || '').trim();
38-
if (typed) {
39-
chosen = [typed];
40-
}
41-
}
36+
if (chosenLanguages.length === 0) {
37+
const typed = String(formData.get('search') || '').trim();
38+
if (typed) {
39+
chosenLanguages = [typed];
40+
}
41+
}
4242

43-
if (chosen.length === 0) return; // nothing to search
43+
if (chosenLanguages.length === 0) return; // nothing to search
4444

45-
const csv = chosen.map(l => l.toLowerCase()).join(',');
46-
router.push(`/repos?l=${encodeURIComponent(csv)}`);
45+
const params = new URLSearchParams();
46+
chosenLanguages.forEach(lang => params.append('l', lang.toLowerCase()));
47+
48+
router.push(`/repos?${params.toString()}`);
4749
}
4850

4951
return (
@@ -53,6 +55,28 @@ export function Hero() {
5355
<h1 className="text-3xl sm:text-4xl md:text-5xl font-medium uppercase heading-text">
5456
Search your language(s)
5557
</h1>
58+
<form
59+
className="items-center w-full max-w-xs mx-auto form-control outline-none mt-8"
60+
onSubmit={handleSearch}
61+
>
62+
<div className="flex w-full">
63+
<div className="relative flex w-full">
64+
<input
65+
type="text"
66+
placeholder="Type a language (optional)"
67+
className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
68+
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
69+
name="search"
70+
/>
71+
</div>
72+
<button
73+
type="submit"
74+
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
75+
>
76+
<Search size={16} className="sm:w-5 sm:h-5" />
77+
</button>
78+
</div>
79+
</form>
5680
<p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
5781
Or select one or more programming languages you would like to find
5882
repositories for.
@@ -63,22 +87,31 @@ export function Hero() {
6387
const id = `lang-${language}`;
6488
const checked = selected.includes(language);
6589
return (
66-
<label key={language} htmlFor={id} className="flex items-center gap-2 cursor-pointer select-none">
90+
<label
91+
key={language}
92+
htmlFor={id}
93+
className="flex items-center gap-2 cursor-pointer select-none"
94+
>
6795
<input
6896
id={id}
6997
type="checkbox"
7098
className="checkbox checkbox-primary"
7199
checked={checked}
72100
onChange={() => toggleLanguage(language)}
73101
/>
74-
<span className="text-hacktoberfest-light text-sm sm:text-base">{language}</span>
102+
<span className="text-hacktoberfest-light text-sm sm:text-base">
103+
{language}
104+
</span>
75105
</label>
76106
);
77107
})}
78108
</div>
79109

80110
<div className="dropdown dropdown-top mt-4">
81-
<Button tabIndex={0} className="umami--click--otherlangs-button text-sm sm:text-base">
111+
<Button
112+
tabIndex={0}
113+
className="umami--click--otherlangs-button text-sm sm:text-base"
114+
>
82115
Other languages
83116
</Button>
84117

@@ -91,7 +124,10 @@ export function Hero() {
91124
const checked = selected.includes(language);
92125
return (
93126
<li key={language} className="px-1">
94-
<label htmlFor={id} className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-hacktoberfest-blue/80 hover:text-white cursor-pointer">
127+
<label
128+
htmlFor={id}
129+
className="flex items-center gap-3 rounded-lg px-3 py-2 hover:bg-hacktoberfest-blue/80 hover:text-white cursor-pointer"
130+
>
95131
<input
96132
id={id}
97133
type="checkbox"
@@ -106,30 +142,15 @@ export function Hero() {
106142
})}
107143
</ul>
108144
</div>
109-
110-
{/* Search form moved below language selection */}
111-
<form
112-
className="items-center w-full max-w-xs mx-auto form-control outline-none mt-8"
113-
onSubmit={handleSearch}
114-
>
115-
<div className="flex w-full">
116-
<div className="relative flex w-full">
117-
<input
118-
type="text"
119-
placeholder="Type a language (optional)"
120-
className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
121-
focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
122-
name="search"
123-
/>
124-
</div>
125-
<button
126-
type="submit"
127-
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
128-
>
129-
<Search size={16} className="sm:w-5 sm:h-5" />
130-
</button>
131-
</div>
145+
<form className="mt-6 flex justify-center" onSubmit={handleSearch}>
146+
<button
147+
type="submit"
148+
className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
149+
>
150+
<Search size={16} className="sm:w-5 sm:h-5" />
151+
</button>
132152
</form>
153+
133154
</div>
134155
<MarqueTextAnimation />
135156
</div>

‎src/app/(public)/repos/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,12 @@ import type { RepoResponse, RepoData, RepoItem, SearchParams } from '@/types';
1414

1515
export default async function ReposPage({ searchParams }: { searchParams: Promise<SearchParams> }) {
1616
const sp = await searchParams;
17-
const raw = (sp as any).l ?? (sp as any).langs ?? '';
18-
const langs = (Array.isArray(raw) ? raw : raw.toString().split(','))
19-
.map((s: string) => decodeURIComponent(s.trim()))
20-
.filter(Boolean);
17+
const raw: string[] = Array.isArray(sp.l) ? sp.l : sp.l ? [String(sp.l)] : [];
18+
19+
const langs = raw
20+
.flatMap(r => r.split(',')) // handles comma-separated and multi params
21+
.map(s => decodeURIComponent(s.trim()))
22+
.filter(Boolean);
2123

2224
const reposRes = await getRepos(langs, sp);
2325
if (!reposRes) notFound();

0 commit comments

Comments
 (0)