Create page => src/pages/project/[projectId]/sitemap.tsx

[kleneway]

Create a Next.js page for src/pages/project/[projectId]/sitemap.tsx. Here are the instructions:

Issue: Create a Next.js React page for displaying project sitemap

Background

We need to create a new Next.js React page called sitemap.tsx that will display the sitemap of a project. This page will be used to visualize the file structure of the project and allow users to view and approve the generated sitemap items.

Task

Create a new Next.js React page called sitemap.tsx inside the src/pages/project/[projectId] directory. This page should be a functional component written in TypeScript using ES6 syntax like arrow functions.

Requirements

1. Imports: Import the necessary libraries and components, such as:

   • React and useState from 'react'
   • useRouter from 'next/router'
   • useSession from 'next-auth/react'
   • SitemapDiagram component from '~/components/SitemapDiagram'
   • Project and SitemapItem TypeScript interfaces from '~/types'

2. Props interface: Define a Props interface for this component that includes the following properties:

   • project: A Project object
   • sitemapItems: An array of SitemapItem objects

3. State management: Use the useState hook to manage the state of the fetched sitemap items. Initialize the state with the sitemapItems prop.

4. Fetching data: Fetch the sitemap items from the API endpoint /api/projects/[projectId]/sitemap. Use the useRouter hook to get the projectId from the URL. Since the necessary API endpoints are already created, you can assume that the data will be fetched successfully.

5. Authentication: Use the useSession hook from next-auth/react to get the user's session. Redirect the user to the login page if they are not authenticated.

6. Styling: Use Tailwind CSS for styling. Do not import any CSS files directly. Only use Tailwind CSS classes, do not use custom CSS classes.

7. Rendering: Render the page with the following structure:

   • A heading with the project name and a subheading with the text "Sitemap"
   • A SitemapDiagram component that displays the sitemap items. Pass the fetched sitemap items as a prop to this component.

8. User interactions: The SitemapDiagram component should support the following user interactions:

   • Clicking on a sitemap item should allow the user to edit the item's details (file name, file description, and Figma link).
   • Users should be able to approve or reject sitemap items.

Example code

import React, { useState } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { Project, SitemapItem } from '~/types';
import SitemapDiagram from '~/components/SitemapDiagram';

interface Props {
  project: Project;
  sitemapItems: SitemapItem[];
}

const SitemapPage: React.FC<Props> = ({ project, sitemapItems }) => {
  const router = useRouter();
  const { data: session } = useSession();
  const [items, setItems] = useState(sitemapItems);

  // Redirect to login if not authenticated
  if (!session) {
    router.push('/login');
    return null;
  }

  // Fetch sitemap items and update state
  // ...

  return (
    <div className="container mx-auto px-4">
      <h1 className="text-2xl font-bold">{project.name}</h1>
      <h2 className="text-xl font-semibold">Sitemap</h2>
      <SitemapDiagram items={items} />
    </div>
  );
};

export default SitemapPage;

Completion Criteria

• The created React component should match the given page description.
• The component should properly manage the state and lifecycle, render correctly, and support necessary user interactions.
• The component should use the provided TypeScript interfaces and Zod schemas from the types.ts file.
• The component should use the ~ alias for importing files from the root directory (src).

Please create a pull request with the new sitemap.tsx page once completed.