BB-841: Converted Promises to async/await in component pages

src/client/components/pages/collection.js

@@ -140,28 +140,28 @@ class CollectionPage extends React.Component {
 		});
 	}
 
-	handleRemoveEntities() {
+	async handleRemoveEntities() {
 		if (this.state.selectedEntities.length) {
 			const bbids = this.state.selectedEntities;
 			const submissionUrl = `/collection/${this.props.collection.id}/remove`;
-			request.post(submissionUrl)
-				.send({bbids})
-				.then(() => {
-					this.setState({
-						message: {
-							text: `Removed ${bbids.length} ${_.kebabCase(this.props.collection.entityType)}${bbids.length > 1 ? 's' : ''}`,
-							type: 'success'
-						},
-						selectedEntities: []
-					}, this.pagerElementRef.triggerSearch);
-				}, () => {
-					this.setState({
-						message: {
-							text: 'Something went wrong! Please try again later',
-							type: 'danger'
-						}
-					});
+			try {
+				await request.post(submissionUrl).send({bbids});
+				this.setState({
+					message: {
+						text: `Removed ${bbids.length} ${_.kebabCase(this.props.collection.entityType)}${bbids.length > 1 ? 's' : ''}`,
+						type: 'success'
+					},
+					selectedEntities: []
+				}, this.pagerElementRef.triggerSearch);
+			}
+			catch (error) {
+				this.setState({
+					message: {
+						text: 'Something went wrong! Please try again later',
+						type: 'danger'
+					}
 				});
+			}
 		}
 		else {
 			this.setState({

src/client/components/pages/entities/wikipedia-extract.tsx

@@ -48,24 +48,30 @@ function WikipediaExtract({entity, articleExtract}: Props) {
 	const [state, setState] = useState(articleExtract);
 
 	useEffect(() => {
-		if (!state.extract) {
-			const wikidataId = getWikidataId(entity);
-			if (!wikidataId) {
-				return;
-			}
+		async function fetchWikipediaExtract() {
+			if (!state.extract) {
+				const wikidataId = getWikidataId(entity);
+				if (!wikidataId) {
+					return;
+				}
 
-			const aliasLanguages = getAliasLanguageCodes(entity);
-			const preferredLanguages = uniq(['en', ...aliasLanguages]);
+				const aliasLanguages = getAliasLanguageCodes(entity);
+				const preferredLanguages = uniq(['en', ...aliasLanguages]);
 
-			getWikipediaExtractForWikidata(wikidataId, preferredLanguages).then((result) => {
-				if (result.extract) {
-					setState(result);
+				try {
+					const result = await getWikipediaExtractForWikidata(wikidataId, preferredLanguages);
+					if (result.extract) {
+						setState(result);
+					}
+				}
+				catch (error) {
+					// eslint-disable-next-line no-console -- no other logger available for browser
+					console.warn('Failed to load Wikipedia extract:', error);
 				}
-			}).catch((error) => {
-				// eslint-disable-next-line no-console -- no other logger available for browser
-				console.warn('Failed to load Wikipedia extract:', error);
-			});
+			}
 		}
+
+		fetchWikipediaExtract();
 	}, [entity]);
 
 	const {extract, article} = state;

src/client/components/pages/parts/add-entity-to-collection-modal.js

@@ -86,31 +86,33 @@ class AddEntityToCollectionModal extends React.Component {
 		this.setState({error: null});
 	}
 
-	handleSubmit() {
-		const cleanedEntities = this.getCleanedEntities();
-		const bbids = cleanedEntities.map(entity => entity.id);
-		if (bbids.length) {
-			request.post(`/collection/${this.props.collectionId}/add`)
-				.send({bbids})
-				.then(() => {
-					this.setState({
-						entities: [],
-						error: null
-					}, () => {
-						this.props.closeModalAndShowMessage({
-							text: `Added ${bbids.length} ${lowerCase(this.props.collectionType)}${bbids.length > 1 ? 's' : ''}`,
-							type: 'success'
-						});
-					});
+	async handleSubmit() {
+		try {
+			const cleanedEntities = this.getCleanedEntities();
+			const bbids = cleanedEntities.map(entity => entity.id);
+
+			if (bbids.length) {
+				await request.post(`/collection/${this.props.collectionId}/add`).send({bbids});
+
+				this.setState({
+					entities: [],
+					error: null
 				}, () => {
-					this.setState({
-						error: 'Something went wrong! Please try again later'
+					this.props.closeModalAndShowMessage({
+						text: `Added ${bbids.length} ${lowerCase(this.props.collectionType)}${bbids.length > 1 ? 's' : ''}`,
+						type: 'success'
 					});
 				});
+			}
+			else {
+				this.setState({
+					error: `No ${lowerCase(this.props.collectionType)} selected`
+				});
+			}
 		}
-		else {
+		catch (error) {
 			this.setState({
-				error: `No ${lowerCase(this.props.collectionType)} selected`
+				error: 'Something went wrong! Please try again later'
 			});
 		}
 	}

src/client/components/pages/parts/add-to-collection-modal.js

@@ -125,7 +125,7 @@ class AddToCollectionModal extends React.Component {
 		this.setState({message: {}, showCollectionForm: false});
 	}
 
-	handleAddToNewCollection(evt) {
+	async handleAddToNewCollection(evt) {
 		evt.preventDefault();
 
 		if (!this.isValid()) {
@@ -150,26 +150,27 @@ class AddToCollectionModal extends React.Component {
 			privacy
 		};
 		const {bbids} = this.props;
-		request.post('/collection/create/handler')
-			.send(data)
-			.then((res) => {
-				request.post(`/collection/${res.body.id}/add`)
-					.send({bbids}).then(() => {
-						this.setState({selectedCollections: []}, () => {
-							this.props.closeModalAndShowMessage({
-								text: `Successfully added to your new collection: ${name}`,
-								type: 'success'
-							});
-						});
-					});
-			}, () => {
-				this.setState({
-					message: {
-						text: 'Something went wrong! Please try again later',
-						type: 'danger'
-					}
+		try {
+			const createResponse = await request.post('/collection/create/handler').send(data);
+			const collectionId = createResponse.body.id;
+
+			await request.post(`/collection/${collectionId}/add`).send({bbids});
+
+			this.setState({selectedCollections: []}, () => {
+				this.props.closeModalAndShowMessage({
+					text: `Successfully added to your new collection: ${name}`,
+					type: 'success'
 				});
 			});
+		}
+		catch (error) {
+			this.setState({
+				message: {
+					text: 'Something went wrong! Please try again later',
+					type: 'danger'
+				}
+			});
+		}
 	}
 
 	isValid() {

src/client/components/pages/parts/delete-or-remove-collaboration-modal.js

@@ -18,16 +18,16 @@ class DeleteOrRemoveCollaborationModal extends React.Component {
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleSubmit() {
-		request.post(this.postUrl)
-			.send(this.postData)
-			.then(() => {
-				window.location.href = `/editor/${this.props.userId}/collections`;
-			}, () => {
-				this.setState({
-					error: 'Something went wrong! Please try again later'
-				});
+	async handleSubmit() {
+		try {
+			await request.post(this.postUrl).send(this.postData);
+			window.location.href = `/editor/${this.props.userId}/collections`;
+		}
+		catch (error) {
+			this.setState({
+				error: 'Something went wrong! Please try again later'
 			});
+		}
 	}
 
 	render() {

src/client/components/pages/revision.js

@@ -163,21 +163,21 @@
 		this.handleSubmit = this.handleSubmit.bind(this);
 	}
 
-	handleSubmit(event) {
+	async handleSubmit(event) {
 		event.preventDefault();
 		const data = {
 			note: this.noteInput.value
 		};
-		request.post(`/revision/${this.props.revision.id}/note`)
-			.send(data)
-			.then(() => {
-				location.reload();
-			})
-			.catch((res) => {
-				// TODO: Add proper error handling.
-				const {error} = res.body;
-				return error;
-			});
+		try {
+			await request.post(`/revision/${this.props.revision.id}/note`).send(data);
+			location.reload();
+		}
+		catch (err) {
+			// TODO: Add proper error handling.
+			const error = err?.response?.body?.error || err?.message || err;
+			// eslint-disable-next-line no-console -- no other logger available for browser
+			console.warn('Failed to submit note: ', error);
+		}
 	}
 
 	render() {