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 = {
-    onChange: () => {
-      this.setState({ showSuccessInfo: false });
-    },
-  };
-
-  form = new Form({
-    fields: {
-      invite: [...Array(3).fill({
-        fields: {
-          name: {
-            label: this.context.intl.formatMessage(messages.nameLabel),
-            placeholder: this.context.intl.formatMessage(messages.nameLabel),
-            handlers: this.handlers,
-            // related: ['invite.0.email'], // path accepted but does not work
-          },
-          email: {
-            label: this.context.intl.formatMessage(messages.emailLabel),
-            placeholder: this.context.intl.formatMessage(messages.emailLabel),
-            handlers: this.handlers,
-            validators: [email],
+  componentWillMount() {
+    const handlers = {
+      onChange: () => {
+        this.setState({ showSuccessInfo: false });
+      },
+    };
+
+    this.form = new Form({
+      fields: {
+        invite: [...Array(3).fill({
+          fields: {
+            name: {
+              label: this.context.intl.formatMessage(messages.nameLabel),
+              placeholder: this.context.intl.formatMessage(messages.nameLabel),
+              handlers,
+              // related: ['invite.0.email'], // path accepted but does not work
+            },
+            email: {
+              label: this.context.intl.formatMessage(messages.emailLabel),
+              placeholder: this.context.intl.formatMessage(messages.emailLabel),
+              handlers,
+              validators: [email],
+            },
           },
-        },
-      })],
-    },
-  }, this.context.intl);
+        })],
+      },
+    }, this.context.intl);
+  }
+
+  componentDidMount() {
+    document.querySelector('input:first-child').focus();
+  }
 
   submit(e) {
     e.preventDefault();