US-01 Create and list reservations

[SJBroida]

User Story 1:

As a restaurant manager I want to create a new reservation when a customer calls so that I know how many customers will arrive at the restaurant on a given day.

[SJBroida]

Acceptance Criteria

1. The /reservations/new page will
   • have the following required and not-nullable fields:
     • First name: <input name="first_name" />
     • Last name: <input name="last_name" />
     • Mobile number: <input name="mobile_number" />
     • Date of reservation: <input name="reservation_date" />
     • Time of reservation: <input name="reservation_time" />
     • Number of people in the party, which must be at least 1 person. <input name="people" />
   • display a Submit button that, when clicked, saves the new reservation, then displays the /dashboard page for the date of the new reservation
   • display a Cancel button that, when clicked, returns the user to the previous page
   • display any error messages returned from the API
2. The /dashboard page will
   • list all reservations for one date only. (E.g. if the URL is /dashboard?date=2035-12-30 then send a GET to /reservations?date=2035-12-30 to list the reservations for that date). The date is defaulted to today, and the reservations are sorted by time.
   • display next, previous, and today buttons that allow the user to see reservations on other dates
   • display any error messages returned from the API
3. The /reservations API will have the same validations as above and will return 400, along with an informative error message, when a validation error happens.
   • seed the reservations table with the data contained in ./back-end/src/db/seeds/00-reservations.json

[SJBroida]

Hint Dates and times in JavaScript and databases can be challenging.

The users have confirmed that they will be using Chrome to access the site. This means you can use <input type="date" /> and <input type="time" />, which are supported by Chrome but may not work in other browsers.

<input type="date" /> will store the date in YYYY-MM-DD format. This is a format that works well with the PostgreSQL date data type.

<input type="time" /> will store the time in HH:MM:SS format. This is a format that works well with the PostgreSQL time data type.

Optional If you want to add support to other browsers such as Safari or IE, you can use the pattern and placeholder attributes along with the date and time inputs in your form. For the date input you can use <input type="date" placeholder="YYYY-MM-DD" pattern="\d{4}-\d{2}-\d{2}"/>, and for the time input you can use <input type="time" placeholder="HH:MM" pattern="[0-9]{2}:[0-9]{2}"/>. You can read more about handling browser support here.

You can assume that all dates and times will be in your local time zone.

[SJBroida]

Hint In the backend code, be sure to wrap any async controller functions in an asyncErrorBoundary call to ensure errors in async code are property handled.

In back-end/src/errors/asyncErrorBoundary.js

function asyncErrorBoundary(delegate, defaultStatus) {
  return (request, response, next) => {
    Promise.resolve()
      .then(() => delegate(request, response, next))
      .catch((error = {}) => {
        const { status = defaultStatus, message = error } = error;
        next({
          status,
          message,
        });
      });
  };
}

module.exports = asyncErrorBoundary;

Use in controllers as part of module.exports. For example:

module.exports = {
    create: asyncErrorBoundary(create)
}