Create src/pages/create/description.tsx

[cpirich]

Summary:

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]

Hello human! 👋

This PR was created by Otto to address the issue Create src/pages/create/description.tsx

Next Steps

1. Please review the PR carefully. Auto-generated code can and will contain subtle bugs and mistakes.

2. If you identify code that needs to be changed, please reject the PR with a specific reason. Be as detailed as possible in your comments. Otto will take these comments, make changes to the code and push up changes. Please note that this process will take a few minutes.

3. Once the code looks good, approve the PR and merge the code.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
otto-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 6, 2023 10:11pm