Create page => src/pages/project/sitemap.tsx

[otto-jacob]

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

1. Create a new Next.js page called sitemap.tsx inside the src/pages/project folder.
2. Import the necessary dependencies:
   • import { useSession } from 'next-auth/react' for authentication.
   • import { ProjectSitemap } from '~/types' for the TypeScript interface.
   • Any necessary React and Next.js imports.
3. Define the Props interface for this component, which should include the following properties:
   • projectSitemaps: ProjectSitemap[]: An array of project sitemap items.
4. Create a functional component called Sitemap that accepts the Props interface.
5. Use the useSession hook to get the user's session. If the user is not authenticated, redirect them to the login page.
6. Fetch the project sitemap data from the API endpoint (assume it is already created) and store it in a state variable using the useState hook. Make sure to handle loading and error states.
7. Render the project sitemap as a visual diagram. For each 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.
8. Add approve and reject buttons to each box. When clicked, these buttons should update the approved property of the corresponding ProjectSitemap item and send the updated data to the API endpoint.
9. Add a button for creating new files. When clicked, this button should open a modal or a separate component where the user can enter the file name, a short description, and a link to a Figma design file. Upon submission, send the new file data to the API endpoint and update the state with the new file.
10. Style the page using Tailwind CSS classes. Do not use custom CSS classes or import any CSS files directly.

Example Component Structure

interface Props {
  projectSitemaps: ProjectSitemap[];
}

const Sitemap: React.FC<Props> = ({ projectSitemaps }) => {
  // Use the useSession hook and handle authentication
  // Fetch the project sitemap data and handle the state
  // Render the project sitemap diagram
  // Add event listeners and handle user interactions
};

export default Sitemap;

Completion Criteria

• The sitemap.tsx page is created inside the src/pages/project folder.
• The necessary imports are added, and the Props interface is defined.
• The Sitemap functional component is created and uses the Props interface.
• The user's session is checked using the useSession hook, and unauthenticated users are redirected to the login page.
• The project sitemap data is fetched from the API endpoint and stored in a state variable.
• The project sitemap is rendered as a visual diagram with file name, description, approve/reject buttons, and click event listeners for editing.
• The approve and reject buttons update the approved property of the ProjectSitemap item and send the updated data to the API endpoint.
• A button for creating new files is added, and a modal or separate component is opened for entering file details. The new file data is sent to the API endpoint and added to the state.
• The page is styled using Tailwind CSS classes, without custom CSS classes or direct CSS imports.