Skip to content

Commit 5773b6d

Browse files
willemarcelwillemarcel
committed
Refactor Project Edit actions in order to use only the useAsync state
1 parent b80fd63 commit 5773b6d

File tree

1 file changed

+97
-116
lines changed

1 file changed

+97
-116
lines changed

‎frontend/src/components/projectEdit/actionsForm.js

+97-116
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { FormattedMessage } from 'react-intl';
77

88
import messages from './messages';
99
import { Button } from '../button';
10+
import { Alert } from '../alert';
1011
import { DeleteModal } from '../deleteModal';
1112
import { styleClasses } from '../../views/projectEdit';
1213
import { fetchLocalJSONAPI, pushToLocalJSONAPI } from '../../network/genericJSONRequest';
@@ -16,11 +17,11 @@ import FileRejections from '../comments/fileRejections';
1617
import DropzoneUploadStatus from '../comments/uploadStatus';
1718
import { DROPZONE_SETTINGS } from '../../config';
1819

19-
const checkError = (error, modal) => {
20+
const ActionStatus = ({ status, action }) => {
2021
let successMessage = '';
2122
let errorMessage = '';
2223

23-
switch (modal) {
24+
switch (action) {
2425
case 'MESSAGE_CONTRIBUTORS':
2526
successMessage = 'messageContributorsSuccess';
2627
errorMessage = 'messageContributorsError';
@@ -56,35 +57,27 @@ const checkError = (error, modal) => {
5657
default:
5758
return null;
5859
}
59-
if (error === null) {
60-
return null;
61-
}
6260

63-
if (error === false) {
64-
return (
65-
<p className="pv2 white tc bg-dark-green">
66-
{<FormattedMessage {...messages[successMessage]} />}
67-
</p>
68-
);
69-
} else {
70-
return (
71-
<p className="pv2 white tc bg-light-red">
72-
{<FormattedMessage {...messages[errorMessage]} />}
73-
</p>
74-
);
75-
}
61+
return (
62+
<>
63+
{status === 'success' && (
64+
<Alert type="success">
65+
<FormattedMessage {...messages[successMessage]} />
66+
</Alert>
67+
)}
68+
{status === 'error' && (
69+
<Alert type="error">{<FormattedMessage {...messages[errorMessage]} />}</Alert>
70+
)}
71+
</>
72+
);
7673
};
7774

7875
const ResetTasksModal = ({ projectId, close }: Object) => {
7976
const token = useSelector((state) => state.auth.get('token'));
80-
const [error, setError] = useState(null);
8177

8278
const resetTasks = () => {
83-
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/reset-all/`, token, 'POST')
84-
.then((res) => setError(false))
85-
.catch((e) => setError(true));
79+
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/reset-all/`, token, 'POST');
8680
};
87-
8881
const resetTasksAsync = useAsync(resetTasks);
8982

9083
return (
@@ -97,7 +90,7 @@ const ResetTasksModal = ({ projectId, close }: Object) => {
9790
<FormattedMessage {...messages.taskResetConfirmation} />
9891
</p>
9992

100-
{checkError(error, 'RESET_ALL')}
93+
<ActionStatus status={resetTasksAsync.status} action="RESET_ALL" />
10194
<p className="tr">
10295
<Button className={styleClasses.whiteButtonClass} onClick={close}>
10396
<FormattedMessage {...messages.cancel} />
@@ -117,16 +110,13 @@ const ResetTasksModal = ({ projectId, close }: Object) => {
117110

118111
const ResetBadImageryModal = ({ projectId, close }: Object) => {
119112
const token = useSelector((state) => state.auth.get('token'));
120-
const [error, setError] = useState(null);
121113

122114
const resetBadImagery = () => {
123115
return fetchLocalJSONAPI(
124116
`projects/${projectId}/tasks/actions/reset-all-badimagery/`,
125117
token,
126118
'POST',
127-
)
128-
.then((res) => setError(false))
129-
.catch((e) => setError(true));
119+
);
130120
};
131121

132122
const resetBadImageryAsync = useAsync(resetBadImagery);
@@ -144,30 +134,29 @@ const ResetBadImageryModal = ({ projectId, close }: Object) => {
144134
<FormattedMessage {...messages.resetBadImageryDescription} />
145135
</p>
146136

147-
{checkError(error, 'RESET_BAD_IMAGERY')}
148-
<Button className={styleClasses.whiteButtonClass} onClick={close}>
149-
<FormattedMessage {...messages.cancel} />
150-
</Button>
151-
<Button
152-
className={styleClasses.redButtonClass}
153-
onClick={() => resetBadImageryAsync.execute()}
154-
loading={resetBadImageryAsync.status === 'pending'}
155-
disabled={resetBadImageryAsync.status === 'pending'}
156-
>
157-
<FormattedMessage {...messages.resetBadImageryButton} />
158-
</Button>
137+
<ActionStatus status={resetBadImageryAsync.status} action="RESET_BAD_IMAGERY" />
138+
<p>
139+
<Button className={styleClasses.whiteButtonClass} onClick={close}>
140+
<FormattedMessage {...messages.cancel} />
141+
</Button>
142+
<Button
143+
className={styleClasses.redButtonClass}
144+
onClick={() => resetBadImageryAsync.execute()}
145+
loading={resetBadImageryAsync.status === 'pending'}
146+
disabled={resetBadImageryAsync.status === 'pending'}
147+
>
148+
<FormattedMessage {...messages.resetBadImageryButton} />
149+
</Button>
150+
</p>
159151
</div>
160152
);
161153
};
162154

163155
const ValidateAllTasksModal = ({ projectId, close }: Object) => {
164156
const token = useSelector((state) => state.auth.get('token'));
165-
const [error, setError] = useState(null);
166157

167158
const validateAllTasks = () => {
168-
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/validate-all/`, token, 'POST')
169-
.then((res) => setError(false))
170-
.catch((e) => setError(true));
159+
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/validate-all/`, token, 'POST');
171160
};
172161

173162
const validateAllTasksAsync = useAsync(validateAllTasks);
@@ -185,30 +174,29 @@ const ValidateAllTasksModal = ({ projectId, close }: Object) => {
185174
<FormattedMessage {...messages.validateAllTasksDescription} />
186175
</p>
187176

188-
{checkError(error, 'VALIDATE_ALL_TASKS')}
189-
<Button className={styleClasses.whiteButtonClass} onClick={close}>
190-
<FormattedMessage {...messages.cancel} />
191-
</Button>
192-
<Button
193-
className={styleClasses.redButtonClass}
194-
onClick={() => validateAllTasksAsync.execute()}
195-
loading={validateAllTasksAsync.status === 'pending'}
196-
disabled={validateAllTasksAsync.status === 'pending'}
197-
>
198-
<FormattedMessage {...messages.validateAllTasks} />
199-
</Button>
177+
<ActionStatus status={validateAllTasksAsync.status} action="VALIDATE_ALL_TASKS" />
178+
<p>
179+
<Button className={styleClasses.whiteButtonClass} onClick={close}>
180+
<FormattedMessage {...messages.cancel} />
181+
</Button>
182+
<Button
183+
className={styleClasses.redButtonClass}
184+
onClick={() => validateAllTasksAsync.execute()}
185+
loading={validateAllTasksAsync.status === 'pending'}
186+
disabled={validateAllTasksAsync.status === 'pending'}
187+
>
188+
<FormattedMessage {...messages.validateAllTasks} />
189+
</Button>
190+
</p>
200191
</div>
201192
);
202193
};
203194

204195
const InvalidateAllTasksModal = ({ projectId, close }: Object) => {
205196
const token = useSelector((state) => state.auth.get('token'));
206-
const [error, setError] = useState(null);
207197

208198
const invalidateAllTasks = () => {
209-
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/invalidate-all/`, token, 'POST')
210-
.then((res) => setError(false))
211-
.catch((e) => setError(true));
199+
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/invalidate-all/`, token, 'POST');
212200
};
213201

214202
const invalidateAllTasksAsync = useAsync(invalidateAllTasks);
@@ -226,32 +214,30 @@ const InvalidateAllTasksModal = ({ projectId, close }: Object) => {
226214
<FormattedMessage {...messages.invalidateAllDescription} />
227215
</p>
228216

229-
{checkError(error, 'INVALIDATE_ALL_TASKS')}
230-
<Button className={styleClasses.whiteButtonClass} onClick={close}>
231-
<FormattedMessage {...messages.cancel} />
232-
</Button>
233-
<Button
234-
className={styleClasses.redButtonClass}
235-
onClick={() => invalidateAllTasksAsync.execute()}
236-
loading={invalidateAllTasksAsync.status === 'pending'}
237-
disabled={invalidateAllTasksAsync.status === 'pending'}
238-
>
239-
<FormattedMessage {...messages.invalidateAll} />
240-
</Button>
217+
<ActionStatus status={invalidateAllTasksAsync.status} action="INVALIDATE_ALL_TASKS" />
218+
<p>
219+
<Button className={styleClasses.whiteButtonClass} onClick={close}>
220+
<FormattedMessage {...messages.cancel} />
221+
</Button>
222+
<Button
223+
className={styleClasses.redButtonClass}
224+
onClick={() => invalidateAllTasksAsync.execute()}
225+
loading={invalidateAllTasksAsync.status === 'pending'}
226+
disabled={invalidateAllTasksAsync.status === 'pending'}
227+
>
228+
<FormattedMessage {...messages.invalidateAll} />
229+
</Button>
230+
</p>
241231
</div>
242232
);
243233
};
244234

245235
const MapAllTasksModal = ({ projectId, close }: Object) => {
246236
const token = useSelector((state) => state.auth.get('token'));
247-
const [error, setError] = useState(null);
248237

249238
const mapAllTasks = () => {
250-
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/map-all/`, token, 'POST')
251-
.then((res) => setError(false))
252-
.catch((e) => setError(true));
239+
return fetchLocalJSONAPI(`projects/${projectId}/tasks/actions/map-all/`, token, 'POST');
253240
};
254-
255241
const mapAllTasksAsync = useAsync(mapAllTasks);
256242

257243
return (
@@ -265,18 +251,20 @@ const MapAllTasksModal = ({ projectId, close }: Object) => {
265251
<p className={`${styleClasses.pClass} pb2`}>
266252
<FormattedMessage {...messages.mapAllDescription} />
267253
</p>
268-
{checkError(error, 'MAP_ALL_TASKS')}
269-
<Button className={styleClasses.whiteButtonClass} onClick={close}>
270-
<FormattedMessage {...messages.cancel} />
271-
</Button>
272-
<Button
273-
className={styleClasses.redButtonClass}
274-
onClick={() => mapAllTasksAsync.execute()}
275-
loading={mapAllTasksAsync.status === 'pending'}
276-
disabled={mapAllTasksAsync.status === 'pending'}
277-
>
278-
<FormattedMessage {...messages.mapAll} />
279-
</Button>
254+
<ActionStatus status={mapAllTasksAsync.status} action="MAP_ALL_TASKS" />
255+
<p>
256+
<Button className={styleClasses.whiteButtonClass} onClick={close}>
257+
<FormattedMessage {...messages.cancel} />
258+
</Button>
259+
<Button
260+
className={styleClasses.redButtonClass}
261+
onClick={() => mapAllTasksAsync.execute()}
262+
loading={mapAllTasksAsync.status === 'pending'}
263+
disabled={mapAllTasksAsync.status === 'pending'}
264+
>
265+
<FormattedMessage {...messages.mapAll} />
266+
</Button>
267+
</p>
280268
</div>
281269
);
282270
};
@@ -291,17 +279,14 @@ const MessageContributorsModal = ({ projectId, close }: Object) => {
291279
onDrop,
292280
...DROPZONE_SETTINGS,
293281
});
294-
const [error, setError] = useState(null);
295282

296283
const messageAllContributors = () => {
297284
return pushToLocalJSONAPI(
298285
`projects/${projectId}/actions/message-contributors/`,
299286
JSON.stringify(data),
300287
token,
301288
'POST',
302-
)
303-
.then((res) => setError(false))
304-
.catch((e) => setError(true));
289+
);
305290
};
306291

307292
const messageAllContributorsAsync = useAsync(messageAllContributors);
@@ -356,25 +341,27 @@ const MessageContributorsModal = ({ projectId, close }: Object) => {
356341
<p className={styleClasses.pClass}>
357342
<FormattedMessage {...messages.messageContributorsTranslationAlert} />
358343
</p>
359-
{checkError(error, 'MESSAGE_CONTRIBUTORS')}
360-
<Button className={styleClasses.whiteButtonClass} onClick={close}>
361-
<FormattedMessage {...messages.cancel} />
362-
</Button>
363-
<Button
364-
className={styleClasses.redButtonClass}
365-
onClick={() => messageAllContributorsAsync.execute()}
366-
loading={messageAllContributorsAsync.status === 'pending'}
367-
disabled={messageAllContributorsAsync.status === 'pending'}
368-
>
369-
<FormattedMessage {...messages.messageContributors} />
370-
</Button>
344+
345+
<ActionStatus status={messageAllContributorsAsync.status} action="MAP_ALL_TASKS" />
346+
<p>
347+
<Button className={styleClasses.whiteButtonClass} onClick={close}>
348+
<FormattedMessage {...messages.cancel} />
349+
</Button>
350+
<Button
351+
className={styleClasses.redButtonClass}
352+
onClick={() => messageAllContributorsAsync.execute()}
353+
loading={messageAllContributorsAsync.status === 'pending'}
354+
disabled={messageAllContributorsAsync.status === 'pending'}
355+
>
356+
<FormattedMessage {...messages.messageContributors} />
357+
</Button>
358+
</p>
371359
</div>
372360
);
373361
};
374362

375363
const TransferProject = ({ projectId }: Object) => {
376364
const token = useSelector((state) => state.auth.get('token'));
377-
const [error, setError] = useState(null);
378365
const [username, setUsername] = useState('');
379366
const [users, setUsers] = useState([]);
380367
const handleUsers = (e) => {
@@ -395,18 +382,10 @@ const TransferProject = ({ projectId }: Object) => {
395382
JSON.stringify({ username: username }),
396383
token,
397384
'POST',
398-
)
399-
.then((res) => setError(false))
400-
.catch((e) => setError(true));
385+
);
401386
};
402-
403387
const transferOwnershipAsync = useAsync(transferOwnership);
404388

405-
// Redirect on success.
406-
if (error === false) {
407-
setTimeout(() => (window.location.href = '/explore'), 3000);
408-
}
409-
410389
return (
411390
<div>
412391
<Popup
@@ -448,7 +427,9 @@ const TransferProject = ({ projectId }: Object) => {
448427
>
449428
<FormattedMessage {...messages.transferProject} />
450429
</Button>
451-
{checkError(error, 'TRANSFER_PROJECT')}
430+
<div className="pt1">
431+
<ActionStatus status={transferOwnershipAsync.status} action="TRANSFER_PROJECT" />
432+
</div>
452433
</div>
453434
);
454435
};

0 commit comments

Comments
 (0)