From 6e9e61c2fc2421a5d260bdcb380aa26cf5592132 Mon Sep 17 00:00:00 2001
From: Kaitlin Forsman <kcforsman@outlook.com>
Date: Mon, 18 Jun 2018 16:26:25 -0700
Subject: [PATCH] added logic to CustomerList to make api call to retrieve list
 of customers from our Rails api, and installed axios to package.json

---
 package-lock.json                 |  9 +++++
 package.json                      |  1 +
 src/App.js                        |  9 +----
 src/components/Customer.js        | 20 ++++++++++
 src/components/CustomerDetails.js | 19 +++++++++
 src/components/CustomerList.js    | 65 +++++++++++++++++++++++++++++++
 6 files changed, 116 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 79f52b34f..2bdc7a2f0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -434,6 +434,15 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.7.0.tgz",
       "integrity": "sha512-32NDda82rhwD9/JBCCkB+MRYDp0oSvlo2IL6rQWA10PQi7tDUM3eqMSltXmY+Oyl/7N3P3qNtAlv7X0d9bI28w=="
     },
+    "axios": {
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz",
+      "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=",
+      "requires": {
+        "follow-redirects": "1.5.0",
+        "is-buffer": "1.1.6"
+      }
+    },
     "axobject-query": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-0.1.0.tgz",
diff --git a/package.json b/package.json
index 120e3bd86..b5d697449 100644
--- a/package.json
+++ b/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"
diff --git a/src/App.js b/src/App.js
index 203067e4d..731b99dda 100644
--- a/src/App.js
+++ b/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>
     );
   }
diff --git a/src/components/Customer.js b/src/components/Customer.js
index e69de29bb..495ef0fb2 100644
--- a/src/components/Customer.js
+++ b/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;
diff --git a/src/components/CustomerDetails.js b/src/components/CustomerDetails.js
index e69de29bb..78b518956 100644
--- a/src/components/CustomerDetails.js
+++ b/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;
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
index e69de29bb..673278877 100644
--- a/src/components/CustomerList.js
+++ b/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;