Feat/#324 feature becom to auther #326
Conversation
- Remove background image and gradient from AutherLayout - Update form layout and styling in AutherForm - Add Typography and Image components to enhance UI
…nents Implement the "Become an Author" feature, including form submission, API integration, and result display. This includes: - Adding schema, types, and API service for the request author endpoint - Creating form and result components with UI updates - Integrating the API with the form for submission and handling response
WalkthroughThis change set introduces a new "Become an Author" feature, including API schema, request types, and React Query hooks for handling author applications. The UI components and layout for the author form and result page are refactored for improved structure and styling. Navigation links and related paths are updated accordingly. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BecomeAuthorForm (UI)
participant usePostBecomeAuther (Mutation Hook)
participant postBecomeAuther (API Handler)
participant API Server
User->>BecomeAuthorForm (UI): Fill and submit author form
BecomeAuthorForm (UI)->>usePostBecomeAuther: Trigger mutation with form data
usePostBecomeAuther->>postBecomeAuther: Call API handler with validated data
postBecomeAuther->>API Server: POST /accounts/request-author/become-auther
API Server-->>postBecomeAuther: Respond with success/failure
postBecomeAuther-->>usePostBecomeAuther: Return parsed response
usePostBecomeAuther-->>BecomeAuthorForm (UI): Update UI with result
Assessment against linked issues
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
Dokploy Preview Deployment
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Nitpick comments (19)
packages/apis/turbo/generators/config.ts (1)
62-65: API path selection changed from list to manual input.The prompt for API path was changed from a guided list selection (populated from Swagger JSON) to a manual text input. While this provides more flexibility for specifying custom paths, it may lead to more user errors without proper guidance on the expected format.
Consider one of these approaches:
- Add validation for the manually entered path to ensure it follows the correct format
- Implement a hybrid approach that offers both a list of common paths and the option to manually enter custom paths
- Include guidance or examples in the prompt message about the expected path format
- type: "input", + type: "list", name: "path", - message: "Enter the API path:", + message: "Select the API path from Swagger JSON or enter custom path:", + choices: [ + ...swaggerPaths.map(path => ({ name: path, value: path })), + { name: "Custom path (enter manually)", value: "CUSTOM" } + ], + }, + { + type: "input", + name: "customPath", + message: "Enter custom API path (format: 'service/endpoint'):", + when: (answers) => answers.path === "CUSTOM",Also applies to: 66-72
apps/core/app/(landing)/become-auther/_components/auther-layout.tsx (2)
1-1: Remove unused import.The
Imagecomponent is imported but never used in this component.-import Image from "next/image";
8-8: Consider removing unused prop.The
bgSrcprop is marked as optional but is not utilized in the component implementation. Consider removing it entirely or adding a comment to explain why it's being kept for future use.- bgSrc?: string;If you need to keep this prop for backward compatibility, add a comment explaining why:
+ // Kept for backward compatibility but not currently used bgSrc?: string;packages/apis/src/services/core/accounts/request-author/post/post-become-auther.types.ts (2)
4-9: Fix comment and correct typo in type name.There are two issues in this section:
- The comment says "// Response" but these are request types
- There's a typo in "Transofrmed" (should be "Transformed")
-// Response +// Request export type PostBecomeAutherRequest = z.input<typeof postBecomeAutherSchema.request>; -export type PostBecomeAutherRequestTransofrmed = z.infer< +export type PostBecomeAutherRequestTransformed = z.infer< typeof postBecomeAutherSchema.request >;
11-16: Fix comment and correct typo in type name.There are two issues in this section:
- The comment says "// Request" but these are response types
- There's a typo in "Transofrmed" (should be "Transformed")
-// Request +// Response export type PostBecomeAutherResponse = z.input<typeof postBecomeAutherSchema.response>; -export type PostBecomeAutherResponseTransformed = z.infer< +export type PostBecomeAutherResponseTransformed = z.infer< typeof postBecomeAutherSchema.response >;packages/apis/src/services/core/accounts/request-author/post/post-become-auther.ts (2)
11-11: Fix double slash in API URL path.There's a double slash in the URL path which could cause routing issues.
-export const postBecomeAutherURL = () => path.join("/api//accounts/request-author/"); +export const postBecomeAutherURL = () => path.join("/api/accounts/request-author/");
8-9: Use correct type name for consistency.If you fix the typo in the types file as suggested, make sure to update the import here to use the corrected type name.
import { PostBecomeAutherRequest, - PostBecomeAutherResponseTransformed, + PostBecomeAutherResponseTransformed, } from "./post-become-auther.types";apps/core/app/(landing)/become-auther/_components/auther-result.tsx (2)
29-33: Fix missing space in text content.There's a missing space after the period in the text.
Your application is currently under careful review by our team, and we will contact you via email within the next 1-3 business - days with our decision and the next steps.We appreciate your + days with our decision and the next steps. We appreciate your patience during this process.
36-42: Update alt text and align image dimensions.There are two issues with the image:
- The alt text "pixel-genius-logo" doesn't accurately describe the image (which is "become-auther.svg")
- The width/height props (500) don't match the dimensions in the className (600px)
<Image className="w-[600px] h-[600px] object-cover hidden md:block" - width={500} - height={500} + width={600} + height={600} src={BecomeAnAuthorimage} - alt="pixel-genius-logo" + alt="Become an Author illustration" />apps/core/app/(landing)/become-auther/_components/auther-form.tsx (6)
3-5: Consistent spelling: "auther" vs "author" in import pathsThe import paths and component names use "auther" instead of "author", which appears to be a spelling mistake. This inconsistency should be fixed throughout the codebase for better maintainability.
While the current implementation works, consider standardizing on the correct spelling "author" in filenames, imports, and component names.
6-9: Inconsistent import styleLine 6 imports multiple components in a single import statement, while lines 7-9 import single components per line. Consider standardizing your import style for better code consistency.
-import { Button, Typography } from "@repo/ui/components"; -import { Input } from "@repo/ui/components"; -import { Label } from "@repo/ui/components"; -import { Textarea } from "@repo/ui/components"; +import { Button, Input, Label, Textarea, Typography } from "@repo/ui/components";
29-29: Remove debugging console.log statementsThere are console.log statements for errors and form data which should be removed before production deployment.
- console.log("errors", errors); ... - const onSubmit = (data: PostBecomeAutherRequest) => { - console.log("data", data); + const onSubmit = (data: PostBecomeAutherRequest) => { mutation.mutate(data); };Also applies to: 37-37
112-114: Commented out error handling for textareaThere's a commented out error handling line for the "info" textarea. Either implement proper error handling or remove the comment.
<Textarea placeholder="write a short message about yourself" className=" bg-card resize-none p-3" {...register("info")} - // error={errors.profile_link?.message} + error={errors.info?.message} />
47-47: Improve responsive designThe layout includes fixed padding and image dimensions that might not work well across different screen sizes.
Consider these improvements for better responsiveness:
- Replace fixed top padding with responsive values:
-<div className="pt-40 grid grid-cols-1 md:grid-cols-2 gap-10 pb-20"> +<div className="pt-16 md:pt-24 lg:pt-32 grid grid-cols-1 md:grid-cols-2 gap-10 pb-10 md:pb-20">
- Make the image size more responsive:
-<Image - className="w-[600px] h-[600px] object-cover hidden md:block" - width={500} - height={500} - src={BecomeAnAuthorimage} - alt="pixel-genius-logo" -/> +<Image + className="w-full max-w-[600px] h-auto aspect-square object-contain hidden md:block" + width={600} + height={600} + src={BecomeAnAuthorimage} + alt="Become an author illustration" +/>Also applies to: 128-135
12-15: Improve image alt text and file namingThe image alt text "pixel-genius-logo" doesn't accurately describe the content, and the imported SVG file name contains a spelling mistake.
-import BecomeAnAuthorimage from "../../_assets/become-auther.svg"; +import BecomeAnAuthorImage from "../../_assets/become-author.svg"; // Later in the code - alt="pixel-genius-logo" + alt="Become an author illustration"packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts (2)
18-18: Fix typo in schema export nameThere's a typo in the variable name "postBecomeAutherResponseSchemaTransofrmed" (missing "r" in "Transofrmed").
-export const postBecomeAutherResponseSchemaTransofrmed = apiResponseSchema +export const postBecomeAutherResponseSchemaTransformed = apiResponseSchemaRemember to update all references to this export throughout the codebase.
15-16: Remove unnecessary identity transformationsBoth schemas include identity transformations that don't modify the data, adding unnecessary complexity.
- .transform((data) => data);If you need transformations in the future, you can add them back with specific logic.
Also applies to: 30-31
packages/apis/src/services/core/accounts/request-author/post/use-post-become-auther.ts (2)
8-8: Remove empty import statementThere's an empty import from the schema file that should be removed.
-import {} from "./post-become-auther.schema";
20-20: Consider adding error handling documentationThe hook doesn't include specific error handling guidance, which could be helpful for consumers.
Consider adding JSDoc comments to document error handling:
+/** + * Hook for posting a "become author" request + * + * @example + * const mutation = usePostBecomeAuther({ + * onSuccess: (data) => { + * // Handle successful submission + * }, + * onError: (error) => { + * // Handle error - check error.message for details + * } + * }); + * + * // Later in your code + * mutation.mutate(formData); + */ export const usePostBecomeAuther = (props?: UsePostBecomeAutherProps) => {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Cache: Disabled due to data retention organization setting
Knowledge Base: Disabled due to data retention organization setting
⛔ Files ignored due to path filters (1)
apps/core/app/(landing)/_assets/become-auther.svgis excluded by!**/*.svg
📒 Files selected for processing (11)
apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-guest.tsx(1 hunks)apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx(1 hunks)apps/core/app/(landing)/become-auther/_components/auther-form.tsx(2 hunks)apps/core/app/(landing)/become-auther/_components/auther-layout.tsx(1 hunks)apps/core/app/(landing)/become-auther/_components/auther-result.tsx(1 hunks)packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts(1 hunks)packages/apis/src/services/core/accounts/request-author/post/post-become-auther.ts(1 hunks)packages/apis/src/services/core/accounts/request-author/post/post-become-auther.types.ts(1 hunks)packages/apis/src/services/core/accounts/request-author/post/use-post-become-auther.ts(1 hunks)packages/apis/turbo/generators/config.ts(3 hunks)packages/ui/src/components/atoms/textarea.tsx(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
packages/apis/turbo/generators/config.ts (1)
scripts/prepare.js (2)
fs(1-1)path(2-2)
apps/core/app/(landing)/become-auther/_components/auther-form.tsx (9)
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.types.ts (1)
PostBecomeAutherRequest(5-5)packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts (1)
postBecomeAutherSchema(32-35)packages/apis/src/services/core/accounts/request-author/post/use-post-become-auther.ts (1)
usePostBecomeAuther(22-34)apps/core/app/(landing)/become-auther/_components/auther-layout.tsx (1)
AutherLayout(3-15)packages/ui/src/components/atoms/typography.tsx (1)
Typography(137-137)packages/ui/src/components/molecules/input.tsx (1)
Input(69-69)packages/ui/src/components/atoms/label.tsx (1)
Label(26-26)packages/ui/src/components/atoms/textarea.tsx (1)
Textarea(32-32)packages/ui/src/components/atoms/button.tsx (1)
Button(151-151)
apps/core/app/(landing)/become-auther/_components/auther-result.tsx (2)
apps/core/app/(landing)/become-auther/_components/auther-layout.tsx (1)
AutherLayout(3-15)packages/ui/src/components/atoms/typography.tsx (1)
Typography(137-137)
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.types.ts (1)
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts (1)
postBecomeAutherSchema(32-35)
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts (1)
packages/apis/src/schema/api-response-schema.ts (1)
apiResponseSchema(3-27)
🔇 Additional comments (4)
apps/core/app/(landing)/_components/desktop-navbar/feature-navbar-guest.tsx (1)
7-7:Details
✅ Verification successful
Route path updated to match new authentication naming conventions.
The update from "/auth/register" to "/auth/signup" aligns with the new authentication route naming conventions mentioned in the PR summary.
🏁 Script executed:
#!/bin/bash # Check if there are any remaining references to the old route '/auth/register' # that might need to be updated for consistency echo "Searching for any remaining references to '/auth/register'..." rg -i "/auth/register" --type=tsx --type=ts --type=jsx --type=jsLength of output: 231
To ensure we catch all instances (avoiding unsupported
--typeflags), let’s search across all relevant extensions:
🏁 Script executed:
#!/bin/bash echo "Searching for any remaining references to '/auth/register' across .tsx, .ts, .jsx, and .js files..." rg -i "/auth/register" -g "*.{tsx,ts,jsx,js}"Length of output: 260
Route rename complete – no ‘/auth/register’ references found
Searched across all .tsx, .ts, .jsx, and .js files; no occurrences of the old/auth/registerroute remain.packages/apis/turbo/generators/config.ts (2)
9-10: Code style improvement with trailing comma.Adding the trailing comma improves code style consistency and makes future edits cleaner.
41-42: Improved readability with multi-line message.The message was split into multiple lines for better readability, which is a good practice for longer strings.
packages/apis/src/services/core/accounts/request-author/post/use-post-become-auther.ts (1)
14-34: LGTM! React Query implementationThe React Query mutation hook implementation is well-structured with proper typing and follows best practices.
| <textarea | ||
| className={cn( | ||
| "flex min-h-[80px] w-full rounded-md border px-3 py-2 text-sm transition-colors", | ||
| "flex min-h-[80px] bg-card w-full rounded-md border px-3 py-2 text-sm transition-colors", |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Verify styling compatibility with existing background class.
The addition of bg-card to the textarea styling might conflict with the existing bg-background class that remains on line 16. While the cn utility likely handles class precedence correctly, having both background classes could lead to styling inconsistencies.
🏁 Script executed:
#!/bin/bash
# Check for any other components that might be using this Textarea component
# to ensure this styling change doesn't negatively impact them
echo "Finding components that import and use the Textarea component:"
rg -A 1 "import.*Textarea.*from \"@repo/ui/components\"" --type=tsxLength of output: 230
Continuing verification by inspecting the component and searching for its usage:
🏁 Script executed:
#!/bin/bash
set -e
# Locate the Textarea component file
filepath=$(find . -type f -name 'textarea.tsx' | head -n1)
echo "Found Textarea component at: $filepath"
# Show lines around the bg-card/bg-background classes
echo "---- Lines 10–30 in textarea.tsx ----"
sed -n '10,30p' "$filepath"
# Search for all usages of <Textarea in the repo
echo "---- Searching for <Textarea usage in TSX files ----"
rg "<Textarea" -n --glob '*.tsx'Length of output: 1641
Remove conflicting background utilities in Textarea
The Textarea component (packages/ui/src/components/atoms/textarea.tsx) currently includes both bg-card and bg-background in its className. Tailwind applies the later utility and overrides the former, so one of these is effectively redundant and can lead to confusion or unexpected styling. Please remove the unused background class (or reorder if you intend to switch the default) to ensure the intended color is applied.
Affected locations:
- packages/ui/src/components/atoms/textarea.tsx (className declaration)
- apps/core/app/dashboard/profile/page.tsx:104
- apps/core/app/(landing)/become-auther/_components/auther-form.tsx:109
- apps/core/app/dashboard/page.tsx:164
- apps/core/app/dashboard/products/create/_components/version-modal.tsx:113
Suggested diff (if keeping bg-card and dropping bg-background):
className={cn(
- "flex min-h-[80px] bg-card w-full rounded-md border px-3 py-2 text-sm transition-colors",
- "bg-background placeholder:text-muted-foreground",
+ "flex min-h-[80px] bg-card w-full rounded-md border px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground",
"focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
error📝 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.
| "flex min-h-[80px] bg-card w-full rounded-md border px-3 py-2 text-sm transition-colors", | |
| className={cn( | |
| "flex min-h-[80px] bg-card w-full rounded-md border px-3 py-2 text-sm transition-colors placeholder:text-muted-foreground", | |
| "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", | |
| "disabled:cursor-not-allowed disabled:opacity-50", | |
| error | |
| )} |
🤖 Prompt for AI Agents
In packages/ui/src/components/atoms/textarea.tsx at line 15, the className
includes both bg-card and bg-background background utilities, which conflict and
cause styling confusion. Remove one of these background classes—preferably
remove bg-background if you want to keep bg-card—to ensure only a single
background utility is applied. Also, check and update the other affected files
listed to maintain consistent background styling for the Textarea component
usage.
| Browse | ||
| </Typography> | ||
| <Link href="/browse"> | ||
| <Link href="/become-auther"> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Spelling inconsistency: "auther" vs "author".
The URL path "/become-auther" contains a spelling inconsistency compared to the displayed text "Become an author" (line 21). This inconsistency appears to be present throughout the feature implementation based on the PR summary.
Consider standardizing the spelling to "author" throughout the codebase for consistency:
- <Link href="/become-auther">
+ <Link href="/become-author">🏁 Script executed:
#!/bin/bash
# Check for both spellings to evaluate the extent of the inconsistency
echo "Checking for 'auther' spelling:"
rg -i "auther" --type=tsx --type=ts
echo "\nChecking for 'author' spelling:"
rg -i "author" --type=tsx --type=tsLength of output: 289
🏁 Script executed:
#!/bin/bash
# Search for 'auther' and 'author' occurrences in TS/TSX files without relying on type definitions
echo "Checking for 'auther' spelling in .ts and .tsx files:"
rg -i auther -g '*.ts' -g '*.tsx' || echo "No matches for 'auther'"
echo -e "\nChecking for 'author' spelling in .ts and .tsx files:"
rg -i author -g '*.ts' -g '*.tsx' || echo "No matches for 'author'"Length of output: 16863
Standardize “auther” to “author” across the codebase
The term “auther” appears in URL paths, directory names, component names, API hooks, schemas, types and asset files. All instances should be renamed to “author” to match the displayed text and avoid confusion.
Affected areas:
- apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx
• Change<Link href="/become-auther">→/become-author - Route directory and page:
• Renameapps/core/app/(landing)/become-auther/→…/become-author/
• Updatepage.tsxexport and imports - Components under become-auther:
•_components/auther-form.tsx,_components/auther-layout.tsx,_components/auther-result.tsx→author-form.tsx,author-layout.tsx,author-result.tsx
• Rename component identifiers (AutherForm→AuthorForm, etc.) and update import paths - API services in packages/apis/src/services/core/accounts/request-author/post:
•use-post-become-auther.ts,post-become-auther.ts,post-become-auther.types.ts,post-become-auther.schema.ts→…-author.ts(x)
• Rename exported functions and hooks (postBecomeAuther→postBecomeAuthor,usePostBecomeAuther→usePostBecomeAuthor), types and schema names - Static asset:
•_assets/become-auther.svg→become-author.svg, update import (BecomeAnAuthorImage) - Any other references (tests, Storybook, sidebar, tabs, etc.) where “auther” is used
Example diff in navbar-links.tsx:
- <Link href="/become-auther">
+ <Link href="/become-author">📝 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.
| <Link href="/become-auther"> | |
| <Link href="/become-author"> |
🤖 Prompt for AI Agents
In apps/core/app/(landing)/_components/desktop-navbar/navbar-links.tsx at line
20, the URL path uses the incorrect spelling "/become-auther". Rename this to
"/become-author" to match the displayed text and maintain consistency.
Additionally, perform a comprehensive rename of all instances of "auther" to
"author" across the codebase, including directories, component names, API hooks,
schemas, types, assets, and imports, ensuring all references are updated
accordingly.
| const response = await requestHandler( | ||
| () => coreApi.post(URL, payloadParsed), | ||
| schema.response._def.schema, | ||
| { | ||
| isMock: true, | ||
| } | ||
| ); |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Review mock configuration for production readiness.
The request handler is configured with isMock: true. This might be intentional for development but could cause issues in production.
Consider making this conditional based on environment:
const response = await requestHandler(
() => coreApi.post(URL, payloadParsed),
schema.response._def.schema,
{
- isMock: true,
+ isMock: process.env.NODE_ENV !== 'production',
}
);🏁 Script executed:
#!/bin/bash
# Check if there are other instances of isMock configuration and how they're handled
echo "Searching for isMock configurations in the codebase:"
rg -l "isMock" --glob "*.ts" --glob "*.tsx"
echo "\nChecking if there's any pattern for conditionally enabling mocks based on environment:"
rg -A 2 -B 2 "isMock.*process\.env" --glob "*.ts" --glob "*.tsx"Length of output: 834
🏁 Script executed:
#!/bin/bash
# Inspect how isMock is handled in the request handler
rg -C 5 "isMock" -n packages/apis/src/utils/request-handler.tsLength of output: 892
Remove unconditional mock flag for production readiness
The requestHandler already toggles mocking based on process.env.NEXT_PUBLIC_MOCK. By hard-coding isMock: true, you’ll force mocks in production. Instead, either omit the option so it falls back to the env var, or explicitly use that env var:
• File:
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.ts
• Change:
const response = await requestHandler(
() => coreApi.post(URL, payloadParsed),
schema.response._def.schema,
{
- isMock: true,
+ // enable mock only when NEXT_PUBLIC_MOCK="true"
+ isMock: process.env.NEXT_PUBLIC_MOCK === "true",
}
);Or simply remove the third argument to let the handler default:
- const response = await requestHandler(
- () => coreApi.post(URL, payloadParsed),
- schema.response._def.schema,
- { isMock: true }
- );
+ const response = await requestHandler(
+ () => coreApi.post(URL, payloadParsed),
+ schema.response._def.schema
+ );🤖 Prompt for AI Agents
In
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.ts
around lines 20 to 26, the requestHandler is called with the option isMock:
true, which forces mocking regardless of environment. To fix this, remove the
third argument entirely so the requestHandler uses its default behavior that
toggles mocking based on process.env.NEXT_PUBLIC_MOCK, or replace isMock: true
with isMock: process.env.NEXT_PUBLIC_MOCK === 'true' to conditionally enable
mocks.
| <Input | ||
| placeholder="Choose your file" | ||
| type="file" | ||
| label="Upload Your CV and Portfolio" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
File input is not registered with React Hook Form
The file upload input doesn't have form registration or error handling like the other inputs, which means the file data won't be included in form submission.
The file input needs to be registered with React Hook Form and properly handled in the form submission. Add registration and error handling similar to other fields:
<Input
placeholder="Choose your file"
type="file"
label="Upload Your CV and Portfolio"
+ {...register("cv")}
+ error={errors.cv?.message}
/>Additionally, you'll need to update the schema to accept file inputs and handle multipart/form-data submissions.
📝 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.
| <Input | |
| placeholder="Choose your file" | |
| type="file" | |
| label="Upload Your CV and Portfolio" | |
| /> | |
| </div> | |
| <Input | |
| placeholder="Choose your file" | |
| type="file" | |
| label="Upload Your CV and Portfolio" | |
| {...register("cv")} | |
| error={errors.cv?.message} | |
| /> | |
| </div> |
🤖 Prompt for AI Agents
In apps/core/app/(landing)/become-auther/_components/auther-form.tsx around
lines 99 to 104, the file input is missing registration with React Hook Form and
lacks error handling, so its data won't be included in form submission. Fix this
by registering the file input using the form's register method, adding error
display logic similar to other inputs, updating the validation schema to accept
file inputs, and ensuring the form submission handles multipart/form-data
appropriately.
| // TODO: Add cv file | ||
| // cv: z.number(), | ||
| }) |
There was a problem hiding this comment.
Inconsistency between request and response schemas
The CV field is commented out in the request schema but required in the response schema. This inconsistency could cause runtime errors.
Either implement the CV field in both request and response schemas or remove it from both:
// In request schema
- // TODO: Add cv file
- // cv: z.number(),
+ cv: z.any().optional(), // Using any for file uploads, make optional until implementation
// Or in response schema
- cv: z.number(),
+ cv: z.number().optional(),Additionally, ensure your API handler correctly processes this field discrepancy.
Also applies to: 27-27
🤖 Prompt for AI Agents
In
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts
around lines 12 to 14 and line 27, the CV field is commented out in the request
schema but required in the response schema, causing inconsistency. To fix this,
either uncomment and implement the CV field in the request schema to match the
response schema or remove it entirely from both schemas. Also, update the API
handler to correctly handle the presence or absence of the CV field to avoid
runtime errors.
| export const postBecomeAutherSchema = { | ||
| response: postBecomeAutherResponseSchemaTransofrmed, | ||
| request: postBecomeAutherRequestSchemaTransformed, | ||
| }; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Update schema export with fixed variable name
The schema export needs to be updated to use the corrected variable name.
export const postBecomeAutherSchema = {
- response: postBecomeAutherResponseSchemaTransofrmed,
+ response: postBecomeAutherResponseSchemaTransformed,
request: postBecomeAutherRequestSchemaTransformed,
};📝 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.
| export const postBecomeAutherSchema = { | |
| response: postBecomeAutherResponseSchemaTransofrmed, | |
| request: postBecomeAutherRequestSchemaTransformed, | |
| }; | |
| export const postBecomeAutherSchema = { | |
| response: postBecomeAutherResponseSchemaTransformed, | |
| request: postBecomeAutherRequestSchemaTransformed, | |
| }; |
🤖 Prompt for AI Agents
In
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts
around lines 32 to 35, the exported schema object uses incorrect variable names
with typos. Update the export to use the correctly spelled variable names for
both response and request schemas to ensure proper references.
| first_name: z.string(), | ||
| last_name: z.string(), | ||
| email: z.string(), | ||
| profile_link: z.string(), | ||
| info: z.string(), |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Enhance field validations
The current field validations are minimal. Consider adding more robust validations for better data quality.
- first_name: z.string(),
- last_name: z.string(),
- email: z.string(),
- profile_link: z.string(),
- info: z.string(),
+ first_name: z.string().min(1, "First name is required").max(50),
+ last_name: z.string().min(1, "Last name is required").max(50),
+ email: z.string().email("Please enter a valid email address"),
+ profile_link: z.string().url("Please enter a valid URL"),
+ info: z.string().max(500, "Additional information must be less than 500 characters"),📝 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.
| first_name: z.string(), | |
| last_name: z.string(), | |
| email: z.string(), | |
| profile_link: z.string(), | |
| info: z.string(), | |
| first_name: z.string().min(1, "First name is required").max(50), | |
| last_name: z.string().min(1, "Last name is required").max(50), | |
| email: z.string().email("Please enter a valid email address"), | |
| profile_link: z.string().url("Please enter a valid URL"), | |
| info: z.string().max(500, "Additional information must be less than 500 characters"), |
🤖 Prompt for AI Agents
In
packages/apis/src/services/core/accounts/request-author/post/post-become-auther.schema.ts
between lines 7 and 11, the current zod schema fields only check for string
types without additional validation. Enhance data quality by adding validations
such as minimum and maximum length constraints, email format validation for the
email field, and URL format validation for the profile_link field. Adjust the
info field to have a reasonable length limit if applicable. Update each field's
z.string() call to include these validations accordingly.
* refactor(become-auther): simplify layout and update UI components - Remove background image and gradient from AutherLayout - Update form layout and styling in AutherForm - Add Typography and Image components to enhance UI * feat(accounts): add request author feature with form and result components Implement the "Become an Author" feature, including form submission, API integration, and result display. This includes: - Adding schema, types, and API service for the request author endpoint - Creating form and result components with UI updates - Integrating the API with the form for submission and handling response
Description
Related Issue
Closes #324
Changes
Checks
Summary by CodeRabbit
New Features
Refactor
Style