refactor: Refactor Submit component to use hooks

webclient/src/Submit.js

@@ -1,23 +1,17 @@
-import React, { Component } from 'react';
+import React, { useState, useRef } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 
-class Submit extends Component {
+function Submit() {
-	constructor(props) {
+	const [progress, setProgress] = useState(null);
-		super(props);
+	const inputRef = useRef(null);
+	const history = useHistory();
 
-		this.state = {
+	const submitArticle = (event) => {
-			progress: null,
-		};
-
-		this.inputRef = React.createRef();
-	}
-
-	submitArticle = (event) => {
 		event.preventDefault();
 		const url = event.target[0].value;
-		this.inputRef.current.blur();
+		inputRef.current.blur();
 
-		this.setState({ progress: 'Submitting...' });
+		setProgress('Submitting...');
 
 		let data = new FormData();
 		data.append('url', url);
@@ -26,29 +20,25 @@ class Submit extends Component {
 			.then(res => res.json())
 			.then(
 				(result) => {
-					this.props.history.replace('/' + result.nid);
+					history.replace('/' + result.nid);
 				},
 				(error) => {
-					this.setState({ progress: 'Error' });
+					setProgress('Error');
 				}
 			);
 	}
 
-	render() {
+	return (
-		const progress = this.state.progress;
+		<span className='search'>
-
+			<form onSubmit={submitArticle}>
-		return (
+				<input
-			<span className='search'>
+					placeholder='Submit URL'
-				<form onSubmit={this.submitArticle}>
+					ref={inputRef}
-					<input
+				/>
-						placeholder='Submit URL'
+			</form>
-						ref={this.inputRef}
+			{progress ? progress : ''}
-					/>
+		</span>
-				</form>
+	);
-				{progress ? progress : ''}
-			</span>
-		);
-	}
 }
 
-export default withRouter(Submit);
+export default Submit;