53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import React, {useState, useEffect} from "react"
|
|
import Card from "../Card"
|
|
import useAxiosTools from "../../hooks/AxiosTools"
|
|
import {AxiosError} from "axios"
|
|
import {monthlyRainfall} from "../../types"
|
|
|
|
const YearRainfall = () => {
|
|
|
|
const {errorCatch, errorLabel, setError, axiosGet} = useAxiosTools()
|
|
const [data, setData] = useState<monthlyRainfall[]>([])
|
|
const months = Array(13)
|
|
.reduce((result, item, index) => {
|
|
const date = new Date()
|
|
console.log(item, index, date)
|
|
return item
|
|
}, [])
|
|
console.log(months)
|
|
|
|
useEffect(() => {
|
|
fetchData()
|
|
}, [])
|
|
|
|
const fetchData = async () => {
|
|
try {
|
|
const res = await axiosGet('/api/rainfalls/last-months')
|
|
setData(res.data)
|
|
} catch (e) {
|
|
if (e instanceof AxiosError) {
|
|
setError(e.message)
|
|
} else {
|
|
errorCatch(e)
|
|
}
|
|
}
|
|
}
|
|
|
|
return <div>
|
|
<Card className="w-full min-w-[300px] self-start overflow-hidden md:w-auto">
|
|
<h1 className="-mx-2 -mt-1 bg-blue-500 px-2 py-1 text-center text-lg font-bold text-white">Précipitations des derniers mois</h1>
|
|
{errorLabel()}
|
|
<table className="w-full text-center">
|
|
<tbody>
|
|
{data.map(line => <tr key={line.year + '-' + line.month} className="">
|
|
<td>{line.label}</td>
|
|
<td className="px-2 text-right">{line.values}</td>
|
|
</tr>)}
|
|
</tbody>
|
|
</table>
|
|
</Card>
|
|
</div>
|
|
}
|
|
|
|
export default YearRainfall
|