Refactor class to function

front/src/view/AllToucanPage/AllToucanPage.js

-import React, {Component} from 'react'
+import React, {useState, useEffect} from 'react'
 import {Card, Segment} from 'semantic-ui-react'
 import SelectYear from '../../utils/yearSelector'
 import ToucanCard from './ToucanCard'
@@ -7,54 +7,46 @@ import env from '../../.env'
 const date = new Date()
 const beginYear = 1900 + (date.getMonth() < 8 ? date.getYear()-1 : date.getYear());
 
-class AllToucan extends Component {
-    constructor(){
-        super();
-        this.state = {
-			toucans: [],
-			before: (new Date(beginYear+1,7,31)).getTime(),
-			after: (new  Date(beginYear,8,1)).getTime(),
-		}
-	}
+function AllToucan(props){
+	const [toucans,setToucans] = useState([]);
+	const [before,setBefore] = useState((new Date(beginYear+1,7,31)).getTime());
+	const [after, setAfter] = useState((new  Date(beginYear,8,1)).getTime());
 		
-    updateToucan(){
-        fetch(`${env.backURL}/toucan/toucans?before=${this.state.before}&after=${this.state.after}`)
+		useEffect(()=>{
+			fetch(`${env.backURL}/toucan/toucans?before=${before}&after=${after}`)
 			.then(result => {
 				return result.json()
 			})
 			.then(toucans => {
-            this.setState({toucans})
+				setToucans(toucans)
 				})
 		   .catch(err => console.log(err))
-	}
+		},[before,after]
+	)
 
-	updateFrame(value){
+	function updateFrame(value){
 		var before = (new Date(value+1,7,31)).getTime()
 		var after = (new Date(value,8,1)).getTime()
-
-		this.setState({before, after},()=> this.updateToucan())
+		setBefore(before)
+		setAfter(after)
 	}
 	
-	componentDidMount(){
-		this.updateToucan()
-	}
-    render(){
 	return (
 		<Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
 		
 		<SelectYear
 		style={{marginBottom:"2em"}}
 		beginYear={beginYear}
-					updateFrame = {this.updateFrame.bind(this)}
+		updateFrame = {updateFrame}
 		/>
 		<Card.Group centered >
-					{this.state.toucans.map( toucan => {
+		{toucans.map( toucan => {
 			return <ToucanCard
 			image={`${env.backURL}/toucan/img/${toucan["_id"]}`}
 			link={`${env.backURL}/toucan/pdf/${toucan["_id"]}.pdf`}
 			header={toucan.title}
 			toucanId={toucan._id}
-						isAdmin={this.props.isAdmin}
+			isAdmin={props.isAdmin}
 			date={(new Date(toucan.date).toLocaleDateString())}
 			key={toucan._id}
 			/>
@@ -62,6 +54,6 @@ class AllToucan extends Component {
 		</Card.Group>
 		</Segment>
 		)}
-}
+		
 
 export default AllToucan
\ No newline at end of file