feat: Enforce Submission Requirements (requireGithub, requireDemoVideo, requireOtherLinks)

[aguilar1x]

Summary

Dynamically adjust the SubmissionForm validation rules based on the hackathon's specific submission configuration. Required fields are enforced at both the schema level and the UI level — validation is conditional and data-driven from useHackathonData(), not hardcoded.

Changes

Schema Validation (Zod)

• requireDemoVideo: When true, the schema enforces videoUrl as a non-empty, valid URL via .refine() on baseSubmissionSchema
• requireGithub / requireOtherLinks: Validated manually via form.setError() in step handlers (Zod cannot cleanly express "link type within array" logic)
• Links array now allows empty URLs during editing (z.union([z.string().url(), z.literal('')])) for better UX

Step Validation (handleNext — Step 2)

• requireGithub: Blocks progression if no valid GitHub link in form.watch('links'); sets field-level error on links
• requireDemoVideo: Blocks progression if videoUrl is empty or invalid; sets field-level error on videoUrl
• requireOtherLinks: Blocks progression if no valid link of type demo/website/documentation/other; sets field-level error on links

Form Submission (onSubmit)

• Final validation pass re-checks all require* flags before constructing and dispatching the payload
• If validation fails, navigates back to Step 2 and surfaces field-level errors
• Acts as last line of defense if step-level validation is bypassed

UI — Required Field Indicators

• Demo Video URL: Asterisk (*) on label when requireDemoVideo is true
• Project Links: Asterisk (*) on label when requireGithub or requireOtherLinks is true
• Legend: * Required for this hackathon at top of Step 2 when any requirement is active
• Helper text for Project Links explains which links are required based on flags

Technical Details

• All require* flags sourced from useHackathonData().currentHackathon — no hardcoded values
• Added isValidUrl() helper for URL validation
• Wrapped links section in FormField with name='links' for proper error display via FormMessage
• No any types in schema or validation logic

Target File

• components/hackathons/submissions/SubmissionForm.tsx

Branch

• feature/enforce-submission-requirements

• Closes Enforce Submission Requirements (requireGithub, requireDemoVideo, etc.) #406

Summary by CodeRabbit

Release Notes

• New Features
  • Submission forms now dynamically enforce hackathon-specific requirements for demo videos, GitHub links, and additional project links.
  • Added visual indicators for required fields with contextual descriptions.
  • Enhanced project links interface with improved UI/UX controls and better validation feedback.

[vercel]

@aguilar1x is attempting to deploy a commit to the Threadflow Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Warning

Rate limit exceeded

@aguilar1x has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 21 minutes and 22 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: a3a9be5d-1ce3-4a7a-a9d0-5cab6b4a4ebc

📥 Commits

Reviewing files that changed from the base of the PR and between 16ccd12 and 398c200.

📒 Files selected for processing (3)

• components/hackathons/submissions/SubmissionForm.tsx
• components/profile/update/Settings.tsx
• lib/error-reporting.ts

📝 Walkthrough

Walkthrough

The changes implement dynamic submission validation for a hackathon submission form by introducing conditional schema generation and step-level validation based on hackathon-specific requirement flags (requireGithub, requireDemoVideo, requireOtherLinks). The Project Links UI is refactored from a dynamic list to a FormField-based layout, and visual indicators (asterisks) are added to required fields based on hackathon configuration.

Changes

Cohort / File(s)

Summary

Submission Form Validation components/hackathons/submissions/SubmissionForm.tsx

Introduces createSubmissionSchema() for conditional field enforcement and isValidUrl() helper. Implements step-level validation (steps 2–3) that blocks progression if requireGithub, requireDemoVideo, or requireOtherLinks flags are unmet. Refactors Project Links UI from dynamic add/remove list to FormField-based inline rendering with conditional required markers. Adds asterisk indicators to required field labels and updates Demo Video description based on hackathon requirements. Includes per-step error injection and final validation pass in onSubmit.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant SubmissionForm
    participant Schema as Zod Schema
    participant Context as Hackathon Context
    participant StepValidator as Step Validator

    User->>SubmissionForm: Fills in submission data
    SubmissionForm->>Context: Read requireGithub, requireDemoVideo, requireOtherLinks
    Context-->>SubmissionForm: Return requirement flags
    SubmissionForm->>SubmissionForm: Memoize submissionSchema based on flags
    
    User->>SubmissionForm: Click "Next" at Step 2
    SubmissionForm->>StepValidator: handleNext(step=2)
    
    rect rgba(200, 150, 255, 0.5)
    StepValidator->>Context: Check requireGithub flag
    Context-->>StepValidator: Flag value
    StepValidator->>StepValidator: Validate GitHub link present?
    alt GitHub Required & Missing
        StepValidator->>SubmissionForm: setError('links', message)
        SubmissionForm->>User: Show field-level error, block progression
    else GitHub Valid or Not Required
        StepValidator->>Schema: Trigger form validation
        Schema-->>SubmissionForm: Schema validation result
        alt Schema Valid
            SubmissionForm->>User: Proceed to next step
        else Schema Invalid
            SubmissionForm->>User: Show validation errors
        end
    end
    end
    
    User->>SubmissionForm: Submit form
    SubmissionForm->>StepValidator: onSubmit()
    StepValidator->>Context: Final check: all require* flags
    Context-->>StepValidator: Requirement status
    
    rect rgba(150, 200, 255, 0.5)
    StepValidator->>StepValidator: Re-validate all required fields
    alt Any Required Field Missing
        StepValidator->>SubmissionForm: setError() for field(s)
        SubmissionForm->>User: Show field errors, prevent submission
    else All Required Fields Valid
        StepValidator->>User: Submit successful
    end
    end

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 A form now bends to hackathon whim,
With asterisks that shine and never dim,
Conditional schemas, step by step we go,
Each requirement flag the user shall now know!
No GitHub? No video? The form says nay,
Dynamic validation saves the day! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The pull request title clearly and concisely summarizes the main change: enforcing dynamic submission requirements based on hackathon flags (requireGithub, requireDemoVideo, requireOtherLinks).
Linked Issues check	✅ Passed	The implementation addresses all core objectives from issue #406: dynamic schema validation using Zod with manual error injection via form.setError() for link-type checks, step-level validation in handleNext blocking progression when requirements unmet, final validation in onSubmit, dynamic asterisk indicators on required fields, and reading all flags from useHackathonData().
Out of Scope Changes check	✅ Passed	All code changes are directly scoped to the linked objectives: no out-of-scope modifications detected. Changes remain focused on SubmissionForm.tsx validation logic and UI updates as specified.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

components/hackathons/submissions/SubmissionForm.tsx (1)

506-554: ⚠️ Potential issue | 🟠 Major

Set error message when form.trigger('links') validation fails.

At line 552–553, form.trigger('links') can fail validation but returns silently without setting an error message. While React Hook Form sets field-level errors automatically, the explicit form.setError() pattern used elsewhere in this validation block (lines 514, 531, 544) provides clearer root-level feedback to users. Without it, validation failure leaves no actionable message.

Suggested fix

       if (links.length > 0) {
         const linksValid = await form.trigger('links');
-        if (!linksValid) return;
+        if (!linksValid) {
+          form.setError('links', {
+            message: 'Please fix invalid URL(s) in Project Links.',
+          });
+          return;
+        }
       }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/hackathons/submissions/SubmissionForm.tsx` around lines 506 - 554,
The links trigger can fail silently because when await form.trigger('links')
returns false we simply return without setting a user-visible error; update the
block that checks links (the condition using links.length > 0 and const
linksValid = await form.trigger('links')) to call form.setError('links', {
message: 'Please fix link validation errors.' }) (or a more specific message)
before returning when linksValid is false, matching the existing setError
pattern used for 'videoUrl' and other link requirements.

🧹 Nitpick comments (1)

components/hackathons/submissions/SubmissionForm.tsx (1)

508-549: Extract duplicated requirement checks into one helper.

The requireDemoVideo / requireGithub / requireOtherLinks validation logic is duplicated in both handleNext and onSubmit. Centralizing it will prevent drift and keep error messages consistent.

♻️ Refactor sketch

+const OTHER_LINK_TYPES = new Set(['demo', 'website', 'documentation', 'other']);
+
+const validateRequirementFlags = async (
+  links: Array<{ type: string; url: string }>,
+  videoUrl: string | undefined
+): Promise<boolean> => {
+  form.clearErrors(['videoUrl', 'links']);
+
+  if (requireDemoVideo) {
+    const videoTrimmed = (videoUrl ?? '').trim();
+    if (!videoTrimmed) {
+      form.setError('videoUrl', {
+        message: 'Demo video URL is required for this hackathon',
+      });
+      return false;
+    }
+    if (!(await form.trigger('videoUrl'))) return false;
+  }
+
+  const hasValidGithubLink = links.some(
+    link => link.type === 'github' && isValidUrl(link.url)
+  );
+  if (requireGithub && !hasValidGithubLink) {
+    form.setError('links', {
+      message:
+        'GitHub repository link is required for this hackathon. Please add your GitHub link.',
+    });
+    return false;
+  }
+
+  const hasValidOtherLink = links.some(
+    link => OTHER_LINK_TYPES.has(link.type) && isValidUrl(link.url)
+  );
+  if (requireOtherLinks && !hasValidOtherLink) {
+    form.setError('links', {
+      message:
+        'At least one additional link (Demo, Website, Documentation, or Other) is required for this hackathon.',
+    });
+    return false;
+  }
+
+  return true;
+};

Also applies to: 642-697

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@components/hackathons/submissions/SubmissionForm.tsx` around lines 508 - 549,
The submission validation for requireDemoVideo, requireGithub, and
requireOtherLinks is duplicated in handleNext and onSubmit; extract this logic
into a single helper (e.g., validateSubmissionRequirements) that accepts the
form instance, links array, videoUrl, and the flags
requireDemoVideo/requireGithub/requireOtherLinks, uses isValidUrl and the
existing OTHER_LINK_TYPES to perform the same checks, calls form.setError with
the same messages when a requirement fails, and returns a boolean indicating
validity; replace the duplicated blocks in handleNext and onSubmit with calls to
this helper to centralize behavior and keep errors consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Outside diff comments:
In `@components/hackathons/submissions/SubmissionForm.tsx`:
- Around line 506-554: The links trigger can fail silently because when await
form.trigger('links') returns false we simply return without setting a
user-visible error; update the block that checks links (the condition using
links.length > 0 and const linksValid = await form.trigger('links')) to call
form.setError('links', { message: 'Please fix link validation errors.' }) (or a
more specific message) before returning when linksValid is false, matching the
existing setError pattern used for 'videoUrl' and other link requirements.

---

Nitpick comments:
In `@components/hackathons/submissions/SubmissionForm.tsx`:
- Around line 508-549: The submission validation for requireDemoVideo,
requireGithub, and requireOtherLinks is duplicated in handleNext and onSubmit;
extract this logic into a single helper (e.g., validateSubmissionRequirements)
that accepts the form instance, links array, videoUrl, and the flags
requireDemoVideo/requireGithub/requireOtherLinks, uses isValidUrl and the
existing OTHER_LINK_TYPES to perform the same checks, calls form.setError with
the same messages when a requirement fails, and returns a boolean indicating
validity; replace the duplicated blocks in handleNext and onSubmit with calls to
this helper to centralize behavior and keep errors consistent.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5e7030a0-5b79-419c-96d3-fe718edcf630

📥 Commits

Reviewing files that changed from the base of the PR and between 1f2cb91 and 16ccd12.

📒 Files selected for processing (1)

• components/hackathons/submissions/SubmissionForm.tsx

[Benjtalkshow]

@aguilar1x

The task is to ensure that submission requirements are enforced on the submission form.
For example, if GitHub URL submission is required, the input field should not be removable. Currently, on the submission form, I can remove the input by clicking the “x” icon. This should be prevented so the UI element cannot be removed for required submission type.

Even though your validation is working, the user should not be able to remove required inputs from the form. Also, change the asterisks (*) for required fields to red.

Once this is implemented, the code will be merged.

Thank you.

[Benjtalkshow]

LGTM!!