✨ Add-project-detail-page #855
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
CI Feedback 🧐(Feedback updated until commit a65454b)A test triggered by this PR failed. Here is an AI-generated analysis of the failure:
|
| <form | ||
| action={async (formData) => { | ||
| const project = await addProject(formData) | ||
| router.push(`/app/projects/${project.id}`) | ||
| }} | ||
| className={styles.form} | ||
| > |
There was a problem hiding this comment.
In this implementation, I'm using an inline async function as the action handler for the form. However, since addProject is a Server Action, is this approach correct, or should I separate the Server Action into a dedicated function and pass it to action instead? Would love to hear your thoughts on best practices for using Server Actions in this case.
There was a problem hiding this comment.
How about performing a page transition within a Server Action?
export const addProject = async (formData: FormData) => {
const projectName = formData.get('projectName') as string
const project = await prisma.project.create({
data: {
name: projectName,
},
})
redirect(`/app/projects/${project.id}`)
}| type PageProps = { | ||
| params: Promise<{ | ||
| id: string | ||
| }> | ||
| } |
There was a problem hiding this comment.
The build failed due to a type mismatch in PageProps. The params property was expected to be a Promise, but it was originally defined as a plain object { id: string }.
https://github.com/liam-hq/liam/actions/runs/13803523229/job/38610118863
| data: { | ||
| name: projectName, | ||
| }, | ||
| }) | ||
|
|
||
| redirect(`/app/projects/${project.id}`) |
There was a problem hiding this comment.
Redirect to the project details page after creation
PR Reviewer Guide 🔍Here are some key observations to aid the review process:
|
PR Code Suggestions ✨Explore these optional code suggestions:
|
|||||||||||||
| const migrationEnabled = await migrationFlag() | ||
|
|
||
| if (!migrationEnabled) { | ||
| notFound() | ||
| } | ||
|
|
There was a problem hiding this comment.
[nits]
Since the same functionality is implemented in the middleware, I believe that it's no longer necessary to include it in page.tsx.
Co-authored-by: Hirotaka Miyagi <[email protected]>
Issue
Why is this change needed?
2025-03-11.18.41.01.mov
2025-03-11.18.48.00.mov
What would you like reviewers to focus on?
Testing Verification
What was done
🤖 Generated by PR Agent at 904d2c2
ProjectDetailPagecomponent for project details.PagePropstype definition and project ID handling.ProjectDetailPagecomponent.Detailed Changes
page.tsx
Add project detail page with migration checkfrontend/apps/app/app/(app)/app/projects/[id]/page.tsx
notFoundif migration is disabled.addProject.ts
Add auto-redirect to project detail after creationfrontend/apps/app/features/projects/actions/addProject.ts
Form.tsx
Update form component for client-side usagefrontend/apps/app/features/projects/pages/NewProjectPage/Form.tsx
addProject.ProjectDetailPage.tsx
Create ProjectDetailPage component for project detailsfrontend/apps/app/features/projects/pages/ProjectDetailPage/ProjectDetailPage.tsx
ProjectDetailPagecomponent to display project details.notFoundfor invalid IDs.index.ts
Export ProjectDetailPage componentfrontend/apps/app/features/projects/pages/ProjectDetailPage/index.ts
ProjectDetailPagecomponent for external use.index.ts
Include ProjectDetailPage in exportsfrontend/apps/app/features/projects/pages/index.ts
ProjectDetailPageto the exports.ProjectDetailPage.module.css
Add styles for ProjectDetailPage componentfrontend/apps/app/features/projects/pages/ProjectDetailPage/ProjectDetailPage.module.css
ProjectDetailPagecomponent.Additional Notes