54 lines
1.2 KiB
JavaScript
54 lines
1.2 KiB
JavaScript
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 = async (event) => {
|
|
event.preventDefault();
|
|
const url = event.target[0].value;
|
|
inputRef.current.blur();
|
|
|
|
setProgress('Submitting...');
|
|
|
|
let data = new FormData();
|
|
data.append('url', url);
|
|
|
|
try {
|
|
const res = await fetch('/api/submit', { method: 'POST', body: data });
|
|
|
|
if (res.ok) {
|
|
const result = await res.json();
|
|
history.replace('/' + result.nid);
|
|
} else {
|
|
let errorData;
|
|
try {
|
|
errorData = await res.json();
|
|
} catch (jsonError) {
|
|
// Not a JSON error from our API, so it's a server issue
|
|
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
|
}
|
|
setProgress(errorData.error || 'An unknown error occurred.');
|
|
}
|
|
} catch (error) {
|
|
setProgress(`Error: ${error.toString()}`);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<span className='search'>
|
|
<form onSubmit={submitArticle}>
|
|
<input
|
|
placeholder='Submit URL'
|
|
ref={inputRef}
|
|
/>
|
|
</form>
|
|
{progress && <p>{progress}</p>}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default Submit;
|