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

[otto-jacob]

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

Issue: Create a Next.js React page for the Project Data page (data.tsx)

Description

In this task, you will create a new Next.js React page called data.tsx that will display the project data schema for the user's application. This page will be part of the project dashboard and will allow users to view, edit, approve, and reject the data schema generated by Otto. The data schema consists of tables, each with columns and their respective types and descriptions.

Requirements

1. Create a new Next.js page called data.tsx in the src/pages/project directory.
2. Use TypeScript and functional components with ES6 syntax (arrow functions).
3. Fetch data from the database via API endpoints built using Prisma. Assume that necessary API endpoints are already created.
4. Use next-auth/react for authentication. Import the user's session like this: import { useSession } from "next-auth/react".
5. Use Tailwind CSS for styling. Do not import any CSS files directly. Only use Tailwind CSS classes, and do not use custom CSS classes.
6. Comply with the provided TypeScript interfaces when fetching and using data.
7. Manage the state and lifecycle, render correctly, and support necessary user interactions.
8. Use ~ for the root directory (src) when importing files. The tsconfig paths configuration is: {"~/*": ["./src/*"]}.

Detailed Instructions

1. Import necessary libraries and components:

   • React, useState, and useEffect from 'react'.
   • useSession from 'next-auth/react'.
   • useRouter from 'next/router'.
   • ProjectDataSchema and ProjectDataColumn from the provided types.ts file.
   • Any necessary components for displaying and editing the data schema (e.g., Table, TableColumn, Button, etc.).

2. Define the Props interface for the DataPage component:

   interface DataPageProps {
    projectId: string;
   }

3. Create a functional component called DataPage that accepts the DataPageProps interface as its props.

4. Inside the DataPage component: a. Use the useSession hook to get the user's session. If the user is not authenticated, redirect them to the login page. b. Use the useRouter hook to get the projectId from the URL. c. Use the useState hook to create a state variable called dataSchemas with an initial value of an empty array. This variable will store the fetched data schemas. d. Use the useState hook to create a state variable called loading with an initial value of true. This variable will be used to show a loading spinner while fetching data.

5. Use the useEffect hook to fetch the data schemas from the API when the component mounts. Update the dataSchemas state variable with the fetched data and set the loading state variable to false when the data is fetched.

6. In the render method of the DataPage component: a. If the loading state variable is true, display a loading spinner. b. If the dataSchemas state variable is empty, display a message indicating that there are no data schemas available. c. If there are data schemas available, display a table with the following columns: Table Name, Approved, Actions. Each row in the table should represent a data schema from the dataSchemas state variable.

   • In the Table Name column, display the tableName property of the data schema.
   • In the Approved column, display a checkmark icon if the approved property of the data schema is true, otherwise display a cross icon.
   • In the Actions column, display buttons for Edit, Approve, and Reject. These buttons should trigger their respective actions for the corresponding data schema.

7. Implement the following user interactions: a. When the Edit button is clicked, open a modal or a new page where the user can edit the data schema, including adding, editing, or removing columns. After the user saves their changes, update the dataSchemas state variable with the updated data schema. b. When the Approve button is clicked, set the approved property of the data schema to true and update the dataSchemas state variable with the updated data schema. c. When the Reject button is clicked, set the approved property of the data schema to false and update the dataSchemas state variable with the updated data schema.

8. Export the DataPage component as the default export.

Please ensure that the created React component matches the given page description, properly manages the state and lifecycle, renders correctly, and supports necessary user interactions. If you have any questions or need clarification, feel free to ask. Happy coding!