fully integrated frontend page with backend for creating jobs and the…#18
Merged
Conversation
…n displaying the successfully created job
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 10 minutes and 4 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the 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. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughAdds a jobs submission feature: new /jobs page with ProtectedRoute, a client-side JobForm with toggleable text/link input, supporting UI components, a job API client, and a dashboard quick-action link to the jobs page. Changes
Sequence DiagramsequenceDiagram
actor User
participant JobForm as JobForm
participant API as Job API Client
participant Backend as Backend Service
participant Preview as JobResultPreview
User->>JobForm: Enter data / toggle input type
JobForm->>JobForm: Validate inputs
User->>JobForm: Click "Analyze Job"
JobForm->>API: createJob(payload)
API->>Backend: POST /jobs
Backend-->>API: CreateJobResponse
API-->>JobForm: response.data
JobForm->>Preview: Pass result
Preview-->>User: Render submission details
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 1 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (1 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
frontend/components/job/job-input-toggle.tsx (1)
17-39: Expose active toggle state witharia-pressed.The selected option is visual-only right now. Add
aria-pressedon each button so assistive tech can announce which mode is active.Proposed fix
<button type="button" onClick={() => onChange(InputType.TEXT)} + aria-pressed={isText} className={`rounded-lg px-4 py-2 text-sm font-medium transition ${ isText ? "bg-white shadow text-black" : "text-gray-600 hover:text-black" }`} > @@ <button type="button" onClick={() => onChange(InputType.LINK)} + aria-pressed={isLink} className={`rounded-lg px-4 py-2 text-sm font-medium transition ${ isLink ? "bg-white shadow text-black" : "text-gray-600 hover:text-black" }`} >🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/components/job/job-input-toggle.tsx` around lines 17 - 39, The two toggle buttons in job-input-toggle.tsx lack an accessible pressed state; update the Paste Text and Job Link button elements (the ones using onClick={() => onChange(InputType.TEXT)} and onClick={() => onChange(InputType.LINK)}) to include aria-pressed reflecting their active state (use the existing isText for the Paste Text button and isLink for the Job Link button) so assistive technologies can announce which toggle is active.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/components/job/job-form.tsx`:
- Around line 70-80: The submit handler handleSubmit should clear any previous
success result at the start of a new submit to avoid showing stale success UI;
update handleSubmit to call setResult(null) (or the appropriate reset value for
result) immediately after setError(null) and before triggering
validation/loading so that any prior result is removed when a new submission
begins.
- Around line 98-100: The catch clause in the JobForm component
(frontend/components/job/job-form.tsx) uses an invalid type annotation `err:
Error | unknown`; change it to a valid TypeScript catch variable type such as
`err: unknown` (or remove the annotation) so compilation passes, then keep the
existing runtime check `err instanceof Error` and the `setError(errorMessage)`
logic unchanged; update the catch declaration near the submit/handler function
(where `setError` is called) to use `unknown` instead of the union type.
In `@frontend/lib/job-api.ts`:
- Line 27: The type for createdAt in the frontend/lib/job-api.ts contract is
incorrect: JSON.parse returns a string, not a Date, so change the createdAt
property type from Date to string (update the interface or type that contains
createdAt), and then update local consumers such as JobFormData.createdAt in
frontend/components/job/job-form.tsx to use string as well so the client types
reflect the runtime JSON shape.
---
Nitpick comments:
In `@frontend/components/job/job-input-toggle.tsx`:
- Around line 17-39: The two toggle buttons in job-input-toggle.tsx lack an
accessible pressed state; update the Paste Text and Job Link button elements
(the ones using onClick={() => onChange(InputType.TEXT)} and onClick={() =>
onChange(InputType.LINK)}) to include aria-pressed reflecting their active state
(use the existing isText for the Paste Text button and isLink for the Job Link
button) so assistive technologies can announce which toggle is active.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ffc27d05-b7b2-4c60-8bcd-6bcb644fd0b7
📒 Files selected for processing (6)
frontend/app/jobs/page.tsxfrontend/components/job/job-form.tsxfrontend/components/job/job-input-toggle.tsxfrontend/components/job/job-result-preview.tsxfrontend/components/job/job-submit-button.tsxfrontend/lib/job-api.ts
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (1)
frontend/components/job/job-form.tsx (1)
8-19: Use API response type directly to avoid drift.
JobFormDataduplicatesCreateJobResponse.datashape. Reuse the exported type to keep frontend aligned with API changes.Proposed refactor
-import { createJob, InputType } from '@/lib/job-api'; +import { createJob, InputType, type CreateJobResponse } from '@/lib/job-api'; -type JobFormData = { - jobId: number; - userId: number; - jobTitle: string | null; - companyName: string | null; - inputType: InputType; - jobText: string | null; - jobLink: string | null; - createdAt: string; // JSON response arrives as ISO string, not Date object -}; +type JobFormData = CreateJobResponse['data'];🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@frontend/components/job/job-form.tsx` around lines 8 - 19, The JobFormData type duplicates the API response shape; instead import and reuse the API response type from '@/lib/job-api' (e.g., CreateJobResponse or a specific exported data type) instead of redefining it. Update the imports alongside createJob and InputType to import the exported response type and replace JobFormData with that exported type (or CreateJobResponse['data']) so the frontend types stay in sync with createJob's response shape.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@frontend/components/job/job-form.tsx`:
- Around line 70-75: handleSubmit can be invoked multiple times rapidly and must
guard against in-flight submissions to prevent duplicate createJob calls; add an
early return if a submission is already in progress by checking the loading
state at the top of handleSubmit (use the existing setLoading/setError/setResult
helpers), setLoading(true) before calling createJob, and ensure
setLoading(false) runs in a finally block after the await so the flag always
resets; reference handleSubmit, createJob, setLoading, setError and setResult
when making the changes.
- Around line 54-56: Add client-side max-length validation to mirror the backend
5000-character limit: inside the job text validation logic (where trimmedText is
checked, e.g., validate function or the handler that returns "Job description
must be at least 10 characters"), add a check that if trimmedText.length > 5000
return a clear error like "Job description must be at most 5000 characters".
Update any UI/error display paths that consume this validator (e.g., the same
function that currently returns the min-length error) to surface the new
max-length message so large inputs are rejected client-side before submitting.
---
Nitpick comments:
In `@frontend/components/job/job-form.tsx`:
- Around line 8-19: The JobFormData type duplicates the API response shape;
instead import and reuse the API response type from '@/lib/job-api' (e.g.,
CreateJobResponse or a specific exported data type) instead of redefining it.
Update the imports alongside createJob and InputType to import the exported
response type and replace JobFormData with that exported type (or
CreateJobResponse['data']) so the frontend types stay in sync with createJob's
response shape.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 767b9244-43de-444b-906d-946a7a7db708
📒 Files selected for processing (4)
frontend/components/dashboard/dashboard-widgets.tsxfrontend/components/job/job-form.tsxfrontend/components/job/job-result-preview.tsxfrontend/lib/job-api.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- frontend/components/job/job-result-preview.tsx
- frontend/lib/job-api.ts
Comment on lines
+54
to
+56
| if(trimmedText.length < 10) { | ||
| return "Job description must be at least 10 characters" | ||
| } |
There was a problem hiding this comment.
Mirror backend max-length validation for jobText.
Client validation enforces min length, but not the backend max (5000). This causes avoidable failed requests and poor UX for large inputs.
Proposed fix
if(trimmedText.length < 10) {
return "Job description must be at least 10 characters"
}
+ if (trimmedText.length > 5000) {
+ return "Job description must be 5000 characters or fewer"
+ }📝 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
| if(trimmedText.length < 10) { | |
| return "Job description must be at least 10 characters" | |
| } | |
| if(trimmedText.length < 10) { | |
| return "Job description must be at least 10 characters" | |
| } | |
| if (trimmedText.length > 5000) { | |
| return "Job description must be 5000 characters or fewer" | |
| } |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@frontend/components/job/job-form.tsx` around lines 54 - 56, Add client-side
max-length validation to mirror the backend 5000-character limit: inside the job
text validation logic (where trimmedText is checked, e.g., validate function or
the handler that returns "Job description must be at least 10 characters"), add
a check that if trimmedText.length > 5000 return a clear error like "Job
description must be at most 5000 characters". Update any UI/error display paths
that consume this validator (e.g., the same function that currently returns the
min-length error) to surface the new max-length message so large inputs are
rejected client-side before submitting.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
…n displaying the successfully created job
/jobspage added (JobsPage) integrated with Navbar and Footer./jobs./jobs.