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

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

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

Description

In this issue, we will create a new Next.js React page tasks.tsx that will be responsible for displaying the project tasks. This page will be a functional component written in TypeScript using ES6 syntax like arrow functions. It will fetch data from the database via API endpoints built using Prisma, and use next-auth/react for authentication. The styling will be done using Tailwind CSS.

Requirements

Create a new file tasks.tsx inside the src/pages/project/[projectId] directory.
Import the necessary dependencies:

import { useSession } from "next-auth/react";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";
import Layout from "~/components/Layout";
import TaskList from "~/components/TaskList";
import { Task } from "~/types";

Define the Props interface for the TasksPage component:

interface Props {
  tasks: Task[];
}

Create the TasksPage functional component using the arrow function syntax:

const TasksPage: React.FC<Props> = ({ tasks }) => {
  // component implementation
};

Inside the TasksPage component, get the user's session using the useSession hook from next-auth/react:

const { data: session } = useSession();

Use the useRouter hook from next/router to get the projectId from the URL:

const router = useRouter();
const { projectId } = router.query;

Create a state variable tasksList and a setter function setTasksList using the useState hook. Initialize it with the tasks prop:

const [tasksList, setTasksList] = useState<Task[]>(tasks);

Create a useEffect hook that will fetch the tasks data from the API when the projectId changes:

useEffect(() => {
  if (!projectId) return;

  // Fetch tasks data from the API using the projectId
  // Update the tasksList state with the fetched data
}, [projectId]);

Render the Layout component and pass the session as a prop:

return (
  <Layout session={session}>
    {/* content */}
  </Layout>
);

Inside the Layout component, render a heading and a paragraph describing the purpose of the page:

<h1 className="text-2xl font-semibold">Project Tasks</h1>
<p className="text-gray-600">
  Here you can view, edit, approve or reject tasks for your project.
</p>

Render the TaskList component and pass the tasksList state variable as a prop:

<TaskList tasks={tasksList} />

Export the TasksPage component as default:

export default TasksPage;

Summary

In this issue, we have created a new Next.js React page tasks.tsx that displays the project tasks. The page uses the next-auth/react package for authentication, fetches data from the API using Prisma, and is styled using Tailwind CSS. The created TasksPage component is a functional component that manages the state and lifecycle, renders correctly, and supports necessary user interactions.

PioneerSquareLabs / otto-playground