diff options
author | 2019-03-26 14:47:06 +0100 | |
---|---|---|
committer | 2019-03-26 14:47:06 +0100 | |
commit | 39b4c0a15bd8b58eb41bfdee87b935700bf2875b (patch) | |
tree | 33b748e0513ed6dbb9a5940585fd0d7ffa712708 /src/features/workspaces/components/WorkspacesDashboard.js | |
parent | hide workspace feature if it is disabled (diff) | |
download | ferdium-app-39b4c0a15bd8b58eb41bfdee87b935700bf2875b.tar.gz ferdium-app-39b4c0a15bd8b58eb41bfdee87b935700bf2875b.tar.zst ferdium-app-39b4c0a15bd8b58eb41bfdee87b935700bf2875b.zip |
handle get workspaces request errors in the ui
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r-- | src/features/workspaces/components/WorkspacesDashboard.js | 61 |
1 files changed, 42 insertions, 19 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js index 17b3755d7..2ccea1d55 100644 --- a/src/features/workspaces/components/WorkspacesDashboard.js +++ b/src/features/workspaces/components/WorkspacesDashboard.js | |||
@@ -1,4 +1,4 @@ | |||
1 | import React, { Component } from 'react'; | 1 | import React, { Component, Fragment } from 'react'; |
2 | import PropTypes from 'prop-types'; | 2 | 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'; |
@@ -7,6 +7,8 @@ import injectSheet from 'react-jss'; | |||
7 | import Loader from '../../../components/ui/Loader'; | 7 | import Loader from '../../../components/ui/Loader'; |
8 | import WorkspaceItem from './WorkspaceItem'; | 8 | import WorkspaceItem from './WorkspaceItem'; |
9 | import CreateWorkspaceForm from './CreateWorkspaceForm'; | 9 | import CreateWorkspaceForm from './CreateWorkspaceForm'; |
10 | import Request from '../../../stores/lib/Request'; | ||
11 | import Infobox from '../../../components/ui/Infobox'; | ||
10 | 12 | ||
11 | const messages = defineMessages({ | 13 | const messages = defineMessages({ |
12 | headline: { | 14 | headline: { |
@@ -17,6 +19,14 @@ const messages = defineMessages({ | |||
17 | id: 'settings.workspaces.noWorkspacesAdded', | 19 | id: 'settings.workspaces.noWorkspacesAdded', |
18 | defaultMessage: '!!!You haven\'t added any workspaces yet.', | 20 | defaultMessage: '!!!You haven\'t added any workspaces yet.', |
19 | }, | 21 | }, |
22 | workspacesRequestFailed: { | ||
23 | id: 'settings.workspaces.workspacesRequestFailed', | ||
24 | defaultMessage: '!!!Could not load your workspaces', | ||
25 | }, | ||
26 | tryReloadWorkspaces: { | ||
27 | id: 'settings.workspaces.tryReloadWorkspaces', | ||
28 | defaultMessage: '!!!Try again', | ||
29 | }, | ||
20 | }); | 30 | }); |
21 | 31 | ||
22 | const styles = () => ({ | 32 | const styles = () => ({ |
@@ -26,11 +36,11 @@ const styles = () => ({ | |||
26 | }, | 36 | }, |
27 | }); | 37 | }); |
28 | 38 | ||
29 | @observer @injectSheet(styles) | 39 | @injectSheet(styles) @observer |
30 | class WorkspacesDashboard extends Component { | 40 | class WorkspacesDashboard extends Component { |
31 | static propTypes = { | 41 | static propTypes = { |
32 | classes: PropTypes.object.isRequired, | 42 | classes: PropTypes.object.isRequired, |
33 | isLoadingWorkspaces: PropTypes.bool.isRequired, | 43 | getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired, |
34 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, | 44 | onCreateWorkspaceSubmit: PropTypes.func.isRequired, |
35 | onWorkspaceClick: PropTypes.func.isRequired, | 45 | onWorkspaceClick: PropTypes.func.isRequired, |
36 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, | 46 | workspaces: MobxPropTypes.arrayOrObservableArray.isRequired, |
@@ -42,14 +52,13 @@ class WorkspacesDashboard extends Component { | |||
42 | 52 | ||
43 | render() { | 53 | render() { |
44 | const { | 54 | const { |
45 | workspaces, | 55 | classes, |
46 | isLoadingWorkspaces, | 56 | getUserWorkspacesRequest, |
47 | onCreateWorkspaceSubmit, | 57 | onCreateWorkspaceSubmit, |
48 | onWorkspaceClick, | 58 | onWorkspaceClick, |
49 | classes, | 59 | workspaces, |
50 | } = this.props; | 60 | } = this.props; |
51 | const { intl } = this.context; | 61 | const { intl } = this.context; |
52 | |||
53 | return ( | 62 | return ( |
54 | <div className="settings__main"> | 63 | <div className="settings__main"> |
55 | <div className="settings__header"> | 64 | <div className="settings__header"> |
@@ -60,20 +69,34 @@ class WorkspacesDashboard extends Component { | |||
60 | <div className={classes.createForm}> | 69 | <div className={classes.createForm}> |
61 | <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} /> | 70 | <CreateWorkspaceForm onSubmit={onCreateWorkspaceSubmit} /> |
62 | </div> | 71 | </div> |
63 | {isLoadingWorkspaces ? ( | 72 | {getUserWorkspacesRequest.isExecuting ? ( |
64 | <Loader /> | 73 | <Loader /> |
65 | ) : ( | 74 | ) : ( |
66 | <table className="workspace-table"> | 75 | <Fragment> |
67 | <tbody> | 76 | {getUserWorkspacesRequest.error ? ( |
68 | {workspaces.map(workspace => ( | 77 | <Infobox |
69 | <WorkspaceItem | 78 | icon="alert" |
70 | key={workspace.id} | 79 | type="danger" |
71 | workspace={workspace} | 80 | ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)} |
72 | onItemClick={w => onWorkspaceClick(w)} | 81 | ctaLoading={getUserWorkspacesRequest.isExecuting} |
73 | /> | 82 | ctaOnClick={getUserWorkspacesRequest.retry} |
74 | ))} | 83 | > |
75 | </tbody> | 84 | {intl.formatMessage(messages.workspacesRequestFailed)} |
76 | </table> | 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> | ||
77 | )} | 100 | )} |
78 | </div> | 101 | </div> |
79 | </div> | 102 | </div> |