import React, { useState, useRef } from 'react';
import { useHistory } from 'react-router-dom';

function Submit() {
	const [progress, setProgress] = useState(null);
	const inputRef = useRef(null);
	const history = useHistory();

	const submitArticle = (event) => {
		event.preventDefault();
		const url = event.target[0].value;
		inputRef.current.blur();

		setProgress('Submitting...');

		let data = new FormData();
		data.append('url', url);

		fetch('/api/submit', { method: 'POST', body: data })
			.then(res => res.json())
			.then(
				(result) => {
					history.replace('/' + result.nid);
				},
				(error) => {
					setProgress('Error');
				}
			);
	}

	return (
		<span className='search'>
			<form onSubmit={submitArticle}>
				<input
					placeholder='Submit URL'
					ref={inputRef}
				/>
			</form>
			{progress ? progress : ''}
		</span>
	);
}

export default Submit;