US-01 Create reservation on a future, working date

[shirenekboyd]

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.

Acceptance Criteria

1. The /reservations/new page will have the following required and not-nullable fields:
   • [x] First name: <input name="first_name" />
   • [x] Last name: <input name="last_name" />
   • [x] Mobile number: <input name="mobile_number" />
   • [x] Date of reservation: <input name="reservation_date" />
   • [x] Time of reservation: <input name="reservation_time" />
   • [x] Number of people in the party, which must be at least 1 person. <input name="people" />
   • [x] display a Submit button that, when clicked, saves the new reservation, then displays the /dashboardpage for the date of the new reservation
   • [x] display a Cancel button that, when clicked, returns the user to the previous page
   • [x] display any error messages returned from the API

[shirenekboyd]

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 , 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.

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.

[shirenekboyd]

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:

    create: asyncErrorBoundary(create)
}