Create page => src/pages/create/description.tsx

[otto-jacob]

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

Issue: Create the description.tsx page for the Next.js project creation flow

Background

We are building a Next.js web application for Otto, an AI-powered development platform. As part of the project creation flow, we need a description.tsx page where users can provide a detailed overview of their project. This page will be a part of the project creation wizard, which includes other pages for defining the project name, setup, and Slack integration.

Task

Create a new Next.js page called description.tsx in the src/pages/create directory. This page should be a functional component written in TypeScript using ES6 syntax, like arrow functions. Use Tailwind CSS for styling and next-auth/react for authentication.

Detailed Instructions

1. Imports: Start by importing the necessary modules and components:

   • React and useState from 'react'
   • useRouter from 'next/router'
   • useSession from 'next-auth/react'
   • Layout component from '~/components/Layout'

2. Props Interface: Define a Props interface for the Description component. For this page, we don't need any specific props.

3. Authentication: Use the useSession hook from next-auth/react to get the user's session. If the user is not authenticated, redirect them to the login page.

4. State Management: Use the useState hook to manage the state of the project description. Initialize the state with an empty string.

5. Handle Submit: Create a function called handleSubmit that will be called when the user submits the form. Inside this function, perform the following actions:

   • Prevent the default form submission behavior.
   • Call the API endpoint to save the project description to the database (assume the API endpoint is already created).
   • If the API call is successful, navigate to the next step in the project creation flow (e.g., the project setup page).

6. Component Structure: The Description component should have the following structure:

   • A Layout component wrapping the entire page content.
   • An h1 element for the page title.
   • A form element with an onSubmit event handler that calls the handleSubmit function.
   • Inside the form:
     • A label element for the project description input field.
     • A textarea element for the project description input field. Bind its value to the state and update the state when the value changes.
     • A button element for submitting the form.

7. Styling: Use Tailwind CSS classes to style the page elements. Do not use custom CSS classes or import any CSS files directly.

8. Error Handling: Handle any errors that may occur during the API call and display an appropriate error message to the user.

9. TypeScript: Ensure that all TypeScript interfaces and types are used correctly throughout the component, including the Props interface, useState, and any other necessary types.

Example Code

import React, { useState } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import Layout from '~/components/Layout';

interface Props {}

const Description: React.FC<Props> = () => {
  // ...implementation details...
};

export default Description;

Acceptance Criteria

• The description.tsx page is created in the src/pages/create directory.
• The page is a functional component written in TypeScript using ES6 syntax.
• The page uses next-auth/react for authentication and redirects unauthenticated users to the login page.
• The page uses Tailwind CSS for styling and does not import any CSS files directly.
• The page properly manages state and lifecycle, renders correctly, and supports necessary user interactions.
• All TypeScript interfaces and types are used correctly throughout the component.
• The created component matches the given page description and handles error cases appropriately.

[cpirich]

I have performed a code review and I've found a few issues that need to be addressed. Here are the main issues I found: The error handling in the handleSubmit function could be improved. Currently, it's using a generic error message 'Failed to save project description' for all errors, which might not be helpful for debugging or user experience. It would be better to handle different types of errors separately and provide more specific error messages. For example, network errors, server errors, and validation errors should be handled differently.

          I also found a few minor issues that I'll try to address as well: The 'description' state is initialized as an empty string, which might not be the best practice. If the description is required, it would be better to initialize it as null and add validation to check if it's null or empty before submitting the form. Also, the 'error' state is not cleared before a new submission, which might cause confusion if an old error message is displayed for a new submission.
          I will attempt to fix these issues and push up a new commit to the PR.