From 8b99653e32833a9164b4084d75c284c3a3e3f529 Mon Sep 17 00:00:00 2001
From: edsheebran <damien.armillon@student-cs.fr>
Date: Tue, 19 Nov 2019 08:51:14 +0100
Subject: [PATCH] Refactor class to function
---
front/src/view/AllToucanPage/AllToucanPage.js | 96 +++++++++----------
1 file changed, 44 insertions(+), 52 deletions(-)
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index 3f3de7f..111ab5e 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,4 +1,4 @@
-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,61 +7,53 @@ 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(),
- }
- }
-
- updateToucan(){
- fetch(`${env.backURL}/toucan/toucans?before=${this.state.before}&after=${this.state.after}`)
- .then(result => {
- return result.json()
- })
- .then(toucans => {
- this.setState({toucans})
- })
- .catch(err => console.log(err))
- }
+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());
+
+ useEffect(()=>{
+ fetch(`${env.backURL}/toucan/toucans?before=${before}&after=${after}`)
+ .then(result => {
+ return result.json()
+ })
+ .then(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)}
- />
- <Card.Group centered >
- {this.state.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}
- date={(new Date(toucan.date).toLocaleDateString())}
- key={toucan._id}
- />
- })}
- </Card.Group>
- </Segment>
- )}
-}
+ return (
+ <Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
+
+ <SelectYear
+ style={{marginBottom:"2em"}}
+ beginYear={beginYear}
+ updateFrame = {updateFrame}
+ />
+ <Card.Group centered >
+ {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={props.isAdmin}
+ date={(new Date(toucan.date).toLocaleDateString())}
+ key={toucan._id}
+ />
+ })}
+ </Card.Group>
+ </Segment>
+ )}
+
export default AllToucan
\ No newline at end of file
--
GitLab