Tanner
60 lines
1.4 KiB
JavaScript
60 lines
1.4 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 = (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 => {
|
|
if (res.ok) {
|
|
return res.json().then(data => ({ ok: true, data: data }));
|
|
}
|
|
// Handle error responses
|
|
return res.json()
|
|
.then(data => ({ ok: false, data: data })) // Our API's JSON error
|
|
.catch(() => {
|
|
// Not a JSON error from our API, so it's a server issue
|
|
throw new Error(`Server responded with ${res.status} ${res.statusText}`);
|
|
});
|
|
})
|
|
.then(
|
|
({ ok, data }) => {
|
|
if (ok) {
|
|
history.replace('/' + data.nid);
|
|
} else {
|
|
setProgress(data.error || 'An unknown error occurred.');
|
|
}
|
|
},
|
|
(error) => {
|
|
setProgress(`Error: ${error.toString()}`);
|
|
}
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className='search'>
|
|
<form onSubmit={submitArticle}>
|
|
<input
|
|
placeholder='Submit URL'
|
|
ref={inputRef}
|
|
/>
|
|
</form>
|
|
{progress ? progress : ''}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default Submit;
|