improve workspace form setup

3 files changed, 46 insertions, 35 deletions

diff --git a/src/features/workspaces/components/CreateWorkspaceForm.js b/src/features/workspaces/components/CreateWorkspaceForm.js
index d440b9bae..83f6e07f7 100644
--- a/src/features/workspaces/components/CreateWorkspaceForm.js
+++ b/src/features/workspaces/components/CreateWorkspaceForm.js
@@ -4,8 +4,8 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Input, Button } from '@meetfranz/forms';
 import injectSheet from 'react-jss';
-
 import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
 
 const messages = defineMessages({
   submitButton: {
@@ -28,11 +28,11 @@ const styles = () => ({
   },
   submitButton: {
     height: 'inherit',
-    marginTop: '17px',
+    marginTop: '3px',
   },
 });
 
-@observer @injectSheet(styles)
+@injectSheet(styles) @observer
 class CreateWorkspaceForm extends Component {
   static contextTypes = {
     intl: intlShape,
@@ -43,46 +43,45 @@ class CreateWorkspaceForm extends Component {
     onSubmit: PropTypes.func.isRequired,
   };
 
-  prepareForm() {
+  form = (() => {
     const { intl } = this.context;
-    const config = {
+    return new Form({
       fields: {
         name: {
           label: intl.formatMessage(messages.name),
           placeholder: intl.formatMessage(messages.name),
           value: '',
+          validators: [required],
         },
       },
-    };
-    return new Form(config);
-  }
+    });
+  })();
 
-  submitForm(form) {
+  submitForm() {
+    const { form } = this;
     form.submit({
       onSuccess: async (f) => {
         const { onSubmit } = this.props;
-        const values = f.values();
-        onSubmit(values);
+        onSubmit(f.values());
       },
-      onError: async () => {},
     });
   }
 
   render() {
     const { intl } = this.context;
     const { classes } = this.props;
-    const form = this.prepareForm();
-
+    const { form } = this;
     return (
       <div className={classes.form}>
         <Input
           className={classes.input}
           {...form.$('name').bind()}
+          showLabel={false}
           onEnterKey={this.submitForm.bind(this, form)}
         />
         <Button
           className={classes.submitButton}
-          type="button"
+          type="submit"
           label={intl.formatMessage(messages.submitButton)}
           onClick={this.submitForm.bind(this, form)}
         />
diff --git a/src/features/workspaces/components/EditWorkspaceForm.js b/src/features/workspaces/components/EditWorkspaceForm.js
index 9e87b56dd..05ca65403 100644
--- a/src/features/workspaces/components/EditWorkspaceForm.js
+++ b/src/features/workspaces/components/EditWorkspaceForm.js
@@ -4,9 +4,11 @@ import { observer } from 'mobx-react';
 import { defineMessages, intlShape } from 'react-intl';
 import { Link } from 'react-router';
 import { Input, Button } from '@meetfranz/forms';
+import injectSheet from 'react-jss';
 
-import Form from '../../../lib/Form';
 import Workspace from '../models/Workspace';
+import Form from '../../../lib/Form';
+import { required } from '../../../helpers/validation-helpers';
 
 const messages = defineMessages({
   buttonDelete: {
@@ -27,7 +29,13 @@ const messages = defineMessages({
   },
 });
 
-@observer
+const styles = () => ({
+  nameInput: {
+    height: 'auto',
+  },
+});
+
+@injectSheet(styles) @observer
 class EditWorkspaceForm extends Component {
   static contextTypes = {
     intl: intlShape,
@@ -41,22 +49,30 @@ class EditWorkspaceForm extends Component {
     isDeleting: PropTypes.bool.isRequired,
   };
 
-  prepareForm(workspace) {
+  form = this.prepareWorkspaceForm(this.props.workspace);
+
+  componentWillReceiveProps(nextProps) {
+    const { workspace } = this.props;
+    if (workspace.id !== nextProps.workspace.id) {
+      this.form = this.prepareWorkspaceForm(nextProps.workspace);
+    }
+  }
+
+  prepareWorkspaceForm(workspace) {
     const { intl } = this.context;
-    const config = {
+    return new Form({
       fields: {
         name: {
           label: intl.formatMessage(messages.name),
           placeholder: intl.formatMessage(messages.name),
           value: workspace.name,
+          validators: [required],
         },
       },
-    };
-    return new Form(config);
+    });
   }
 
-  submitForm(submitEvent, form) {
-    submitEvent.preventDefault();
+  submitForm(form) {
     form.submit({
       onSuccess: async (f) => {
         const { onSave } = this.props;
@@ -70,15 +86,13 @@ class EditWorkspaceForm extends Component {
   render() {
     const { intl } = this.context;
     const {
-      workspace,
+      classes,
       isDeleting,
       isSaving,
       onDelete,
+      workspace,
     } = this.props;
-    if (!workspace) return null;
-
-    const form = this.prepareForm(workspace);
-
+    const { form } = this;
     return (
       <div className="settings__main">
         <div className="settings__header">
@@ -93,11 +107,9 @@ class EditWorkspaceForm extends Component {
           </span>
         </div>
         <div className="settings__body">
-          <form onSubmit={e => this.submitForm(e, form)} id="form">
-            <div className="workspace-name">
-              <Input {...form.$('name').bind()} />
-            </div>
-          </form>
+          <div className={classes.nameInput}>
+            <Input {...form.$('name').bind()} />
+          </div>
         </div>
         <div className="settings__controls">
           {/* ===== Delete Button ===== */}
@@ -130,7 +142,7 @@ class EditWorkspaceForm extends Component {
             <Button
               type="submit"
               label={intl.formatMessage(messages.buttonSave)}
-              htmlForm="form"
+              onClick={this.submitForm.bind(this, form)}
             />
           )}
         </div>
diff --git a/src/features/workspaces/containers/EditWorkspaceScreen.js b/src/features/workspaces/containers/EditWorkspaceScreen.js
index 1ddf8dfcb..17b723303 100644
--- a/src/features/workspaces/containers/EditWorkspaceScreen.js
+++ b/src/features/workspaces/containers/EditWorkspaceScreen.js
@@ -3,8 +3,8 @@ import { inject, observer } from 'mobx-react';
 import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../../../components/util/ErrorBoundary';
-import { state } from '../state';
 import EditWorkspaceForm from '../components/EditWorkspaceForm';
+import { state } from '../state';
 
 @inject('stores', 'actions') @observer
 class EditWorkspaceScreen extends Component {