User Story 3 – Create a Trip

[miriam-ertl]

Value proposition

As a user I want to be able to create a new trip so that I can easily plan my upcoming trips

Description

Acceptance criteria

• [ ] Clicking on the + add trip link on the homepage leads to a form page
• [ ] The form page consists of the following:
  • [ ] Heading of My Trips
  • [ ] Form
    • [ ] Title of the Trip: The field is required, and can contain a maximum of 30 characters
    • [ ] Starting date: The field is required, with a datepicker that fills the field after clicking on a date
    • [ ] Ending date: The field is required, with a datepicker that fills the field after clicking on a date
    • [ ] City: The field is required, and can contain a maximum of 30 characters
    • [ ] Country: The field is required, and can contain a maximum of 30 characters
    • [ ] Image (Url): The field is optional, without a maximum of characters
    • [ ] Description: The field is optional, with a maximum of 150 characters
  • [ ] An add trip button
  • [ ] A cancel link
  • [ ] A back-link arrow

Note: When the maximum amount of characters for a form field hits its treshold, no new characters inputs are added.

• [ ] Clicking on the cancel link or the back-link will open a message below the form, which asks for the users next process steps either to continue or cancel adding a new trip

  • [ ] If the user exits the clearance process by clicking on No, the message will disappear, the user can edit the last status of the form
  • [ ] If the user exits the clearance process by clicking on Yes, the user will be lead to the homepage

• [ ] Clicking on the add trip button with all the required fields supplied will send the user to a new page, where the message: "Congratulations, you have a added a new trip" will be displayed. On this page there is a home link, that leads the user back to the homepage. This trip is now added to the list of trips on the homepage

• [ ] Clicking on the add trip button while at least one required field is not supplied will inform the user about missing entries

Tasks

• [x] Create the feature branch feature/addTrip
• [x] In pages/api/trips/index.js, write the POST request

Add a trip

• [x] Create a component TripForm
• [x] Inside this:
  • [x] Create a label with the value Title (max. 30 characters*)
  • [x] Create an input field for this label with the attribute required
  • [x] Create a label with the value Starting date (dd/mm/yyyy)*
  • [x] Create an input field for this label with the attribute required, type = date
  • [x] Create a label with the value Ending date (dd/mm/yyyy)*
  • [x] Create an input field for this Label with the attribute required, type = date
  • [x] Create a label with the value City (max. 30 characters) *
  • [x] Create a input field for this label with the attribute required
  • [x] Create an label with the value Country (max. 30 characters) *
  • [x] Create an input field for this label with the attribute required
  • [x] Create a label with the value Image (Url)
  • [x] Create an input field with placeholder for example www.my-image.com for this label, with the attribute required
  • [x] Create a label with the value Description (max. 150 characters) *
  • [x] Create an input field for this label with the attribute required
  • [x] Create a submit button

Submit add trip

• [x] Create a new page addTrip.js
• [x] Create a text message on the page with a success message
• [x] Clicking the Form submit button redirects to Confirmation.js Page
• [x] Submitting the forms sends the new trip information to the MongoDB database

Cancel add trip

• [x] Add a ConfirmationMessage component that will be displayed below, triggered by an onClick event on either the back-link arrow or the cancel link
• [x] The component renders the message: Do you want to cancel adding a new trip? Clicking "Yes" will clear your input. and the buttons/links No and Yes
  • [x] Clicking on the Yes link leads to the homepage
  • [x] Clicking on the No button hides the CancelCreate component

First new trip

• [ ] Create a text message on the Homepage index.js, if no list item exists

Error message required form field

• [x] Create an error message if not all required fields are filled and the form is already submitted

API Endpoints status

Method	URL	What it does
GET	/api/trips	Gets all trips
GET	/api/trips/:id	Gets trips by id
POST	/api/trips	Creates new trip

[JessicaLoers]

You have almost defeated the beast. 🐲

It's super hard at first to name components and pages descriptively - that takes training and experience. Here are my comments 🤓

Submit add trip

• would change the name of the page to addTripp.js. Remember that this name will be part of the URL.

Cancel add trip

• CancelCreate component ➡️ Please think about the reusability of the component. For this reason, I would choose a generic name like ConfirmationDialog or ConfirmationMessage .

You guys worked so hard on this user story - that's why it's approved.

[shrocket]

Hey! This looks really good! We (Tien and I) do have a couple of comments, though:

• In your acceptance criteria, you have written, "If the user exits the clearance process by clicking on No," but the buttons which appear are labeled "Yes" and "Continue." There is no "No." (I like "Continue" better anyway...)
• We don't know what "the clearance process" is, but it's not important to this QA. ;)
• The character counter in your description text area doesn't (yet) work (and we imagine you already know this).

Again, this looks really good! Congrats to you! 🚀