Create page => src/pages/dashboard.tsx

[otto-jacob]

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

Issue: Create a Next.js React page for the dashboard (dashboard.tsx)

Background

We need to create a dashboard page for our users to view and manage their projects. This page should display a list of the user's projects and provide an option to create a new project. The dashboard should be a Next.js page written in TypeScript as a functional component using ES6 syntax like arrow functions. The page should use Tailwind CSS for styling and next-auth/react for authentication.

Task

Create a new Next.js React page called dashboard.tsx in the src/pages directory. This page should be a functional component that uses ES6 syntax, TypeScript, and Tailwind CSS.

Detailed Instructions

1. Import the necessary libraries and components:

   • Import React and the useState and useEffect hooks from 'react'.
   • Import the useSession hook from 'next-auth/react'.
   • Import the Layout component from '~/components/Layout.tsx'.
   • Import the ProjectCard component from '~/components/ProjectCard.tsx'.
   • Import the Project type from '~/types.ts'.

2. Define the Dashboard functional component:

   • Use the useSession hook to get the user's session. If the session is not available, redirect the user to the login page.
   • Define a state variable projects using the useState hook, initialized with an empty array. The type of this state variable should be Project[].
   • Define a function fetchProjects that fetches the user's projects from the API endpoint (assume the API endpoint is already created). This function should update the projects state variable with the fetched data.
   • Use the useEffect hook to call the fetchProjects function when the component mounts.
   • Render the Layout component with a title prop set to "Dashboard".
   • Inside the Layout component, render a heading with the text "Your Projects" and a subheading with the text "Manage your projects here".
   • Below the headings, render a button with the text "Create New Project" that navigates the user to the project creation flow when clicked.
   • Iterate over the projects state variable and render a ProjectCard component for each project. Pass the project data as a prop to the ProjectCard component.

3. Export the Dashboard component as the default export.

Example Code Structure

import React, { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import Layout from '~/components/Layout.tsx';
import ProjectCard from '~/components/ProjectCard.tsx';
import { Project } from '~/types.ts';

const Dashboard = () => {
  // Use the useSession hook and handle the case when the session is not available.
  // Define the projects state variable and the fetchProjects function.
  // Use the useEffect hook to call fetchProjects when the component mounts.

  return (
    <Layout title="Dashboard">
      {/* Render the headings and the Create New Project button */}
      {/* Iterate over the projects state variable and render a ProjectCard component for each project */}
    </Layout>
  );
};

export default Dashboard;

Acceptance Criteria

• The dashboard.tsx page should be created in the src/pages directory.
• The page should use the useSession hook from 'next-auth/react' for authentication.
• The page should fetch the user's projects from the API endpoint and update the projects state variable.
• The page should render a list of the user's projects using the ProjectCard component.
• The page should use Tailwind CSS for styling and not import any CSS files directly.
• The created React component should match the given page description and properly manage the state and lifecycle, render correctly, and support necessary user interactions.