From cef6fe15c9bfc95ea1920d548dffac0fff81a67b Mon Sep 17 00:00:00 2001
From: edsheebran <damien.armillon@student-cs.fr>
Date: Mon, 18 Nov 2019 15:57:08 +0100
Subject: [PATCH] We can select the year
---
front/src/utils/yearSelector.js | 29 +++++++++
front/src/view/AllToucanPage/AllToucanPage.js | 65 ++++++++++++++-----
2 files changed, 76 insertions(+), 18 deletions(-)
create mode 100644 front/src/utils/yearSelector.js
diff --git a/front/src/utils/yearSelector.js b/front/src/utils/yearSelector.js
new file mode 100644
index 0000000..368117e
--- /dev/null
+++ b/front/src/utils/yearSelector.js
@@ -0,0 +1,29 @@
+import React from 'react'
+import {Dropdown} from 'semantic-ui-react'
+
+
+
+
+function SelectYear(props) {
+
+ const years = []
+
+ for (let year = props.beginYear; year >= 2018; year -= 1) {
+ years.push({
+ text: `${year.toString()}-${(year+1).toString()}`,
+ value: year,
+ key: year
+ });
+ }
+ return(
+ <Dropdown
+ selection
+ placeholder="value"
+ options = {years}
+ defaultValue = {props.beginYear}
+ onChange = {(_,dropdown) => props.updateFrame(dropdown.value)}
+ />
+ )
+}
+
+export default SelectYear;
\ No newline at end of file
diff --git a/front/src/view/AllToucanPage/AllToucanPage.js b/front/src/view/AllToucanPage/AllToucanPage.js
index b05614f..0fd0ba5 100644
--- a/front/src/view/AllToucanPage/AllToucanPage.js
+++ b/front/src/view/AllToucanPage/AllToucanPage.js
@@ -1,20 +1,24 @@
import React, {Component} from 'react'
import {Card, Segment} from 'semantic-ui-react'
+import SelectYear from '../../utils/yearSelector'
import ToucanCard from './ToucanCard'
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: [],
- }
- }
+ toucans: [],
+ before: (new Date(beginYear+1,7,31)).getTime(),
+ after: (new Date(beginYear,8,1)).getTime(),
+ }
+ }
- componentDidMount(){
- fetch(`${env.backURL}/toucan/toucans`)
+ updateToucan(){
+ fetch(`${env.backURL}/toucan/toucans?before=${this.state.before}&after=${this.state.after}`)
.then(result => {
return result.json()
})
@@ -22,21 +26,46 @@ class AllToucan extends Component {
this.setState({toucans})
})
.catch(err => console.log(err))
- }
+ }
+
+ 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())
+ }
+
+ componentDidMount(){
+ this.updateToucan()
+ }
render(){
return (
<Segment style={{textAlign:"center", margin:"3em",padding:"2em"}} >
- <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}
- date={(new Date(toucan.date).toLocaleDateString())}
- key={toucan._id}
- />
- })}
- </Card.Group>
+ <SelectYear
+ beginYear={beginYear}
+ updateFrame = {this.updateFrame.bind(this)}
+ />
+ {/* <Dropdown
+ selection
+ placeholder="value"
+ options = {years}
+ defaultValue = {beginYear}
+ onChange = {(_,props) => this.setState({
+ before : (new Date(props.value+1,7,31)).getTime(),
+ after : (new Date(props.value,8,1)).getTime()
+ }, () => this.updateToucan())}
+ /> */}
+ <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}
+ date={(new Date(toucan.date).toLocaleDateString())}
+ key={toucan._id}
+ />
+ })}
+ </Card.Group>
</Segment>
)}
}
--
GitLab