Closed otto-jacob closed 1 year ago
Hello human! 👋
This PR was created by Otto to address the issue Create src/pages/project/sitemap.tsx
Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.
If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. Otto will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.
Once the code looks good, approve the PR and merge the code.
The latest updates on your projects. Learn more about Vercel for Git ↗︎
Name | Status | Preview | Comments | Updated (UTC) |
---|---|---|---|---|
otto-playground | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Jun 7, 2023 11:39pm |
Summary:
Create a Next.js page for src/pages/project/sitemap.tsx. Here are the instructions:
Issue: Create the Next.js Project Sitemap Page (sitemap.tsx)
Background
We need to create a new Next.js page called
sitemap.tsx
that will display the project sitemap for the user. This page will show a visual sitemap diagram for all of the files in their project. Each box that represents a file will show the file name and description. Users should be able to click on and edit these boxes, as well as approve or reject them. They should also be able to create new files by clicking a button and entering the file name, a short description, and a link to a Figma design file.Requirements
sitemap.tsx
inside thesrc/pages/project
folder.import { useSession } from 'next-auth/react'
for authentication.import { ProjectSitemap } from '~/types'
for the TypeScript interface.Props
interface for this component, which should include the following properties:projectSitemaps: ProjectSitemap[]
: An array of project sitemap items.Sitemap
that accepts theProps
interface.useSession
hook to get the user's session. If the user is not authenticated, redirect them to the login page.useState
hook. Make sure to handle loading and error states.ProjectSitemap
item, display a box with the file name and description. Add a click event listener to each box that opens a modal or a separate component for editing the file details.approved
property of the correspondingProjectSitemap
item and send the updated data to the API endpoint.Example Component Structure
Completion Criteria
sitemap.tsx
page is created inside thesrc/pages/project
folder.Props
interface is defined.Sitemap
functional component is created and uses theProps
interface.useSession
hook, and unauthenticated users are redirected to the login page.approved
property of theProjectSitemap
item and send the updated data to the API endpoint.