Skip to content

GitLab

Commit 6c33284e authored by Claire PRUDHOMME's avatar Claire PRUDHOMME
Browse files

[react-router] Adding the navigation links

parent 795b0472
Hide whitespace changes
Inline Side-by-side
Showing with 231 additions and 88 deletions
.gitignore
View file @ 6c33284e
......@@ -21,3 +21,6 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*
+# build artifacts
+src/**/*.css
package-lock.json
View file @ 6c33284e
......@@ -6691,6 +6691,18 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.7.2",
"resolved": "https://registry.npmjs.org/history/-/history-4.7.2.tgz",
"integrity": "sha512-1zkBRWW6XweO0NBcjiphtVJVsIQ+SXF29z9DVkceeaSLVMFXHool+fdCZD4spDCfZJCILPILc3bm7Bc+HRi0nA==",
"requires": {
"invariant": "^2.2.1",
"loose-envify": "^1.2.0",
"resolve-pathname": "^2.2.0",
"value-equal": "^0.4.0",
"warning": "^3.0.0"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
......@@ -6706,6 +6718,11 @@
"resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
"integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
},
"hoist-non-react-statics": {
"version": "2.5.5",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
"integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
},
"home-or-tmp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/home-or-tmp/-/home-or-tmp-2.0.0.tgz",
......@@ -14270,6 +14287,66 @@
"warning": "^3.0.0"
}
},
"react-router": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-4.3.1.tgz",
"integrity": "sha512-yrvL8AogDh2X42Dt9iknk4wF4V8bWREPirFfS9gLU1huk6qK41sg7Z/1S81jjTrGHxa3B8R3J6xIkDAA6CVarg==",
"requires": {
"history": "^4.7.2",
"hoist-non-react-statics": "^2.5.0",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.1",
"warning": "^4.0.1"
},
"dependencies": {
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
"integrity": "sha1-Wf3g9DW62suhA6hOnTvGTpa5k30=",
"requires": {
"isarray": "0.0.1"
}
},
"warning": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
"integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"react-router-dom": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-4.3.1.tgz",
"integrity": "sha512-c/MlywfxDdCp7EnB7YfPMOfMD3tOtIjrQlj/CKfNMBxdmpJP8xcz5P/UAFn3JbnQCNUxsHyVVqllF9LhgVyFCA==",
"requires": {
"history": "^4.7.2",
"invariant": "^2.2.4",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.1",
"react-router": "^4.3.1",
"warning": "^4.0.1"
},
"dependencies": {
"warning": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/warning/-/warning-4.0.2.tgz",
"integrity": "sha512-wbTp09q/9C+jJn4KKJfJfoS6VleK/Dti0yqWSm6KMvJ4MRCXFQNapHuJXutJIrWV0Cf4AhTdeIe4qdKHR1+Hug==",
"requires": {
"loose-envify": "^1.0.0"
}
}
}
},
"react-scripts": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-2.1.3.tgz",
......@@ -15131,6 +15208,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"resolve-pathname": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz",
"integrity": "sha512-bAFz9ld18RzJfddgrO2e/0S2O81710++chRMUxHjXOYKF6jTAMrUNZrEZ1PvV0zlhfjidm08iRPdTLPno1FuRg=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
......@@ -17229,6 +17311,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-0.4.0.tgz",
"integrity": "sha512-x+cYdNnaA3CxvMaTX0INdTCN8m8aF2uY9BvEqmxuYp8bL09cs/kWVQPVGcA35fMktdOsP69IgU7wFj/61dJHEw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
......
src/App.js
View file @ 6c33284e
import React, { Component, Fragment } from 'react';
import './App.css';
import { NavigationDrawer, Grid } from 'react-md';
import IngredientList from './components/IngredientList.js'
import { NavigationDrawer, Grid, ListItem } from 'react-md';
import IngredientsContainer from './containers/IngredientsContainer.js'
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
const Home = () => (
<div>Bidule</div>
);
const NavItemLink = ({to, label}) => (
<Route path={to} >
{({ match }) => {
return (
<ListItem
component={Link}
active={!!match}
to={to}
primaryText={label}
/>
);
}}
</Route>
)
class App extends Component {
constructor() {
super();
this.state = { items: [], countRefresh:0 };
}
componentDidMount() {
this.getAllIngredients()
}
incRefresh = () => {
console.log("I'm so fresh")
this.setState(
(prevState, props) => ({ countRefresh: prevState.countRefresh + 1 })
)
}
createIngredient(name) {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/`,
{
method: "post",
headers : {"Content-Type" : "application/json"},
body : name
}
)
}
getAllIngredients() {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients`)
.then(result=> {
result.json()
.then(items =>
{
this.setState((state) => state.items = {items})
})
}
).catch(error => console.log(error))
}
deleteIngredientById(id) {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/${id}`,
{
method: "delete",
}
)
}
editIngredient(updatedIngredient) {
console.log(updatedIngredient)
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/`,
{
method: "PATCH",
headers : {"Content-Type" : "application/json"},
body : JSON.stringify(updatedIngredient)
}
)
}
render() {
return (
<Fragment>
<NavigationDrawer
drawerTitle="Application"
toolbarTitle="Welcome to react-md"
>
<Grid>
<IngredientList
list = {this.state.items}
handleEdit = {this.editIngredient}
handleDelete = {this.deleteIngredientById}
handleCreate = {this.createIngredient}
refresh = {this.incRefresh}
/>
</Grid>
</NavigationDrawer>
</Fragment>
<Router>
<NavigationDrawer
drawerTitle="Application"
toolbarTitle="Welcome to react-md"
navItems={[
<NavItemLink to = "/" label = "Home"/>,
<NavItemLink to = "/ingredients" label = "Ingredients"/>
]}
>
<Route exact path="/" component={Home} />
<Route exact path="/ingredients" component={IngredientsContainer} />
</NavigationDrawer>
</Router>
);
}
}
export default App;
src/components/IngredientLine.js
View file @ 6c33284e
......@@ -17,6 +17,12 @@ class IngredientLine extends Component {
handleEdit(id) {
this.props.handleEdit({"name":this.state.name, "id":id})
this.setState({edit:false})
this.props.refresh()
}
handleDelete(id) {
this.props.handleDelete(id)
this.props.refresh()
}
......@@ -43,7 +49,7 @@ class IngredientLine extends Component {
<TableColumn key = {name + "icons"}>
<Button icon primary onClick ={ () => {this.setState({edit : !this.state.edit})} }>edit</Button>
<Button icon secondary onClick ={ handleDelete(id) }>delete</Button>
<Button icon secondary onClick ={ () => this.handleDelete(id) }>delete</Button>
</TableColumn>
</TableRow>
......@@ -52,4 +58,4 @@ class IngredientLine extends Component {
}
export default IngredientLine
\ No newline at end of file
export default IngredientLine
src/components/IngredientList.js
View file @ 6c33284e
......@@ -96,4 +96,4 @@ class IngredientList extends Component {
}
export default IngredientList;
\ No newline at end of file
export default IngredientList;
src/containers/IngredientsContainer.js 0 → 100644
View file @ 6c33284e
import React, { Component, Fragment } from 'react';
import { Grid } from 'react-md';
import IngredientList from '../components/IngredientList.js'
class IngredientsContainer extends Component {
constructor() {
super();
this.state = { items: [], countRefresh:0 };
}
componentDidMount() {
this.getAllIngredients()
}
incRefresh = () => {
console.log("I'm so fresh")
this.setState(
(prevState, props) => ({ countRefresh: prevState.countRefresh + 1 })
)
}
createIngredient(name) {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/`,
{
method: "post",
headers : {"Content-Type" : "application/json"},
body : name
}
)
}
getAllIngredients() {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients`)
.then(result=> {
result.json()
.then(items =>
{
this.setState((state) => state.items = {items})
})
}
).catch(error => console.log(error))
}
deleteIngredientById(id) {
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/${id}`,
{
method: "delete",
}
)
}
editIngredient(updatedIngredient) {
console.log(updatedIngredient)
return fetch(`http://10.0.1.9:8080/api/v1/ingredients/`,
{
method: "PATCH",
headers : {"Content-Type" : "application/json"},
body : JSON.stringify(updatedIngredient)
}
)
}
render() {
return (
<div>
<Grid>
<IngredientList
list = {this.state.items}
handleEdit = {this.editIngredient}
handleDelete = {this.deleteIngredientById}
handleCreate = {this.createIngredient}
refresh = {this.incRefresh}
/>
</Grid>
</div>
);
}
}
export default IngredientsContainer;
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