diff options
author | 2019-03-26 15:26:20 +0100 | |
---|---|---|
committer | 2019-03-26 15:26:20 +0100 | |
commit | a2e4316879908c5bc2c38cef81eef9152476b6f6 (patch) | |
tree | 0542dc53ea28dd26a7b6b1731c856eb2887582d8 /src/features/workspaces/components/WorkspacesDashboard.js | |
parent | handle get workspaces request errors in the ui (diff) | |
download | ferdium-app-a2e4316879908c5bc2c38cef81eef9152476b6f6.tar.gz ferdium-app-a2e4316879908c5bc2c38cef81eef9152476b6f6.tar.zst ferdium-app-a2e4316879908c5bc2c38cef81eef9152476b6f6.zip |
show infobox when updating workspaces
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 89 |
1 files changed, 55 insertions, 34 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 2ccea1d55..3db38aff4 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -3,12 +3,13 @@ import PropTypes from 'prop-types'; | |||
3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; | 3 | import { observer, PropTypes as MobxPropTypes } from 'mobx-react'; |
4 | import { defineMessages, intlShape } from 'react-intl'; | 4 | import { defineMessages, intlShape } from 'react-intl'; |
5 | import injectSheet from 'react-jss'; | 5 | import injectSheet from 'react-jss'; |
6 | import { Infobox } from '@meetfranz/ui'; | ||
6 | 7 | ||
7 | import Loader from '../../../components/ui/Loader'; | 8 | import Loader from '../../../components/ui/Loader'; |
8 | import WorkspaceItem from './WorkspaceItem'; | 9 | import WorkspaceItem from './WorkspaceItem'; |
9 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 10 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
10 | import Request from '../../../stores/lib/Request'; | 11 | import Request from '../../../stores/lib/Request'; |
11 | import Infobox from '../../../components/ui/Infobox'; | 12 | import Appear from '../../../components/ui/effects/Appear'; |
12 | 13 | ||
13 | const messages = defineMessages({ | 14 | const messages = defineMessages({ |
14 | headline: { | 15 | headline: { |
@@ -27,6 +28,10 @@ const messages = defineMessages({ | |||
27 | id: 'settings.workspaces.tryReloadWorkspaces', | 28 | id: 'settings.workspaces.tryReloadWorkspaces', |
28 | defaultMessage: '!!!Try again', | 29 | defaultMessage: '!!!Try again', |
29 | }, | 30 | }, |
31 | updatedInfo: { | ||
32 | id: 'settings.workspaces.updatedInfo', | ||
33 | defaultMessage: '!!!Your changes have been saved', | ||
34 | }, | ||
30 | }); | 35 | }); |
31 | 36 | ||
32 | const styles = () => ({ | 37 | const styles = () => ({ |
@@ -34,6 +39,9 @@ const styles = () => ({ | |||
34 | height: 'auto', | 39 | height: 'auto', |
35 | marginBottom: '20px', | 40 | marginBottom: '20px', |
36 | }, | 41 | }, |
42 | appear: { | ||
43 | height: 'auto', | ||
44 | }, | ||
37 | }); | 45 | }); |
38 | 46 | ||
39 | @injectSheet(styles) @observer | 47 | @injectSheet(styles) @observer |
@@ -41,6 +49,7 @@ class WorkspacesDashboard extends Component { | |||
41 | static propTypes = { | 49 | static propTypes = { |
42 | classes: PropTypes.object.isRequired, | 50 | classes: PropTypes.object.isRequired, |
43 | getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, | 51 | getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, |
52 | updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired, | ||
44 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, | 53 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, |
45 | onWorkspaceClick: PropTypes.func.isRequired, | 54 | onWorkspaceClick: PropTypes.func.isRequired, |
46 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | 55 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, |
@@ -54,6 +63,7 @@ class WorkspacesDashboard extends Component { | |||
54 | const { | 63 | const { |
55 | classes, | 64 | classes, |
56 | getUserWorkspacesRequest, | 65 | getUserWorkspacesRequest, |
66 | updateWorkspaceRequest, | ||
57 | onCreateWorkspaceSubmit, | 67 | onCreateWorkspaceSubmit, |
58 | onWorkspaceClick, | 68 | onWorkspaceClick, |
59 | workspaces, | 69 | workspaces, |
@@ -65,40 +75,51 @@ class WorkspacesDashboard extends Component { | |||
65 | <h1>{intl.formatMessage(messages.headline)}</h1> | 75 | <h1>{intl.formatMessage(messages.headline)}</h1> |
66 | </div> | 76 | </div> |
67 | <div className="settings__body"> | 77 | <div className="settings__body"> |
68 | <div className={classes.body}> | 78 | {updateWorkspaceRequest.wasExecuted && updateWorkspaceRequest.result && ( |
69 | <div className={classes.createForm}> | 79 | <Appear className={classes.appear}> |
70 | <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} /> | 80 | <Infobox |
71 | </div> | 81 | type="success" |
72 | {getUserWorkspacesRequest.isExecuting ? ( | 82 | icon="checkbox-marked-circle-outline" |
73 | <Loader /> | 83 | dismissable |
74 | ) : ( | 84 | onDismiss={updateWorkspaceRequest.reset} |
75 | <Fragment> | 85 | onUnmount={updateWorkspaceRequest.reset} |
76 | {getUserWorkspacesRequest.error ? ( | 86 | > |
77 | <Infobox | 87 | {intl.formatMessage(messages.updatedInfo)} |
78 | icon="alert" | 88 | </Infobox> |
79 | type="danger" | 89 | </Appear> |
80 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | 90 | )} |
81 | ctaLoading={getUserWorkspacesRequest.isExecuting} | 91 | <div className={classes.createForm}> |
82 | ctaOnClick={getUserWorkspacesRequest.retry} | 92 | <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} /> |
83 | > | ||
84 | {intl.formatMessage(messages.workspacesRequestFailed)} | ||
85 | </Infobox> | ||
86 | ) : ( | ||
87 | <table className="workspace-table"> | ||
88 | <tbody> | ||
89 | {workspaces.map(workspace => ( | ||
90 | <WorkspaceItem | ||
91 | key={workspace.id} | ||
92 | workspace={workspace} | ||
93 | onItemClick={w => onWorkspaceClick(w)} | ||
94 | /> | ||
95 | ))} | ||
96 | </tbody> | ||
97 | </table> | ||
98 | )} | ||
99 | </Fragment> | ||
100 | )} | ||
101 | </div> | 93 | </div> |
94 | {getUserWorkspacesRequest.isExecuting ? ( | ||
95 | <Loader /> | ||
96 | ) : ( | ||
97 | <Fragment> | ||
98 | {getUserWorkspacesRequest.error ? ( | ||
99 | <Infobox | ||
100 | icon="alert" | ||
101 | type="danger" | ||
102 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} | ||
103 | ctaLoading={getUserWorkspacesRequest.isExecuting} | ||
104 | ctaOnClick={getUserWorkspacesRequest.retry} | ||
105 | > | ||
106 | {intl.formatMessage(messages.workspacesRequestFailed)} | ||
107 | </Infobox> | ||
108 | ) : ( | ||
109 | <table className="workspace-table"> | ||
110 | <tbody> | ||
111 | {workspaces.map(workspace => ( | ||
112 | <WorkspaceItem | ||
113 | key={workspace.id} | ||
114 | workspace={workspace} | ||
115 | onItemClick={w => onWorkspaceClick(w)} | ||
116 | /> | ||
117 | ))} | ||
118 | </tbody> | ||
119 | </table> | ||
120 | )} | ||
121 | </Fragment> | ||
122 | )} | ||
102 | </div> | 123 | </div> |
103 | </div> | 124 | </div> |
104 | ); | 125 | ); |