rodivert/front
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added eslint

Browse source
This commit is contained in:
dbroqua 2018-11-18 20:23:48 +01:00
parent 9f29edb00e
commit e89c7f220a
11 changed files with 311 additions and 187 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
.eslintrc.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = {
"extends": "airbnb",
"env": {
"browser": true
},
};

184
package-lock.json generated
View file

@ -2707,6 +2707,11 @@
"safe-buffer": "^5.0.1" "safe-buffer": "^5.0.1"
} }
}, },
"circular-json": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/circular-json/-/circular-json-0.3.3.tgz",
"integrity": "sha512-UZK3NBx2Mca+b5LsG7bY183pHWt5Y1xts4P3Pz7ENTwGVnJOUWbRb3ocjvX7hx9tq/yTAdclXm9sZ38gNuem4A=="
},
"class-utils": { "class-utils": {
"version": "0.3.6", "version": "0.3.6",
"resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz", "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
@ -3954,15 +3959,16 @@
} }
}, },
"eslint": { "eslint": {
"version": "5.6.0", "version": "5.9.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-5.9.0.tgz",
"integrity": "sha512-/eVYs9VVVboX286mBK7bbKnO1yamUy2UCRjiY6MryhQL2PaaXCExsCQ2aO83OeYRhU2eCU/FMFP+tVMoOrzNrA==", "integrity": "sha512-g4KWpPdqN0nth+goDNICNXGfJF7nNnepthp46CAlJoJtC5K/cLu3NgCM3AHu1CkJ5Hzt9V0Y0PBAO6Ay/gGb+w==",
"dev": true,
"requires": { "requires": {
"@babel/code-frame": "^7.0.0", "@babel/code-frame": "^7.0.0",
"ajv": "^6.5.3", "ajv": "^6.5.3",
"chalk": "^2.1.0", "chalk": "^2.1.0",
"cross-spawn": "^6.0.5", "cross-spawn": "^6.0.5",
"debug": "^3.1.0", "debug": "^4.0.1",
"doctrine": "^2.1.0", "doctrine": "^2.1.0",
"eslint-scope": "^4.0.0", "eslint-scope": "^4.0.0",
"eslint-utils": "^1.3.1", "eslint-utils": "^1.3.1",
@ -3989,24 +3995,35 @@
"path-is-inside": "^1.0.2", "path-is-inside": "^1.0.2",
"pluralize": "^7.0.0", "pluralize": "^7.0.0",
"progress": "^2.0.0", "progress": "^2.0.0",
"regexpp": "^2.0.0", "regexpp": "^2.0.1",
"require-uncached": "^1.0.3", "require-uncached": "^1.0.3",
"semver": "^5.5.1", "semver": "^5.5.1",
"strip-ansi": "^4.0.0", "strip-ansi": "^4.0.0",
"strip-json-comments": "^2.0.1", "strip-json-comments": "^2.0.1",
"table": "^4.0.3", "table": "^5.0.2",
"text-table": "^0.2.0" "text-table": "^0.2.0"
}, },
"dependencies": { "dependencies": {
"ansi-regex": { "ansi-regex": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
"dev": true
},
"debug": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/debug/-/debug-4.1.0.tgz",
"integrity": "sha512-heNPJUJIqC+xB6ayLAMHaIrmN9HKa7aQO8MGqKpvCA+uJYVcvR6l5kgdrhRuwPFHU7P5/A1w0BjByPHwpfTDKg==",
"dev": true,
"requires": {
"ms": "^2.1.1"
}
}, },
"eslint-scope": { "eslint-scope": {
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
"integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==", "integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
"dev": true,
"requires": { "requires": {
"esrecurse": "^4.1.0", "esrecurse": "^4.1.0",
"estraverse": "^4.1.1" "estraverse": "^4.1.1"
@ -4016,12 +4033,35 @@
"version": "4.0.0", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"dev": true,
"requires": { "requires": {
"ansi-regex": "^3.0.0" "ansi-regex": "^3.0.0"
} }
} }
} }
}, },
"eslint-config-airbnb": {
"version": "17.1.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb/-/eslint-config-airbnb-17.1.0.tgz",
"integrity": "sha512-R9jw28hFfEQnpPau01NO5K/JWMGLi6aymiF6RsnMURjTk+MqZKllCqGK/0tOvHkPi/NWSSOU2Ced/GX++YxLnw==",
"dev": true,
"requires": {
"eslint-config-airbnb-base": "^13.1.0",
"object.assign": "^4.1.0",
"object.entries": "^1.0.4"
}
},
"eslint-config-airbnb-base": {
"version": "13.1.0",
"resolved": "https://registry.npmjs.org/eslint-config-airbnb-base/-/eslint-config-airbnb-base-13.1.0.tgz",
"integrity": "sha512-XWwQtf3U3zIoKO1BbHh6aUhJZQweOwSt4c2JrPDg9FP3Ltv3+YfEv7jIDB8275tVnO/qOHbfuYg3kzw6Je7uWw==",
"dev": true,
"requires": {
"eslint-restricted-globals": "^0.1.1",
"object.assign": "^4.1.0",
"object.entries": "^1.0.4"
}
},
"eslint-config-react-app": { "eslint-config-react-app": {
"version": "3.0.5", "version": "3.0.5",
"resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-3.0.5.tgz", "resolved": "https://registry.npmjs.org/eslint-config-react-app/-/eslint-config-react-app-3.0.5.tgz",
@ -4150,7 +4190,7 @@
}, },
"doctrine": { "doctrine": {
"version": "1.5.0", "version": "1.5.0",
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz", "resolved": "http://registry.npmjs.org/doctrine/-/doctrine-1.5.0.tgz",
"integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=", "integrity": "sha1-N53Ocw9hZvds76TmcHoVmwLFpvo=",
"requires": { "requires": {
"esutils": "^2.0.2", "esutils": "^2.0.2",
@ -4242,6 +4282,12 @@
"prop-types": "^15.6.2" "prop-types": "^15.6.2"
} }
}, },
"eslint-restricted-globals": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/eslint-restricted-globals/-/eslint-restricted-globals-0.1.1.tgz",
"integrity": "sha1-NfDVy8ZMLj7WLpO0saevBbp+1Nc=",
"dev": true
},
"eslint-scope": { "eslint-scope": {
"version": "3.7.1", "version": "3.7.1",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-3.7.1.tgz",
@ -4973,21 +5019,16 @@
} }
}, },
"flat-cache": { "flat-cache": {
"version": "1.3.1", "version": "1.3.4",
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.1.tgz", "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-1.3.4.tgz",
"integrity": "sha512-BUaXPScuox3BPmS9CGqbsh7tvAGzBEU2Dlnw243WoHjC0vO57faTOvHOkPQkPZZdpvJuwOQhMdAQx3BtdUh6nQ==", "integrity": "sha512-VwyB3Lkgacfik2vhqR4uv2rvebqmDvFu4jlN/C1RzWoJEo8I7z4Q404oiqYCkq41mni8EzQnm95emU9seckwtg==",
"requires": { "requires": {
"del": "^3.0.0", "circular-json": "^0.3.1",
"flatted": "^2.0.0",
"graceful-fs": "^4.1.2", "graceful-fs": "^4.1.2",
"rimraf": "~2.6.2",
"write": "^0.2.1" "write": "^0.2.1"
} }
}, },
"flatted": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.0.tgz",
"integrity": "sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg=="
},
"flatten": { "flatten": {
"version": "1.0.2", "version": "1.0.2",
"resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz", "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
@ -8759,6 +8800,18 @@
"object-keys": "^1.0.11" "object-keys": "^1.0.11"
} }
}, },
"object.entries": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.0.4.tgz",
"integrity": "sha1-G/mk3SKI9bM/Opk9JXZh8F0WGl8=",
"dev": true,
"requires": {
"define-properties": "^1.1.2",
"es-abstract": "^1.6.1",
"function-bind": "^1.1.0",
"has": "^1.0.1"
}
},
"object.getownpropertydescriptors": { "object.getownpropertydescriptors": {
"version": "2.0.3", "version": "2.0.3",
"resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz", "resolved": "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz",
@ -11437,6 +11490,88 @@
"webpack-dev-server": "3.1.9", "webpack-dev-server": "3.1.9",
"webpack-manifest-plugin": "2.0.4", "webpack-manifest-plugin": "2.0.4",
"workbox-webpack-plugin": "3.6.3" "workbox-webpack-plugin": "3.6.3"
},
"dependencies": {
"ansi-regex": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
"integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
},
"eslint": {
"version": "5.6.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-5.6.0.tgz",
"integrity": "sha512-/eVYs9VVVboX286mBK7bbKnO1yamUy2UCRjiY6MryhQL2PaaXCExsCQ2aO83OeYRhU2eCU/FMFP+tVMoOrzNrA==",
"requires": {
"@babel/code-frame": "^7.0.0",
"ajv": "^6.5.3",
"chalk": "^2.1.0",
"cross-spawn": "^6.0.5",
"debug": "^3.1.0",
"doctrine": "^2.1.0",
"eslint-scope": "^4.0.0",
"eslint-utils": "^1.3.1",
"eslint-visitor-keys": "^1.0.0",
"espree": "^4.0.0",
"esquery": "^1.0.1",
"esutils": "^2.0.2",
"file-entry-cache": "^2.0.0",
"functional-red-black-tree": "^1.0.1",
"glob": "^7.1.2",
"globals": "^11.7.0",
"ignore": "^4.0.6",
"imurmurhash": "^0.1.4",
"inquirer": "^6.1.0",
"is-resolvable": "^1.1.0",
"js-yaml": "^3.12.0",
"json-stable-stringify-without-jsonify": "^1.0.1",
"levn": "^0.3.0",
"lodash": "^4.17.5",
"minimatch": "^3.0.4",
"mkdirp": "^0.5.1",
"natural-compare": "^1.4.0",
"optionator": "^0.8.2",
"path-is-inside": "^1.0.2",
"pluralize": "^7.0.0",
"progress": "^2.0.0",
"regexpp": "^2.0.0",
"require-uncached": "^1.0.3",
"semver": "^5.5.1",
"strip-ansi": "^4.0.0",
"strip-json-comments": "^2.0.1",
"table": "^4.0.3",
"text-table": "^0.2.0"
}
},
"eslint-scope": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.0.tgz",
"integrity": "sha512-1G6UTDi7Jc1ELFwnR58HV4fK9OQK4S6N985f166xqXxpjU6plxFISJa2Ba9KCQuFa8RCnj/lSFJbHo7UFDBnUA==",
"requires": {
"esrecurse": "^4.1.0",
"estraverse": "^4.1.1"
}
},
"strip-ansi": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
"integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
"requires": {
"ansi-regex": "^3.0.0"
}
},
"table": {
"version": "4.0.3",
"resolved": "http://registry.npmjs.org/table/-/table-4.0.3.tgz",
"integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==",
"requires": {
"ajv": "^6.0.1",
"ajv-keywords": "^3.0.0",
"chalk": "^2.1.0",
"lodash": "^4.17.4",
"slice-ansi": "1.0.0",
"string-width": "^2.1.1"
}
}
} }
}, },
"react-transition-group": { "react-transition-group": {
@ -13342,14 +13477,13 @@
"integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=" "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY="
}, },
"table": { "table": {
"version": "4.0.3", "version": "5.1.0",
"resolved": "http://registry.npmjs.org/table/-/table-4.0.3.tgz", "resolved": "https://registry.npmjs.org/table/-/table-5.1.0.tgz",
"integrity": "sha512-S7rnFITmBH1EnyKcvxBh1LjYeQMmnZtCXSEbHcH6S0NoKit24ZuFO/T1vDcLdYsLQkM188PVVhQmzKIuThNkKg==", "integrity": "sha512-e542in22ZLhD/fOIuXs/8yDZ9W61ltF8daM88rkRNtgTIct+vI2fTnAyu/Db2TCfEcI8i7mjZz6meLq0nW7TYg==",
"dev": true,
"requires": { "requires": {
"ajv": "^6.0.1", "ajv": "^6.5.3",
"ajv-keywords": "^3.0.0", "lodash": "^4.17.10",
"chalk": "^2.1.0",
"lodash": "^4.17.4",
"slice-ansi": "1.0.0", "slice-ansi": "1.0.0",
"string-width": "^2.1.1" "string-width": "^2.1.1"
} }

9
package.json
View file

@ -27,5 +27,12 @@
"not dead", "not dead",
"not ie <= 11", "not ie <= 11",
"not op_mini all" "not op_mini all"
] ],
"devDependencies": {
"eslint": "^5.9.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-jsx-a11y": "^6.1.2",
"eslint-plugin-react": "^7.11.1"
}
} }

32
src/Components/Header.js
View file

@ -15,19 +15,19 @@ import {
DropdownToggle, DropdownToggle,
DropdownMenu, DropdownMenu,
DropdownItem, DropdownItem,
Badge Badge,
} from 'reactstrap'; } from 'reactstrap';
import { import {
FaSearch FaSearch,
} from 'react-icons/fa'; } from 'react-icons/fa';
import Api from './Api';
import { import {
NotificationContainer, NotificationContainer,
NotificationManager NotificationManager,
} from 'react-notifications'; } from 'react-notifications';
import Api from './Api';
import strToSlug from '../StrToSlug'; import strToSlug from '../StrToSlug';
import '../css/Header.css' import '../css/Header.css';
export default class Header extends React.Component { export default class Header extends React.Component {
constructor(props) { constructor(props) {
@ -38,7 +38,7 @@ export default class Header extends React.Component {
this.state = { this.state = {
isOpen: false, isOpen: false,
types: [] types: [],
}; };
this.getVegetablesTypes(); this.getVegetablesTypes();
@ -46,20 +46,20 @@ export default class Header extends React.Component {
toggle() { toggle() {
this.setState({ this.setState({
isOpen: !this.state.isOpen isOpen: !this.state.isOpen,
}); });
} }
getVegetablesTypes() { getVegetablesTypes() {
Api.get('types') Api.get('types')
.then(res => { .then((res) => {
this.setState({ this.setState({
types: res.data.rows types: res.data.rows,
}); });
}) })
.catch(() => { .catch(() => {
NotificationManager.error('Erreur lors de la récupération des catégories'); NotificationManager.error('Erreur lors de la récupération des catégories');
}) });
} }
render() { render() {
@ -80,15 +80,17 @@ export default class Header extends React.Component {
</DropdownToggle> </DropdownToggle>
<DropdownMenu right> <DropdownMenu right>
{ {
this.state.types.map((type, key) => this.state.types.map((type, key) => (
(<DropdownItem key={key}> <DropdownItem key={key}>
<NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}> <NavLink href={`/vegetaux/${type.id}-${strToSlug(type.name)}`}>
<span className="text">{type.name}</span> <Badge pill>{type.Vegetables.length}</Badge> <span className="text">{type.name}</span>
{' '}
<Badge pill>{type.Vegetables.length}</Badge>
</NavLink> </NavLink>
</DropdownItem>) </DropdownItem>
) ))
} }
</DropdownMenu> </DropdownMenu>
</UncontrolledDropdown> </UncontrolledDropdown>

57
src/Components/Map.js
View file

@ -2,17 +2,17 @@ import React from 'react';
import { import {
Row, Row,
Col, Col,
Tooltip Tooltip,
} from 'reactstrap'; } from 'reactstrap';
import { import {
FaMapMarkerAlt FaMapMarkerAlt,
} from 'react-icons/fa'; } from 'react-icons/fa';
import { import {
Link Link,
} from 'react-router-dom'; } from 'react-router-dom';
import strToSlug from '../StrToSlug' import strToSlug from '../StrToSlug';
import '../css/Map.css' import '../css/Map.css';
const MapDimensions = { const MapDimensions = {
width: 734, width: 734,
@ -30,8 +30,8 @@ export default class Map extends React.Component {
width: '20px', width: '20px',
height: '20px', height: '20px',
}, },
tooltipOpen: false tooltipOpen: false,
} };
this.selectVegetable = this.selectVegetable.bind(this); this.selectVegetable = this.selectVegetable.bind(this);
this.setMap = this.setMap.bind(this); this.setMap = this.setMap.bind(this);
@ -42,7 +42,7 @@ export default class Map extends React.Component {
this.setState(prevState => ({ this.setState(prevState => ({
...prevState, ...prevState,
selectedType: newProps.selectedType, selectedType: newProps.selectedType,
selectedVegetable: newProps.selectedVegetable selectedVegetable: newProps.selectedVegetable,
})); }));
} }
@ -75,14 +75,14 @@ export default class Map extends React.Component {
selectVegetable(vegetable) { selectVegetable(vegetable) {
this.setState({ this.setState({
selectedVegetable: vegetable selectedVegetable: vegetable,
}) });
this.props.selectVegetable(vegetable) this.props.selectVegetable(vegetable);
} }
toggle(id) { toggle(id) {
this.setState(prevState => ({ this.setState(prevState => ({
tooltipOpen: prevState.tooltipOpen === id ? false : id tooltipOpen: prevState.tooltipOpen === id ? false : id,
})); }));
} }
@ -93,23 +93,22 @@ export default class Map extends React.Component {
<div id="MapContainer"> <div id="MapContainer">
<div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}> <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
{ {
this.state.selectedType && this.state.selectedType
this.state.selectedType.Vegetables && && this.state.selectedType.Vegetables
this.state.selectedType.Vegetables.map((vegetable, key) => && this.state.selectedType.Vegetables.map((vegetable, key) => (
( <Link
<Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`} to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}
key={key} key={key}
className={`mapMarker ${this.state.selectedVegetable && this.state.selectedVegetable.id === vegetable.id ? 'selected' : ''}`} className={`mapMarker ${this.state.selectedVegetable && this.state.selectedVegetable.id === vegetable.id ? 'selected' : ''}`}
style={{ left: `calc(${vegetable.lat}% - 16px)`, top: `calc(${vegetable.lng}% - 16px)` }} style={{ left: `calc(${vegetable.lat}% - 16px)`, top: `calc(${vegetable.lng}% - 16px)` }}
onMouseOver={(e) => this.selectVegetable(vegetable)} onMouseOver={e => this.selectVegetable(vegetable)}
> >
<Tooltip placement='top' isOpen={this.state.tooltipOpen === vegetable.id} target={'Tooltip-' + vegetable.id} toggle={() => this.toggle(vegetable.id)}> <Tooltip placement="top" isOpen={this.state.tooltipOpen === vegetable.id} target={`Tooltip-${vegetable.id}`} toggle={() => this.toggle(vegetable.id)}>
{vegetable.name} {vegetable.name}
</Tooltip> </Tooltip>
<FaMapMarkerAlt id={'Tooltip-' + vegetable.id} /> <FaMapMarkerAlt id={`Tooltip-${vegetable.id}`} />
</Link> </Link>
) ))
)
} }
</div> </div>
</div> </div>

42
src/Components/Vegetables.js
View file

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { import {
ListGroup, ListGroup,
ListGroupItem ListGroupItem,
} from 'reactstrap'; } from 'reactstrap';
import { import {
Link Link,
} from 'react-router-dom'; } from 'react-router-dom';
import strToSlug from '../StrToSlug' import strToSlug from '../StrToSlug';
import '../css/Vegetables.css' import '../css/Vegetables.css';
export default class Map extends React.Component { export default class Map extends React.Component {
constructor(props) { constructor(props) {
@ -16,8 +16,8 @@ export default class Map extends React.Component {
this.state = { this.state = {
selectedType: this.props.selectedType, selectedType: this.props.selectedType,
selectedVegetable: this.props.selectVegetable selectedVegetable: this.props.selectVegetable,
} };
} }
componentWillReceiveProps(newProps) { componentWillReceiveProps(newProps) {
@ -29,24 +29,22 @@ export default class Map extends React.Component {
<div className="with-margin"> <div className="with-margin">
<div className=" with-border with-background"> <div className=" with-border with-background">
<ListGroup className='vegetables--types--group'> <ListGroup className="vegetables--types--group">
{ {
this.state.selectedType && this.state.selectedType
this.state.selectedType.Vegetables && && this.state.selectedType.Vegetables
this.state.selectedType.Vegetables.map((vegetable, key) => && this.state.selectedType.Vegetables.map((vegetable, key) => (
( <ListGroupItem
<ListGroupItem key={key}
key={key} className={this.state.selectedVegetable.id === vegetable.id ? 'selected' : 'null'}
className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"} onMouseOver={e => this.props.selectVegetable(vegetable)}
onMouseOver={(e) => this.props.selectVegetable(vegetable)} >
> <Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}>
<Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}> {vegetable.name}
{vegetable.name} </Link>
</Link>
</ListGroupItem> </ListGroupItem>
) ))
)
} }
</ListGroup> </ListGroup>
</div> </div>

3
src/Routes/Home.js
View file

@ -2,13 +2,12 @@ import React from 'react';
import { import {
Container, Container,
Row, Row,
Col Col,
} from 'reactstrap'; } from 'reactstrap';
import '../css/Home.css'; import '../css/Home.css';
export default class RouterHome extends React.Component { export default class RouterHome extends React.Component {
render() { render() {
return ( return (
<Container> <Container>

52
src/Routes/Map.js
View file

@ -5,15 +5,15 @@ import {
Col, Col,
ListGroup, ListGroup,
ListGroupItem, ListGroupItem,
Badge Badge,
} from 'reactstrap'; } from 'reactstrap';
import Api from '../Components/Api';
import { import {
NotificationContainer, NotificationContainer,
NotificationManager NotificationManager,
} from 'react-notifications'; } from 'react-notifications';
import MapItem from '../Components/Map' import Api from '../Components/Api';
import Vegetables from '../Components/Vegetables' import MapItem from '../Components/Map';
import Vegetables from '../Components/Vegetables';
export default class RouterMap extends React.Component { export default class RouterMap extends React.Component {
constructor(props) { constructor(props) {
@ -23,8 +23,8 @@ export default class RouterMap extends React.Component {
types: [], types: [],
vegetables: [], vegetables: [],
selectedType: {}, selectedType: {},
selectedVegetable: {} selectedVegetable: {},
} };
this.getVegetablesTypes = this.getVegetablesTypes.bind(this); this.getVegetablesTypes = this.getVegetablesTypes.bind(this);
this.selectType = this.selectType.bind(this); this.selectType = this.selectType.bind(this);
@ -35,26 +35,26 @@ export default class RouterMap extends React.Component {
getVegetablesTypes() { getVegetablesTypes() {
Api.get('types') Api.get('types')
.then(res => { .then((res) => {
this.setState({ this.setState({
types: res.data.rows types: res.data.rows,
}); });
}) })
.catch(() => { .catch(() => {
NotificationManager.error('Erreur lors de la récupération des catégories'); NotificationManager.error('Erreur lors de la récupération des catégories');
}) });
} }
selectType(type) { selectType(type) {
this.setState({ this.setState({
selectedType: type selectedType: type,
}); });
} }
selectVegetable(vegetable) { selectVegetable(vegetable) {
this.setState({ this.setState({
selectedVegetable: vegetable selectedVegetable: vegetable,
}) });
} }
render() { render() {
@ -75,18 +75,18 @@ export default class RouterMap extends React.Component {
<Col xs="6" sm="12"> <Col xs="6" sm="12">
<div className="with-margin"> <div className="with-margin">
<div className=" with-border with-background"> <div className=" with-border with-background">
<ListGroup className='vegetables--types--group'> <ListGroup className="vegetables--types--group">
{ {
this.state.types.map((type, key) => this.state.types.map((type, key) => (
( <ListGroupItem
<ListGroupItem key={key}
key={key} className={this.state.selectedType.id === type.id ? 'selected' : 'null'}
className={this.state.selectedType.id === type.id ? "selected" : "null"} onClick={(e) => this.selectType(type)}> onClick={e => this.selectType(type)}
{type.name} >
<Badge pill>{type.Vegetables.length}</Badge> {type.name}
</ListGroupItem> <Badge pill>{type.Vegetables.length}</Badge>
) </ListGroupItem>
) ))
} }
</ListGroup> </ListGroup>
</div> </div>
@ -101,8 +101,8 @@ export default class RouterMap extends React.Component {
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row > </Row>
</Container > </Container>
); );
} }
} }

35
src/Routes/Vegetables.js
View file

@ -2,15 +2,15 @@ import React from 'react';
import { import {
Container, Container,
Row, Row,
Col Col,
} from 'reactstrap'; } from 'reactstrap';
import Api from '../Components/Api';
import { import {
NotificationContainer, NotificationContainer,
NotificationManager NotificationManager,
} from 'react-notifications'; } from 'react-notifications';
import MapItem from '../Components/Map' import Api from '../Components/Api';
import VegetablesList from '../Components/Vegetables' import MapItem from '../Components/Map';
import VegetablesList from '../Components/Vegetables';
export default class RouterVegetables extends React.Component { export default class RouterVegetables extends React.Component {
constructor(props) { constructor(props) {
@ -19,8 +19,8 @@ export default class RouterVegetables extends React.Component {
this.state = { this.state = {
typeId: props.match.params.typeId, typeId: props.match.params.typeId,
selectedType: {}, selectedType: {},
selectedVegetable: {} selectedVegetable: {},
} };
this.getItem = this.getItem.bind(this); this.getItem = this.getItem.bind(this);
this.selectVegetable = this.selectVegetable.bind(this); this.selectVegetable = this.selectVegetable.bind(this);
@ -28,23 +28,22 @@ export default class RouterVegetables extends React.Component {
this.getItem(); this.getItem();
} }
selectVegetable(vegetable) {
this.setState({
selectedVegetable: vegetable
})
}
getItem() { getItem() {
Api.get(`/types/${this.state.typeId}`) Api.get(`/types/${this.state.typeId}`)
.then(res => { .then((res) => {
this.setState({ this.setState({
selectedType: res.data selectedType: res.data,
}); });
}) })
.catch(() => { .catch(() => {
NotificationManager.error('Erreur lors de la récupération des végétaux'); NotificationManager.error('Erreur lors de la récupération des végétaux');
}) });
}
selectVegetable(vegetable) {
this.setState({
selectedVegetable: vegetable,
});
} }
render() { render() {
@ -71,8 +70,8 @@ export default class RouterVegetables extends React.Component {
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row > </Row>
</Container > </Container>
); );
} }
} }

11
src/StrToSlug.js
View file

@ -1,11 +1,12 @@
export default (str) => { export default (string) => {
let str = string;
str = str.replace(/^\s+|\s+$/g, ''); // trim str = str.replace(/^\s+|\s+$/g, ''); // trim
str = str.toLowerCase(); str = str.toLowerCase();
// remove accents, swap ñ for n, etc // remove accents, swap ñ for n, etc
var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;"; const from = 'àáäâèéëêìíïîòóöôùúüûñç·/_,:;';
var to = "aaaaeeeeiiiioooouuuunc------"; const to = 'aaaaeeeeiiiioooouuuunc------';
for (var i = 0, l = from.length; i < l; i++) { for (let i = 0, l = from.length; i < l; i += 1) {
str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i)); str = str.replace(new RegExp(from.charAt(i), 'g'), to.charAt(i));
} }
@ -14,4 +15,4 @@ export default (str) => {
.replace(/-+/g, '-'); // collapse dashes .replace(/-+/g, '-'); // collapse dashes
return str; return str;
} };

55
src/serviceWorker.js
View file

@ -1,33 +1,15 @@
// This optional code is used to register a service worker.
// register() is not called by default.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on subsequent visits to a page, after all the
// existing tabs open on the page have been closed, since previously cached
// resources are updated in the background.
// To learn more about the benefits of this model and instructions on how to
// opt-in, read http://bit.ly/CRA-PWA
const isLocalhost = Boolean( const isLocalhost = Boolean(
window.location.hostname === 'localhost' || window.location.hostname === 'localhost'
// [::1] is the IPv6 localhost address. || window.location.hostname === '[::1]'
window.location.hostname === '[::1]' || || window.location.hostname.match(
// 127.0.0.1/8 is considered localhost for IPv4. /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
window.location.hostname.match( ),
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
); );
export function register(config) { export function register(config) {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href); const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
if (publicUrl.origin !== window.location.origin) { if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebook/create-react-app/issues/2374
return; return;
} }
@ -35,15 +17,12 @@ export function register(config) {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) { if (isLocalhost) {
// This is running on localhost. Let's check if a service worker still exists or not.
checkValidServiceWorker(swUrl, config); checkValidServiceWorker(swUrl, config);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => { navigator.serviceWorker.ready.then(() => {
console.log( console.log(
'This web app is being served cache-first by a service ' + 'This web app is being served cache-first by a service '
'worker. To learn more, visit http://bit.ly/CRA-PWA' + 'worker. To learn more, visit http://bit.ly/CRA-PWA',
); );
}); });
} else { } else {
@ -57,7 +36,7 @@ export function register(config) {
function registerValidSW(swUrl, config) { function registerValidSW(swUrl, config) {
navigator.serviceWorker navigator.serviceWorker
.register(swUrl) .register(swUrl)
.then(registration => { .then((registration) => {
registration.onupdatefound = () => { registration.onupdatefound = () => {
const installingWorker = registration.installing; const installingWorker = registration.installing;
if (installingWorker == null) { if (installingWorker == null) {
@ -70,8 +49,8 @@ function registerValidSW(swUrl, config) {
// but the previous service worker will still serve the older // but the previous service worker will still serve the older
// content until all client tabs are closed. // content until all client tabs are closed.
console.log( console.log(
'New content is available and will be used when all ' + 'New content is available and will be used when all '
'tabs for this page are closed. See http://bit.ly/CRA-PWA.' + 'tabs for this page are closed. See http://bit.ly/CRA-PWA.',
); );
// Execute callback // Execute callback
@ -93,7 +72,7 @@ function registerValidSW(swUrl, config) {
}; };
}; };
}) })
.catch(error => { .catch((error) => {
console.error('Error during service worker registration:', error); console.error('Error during service worker registration:', error);
}); });
} }
@ -101,15 +80,15 @@ function registerValidSW(swUrl, config) {
function checkValidServiceWorker(swUrl, config) { function checkValidServiceWorker(swUrl, config) {
// Check if the service worker can be found. If it can't reload the page. // Check if the service worker can be found. If it can't reload the page.
fetch(swUrl) fetch(swUrl)
.then(response => { .then((response) => {
// Ensure service worker exists, and that we really are getting a JS file. // Ensure service worker exists, and that we really are getting a JS file.
const contentType = response.headers.get('content-type'); const contentType = response.headers.get('content-type');
if ( if (
response.status === 404 || response.status === 404
(contentType != null && contentType.indexOf('javascript') === -1) || (contentType != null && contentType.indexOf('javascript') === -1)
) { ) {
// No service worker found. Probably a different app. Reload the page. // No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then((registration) => {
registration.unregister().then(() => { registration.unregister().then(() => {
window.location.reload(); window.location.reload();
}); });
@ -121,14 +100,14 @@ function checkValidServiceWorker(swUrl, config) {
}) })
.catch(() => { .catch(() => {
console.log( console.log(
'No internet connection found. App is running in offline mode.' 'No internet connection found. App is running in offline mode.',
); );
}); });
} }
export function unregister() { export function unregister() {
if ('serviceWorker' in navigator) { if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => { navigator.serviceWorker.ready.then((registration) => {
registration.unregister(); registration.unregister();
}); });
} }