aboutsummaryrefslogtreecommitdiffstats
path: root/src/features/workspaces/components/WorkspacesDashboard.js
diff options
context:
space:
mode:
authorLibravatar muhamedsalih-tw <104364298+muhamedsalih-tw@users.noreply.github.com>2022-11-17 05:45:39 +0530
committerLibravatar GitHub <noreply@github.com>2022-11-17 00:15:39 +0000
commitd9502c7516bc2d4ae467c6ea8a2e4816b0885f37 (patch)
treeb339c587a5529ac26d52cfc12d9972a8a00255e6 /src/features/workspaces/components/WorkspacesDashboard.js
parentTransform JSX components to TSX (#755) (diff)
downloadferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.gz
ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.tar.zst
ferdium-app-d9502c7516bc2d4ae467c6ea8a2e4816b0885f37.zip
Transfrom workspace components to ts (#775)
Diffstat (limited to 'src/features/workspaces/components/WorkspacesDashboard.js')
-rw-r--r--src/features/workspaces/components/WorkspacesDashboard.js201
1 files changed, 0 insertions, 201 deletions
diff --git a/src/features/workspaces/components/WorkspacesDashboard.js b/src/features/workspaces/components/WorkspacesDashboard.js
deleted file mode 100644
index 87ba06a2d..000000000
--- a/src/features/workspaces/components/WorkspacesDashboard.js
+++ /dev/null
@@ -1,201 +0,0 @@
1/* eslint-disable react/jsx-no-useless-fragment */
2import { Component } from 'react';
3import PropTypes from 'prop-types';
4import { observer, PropTypes as MobxPropTypes, inject } from 'mobx-react';
5import { defineMessages, injectIntl } from 'react-intl';
6import injectSheet from 'react-jss';
7
8import Infobox from '../../../components/ui/infobox/index';
9import Loader from '../../../components/ui/Loader';
10import WorkspaceItem from './WorkspaceItem';
11import CreateWorkspaceForm from './CreateWorkspaceForm';
12import Request from '../../../stores/lib/Request';
13import Appear from '../../../components/ui/effects/Appear';
14import UIStore from '../../../stores/UIStore';
15import { H1 } from '../../../components/ui/headline';
16
17const messages = defineMessages({
18 headline: {
19 id: 'settings.workspaces.headline',
20 defaultMessage: 'Your workspaces',
21 },
22 noServicesAdded: {
23 id: 'settings.workspaces.noWorkspacesAdded',
24 defaultMessage: "You haven't created any workspaces yet.",
25 },
26 workspacesRequestFailed: {
27 id: 'settings.workspaces.workspacesRequestFailed',
28 defaultMessage: 'Could not load your workspaces',
29 },
30 tryReloadWorkspaces: {
31 id: 'settings.workspaces.tryReloadWorkspaces',
32 defaultMessage: 'Try again',
33 },
34 updatedInfo: {
35 id: 'settings.workspaces.updatedInfo',
36 defaultMessage: 'Your changes have been saved',
37 },
38 deletedInfo: {
39 id: 'settings.workspaces.deletedInfo',
40 defaultMessage: 'Workspace has been deleted',
41 },
42 workspaceFeatureInfo: {
43 id: 'settings.workspaces.workspaceFeatureInfo',
44 defaultMessage:
45 'Ferdium Workspaces let you focus on what’s important right now. Set up different sets of services and easily switch between them at any time. You decide which services you need when and where, so we can help you stay on top of your game - or easily switch off from work whenever you want.',
46 },
47 workspaceFeatureHeadline: {
48 id: 'settings.workspaces.workspaceFeatureHeadline',
49 defaultMessage: 'Less is More: Introducing Ferdium Workspaces',
50 },
51});
52
53const styles = {
54 table: {
55 width: '100%',
56 '& td': {
57 padding: '10px',
58 },
59 },
60 createForm: {
61 height: 'auto',
62 },
63 appear: {
64 height: 'auto',
65 },
66 teaserImage: {
67 width: 250,
68 margin: [-8, 0, 0, 20],
69 alignSelf: 'center',
70 },
71};
72
73class WorkspacesDashboard extends Component {
74 static propTypes = {
75 classes: PropTypes.object.isRequired,
76 getUserWorkspacesRequest: PropTypes.instanceOf(Request).isRequired,
77 createWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
78 deleteWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
79 updateWorkspaceRequest: PropTypes.instanceOf(Request).isRequired,
80 onCreateWorkspaceSubmit: PropTypes.func.isRequired,
81 onWorkspaceClick: PropTypes.func.isRequired,
82 workspaces: MobxPropTypes.arrayOrObservableArray.isRequired,
83 };
84
85 render() {
86 const {
87 classes,
88 getUserWorkspacesRequest,
89 createWorkspaceRequest,
90 deleteWorkspaceRequest,
91 updateWorkspaceRequest,
92 onCreateWorkspaceSubmit,
93 onWorkspaceClick,
94 workspaces,
95 } = this.props;
96
97 const { intl } = this.props;
98
99 return (
100 <div className="settings__main">
101 <div className="settings__header">
102 <H1>{intl.formatMessage(messages.headline)}</H1>
103 </div>
104 <div className="settings__body">
105 {/* ===== Workspace updated info ===== */}
106 {updateWorkspaceRequest.wasExecuted && updateWorkspaceRequest.result && (
107 <Appear className={classes.appear}>
108 <Infobox
109 type="success"
110 icon="checkbox-marked-circle-outline"
111 dismissable
112 onUnmount={updateWorkspaceRequest.reset}
113 >
114 {intl.formatMessage(messages.updatedInfo)}
115 </Infobox>
116 </Appear>
117 )}
118
119 {/* ===== Workspace deleted info ===== */}
120 {deleteWorkspaceRequest.wasExecuted && deleteWorkspaceRequest.result && (
121 <Appear className={classes.appear}>
122 <Infobox
123 type="success"
124 icon="checkbox-marked-circle-outline"
125 dismissable
126 onUnmount={deleteWorkspaceRequest.reset}
127 >
128 {intl.formatMessage(messages.deletedInfo)}
129 </Infobox>
130 </Appear>
131 )}
132
133 {/* ===== Create workspace form ===== */}
134 <div className={classes.createForm}>
135 <CreateWorkspaceForm
136 isSubmitting={createWorkspaceRequest.isExecuting}
137 onSubmit={onCreateWorkspaceSubmit}
138 />
139 </div>
140 {getUserWorkspacesRequest.isExecuting ? (
141 <Loader />
142 ) : (
143 <>
144 {/* ===== Workspace could not be loaded error ===== */}
145 {getUserWorkspacesRequest.error ? (
146 <Infobox
147 icon="alert"
148 type="danger"
149 ctaLabel={intl.formatMessage(messages.tryReloadWorkspaces)}
150 ctaLoading={getUserWorkspacesRequest.isExecuting}
151 ctaOnClick={getUserWorkspacesRequest.retry}
152 >
153 {intl.formatMessage(messages.workspacesRequestFailed)}
154 </Infobox>
155 ) : (
156 <>
157 {workspaces.length === 0 ? (
158 <div className="align-middle settings__empty-state">
159 {/* ===== Workspaces empty state ===== */}
160 <p className="settings__empty-text">
161 <span className="emoji">
162 <img src="./assets/images/emoji/sad.png" alt="" />
163 </span>
164 {intl.formatMessage(messages.noServicesAdded)}
165 </p>
166 </div>
167 ) : (
168 <table className={classes.table}>
169 {/* ===== Workspaces list ===== */}
170 <tbody>
171 {workspaces.map(workspace => (
172 <WorkspaceItem
173 key={workspace.id}
174 workspace={workspace}
175 onItemClick={w => onWorkspaceClick(w)}
176 />
177 ))}
178 </tbody>
179 </table>
180 )}
181 </>
182 )}
183 </>
184 )}
185 </div>
186 </div>
187 );
188 }
189}
190
191export default injectIntl(
192 inject('stores')(
193 injectSheet(styles, { injectTheme: true })(observer(WorkspacesDashboard)),
194 ),
195);
196
197WorkspacesDashboard.propTypes = {
198 stores: PropTypes.shape({
199 ui: PropTypes.instanceOf(UIStore).isRequired,
200 }).isRequired,
201};