added logic to CustomerList to make api call to retrieve list of cust…

…omers from our Rails api, and installed axios to package.json

package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "axios": "^0.18.0",
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "1.1.4"

src/App.js

@@ -1,18 +1,13 @@
 import React, { Component } from 'react';
 import logo from './logo.svg';
 import './App.css';
+import CustomerList from './components/CustomerList';
 
 class App extends Component {
   render() {
     return (
       <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+        <CustomerList />
       </div>
     );
   }

src/components/Customer.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import './Customer.css';
+import CustomerDetails from './CustomerDetails';
+
+class Customer extends Component {
+  render() {
+
+    return (
+      <section>
+      </section>
+    )
+  }
+
+}
+
+
+export default Customer;

src/components/CustomerDetails.js

@@ -0,0 +1,19 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import './CustomerDetails.css';
+
+class CustomerDetails extends Component {
+  render() {
+
+    return (
+      <section>
+      </section>
+    )
+  }
+
+}
+
+
+export default CustomerDetails;

src/components/CustomerList.js

@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import axios from 'axios';
+
+import './CustomerList.css';
+import Customer from './Customer';
+
+class CustomerList extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      customers: []
+    }
+  }
+
+  componentDidMount() {
+    axios.get("http://localhost:3000/customers")
+      .then((response) => {
+        const customers = this.state.customers;
+        response.data.forEach((customer) => {
+          const newCustomer = {};
+          newCustomer.id = customer.id;
+          newCustomer.name = customer.name;
+          newCustomer.phone = customer.phone;
+          newCustomer.account_credit = customer.account_credit;
+          customers.push(newCustomer);
+        })
+
+        this.setState({ customers })
+      })
+      .catch((error) => {
+        this.setState({ message: error.message})
+      });
+  }
+
+  seeState = () => {
+    console.log(this.state.customers)
+  }
+  render() {
+    const customerComponents = this.state.customers.map( (customer) => {
+      return(
+        <li key={ customer.id }>
+          <Customer
+            id={customer.id}
+            name={customer.name}
+            phone={customer.phone}
+            credit={customer.account_credit}
+          />
+        </li>)
+    });
+    return (
+       <section>
+         <h3>Find Customer</h3>
+         <ul>
+           { customerComponents }
+         </ul>
+       </section>
+    )
+  }
+
+}
+
+
+export default CustomerList;