Create new project dialog

[vsaarinen]

This is quite a complex PR. I'll try to break it down below.

Note that this does not include styling. That will be added in a separate PR once we get the design mockups.

TODO:

• Finish writing unit tests

Modal dialogs

react-modal is used to show a modal dialog. We keep track of what modal is being shown in the Redux state tree using the modal module. I crated one component for the new project modal dialog, and one component for the form that it includes (more below).

In order for the modal to show on top of everything else, we needed to create a new stacking (z-index) context at the root App component. We also prevent scrolling on the App element when a modal is open.

Forms

redux-form is used to handle form validation and submission. It stores form data in the redux state tree. It's a rather complex solution, but the end result is pretty clean and redux-friendly. redux-form provides a higher-order component wrapper, which then injects props into our form component.

The thing that made this solution slightly complex is that onSubmit, the function that receives the form data and is called when the form is submitted, should return a Promise that's either resolved on a successful submission or rejected on a failure. If you're using redux-thunk, that fits in perfectly. However, since we use redux-saga, we had to use a slightly convoluted approach, which resulted in the new forms module. It works like this:

1. We create an action generator (using onSubmitActions) that accepts three Redux action types: one that triggers the submission, one that we watch for to indicate that the submission succeeded, and one that we watch for to indicate that the submission failed. This action generator captures the values passed to onSubmit, and returns a Promise that dispatches a redux action that captures the resolve and reject functions for that promise.
2. Our watchForFormSubmit saga catches the form submission and calls the generic formSubmitSaga. This dispatches the passed in action type for triggering the submission along with the form payload, and then waits to see which type of action is received first: a success or failure action. Depending on the result, it calls resolve or reject to settle the Promise, and thus tells our form that the submission has completed.

Note that the type definitions for redux-form are not up to date in NPM. There's a PR in progress where this is being fixed. Until then, I had to hack the in-progress version to make them work.

[vsaarinen]

Dialog for creating a new project