got server callback and infobox working

6 files changed, 45 insertions, 17 deletions

diff --git a/src/components/auth/Invite.js b/src/components/auth/Invite.js
index 2776af05f..dbbe58900 100644
--- a/src/components/auth/Invite.js
+++ b/src/components/auth/Invite.js
@@ -52,6 +52,14 @@ export default class Invite extends Component {
     intl: intlShape,
   };
 
+  state = { showSuccessMessage: false };
+
+  handlers = {
+    onChange: (field) => {
+      this.setState({ showSuccessMessage: false })
+    }
+  };
+
   form = new Form({
     fields: {
       invite: [...Array(3).fill({
@@ -59,10 +67,13 @@ export default class Invite extends Component {
           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],
           },
         },
@@ -81,8 +92,11 @@ export default class Invite extends Component {
           invites: form.values().invite,
           from
         });
+
         this.form.clear()
-        this.form.$('invite').$('0').focus()
+        // this.form.$('invite.0.name').focus() // path accepted but does not focus ;(
+        document.querySelector('input:first-child').focus()
+        this.setState({ showSuccessMessage: true })
       },
       onError: () => {},
     });
@@ -91,7 +105,7 @@ export default class Invite extends Component {
   render() {
     const { form } = this;
     const { intl } = this.context;
-    const { from, embed, success } = this.props;
+    const { from, embed, success, isInviteSuccessful } = this.props;
 
     const atLeastOneEmailAddress = form.$('invite')
       .map(invite => invite.$('email').value)
@@ -102,11 +116,9 @@ export default class Invite extends Component {
       'invite__embed--button': embed,
     });
 
-    console.log(success)
-
     return (
       <div>
-        {(success && <Appear>
+        {this.state.showSuccessMessage && isInviteSuccessful && (<Appear>
           <Infobox
             type="success"
             icon="checkbox-marked-circle-outline"
diff --git a/src/components/settings/user/EditUserForm.js b/src/components/settings/user/EditUserForm.js
index f36887fc2..0a7b7c396 100644
--- a/src/components/settings/user/EditUserForm.js
+++ b/src/components/settings/user/EditUserForm.js
@@ -135,7 +135,7 @@ export default class EditServiceForm extends Component {
             <Button
               type="submit"
               label={intl.formatMessage(messages.buttonSave)}
-              htmlForm="form"
+              htmlForm="form" // why is form attribute escaped in JSX?? couldn't find any info on that, did you mean "htmlFor"?
             />
           )}
         </div>
diff --git a/src/components/ui/Link.js b/src/components/ui/Link.js
index aabb9e0a6..b09ef026e 100644
--- a/src/components/ui/Link.js
+++ b/src/components/ui/Link.js
@@ -35,7 +35,9 @@ export default class Link extends Component {
       filter = `${to}`;
     }
 
-    const match = matchRoute(filter, router.location.pathname + router.location.search);
+    const match = matchRoute(filter, router.location.pathname);
+
+    console.log(filter, strictFilter, router.location.pathname, router.location.search, match)
 
     const linkClasses = classnames({
       [`${className}`]: true,
diff --git a/src/containers/settings/AccountScreen.js b/src/containers/settings/AccountScreen.js
index 5b0f1073b..9ee93a9e9 100644
--- a/src/containers/settings/AccountScreen.js
+++ b/src/containers/settings/AccountScreen.js
@@ -61,7 +61,7 @@ export default class AccountScreen extends Component {
   render() {
     const { user, payment } = this.props.stores;
     const { openExternalUrl } = this.props.actions.app;
-    const { user: userActions } = this.props.actions;
+    const { user: userActions } = this.props.actions; // @adlk: :+1 what's the opposite of git blame?
 
     const isLoadingUserInfo = user.getUserInfoRequest.isExecuting;
     const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting;
diff --git a/src/containers/settings/InviteScreen.js b/src/containers/settings/InviteScreen.js
index 923f08069..a1170bfec 100644
--- a/src/containers/settings/InviteScreen.js
+++ b/src/containers/settings/InviteScreen.js
@@ -22,11 +22,17 @@ export default class InviteScreen extends Component {
     gaPage('Settings/Invite');
   }
 
+
+  componentWillUnmount () {
+    this.props.stores.user.inviteRequest.reset()
+  }
+
   render() {
-    const {
-      actions,
-      location,
-    } = this.props;
+    const { actions, location } = this.props;
+    const { user } = this.props.stores;
+
+    const isLoadingInvite = user.inviteRequest.isExecuting;
+    const isInviteSuccessful = user.inviteRequest.wasExecuted && !user.inviteRequest.isError;
 
     return (
       <div className="settings__main">
@@ -36,6 +42,9 @@ export default class InviteScreen extends Component {
         <div className="settings__body invite__form">
           <Invite
             onSubmit={actions.user.invite}
+            // status={user.actionStatus} // not needed
+            isLoadingInvite={user.inviteRequest.isExecuting}
+            isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError}        
             from={location.query.from}
             embed={true}
             success={location.query.success}
diff --git a/src/stores/UserStore.js b/src/stores/UserStore.js
index 152090f46..82eab9f44 100644
--- a/src/stores/UserStore.js
+++ b/src/stores/UserStore.js
@@ -8,6 +8,8 @@ import Request from './lib/Request';
 import CachedRequest from './lib/CachedRequest';
 import { gaEvent } from '../lib/analytics';
 
+import { matchPath } from 'react-router'
+
 // TODO: split stores into UserStore and AuthStore
 export default class UserStore extends Store {
   BASE_ROUTE = '/auth';
@@ -161,15 +163,18 @@ export default class UserStore extends Store {
     gaEvent('User', 'retrievePassword');
   }
 
-  @action _invite({ invites, from }) {
+  // TODO: REFACTOR from -> fromRoute
+  @action async _invite({ invites, from }) {
     const data = invites.filter(invite => invite.email !== '');
 
-    this.inviteRequest.execute(data);
+    const response = await this.inviteRequest.execute(data)._promise;
 
-    console.log(from)
+    this.actionStatus = response.status || []
 
-    // we do not wait for a server response before redirecting the user
-    this.stores.router.push(from + '?success=true' || '/');
+    // we do not wait for a server response before redirecting the user ONLY DURING SIGNUP
+    if (this.stores.router.location.pathname.includes(this.INVITE_ROUTE)) {
+      this.stores.router.push('/');
+    }
 
     gaEvent('User', 'inviteUsers');
   }