feat(App) Feature Invite Friends in Settings

- MOVE form creation to `componentWillMount()` - focus input field on `componentDidMount()`
meetfranz · Feb 8, 2018 · ab33c44 · ab33c44
1 parent 2a25f02
commit ab33c44
Showing 1 changed file with 31 additions and 25 deletions.
diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
@@ -64,32 +64,38 @@ export default class Invite extends Component {
 
   state = { showSuccessInfo: false };
 
-  handlers = {
+  componentWillMount() {
-    onChange: () => {
+    const handlers = {
-      this.setState({ showSuccessInfo: false });
+      onChange: () => {
-    },
+        this.setState({ showSuccessInfo: false });
-  };
+      },
-
+    };
-  form = new Form({
+
-    fields: {
+    this.form = new Form({
-      invite: [...Array(3).fill({
+      fields: {
-        fields: {
+        invite: [...Array(3).fill({
-          name: {
+          fields: {
-            label: this.context.intl.formatMessage(messages.nameLabel),
+            name: {
-            placeholder: this.context.intl.formatMessage(messages.nameLabel),
+              label: this.context.intl.formatMessage(messages.nameLabel),
-            handlers: this.handlers,
+              placeholder: this.context.intl.formatMessage(messages.nameLabel),
-            // related: ['invite.0.email'], // path accepted but does not work
+              handlers,
-          },
+              // related: ['invite.0.email'], // path accepted but does not work
-          email: {
+            },
-            label: this.context.intl.formatMessage(messages.emailLabel),
+            email: {
-            placeholder: this.context.intl.formatMessage(messages.emailLabel),
+              label: this.context.intl.formatMessage(messages.emailLabel),
-            handlers: this.handlers,
+              placeholder: this.context.intl.formatMessage(messages.emailLabel),
-            validators: [email],
+              handlers,
+              validators: [email],
+            },
           },
-        },
+        })],
-      })],
+      },
-    },
+    }, this.context.intl);
-  }, this.context.intl);
+  }
+
+  componentDidMount() {
+    document.querySelector('input:first-child').focus();
+  }
 
   submit(e) {
     e.preventDefault();