Skip to content

fix: swap URL and Short Code inputs order (#10) #13

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

Open
viganogabriele wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix: swap URL and Short Code inputs order (#10) #13

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
30 changes: 15 additions & 15 deletions src/components/create-url-dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,20 +71,15 @@ export function CreateUrlDialog({
<form {...getFormProps(form, {})} action={action}>
<div>{form.errors}</div>
<div className="grid grid-cols-4 gap-x-4 py-4">
<span
id={fields.url.errorId}
className="text-xs col-start-2 col-span-3 text-red-600 text-center"
>
{fields.url.errors}
</span>
<div className="grid col-span-4 grid-cols-4 items-center gap-4 mb-4">
<Label htmlFor={fields.url.id} className="text-right">
URL
<Label htmlFor={fields.shortCode.id} className="text-right">
Short Code
</Label>
<Input
{...getInputProps(fields.url, { type: "url" })}
placeholder="https://example.polinetwork.org/path"
{...getInputProps(fields.shortCode, { type: "text" })}
placeholder="custom-code (optional)"
className="col-span-3"
title="Short code can only contain letters, numbers, hyphens and underscores (2-20 characters)"
/>
</div>
<span
Expand All @@ -94,16 +89,21 @@ export function CreateUrlDialog({
{fields.shortCode.errors?.join(", ")}
</span>
<div className="grid col-span-4 grid-cols-4 items-center gap-4 mb-4">
<Label htmlFor={fields.shortCode.id} className="text-right">
Short Code
<Label htmlFor={fields.url.id} className="text-right">
URL
</Label>
<Input
{...getInputProps(fields.shortCode, { type: "text" })}
placeholder="custom-code (optional)"
{...getInputProps(fields.url, { type: "url" })}
placeholder="https://example.polinetwork.org/path"
className="col-span-3"
title="Short code can only contain letters, numbers, hyphens and underscores (2-20 characters)"
/>
</div>
<span
id={fields.url.errorId}
className="text-xs col-start-2 col-span-3 text-red-600 text-center"
>
{fields.url.errors}
</span>
Comment on lines +101 to +106
Copy link

@coderabbitai coderabbitai bot Dec 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Inconsistent error handling pattern.

Line 105 displays fields.url.errors directly, while Line 89 uses fields.shortCode.errors?.join(", "). Both fields should handle errors consistently since @conform-to/react typically returns error arrays.

Apply this diff to ensure consistent error handling:

-              {fields.url.errors}
+              {fields.url.errors?.join(", ")}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<span
id={fields.url.errorId}
className="text-xs col-start-2 col-span-3 text-red-600 text-center"
>
{fields.url.errors}
</span>
<span
id={fields.url.errorId}
className="text-xs col-start-2 col-span-3 text-red-600 text-center"
>
{fields.url.errors?.join(", ")}
</span>
🤖 Prompt for AI Agents 
In src/components/create-url-dialog.tsx around lines 101 to 106, the URL field
error is rendered directly as fields.url.errors but the shortCode field uses
fields.shortCode.errors?.join(", "), so update the URL error rendering to mirror
that pattern: call fields.url.errors?.join(", ") (or fallback to an empty
string) so errors array is joined into a single string for display and
null/undefined is handled safely.

<div className="col-span-4 text-sm text-muted-foreground">
If you leave <i>Short Code</i> empty, a random one will be
auto-generated upon submission.
Expand Down