Added Properties form

src/App.js

@@ -3,6 +3,7 @@ import {
   BrowserRouter as Router, Route,
   Switch,
 } from 'react-router-dom';
+import Properties from './Properties';
 import Categories from './Categories';
 import Category from './Category';
 import Vegetable from './Vegetable';
@@ -21,6 +22,7 @@ class App extends Component {
           <Switch>
             <Route exact path="/" component={requireAuth(Login, false)} />
             <Route exact path="/LogOut" component={Logout} />
+            <Route exact path="/properties" component={requireAuth(Properties)} />
             <Route exact path="/categories" component={requireAuth(Categories)} />
             <Route exact path="/categories/:categoryId" component={requireAuth(Category)} />
             <Route exact path="/categories/:categoryId/vegetables/:vegetableId" component={requireAuth(Vegetable)} />

src/Header.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import {
+  Link
+} from 'react-router-dom';
 import {
   Collapse,
   Navbar,
@@ -9,7 +11,11 @@ import {
   NavItem,
   NavLink,
 } from 'reactstrap';
-import { FaSignOutAlt } from 'react-icons/fa';
+import {
+  FaSignOutAlt,
+  FaLeaf,
+  FaSlidersH
+} from 'react-icons/fa';
 
 export default class Example extends React.Component {
   constructor(props) {
@@ -35,11 +41,25 @@ export default class Example extends React.Component {
           <NavbarToggler onClick={this.toggle} />
           <Collapse isOpen={this.state.isOpen} navbar>
             <Nav className="ml-auto" navbar>
+              <NavItem>
+                <NavLink tag={Link} to="/categories">
+                  <FaLeaf />
+                  {' '}
+                  Catégories
+                </NavLink>
+              </NavItem>
+              <NavItem>
+                <NavLink tag={Link} to="/properties">
+                  <FaSlidersH />
+                  {' '}
+                  Propriétés
+                </NavLink>
+              </NavItem>
               <NavItem>
                 <NavLink tag={Link} to="/LogOut">
                   <FaSignOutAlt />
                   {' '}
-Déconnexion
+                  Déconnexion
                 </NavLink>
               </NavItem>
             </Nav>

src/Navigation.js

@@ -1,6 +1,11 @@
 import React from 'react';
-import { Breadcrumb, BreadcrumbItem } from 'reactstrap';
-import { Link } from 'react-router-dom';
+import {
+  Breadcrumb,
+  BreadcrumbItem
+} from 'reactstrap';
+import {
+  Link
+} from 'react-router-dom';
 import API from './Api';
 
 class Navigation extends React.Component {
@@ -10,6 +15,13 @@ class Navigation extends React.Component {
     const Breadcrumb = [];
 
     if (API.defaults.headers.common.Authorization !== undefined) {
+      if (this.props.root && this.props.root === 'Property') {
+        Breadcrumb.push({
+          name: 'Propriétés',
+          path: '/properties',
+          active: true,
+        });
+      } else {
         Breadcrumb.push({
           name: 'Catégories',
           path: '/categories',
@@ -32,6 +44,7 @@ class Navigation extends React.Component {
           }
         }
       }
+    }
 
     this.state = {
       Breadcrumb,
@@ -42,12 +55,16 @@ class Navigation extends React.Component {
     if (props.categoryName) {
       const Breadcrumb = this.state.Breadcrumb;
       Breadcrumb[1].name = props.categoryName;
-      this.setState({ Breadcrumb });
+      this.setState({
+        Breadcrumb
+      });
     }
     if (props.vegetableName) {
       const Breadcrumb = this.state.Breadcrumb;
       Breadcrumb[2].name = props.vegetableName;
-      this.setState({ Breadcrumb });
+      this.setState({
+        Breadcrumb
+      });
     }
   }
 

src/Properties.js

@@ -0,0 +1,143 @@
+import React, {
+  Component
+} from 'react';
+import {
+  Container,
+  Table,
+  Form,
+  FormGroup,
+  Button,
+  Input,
+} from 'reactstrap';
+import {
+  FaTrashAlt,
+  FaPlus
+} from 'react-icons/fa';
+import Navigation from './Navigation';
+import Header from './Header';
+import API from './Api';
+
+class Properties extends Component {
+  constructor(props) {
+    super(props);
+
+    this.getProperties = this.getProperties.bind(this);
+    this.addProperty = this.addProperty.bind(this);
+    this.deleteProperty = this.deleteProperty.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+
+    this.state = {
+      Properties: [],
+      name: '',
+    };
+
+    this.getProperties();
+  }
+
+  handleChange(event) {
+    const target = event.target;
+    const value = target.type === 'checkbox' ? target.checked : target.value;
+    const name = target.name;
+
+    this.setState({
+      [name]: value,
+    });
+  }
+
+  getProperties() {
+    API.get('properties')
+      .then((res) => {
+        if (res.status === 200) {
+          this.setState({
+            Properties: res.data.rows
+          });
+        } else {
+          this.setState({
+            Properties: []
+          });
+        }
+      })
+      .catch((e) => {
+        alert('Erreur lors de la récupération des types de propriétés');
+      });
+  }
+
+  addProperty(event) {
+    event.preventDefault(); // Let's stop this event.
+    event.stopPropagation(); // Really this time.
+    API.post('properties', {
+        name: this.state.name,
+      })
+      .then((res) => {
+        this.setState(prevState => ({
+          Properties: [...prevState.Properties, res.data],
+          name: ''
+        }));
+      })
+      .catch(() => {
+        alert('Impossile de créer ce type de propriété');
+      });
+  }
+
+  deleteProperty(property) {
+    API.delete(`properties/${property.id}`)
+      .then((res) => {
+        this.setState({
+          Properties: this.state.Properties.filter(item => item.id !== property.id),
+        });
+      })
+      .catch((e) => {
+        alert('Erreur lors de la suppression de ce type de propriété');
+      });
+  }
+
+  render() {
+    return (
+      <div>
+        <Header />
+        <Container>
+          <Navigation root="Property" />
+          <Table>
+            <thead>
+              <tr>
+                <th>#</th>
+                <th>Nom</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+            <tbody>
+              {this.state.Properties.map((item, key) => (
+                <tr key={key}>
+                  <th scope="row">{item.id}</th>
+                  <td>{item.name}</td>
+                  <td>
+                    {' '}
+                    <Button color="danger" onClick={() => this.deleteProperty(item)}><FaTrashAlt /></Button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </Table>
+          <Form inline onSubmit={this.addProperty}>
+            <FormGroup className="mb-8 mr-sm-8 mb-sm-0">
+              <Input
+                type="text"
+                name="name"
+                value={this.state.name}
+                placeholder="Nouveau type de propriété"
+                onChange={this.handleChange}
+              />
+            </FormGroup>
+            <Button color="primary">
+              <FaPlus />
+              {' '}
+  Ajouter
+            </Button>
+          </Form>
+        </Container>
+      </div>
+    );
+  }
+}
+
+export default Properties;