Commit 8b99653e authored by Damien Armillon's avatar Damien Armillon
Browse files

Refactor class to function

parent 409f049f
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment