AjouterClient.js

import React, { Component } from 'react';


import {
  Badge,
  ButtonDropdown,
  Button,
  Card,
  CardBody,
  CardFooter,
  CardHeader,
  Col,
  Collapse,
  DropdownItem,
  DropdownMenu,
  DropdownToggle,
  Fade,
  Form,
  FormGroup,
  FormText,
  FormFeedback,
  Input,
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  Label,
  Row,
}
from 'reactstrap';
import axios from 'axios';


class AjouterClient extends Component {


  constructor(props) {
    super(props)
    this.state = {
      Code: '',
      Prenom: '',
      Nom: '',
      FAX: '',
      Telephone: '',
      Email: '',
      Adresse1: '',
      Adresse2: ''

    };
    // this.handleSubmit = this.handleSubmit.bind(this);
  }
  componentWillReceiveProps(nextProps) {
    console.log("nextProps", nextProps);
  }
  handleSubmit(event) {

    event.preventDefault();
    
    var self = this;
    var client = {
      Code: this.state.Code,
      Prenom: this.state.Prenom,
      Nom: this.state.Nom,
      FAX: this.state.FAX,
      Telephone: this.state.Telephone,
      Email: this.state.Email,
      Adresse1: this.state.Adresse1,
      Adresse2: this.state.Adresse2,


    }
    axios({
        method: 'post',
        url: '/app/ajouterclient/',
        data: client,
        withCredentials: true,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json',
          'Accept': 'application/json',
        }
      })
      .then(function(response) {
        console.log(response);
        if (response.data.code === 200) {
          console.log("registration successfull");

        }
        else {
          console.log("some error ocurred", response.data.code);
        }
      })
      .catch(function(error) {
        console.log(error);
      });


  }

  render() {
    return (
      <div className="animated fadeIn">
           <Row>
          <Col xs="12"  >
     
              <Card>
                <CardHeader>
              <h4><strong>    <i className="fa fa-user"> </i> Ajouter un nouveau client</strong></h4>
                 
                </CardHeader>
               
                  <CardBody>
                    <Form className="form-horizontal"  method="POST" >
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-id"><strong>Code client</strong></Label></h5>
                    </Col>
                    
                      <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-code">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-id-card-o" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="Code" size="16" type="text" placeholder="Entrer le code du client"      onChange = {(event,newValue) => this.setState({Code:newValue})} required/>
                            <FormFeedback className="help-block">Entrez le code SVP ! </FormFeedback>
                          </InputGroup>
                        </div>
                        </Col>
                      </FormGroup>
                      
                      
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-pren"><strong>Prénom</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-pren">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-user-circle-o" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="prénom" size="16" type="text"      onChange = {(event,newValue) => this.setState({Prenom:newValue})} placeholder="Entrer le prénom du client" autocomplete='given-name' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-nom"><strong>Nom</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-nom">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-user-circle" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="nom" size="16" type="text"      onChange = {(event,newValue) => this.setState({Nom:newValue})} placeholder="Entrer le nom du client" autocomplete='family-name' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                      
                     <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-tel"><strong>Numéro de FAX</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-fax">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="fax" size="16" type="tel"      onChange = {(event,newValue) => this.setState({FAX:newValue})} placeholder="Entrer le numéro du FAX du client" autocomplete='tel' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-tel"><strong>Numéro de Téléphone</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-tel">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="flag-icon flag-icon-tn " title="tn" id="tn"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="tel" size="16" type="tel"    onChange = {(event,newValue) => this.setState({Telephone:newValue})} placeholder="Entrer le numéro du télèphone du client" autocomplete='tel-national' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                      
                      <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-email"><strong>Email</strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-email">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-envelope" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="email" size="16"      onChange = {(event,newValue) => this.setState({Email:newValue})} type="email" placeholder="Entrer l'email du client" autocomplete='email' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                      
                       <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-adr"><strong>Adresse 1 </strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-Adr">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="adr" size="16" type="text"    onChange = {(event,newValue) => this.setState({Adresse1:newValue})} placeholder="Entrer l'adresse 1  du client" autocomplete='street-address' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                       <FormGroup row>
                       <Col md="3">
                    <h5>  <Label htmlFor="hf-adr"><strong>Adresse 2 </strong></Label></h5>
                    </Col>
                    <Col xs="12" md="9">
                        <div className="controls">
                          <InputGroup className="input-Adr2">
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText><i className="fa fa-location-arrow" aria-hidden="true"></i></InputGroupText>
                            </InputGroupAddon>
                            <Input id="adr2" size="16" type="text"    onChange = {(event,newValue) => this.setState({Adresse2:newValue})} placeholder="Entrer l'adresse 2  du client" autocomplete='address-line2' />
                            
                          </InputGroup>
                        
                        </div>
                        </Col>
                      </FormGroup>
                      
                     
                      <div className="form-actions" >
                      
                        <Button type="submit" color="success" onClick={(event) => this.handleSubmit(event)} >Ajouter </Button>
                        
                      </div>
                    </Form>
                  </CardBody>
              
              </Card>
          
          </Col>
        </Row>
        </div>
    );
  }
}


export default AjouterClient;