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

[kleneway]

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

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

Background

We need to create a new Next.js React page called data.tsx that will display the project data schema for a specific project. This page will be used by the users to view and manage the data schema of their projects. The data schema will show each table in the database, along with each column in the table and information about the column. Users can create their own tables here by clicking on a button and adding each column name with a description of what it is. They can also edit existing tables and approve or reject each table.

Task

Create a new Next.js React page data.tsx in the src/pages/project/[projectId] directory. This page should be a functional component using ES6 syntax like arrow functions. Use TypeScript and follow the provided TypeScript interfaces. Use Tailwind CSS for styling, and fetch data from the database via API endpoints using Prisma. Use next-auth/react for authentication.

Detailed Instructions

1. Import necessary libraries and components:

   • Import React, useState, and useEffect from 'react'.
   • Import useRouter from 'next/router'.
   • Import useSession from 'next-auth/react'.
   • Import DataSchemaItem from the types.ts file.
   • Import any necessary components from src/components.

2. Define the Props interface for this component:

   • projectId: string

3. Create the Data functional component:

   • Use the Props interface for the component's props.
   • Use the useSession hook to get the user's session.
   • Use the useRouter hook to get the projectId from the URL.
   • Use useState to manage the state for the data schema items. Initialize it as an empty array of DataSchemaItem.
   • Use useEffect to fetch the data schema items from the API when the component mounts. Update the state with the fetched data.

4. Fetch data from the API:

   • Create a function fetchDataSchemaItems that takes no arguments.
   • Inside the function, make an API call to the appropriate endpoint (e.g., /api/projects/[projectId]/data) to fetch the data schema items for the given projectId.
   • Update the state with the fetched data schema items.

5. Render the component:

   • Check if the user is authenticated using the session object. If not, redirect them to the login page.
   • Display a heading with the title "Project Data Schema".
   • Display a subheading with the project name.
   • Create a table with the following columns: "Table Name", "Column Name", "Column Description", "Actions".
   • Loop through the data schema items and display a table row for each item. Show the table name, column name, and column description in the respective columns.
   • In the "Actions" column, display buttons for "Edit", "Approve", and "Reject". These buttons should trigger the corresponding actions for the data schema item.

6. Implement user interactions:

   • Create a function handleEdit that takes a DataSchemaItem as an argument. This function should open a modal or a form to edit the data schema item.
   • Create a function handleApprove that takes a DataSchemaItem as an argument. This function should update the approved property of the data schema item to true and make an API call to update the item in the database.
   • Create a function handleReject that takes a DataSchemaItem as an argument. This function should update the approved property of the data schema item to false and make an API call to update the item in the database.

7. Add a button to create a new table:

   • Display a button with the label "Add New Table".
   • When the button is clicked, open a modal or a form to create a new table. The user should be able to add column names and descriptions for the new table.

8. Make sure the component properly manages the state and lifecycle, renders correctly, and supports necessary user interactions.

Please let me know if you have any questions or need further clarification.