diff options
author | haraldox <hnaumann+github@gmail.com> | 2018-02-02 11:01:38 +0100 |
---|---|---|
committer | haraldox <hnaumann+github@gmail.com> | 2018-02-02 11:01:38 +0100 |
commit | f74d47acb7ee470e24245667c9195604faa66a20 (patch) | |
tree | 1f441a5acbf1e8661f47a8cf5ca8bc30493d5724 | |
parent | [WIP] started work on infobox (diff) | |
download | ferdium-app-f74d47acb7ee470e24245667c9195604faa66a20.tar.gz ferdium-app-f74d47acb7ee470e24245667c9195604faa66a20.tar.zst ferdium-app-f74d47acb7ee470e24245667c9195604faa66a20.zip |
got server callback and infobox working
-rw-r--r-- | src/components/auth/Invite.js | 22 | ||||
-rw-r--r-- | src/components/settings/user/EditUserForm.js | 2 | ||||
-rw-r--r-- | src/components/ui/Link.js | 4 | ||||
-rw-r--r-- | src/containers/settings/AccountScreen.js | 2 | ||||
-rw-r--r-- | src/containers/settings/InviteScreen.js | 17 | ||||
-rw-r--r-- | src/stores/UserStore.js | 15 |
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 { | |||
52 | intl: intlShape, | 52 | intl: intlShape, |
53 | }; | 53 | }; |
54 | 54 | ||
55 | state = { showSuccessMessage: false }; | ||
56 | |||
57 | handlers = { | ||
58 | onChange: (field) => { | ||
59 | this.setState({ showSuccessMessage: false }) | ||
60 | } | ||
61 | }; | ||
62 | |||
55 | form = new Form({ | 63 | form = new Form({ |
56 | fields: { | 64 | fields: { |
57 | invite: [...Array(3).fill({ | 65 | invite: [...Array(3).fill({ |
@@ -59,10 +67,13 @@ export default class Invite extends Component { | |||
59 | name: { | 67 | name: { |
60 | label: this.context.intl.formatMessage(messages.nameLabel), | 68 | label: this.context.intl.formatMessage(messages.nameLabel), |
61 | placeholder: this.context.intl.formatMessage(messages.nameLabel), | 69 | placeholder: this.context.intl.formatMessage(messages.nameLabel), |
70 | handlers: this.handlers, | ||
71 | // related: ['invite.0.email'], // path accepted but does not work | ||
62 | }, | 72 | }, |
63 | email: { | 73 | email: { |
64 | label: this.context.intl.formatMessage(messages.emailLabel), | 74 | label: this.context.intl.formatMessage(messages.emailLabel), |
65 | placeholder: this.context.intl.formatMessage(messages.emailLabel), | 75 | placeholder: this.context.intl.formatMessage(messages.emailLabel), |
76 | handlers: this.handlers, | ||
66 | validators: [email], | 77 | validators: [email], |
67 | }, | 78 | }, |
68 | }, | 79 | }, |
@@ -81,8 +92,11 @@ export default class Invite extends Component { | |||
81 | invites: form.values().invite, | 92 | invites: form.values().invite, |
82 | from | 93 | from |
83 | }); | 94 | }); |
95 | |||
84 | this.form.clear() | 96 | this.form.clear() |
85 | this.form.$('invite').$('0').focus() | 97 | // this.form.$('invite.0.name').focus() // path accepted but does not focus ;( |
98 | document.querySelector('input:first-child').focus() | ||
99 | this.setState({ showSuccessMessage: true }) | ||
86 | }, | 100 | }, |
87 | onError: () => {}, | 101 | onError: () => {}, |
88 | }); | 102 | }); |
@@ -91,7 +105,7 @@ export default class Invite extends Component { | |||
91 | render() { | 105 | render() { |
92 | const { form } = this; | 106 | const { form } = this; |
93 | const { intl } = this.context; | 107 | const { intl } = this.context; |
94 | const { from, embed, success } = this.props; | 108 | const { from, embed, success, isInviteSuccessful } = this.props; |
95 | 109 | ||
96 | const atLeastOneEmailAddress = form.$('invite') | 110 | const atLeastOneEmailAddress = form.$('invite') |
97 | .map(invite => invite.$('email').value) | 111 | .map(invite => invite.$('email').value) |
@@ -102,11 +116,9 @@ export default class Invite extends Component { | |||
102 | 'invite__embed--button': embed, | 116 | 'invite__embed--button': embed, |
103 | }); | 117 | }); |
104 | 118 | ||
105 | console.log(success) | ||
106 | |||
107 | return ( | 119 | return ( |
108 | <div> | 120 | <div> |
109 | {(success && <Appear> | 121 | {this.state.showSuccessMessage && isInviteSuccessful && (<Appear> |
110 | <Infobox | 122 | <Infobox |
111 | type="success" | 123 | type="success" |
112 | icon="checkbox-marked-circle-outline" | 124 | 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 { | |||
135 | <Button | 135 | <Button |
136 | type="submit" | 136 | type="submit" |
137 | label={intl.formatMessage(messages.buttonSave)} | 137 | label={intl.formatMessage(messages.buttonSave)} |
138 | htmlForm="form" | 138 | htmlForm="form" // why is form attribute escaped in JSX?? couldn't find any info on that, did you mean "htmlFor"? |
139 | /> | 139 | /> |
140 | )} | 140 | )} |
141 | </div> | 141 | </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 { | |||
35 | filter = `${to}`; | 35 | filter = `${to}`; |
36 | } | 36 | } |
37 | 37 | ||
38 | const match = matchRoute(filter, router.location.pathname + router.location.search); | 38 | const match = matchRoute(filter, router.location.pathname); |
39 | |||
40 | console.log(filter, strictFilter, router.location.pathname, router.location.search, match) | ||
39 | 41 | ||
40 | const linkClasses = classnames({ | 42 | const linkClasses = classnames({ |
41 | [`${className}`]: true, | 43 | [`${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 { | |||
61 | render() { | 61 | render() { |
62 | const { user, payment } = this.props.stores; | 62 | const { user, payment } = this.props.stores; |
63 | const { openExternalUrl } = this.props.actions.app; | 63 | const { openExternalUrl } = this.props.actions.app; |
64 | const { user: userActions } = this.props.actions; | 64 | const { user: userActions } = this.props.actions; // @adlk: :+1 what's the opposite of git blame? |
65 | 65 | ||
66 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; | 66 | const isLoadingUserInfo = user.getUserInfoRequest.isExecuting; |
67 | const isLoadingOrdersInfo = payment.ordersDataRequest.isExecuting; | 67 | 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 { | |||
22 | gaPage('Settings/Invite'); | 22 | gaPage('Settings/Invite'); |
23 | } | 23 | } |
24 | 24 | ||
25 | |||
26 | componentWillUnmount () { | ||
27 | this.props.stores.user.inviteRequest.reset() | ||
28 | } | ||
29 | |||
25 | render() { | 30 | render() { |
26 | const { | 31 | const { actions, location } = this.props; |
27 | actions, | 32 | const { user } = this.props.stores; |
28 | location, | 33 | |
29 | } = this.props; | 34 | const isLoadingInvite = user.inviteRequest.isExecuting; |
35 | const isInviteSuccessful = user.inviteRequest.wasExecuted && !user.inviteRequest.isError; | ||
30 | 36 | ||
31 | return ( | 37 | return ( |
32 | <div className="settings__main"> | 38 | <div className="settings__main"> |
@@ -36,6 +42,9 @@ export default class InviteScreen extends Component { | |||
36 | <div className="settings__body invite__form"> | 42 | <div className="settings__body invite__form"> |
37 | <Invite | 43 | <Invite |
38 | onSubmit={actions.user.invite} | 44 | onSubmit={actions.user.invite} |
45 | // status={user.actionStatus} // not needed | ||
46 | isLoadingInvite={user.inviteRequest.isExecuting} | ||
47 | isInviteSuccessful={user.inviteRequest.wasExecuted && !user.inviteRequest.isError} | ||
39 | from={location.query.from} | 48 | from={location.query.from} |
40 | embed={true} | 49 | embed={true} |
41 | success={location.query.success} | 50 | 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'; | |||
8 | import CachedRequest from './lib/CachedRequest'; | 8 | import CachedRequest from './lib/CachedRequest'; |
9 | import { gaEvent } from '../lib/analytics'; | 9 | import { gaEvent } from '../lib/analytics'; |
10 | 10 | ||
11 | import { matchPath } from 'react-router' | ||
12 | |||
11 | // TODO: split stores into UserStore and AuthStore | 13 | // TODO: split stores into UserStore and AuthStore |
12 | export default class UserStore extends Store { | 14 | export default class UserStore extends Store { |
13 | BASE_ROUTE = '/auth'; | 15 | BASE_ROUTE = '/auth'; |
@@ -161,15 +163,18 @@ export default class UserStore extends Store { | |||
161 | gaEvent('User', 'retrievePassword'); | 163 | gaEvent('User', 'retrievePassword'); |
162 | } | 164 | } |
163 | 165 | ||
164 | @action _invite({ invites, from }) { | 166 | // TODO: REFACTOR from -> fromRoute |
167 | @action async _invite({ invites, from }) { | ||
165 | const data = invites.filter(invite => invite.email !== ''); | 168 | const data = invites.filter(invite => invite.email !== ''); |
166 | 169 | ||
167 | this.inviteRequest.execute(data); | 170 | const response = await this.inviteRequest.execute(data)._promise; |
168 | 171 | ||
169 | console.log(from) | 172 | this.actionStatus = response.status || [] |
170 | 173 | ||
171 | // we do not wait for a server response before redirecting the user | 174 | // we do not wait for a server response before redirecting the user ONLY DURING SIGNUP |
172 | this.stores.router.push(from + '?success=true' || '/'); | 175 | if (this.stores.router.location.pathname.includes(this.INVITE_ROUTE)) { |
176 | this.stores.router.push('/'); | ||
177 | } | ||
173 | 178 | ||
174 | gaEvent('User', 'inviteUsers'); | 179 | gaEvent('User', 'inviteUsers'); |
175 | } | 180 | } |