​

import React, { Component } from 'react';

import { MDBDataTable, MDBInput } from 'mdbreact';

​

var arrayClientData = [];

​

class App extends Component {

  state = {

    checked: []

  };

​

  constructor(props) {

    super(props);

    this.fetchClientData();

  }

​

  toggleCheck = e => {

    let checkedArr = this.state.checked;

    checkedArr.filter(name => name === e.target.id)[0]

      ? checkedArr = checkedArr.filter(name => name !== e.target.id)

      : checkedArr.push(e.target.id);

    this.setState({ checked: checkedArr })

​

  };

​

  isChecked = id => this.state.checked.filter(name => name === id)[0] ? true : false

​

  fetchClientData() {

​

    const property = this.props;

    const contextNew = this;

    fetch("http://localhost:5000/users/CustomersDetails", {

      method: "GET",

      headers: {

        "Content-Type": "application/json"

      },

    }).then(function (response) {

      return response.json();

​

    })

      .then(function (data) {

        const myObjStr = JSON.stringify(data);

​

        const success = JSON.parse(myObjStr).success;

​

        const status = JSON.parse(myObjStr).status;

​

        const message = JSON.parse(myObjStr).message;

​

        if (success === true && status === 'CustomersList') {

          const dataCustomer = JSON.parse(myObjStr).customerData;

          const customerListData = JSON.stringify(dataCustomer);

          const jsonArray = JSON.parse(customerListData);

​

          arrayClientData = [];

          for (var i = 0; i < jsonArray.length; i++) {

​

            const j = {

              check: <MDBInput label=' ' type='checkbox' id={'checkbox' + i} onClick={contextNew.toggleCheck}

                checked={contextNew.isChecked('checkbox' + i)} />,

              name: 'Tiger Nixon' + i,

              position: 'System Architect' + i,

              office: 'Edinburgh' + i,

              age: '61',

              date: '2011/04/25',

              salary: '$320'

            };

​

            arrayClientData[i] = j;

​

          }

​

          contextNew.setState(contextNew.state);

​

        }

        else if (success === true && status === 'NoCustomers') {

​

        }

        else {

​

        }

​

​

      }).catch(err => {

        console.log("clients", "catch=>" + err);

      });

  }

​

  render() {

    const data = {

      columns: [

        {

          label: 'Check',

          field: 'check',

          sort: 'disabled',

          width: 20

        },

        {

          label: 'Name',

          field: 'name',

          sort: 'asc',

          width: 150

        },

        {

          label: 'Position',

          field: 'position',

          sort: 'asc',

          width: 270

        },

        {

          label: 'Office',

          field: 'office',

          sort: 'asc',

          width: 200

        },

        {

          label: 'Age',

          field: 'age',

          sort: 'asc',

          width: 100

        },

        {

          label: 'Start date',

          field: 'date',

          sort: 'asc',

          width: 150

        },

        {

          label: 'Salary',

          field: 'salary',

          sort: 'asc',

          width: 100

        }

      ],

      rows: arrayClientData

    };

​

    return <MDBDataTable striped bordered hover data={data} />;

  }

}

​

export default App;

​

​

​