Feature/#155313760 - Mary sees error message when she fails to create a project (#175)

* fix(create-project): show error message on fail, prevent page refresh

* chore(create-project): redirect to projects on success

Author: timdavish

client/components/CreateProjectForm/CreateProjectForm.js

@@ -38,7 +38,8 @@ class CreateProjectForm extends Component {
     this.setState({projectName: event.target.value})
   }
 
-  async createProject () {
+  async createProject (event) {
+    event.preventDefault()
     const response = await projectsApiClient.createProject(
       this.state.projectName,
       this.state.causes,
@@ -47,6 +48,8 @@ class CreateProjectForm extends Component {
     )
     if (response.status === 500) {
       this.setState({error: response.statusText})
+    } else {
+      this.context.router.history.push('/profile')
     }
   }
 
@@ -101,6 +104,11 @@ class CreateProjectForm extends Component {
         Create Project
         </Button>
 
+        {this.state.error &&
+          <div className={styles.errorContent}>
+            {this.state.error}
+          </div>
+        }
       </form>
     )
   }
@@ -113,6 +121,10 @@ function mapStateToProps (state) {
   }
 }
 
+CreateProjectForm.contextTypes = {
+  router: PropTypes.object
+}
+
 CreateProjectForm.propTypes = {
   error: PropTypes.string,
   handleSubmit: PropTypes.func,

client/components/CreateProjectForm/CreateProjectForm.scss

@@ -28,3 +28,10 @@
   grid-column: 1 / 1;
   grid-row: 8;
 }
+
+.errorContent {
+  grid-row: 9;
+  grid-column: 1 / 1;
+  font-size: 1rem;
+  color: $errorColor;
+}