Setting up problem submissions#19
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
Adds initial scaffolding for a “problem submissions” page under the problems feature, mirroring the existing problem page pattern (server-side React Query prefetch + client-side sidebar layout).
Changes:
- Introduces
/problems/[slug]/submissionspage that prefetches the problem by slug and hydrates React Query state. - Adds a client-side
ProblemSubmissionsLayoutusingSidebarLayoutbreadcrumbs for the problem context. - Adds an (currently empty)
problem-submissions-header.tsxplaceholder file.
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/features/problems/problem-submissions/problem-submissions-layout.tsx | New client layout wrapper for submissions page with sidebar/breadcrumbs. |
| src/features/problems/problem-submissions/problem-submissions-header.tsx | Empty placeholder file for a future submissions header component. |
| src/app/problems/[slug]/submissions/page.tsx | New submissions route page that preloads problem data and renders the layout within a hydration boundary. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| type ProblemLayoutProps = { | ||
| problem: Problem; | ||
| accessToken?: string; | ||
| }; | ||
|
|
||
| export default function ProblemSubmissionsLayout({ | ||
| problem, | ||
| accessToken, | ||
| }: ProblemLayoutProps) { |
There was a problem hiding this comment.
The props type name ProblemLayoutProps is misleading in this submissions-specific component. Consider renaming it to something submissions-specific (e.g., ProblemSubmissionsLayoutProps) to avoid confusion with the existing ProblemLayout component.
| { | ||
| url: routerConfig.problem.execute({ slug: problem.slug }), | ||
| name: problem.title, | ||
| } |
There was a problem hiding this comment.
The breadcrumbs array is missing the trailing comma after the last item; this repo’s Prettier config uses trailingComma: "es5", so formatting will get rewritten in CI. Please run Prettier or add the trailing comma here to keep the diff stable.
| } | |
| }, |
| defaultOpen={false} | ||
|
|
||
| > | ||
| <h1>TESTING</h1> |
There was a problem hiding this comment.
<h1>TESTING</h1> looks like placeholder UI and will ship to users as-is. Please replace it with the intended submissions content (or remove until the feature is ready) before merging.
| <h1>TESTING</h1> | |
| {/* TODO: Implement problem submissions view */} |
| import { getProblemBySlugQueryOptions } from "@/features/problems/api/get-problem-by-slug"; | ||
| import ProblemSubmissionsLayout from "@/features/problems/problem-submissions/problem-submissions-layout"; | ||
| import { auth0 } from "@/lib/auth0"; | ||
| import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query" |
There was a problem hiding this comment.
Missing semicolon at the end of this import; Prettier is configured with semi: true, so this will be auto-reformatted. Please run Prettier or add the semicolon to keep formatting consistent.
| import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query" | |
| import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; |
| const preloadData = async (slug: string ) => { | ||
| const queryClient = new QueryClient(); | ||
|
|
||
| await Promise.all([ | ||
| queryClient.prefetchQuery(getProblemBySlugQueryOptions(slug)), | ||
| ]); | ||
|
|
||
| const dehydratedState = dehydrate(queryClient); | ||
|
|
||
| return { | ||
| dehydratedState, | ||
| queryClient, | ||
| }; | ||
| } | ||
|
|
There was a problem hiding this comment.
The preloadData function block has formatting issues (extra space in slug: string )) and is missing the trailing semicolon after the function expression. With repo Prettier settings, this will be rewritten—please format it to match existing pages (e.g., src/app/problems/[slug]/page.tsx).
| return ( | ||
| <HydrationBoundary state={dehydratedState}> | ||
| <ProblemSubmissionsLayout problem={problem} accessToken={accessToken} /> | ||
| </HydrationBoundary> | ||
| ) | ||
| } No newline at end of file |
There was a problem hiding this comment.
The component return at the end of the file is missing a terminating semicolon after the closing parenthesis. Prettier (semi: true) will change this; please align with the existing page implementations.
|
No description provided.