68 lines
2.3 KiB
JavaScript
68 lines
2.3 KiB
JavaScript
import React, { useState } from 'react';
|
|
import axios from 'axios';
|
|
import Loader from '../../Loader/Loader';
|
|
|
|
const ReadWorkbookForm = ({ setApiResponse }) => {
|
|
const [N, setN] = useState('');
|
|
const [url, setUrl] = useState();
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSubmit = () => {
|
|
setLoading(true);
|
|
event.preventDefault();
|
|
axios({
|
|
method: 'GET',
|
|
url: `/api/data?url=https://www.ers.usda.gov/webdocs/DataFiles/50048/Feed%20Grains%20Yearbook%20Tables-All%20Years.xls?v=42839&N=${N}`
|
|
}).then((response) => {
|
|
setApiResponse(response.data);
|
|
setLoading(false);
|
|
}).catch((error) => {
|
|
setApiResponse(error.response.data);
|
|
// alert(error);
|
|
setLoading(false);
|
|
})
|
|
}
|
|
|
|
return (
|
|
<div className="demoForm">
|
|
<h2>Demo</h2>
|
|
<p>
|
|
Sample url to use:
|
|
<div>
|
|
<a href="https://www.ers.usda.gov/webdocs/DataFiles/50048/Feed%20Grains%20Yearbook%20Tables-All%20Years.xls?v=42839">https://obamawhitehouse.archives.gov/sites/default/files/omb/budget/fy2014/assets/receipts.xls</a>
|
|
</div>
|
|
</p>
|
|
<form onSubmit={(e) => handleSubmit(e)}>
|
|
|
|
<div style={{ display: "flex", margin: 'auto', width: '100%' }}>
|
|
<div style={{ width: "33.3333%" }}>
|
|
<label for="N">N:</label>
|
|
<input name="N" type="text" onChange={((e) => setN(e.target.value))} placeholder="N" />
|
|
</div>
|
|
</div>
|
|
<p>request url:</p>
|
|
<p>
|
|
/api/data?url=
|
|
{url &&
|
|
<>
|
|
{url}
|
|
</>
|
|
}
|
|
{N &&
|
|
<>
|
|
&N={N}
|
|
</>
|
|
}
|
|
</p>
|
|
{loading ?
|
|
<Loader />
|
|
:
|
|
<button style={{ marginBottom: '20px' }} className="button1">Send Request</button>
|
|
}
|
|
</form>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default (ReadWorkbookForm);
|