Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: sort languages and frameworks alphabetically in the template filter #2502

Closed
wants to merge 16 commits into from
Closed

style: sort languages and frameworks alphabetically in the template filter #2502

Changes from 11 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
435c84d
Sort languages and frameworks alphabetically in the template filter
ShreyasLakhani Oct 19, 2024
594399b
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 20, 2024
bcd7cc4
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 22, 2024
527c1a2
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 23, 2024
3ca455d
Update client.tsx
ShreyasLakhani Oct 23, 2024
d5d059b
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 24, 2024
883a2c0
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 26, 2024
cf03894
Update client.tsx
ShreyasLakhani Oct 29, 2024
26a6c34
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 29, 2024
3b20612
Update client.tsx
ShreyasLakhani Oct 29, 2024
abea448
Update client.tsx
ShreyasLakhani Oct 29, 2024
b286a73
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 29, 2024
019e405
Update client.tsx
ShreyasLakhani Oct 29, 2024
8abdea1
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 29, 2024
071481c
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 29, 2024
bc426f4
Merge branch 'main' into templete-filter
ShreyasLakhani Oct 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 25 additions & 24 deletions apps/www/app/templates/client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,9 @@ import { useEffect, useMemo } from "react";
import { useForm } from "react-hook-form";
import { type Framework, type Language, templates } from "./data";

// New reusable sorting function
const sortAlphabetically = (a: [string, number], b: [string, number]) => a[0].localeCompare(b[0]);
ShreyasLakhani marked this conversation as resolved.
Show resolved Hide resolved

export function TemplatesClient() {
const form = useForm<TemplatesFormValues>({
resolver: zodResolver(schema),
Expand Down Expand Up @@ -215,15 +218,15 @@ export function TemplatesClient() {

<AccordionContent>
<Separator className="my-4 " orientation="horizontal" />
{Object.entries(languages).map(([language, occurences]) => (
<FormField
key={language}
control={form.control}
name="languages"
render={({ field }) => {
return (
{Object.entries(languages)
.sort(([langA], [langB]) => langA.localeCompare(langB)) // Sort languages alphabetically
.map(([language, occurences]) => ( // Map to JSX
<FormField
key={language} // Keep the key prop for unique identification
control={form.control}
name="languages"
render={({ field }) => (
<FormItem
key={language}
className="flex flex-row items-center px-2 py-1 space-x-3 h-10 space-y-0 duration-150 rounded-md bg-[rgba(255,255,255,0.05)] group hover:bg-[rgba(255,255,255,0.15)] mb-2"
>
<FormControl>
Expand All @@ -249,10 +252,9 @@ export function TemplatesClient() {
</span>
</FormLabel>
</FormItem>
);
}}
/>
))}
)}
/>
))}

<FormMessage />
</AccordionContent>
Expand All @@ -276,15 +278,15 @@ export function TemplatesClient() {

<AccordionContent>
<Separator className="mt-4 mb-4" orientation="horizontal" />
{Object.entries(frameworks).map(([framework, occurences]) => (
<FormField
key={framework}
control={form.control}
name="frameworks"
render={({ field }) => {
return (
{Object.entries(frameworks)
.sort(([langA], [langB]) => langA.localeCompare(langB)) // Sort languages alphabetically
.map(([framework, occurences]) => ( // Map to JSX
<FormField
key={framework} // Keep the key prop for unique identification
control={form.control}
name="frameworks"
render={({ field }) => (
<FormItem
key={framework}
className="flex flex-row items-center px-2 py-1 space-x-3 h-10 space-y-0 duration-150 rounded-md bg-[rgba(255,255,255,0.05)] group hover:bg-[rgba(255,255,255,0.15)] mb-2"
>
<FormControl>
Expand All @@ -309,10 +311,9 @@ export function TemplatesClient() {
</span>
</FormLabel>
</FormItem>
);
}}
/>
))}
)}
/>
))}
<FormMessage />
</AccordionContent>
</AccordionItem>
Expand Down