From 9f29edb00efa75368295ab649d467ac072f9610f Mon Sep 17 00:00:00 2001 From: dbroqua Date: Sun, 18 Nov 2018 19:53:29 +0100 Subject: [PATCH] Updated structure and added Vegetables page --- src/{components => Components}/Api.js | 0 src/{components => Components}/App.js | 9 +- src/{components => Components}/Header.js | 0 src/Components/Map.js | 120 +++++++++++++ src/Components/Vegetables.js | 56 ++++++ src/{components => Routes}/Home.js | 2 +- src/Routes/Map.js | 108 ++++++++++++ src/Routes/Vegetables.js | 78 +++++++++ src/components/Map.js | 206 ----------------------- src/components/Vegetables.js | 11 -- src/css/Vegetables.css | 3 + src/index.js | 2 +- 12 files changed, 371 insertions(+), 224 deletions(-) rename src/{components => Components}/Api.js (100%) rename src/{components => Components}/App.js (82%) rename src/{components => Components}/Header.js (100%) create mode 100644 src/Components/Map.js create mode 100644 src/Components/Vegetables.js rename src/{components => Routes}/Home.js (98%) create mode 100644 src/Routes/Map.js create mode 100644 src/Routes/Vegetables.js delete mode 100644 src/components/Map.js delete mode 100644 src/components/Vegetables.js create mode 100644 src/css/Vegetables.css diff --git a/src/components/Api.js b/src/Components/Api.js similarity index 100% rename from src/components/Api.js rename to src/Components/Api.js diff --git a/src/components/App.js b/src/Components/App.js similarity index 82% rename from src/components/App.js rename to src/Components/App.js index 86d1817..ec40e81 100644 --- a/src/components/App.js +++ b/src/Components/App.js @@ -4,9 +4,9 @@ import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom'; -import Map from './Map'; -import Home from './Home'; -import Vegetables from './Vegetables'; +import Map from '../Routes/Map'; +import Home from '../Routes/Home'; +import Vegetables from '../Routes/Vegetables'; class App extends Component { constructor(props) { @@ -43,8 +43,7 @@ class App extends Component { - - + diff --git a/src/components/Header.js b/src/Components/Header.js similarity index 100% rename from src/components/Header.js rename to src/Components/Header.js diff --git a/src/Components/Map.js b/src/Components/Map.js new file mode 100644 index 0000000..3681600 --- /dev/null +++ b/src/Components/Map.js @@ -0,0 +1,120 @@ +import React from 'react'; +import { + Row, + Col, + Tooltip +} from 'reactstrap'; +import { + FaMapMarkerAlt +} from 'react-icons/fa'; +import { + Link +} from 'react-router-dom'; +import strToSlug from '../StrToSlug' + +import '../css/Map.css' + +const MapDimensions = { + width: 734, + height: 530, +}; + +export default class Map extends React.Component { + constructor(props) { + super(props); + + this.state = { + selectedType: this.props.selectedType, + selectedVegetable: this.props.selectedVegetable, + Map: { + width: '20px', + height: '20px', + }, + tooltipOpen: false + } + + this.selectVegetable = this.selectVegetable.bind(this); + this.setMap = this.setMap.bind(this); + this.toggle = this.toggle.bind(this); + } + + componentWillReceiveProps(newProps) { + this.setState(prevState => ({ + ...prevState, + selectedType: newProps.selectedType, + selectedVegetable: newProps.selectedVegetable + })); + } + + componentDidMount() { + window.addEventListener('resize', this.setMap); + this.setMap(); + } + + componentWillUnmount() { + window.removeEventListener('resize', this.setMap); + } + + setMap() { + const width = document.getElementById('MapContainer').clientWidth; + let MapWidth = MapDimensions.width; + let MapHeight = MapDimensions.height; + + if (width < MapDimensions.width) { + MapWidth = width; + MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width); + } + + this.setState({ + Map: { + width: MapWidth, + height: MapHeight, + }, + }); + } + + selectVegetable(vegetable) { + this.setState({ + selectedVegetable: vegetable + }) + this.props.selectVegetable(vegetable) + } + + toggle(id) { + this.setState(prevState => ({ + tooltipOpen: prevState.tooltipOpen === id ? false : id + })); + } + + render() { + return ( + + +
+
+ { + this.state.selectedType && + this.state.selectedType.Vegetables && + this.state.selectedType.Vegetables.map((vegetable, key) => + ( + this.selectVegetable(vegetable)} + > + this.toggle(vegetable.id)}> + {vegetable.name} + + + + ) + ) + } +
+
+ +
+ ); + } +} \ No newline at end of file diff --git a/src/Components/Vegetables.js b/src/Components/Vegetables.js new file mode 100644 index 0000000..a4e5c16 --- /dev/null +++ b/src/Components/Vegetables.js @@ -0,0 +1,56 @@ +import React from 'react'; +import { + ListGroup, + ListGroupItem +} from 'reactstrap'; +import { + Link +} from 'react-router-dom'; +import strToSlug from '../StrToSlug' + +import '../css/Vegetables.css' + +export default class Map extends React.Component { + constructor(props) { + super(props); + + this.state = { + selectedType: this.props.selectedType, + selectedVegetable: this.props.selectVegetable + } + } + + componentWillReceiveProps(newProps) { + this.setState(newProps); + } + + render() { + return ( + +
+
+ + { + this.state.selectedType && + this.state.selectedType.Vegetables && + this.state.selectedType.Vegetables.map((vegetable, key) => + ( + this.props.selectVegetable(vegetable)} + > + + {vegetable.name} + + + + ) + ) + } + +
+
+ ); + } +} \ No newline at end of file diff --git a/src/components/Home.js b/src/Routes/Home.js similarity index 98% rename from src/components/Home.js rename to src/Routes/Home.js index 9ff0ecb..fe71638 100644 --- a/src/components/Home.js +++ b/src/Routes/Home.js @@ -7,7 +7,7 @@ import { import '../css/Home.css'; -export default class Home extends React.Component { +export default class RouterHome extends React.Component { render() { return ( diff --git a/src/Routes/Map.js b/src/Routes/Map.js new file mode 100644 index 0000000..ef4d0e9 --- /dev/null +++ b/src/Routes/Map.js @@ -0,0 +1,108 @@ +import React from 'react'; +import { + Container, + Row, + Col, + ListGroup, + ListGroupItem, + Badge +} from 'reactstrap'; +import Api from '../Components/Api'; +import { + NotificationContainer, + NotificationManager +} from 'react-notifications'; +import MapItem from '../Components/Map' +import Vegetables from '../Components/Vegetables' + +export default class RouterMap extends React.Component { + constructor(props) { + super(props); + + this.state = { + types: [], + vegetables: [], + selectedType: {}, + selectedVegetable: {} + } + + this.getVegetablesTypes = this.getVegetablesTypes.bind(this); + this.selectType = this.selectType.bind(this); + this.selectVegetable = this.selectVegetable.bind(this); + + this.getVegetablesTypes(); + } + + getVegetablesTypes() { + Api.get('types') + .then(res => { + this.setState({ + types: res.data.rows + }); + }) + .catch(() => { + NotificationManager.error('Erreur lors de la récupération des catégories'); + }) + } + + selectType(type) { + this.setState({ + selectedType: type + }); + } + + selectVegetable(vegetable) { + this.setState({ + selectedVegetable: vegetable + }) + } + + render() { + return ( + + + + + + + + + + +
+
+ + { + this.state.types.map((type, key) => + ( + this.selectType(type)}> + {type.name} + {type.Vegetables.length} + + ) + ) + } + +
+
+ + + + +
+ +
+
+ ); + } +} \ No newline at end of file diff --git a/src/Routes/Vegetables.js b/src/Routes/Vegetables.js new file mode 100644 index 0000000..c0376ae --- /dev/null +++ b/src/Routes/Vegetables.js @@ -0,0 +1,78 @@ +import React from 'react'; +import { + Container, + Row, + Col +} from 'reactstrap'; +import Api from '../Components/Api'; +import { + NotificationContainer, + NotificationManager +} from 'react-notifications'; +import MapItem from '../Components/Map' +import VegetablesList from '../Components/Vegetables' + +export default class RouterVegetables extends React.Component { + constructor(props) { + super(props); + + this.state = { + typeId: props.match.params.typeId, + selectedType: {}, + selectedVegetable: {} + } + + this.getItem = this.getItem.bind(this); + this.selectVegetable = this.selectVegetable.bind(this); + + this.getItem(); + } + + selectVegetable(vegetable) { + this.setState({ + selectedVegetable: vegetable + }) + } + + getItem() { + Api.get(`/types/${this.state.typeId}`) + .then(res => { + this.setState({ + selectedType: res.data + }); + }) + .catch(() => { + NotificationManager.error('Erreur lors de la récupération des végétaux'); + }) + + } + + render() { + return ( + + + + + + + + + + + + + + + + + ); + } +} \ No newline at end of file diff --git a/src/components/Map.js b/src/components/Map.js deleted file mode 100644 index 3103831..0000000 --- a/src/components/Map.js +++ /dev/null @@ -1,206 +0,0 @@ -import React from 'react'; -import { - Container, - Row, - Col, - ListGroup, - ListGroupItem, - Badge, - Tooltip -} from 'reactstrap'; -import Api from './Api'; -import { - FaMapMarkerAlt -} from 'react-icons/fa'; -import { - NotificationContainer, - NotificationManager -} from 'react-notifications'; -import { - Link -} from 'react-router-dom'; -import strToSlug from '../StrToSlug' - -import '../css/Map.css' - -const MapDimensions = { - width: 734, - height: 530, -}; - -export default class Map extends React.Component { - constructor(props) { - super(props); - - this.state = { - types: [], - vegetables: [], - selectedType: {}, - selectedVegetable: {}, - Map: { - width: '20px', - height: '20px', - }, - tooltipOpen: false - } - - this.getVegetablesTypes = this.getVegetablesTypes.bind(this); - this.selectType = this.selectType.bind(this); - this.selectVegetable = this.selectVegetable.bind(this); - this.setMap = this.setMap.bind(this); - this.toggle = this.toggle.bind(this); - - this.getVegetablesTypes(); - } - - componentDidMount() { - window.addEventListener('resize', this.setMap); - this.setMap(); - } - - componentWillUnmount() { - window.removeEventListener('resize', this.setMap); - } - - setMap() { - const width = document.getElementById('MapContainer').clientWidth; - let MapWidth = MapDimensions.width; - let MapHeight = MapDimensions.height; - - if (width < MapDimensions.width) { - MapWidth = width; - MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width); - } - - this.setState({ - Map: { - width: MapWidth, - height: MapHeight, - }, - }); - } - - getVegetablesTypes() { - Api.get('types') - .then(res => { - this.setState({ - types: res.data.rows - }); - }) - .catch(() => { - NotificationManager.error('Erreur lors de la récupération des catégories'); - }) - } - - getVegetable(id) { - Api.get(`types/${id}`) - .then(res => { - this.setState({ - vegetables: res.data - }); - }) - .catch(() => { - NotificationManager.error('Erreur lors de la récupération des végétaux'); - }) - } - - selectType(type) { - this.setState({ - selectedType: type - }); - } - - selectVegetable(vegetable) { - this.setState({ - selectedVegetable: vegetable - }) - } - - toggle(id) { - this.setState(prevState => ({ - tooltipOpen: prevState.tooltipOpen === id ? false : id - })); - } - - render() { - return ( - - - - - - -
-
- { - this.state.selectedType && - this.state.selectedType.Vegetables && - this.state.selectedType.Vegetables.map((vegetable, key) => - ( - this.selectVegetable(vegetable)} - > - this.toggle(vegetable.id)}> - {vegetable.name} - - - - ) - ) - } -
-
- -
- - - - -
-
- - { - this.state.types.map((type, key) => - ( - this.selectType(type)}> - {type.name} - {type.Vegetables.length} - - ) - ) - } - -
-
- - -
-
- - { - this.state.selectedType && - this.state.selectedType.Vegetables && - this.state.selectedType.Vegetables.map((vegetable, key) => - ( - this.selectVegetable(vegetable)}> - {vegetable.name} - - ) - ) - } - -
-
- -
- -
-
- ); - } -} \ No newline at end of file diff --git a/src/components/Vegetables.js b/src/components/Vegetables.js deleted file mode 100644 index 4eb9f48..0000000 --- a/src/components/Vegetables.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -export default class Vegetables extends React.Component { - render() { - return ( -
- -
- ); - } -} \ No newline at end of file diff --git a/src/css/Vegetables.css b/src/css/Vegetables.css new file mode 100644 index 0000000..82a8250 --- /dev/null +++ b/src/css/Vegetables.css @@ -0,0 +1,3 @@ +.vegetables--types--group.list-group a { + color: #212529; +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 68871a9..1cdbac9 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; -import App from './components/App'; +import App from './Components/App'; import * as serviceWorker from './serviceWorker'; import 'react-notifications/lib/notifications.css';