Merge pull request #3 from gyjin/customer-page

Customer page #2
gyjin · Dec 18, 2019 · 7af0594 · 7af0594
2 parents cb3c5cc + 7095902
commit 7af0594
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 18 deletions.
diff --git a/src/App.js b/src/App.js
@@ -17,13 +17,20 @@ class App extends Component {
       allMovies: [],
       rentedMovies: [],
       searchTerm: '',
+      selectedCustomer: '',
     };    
   }
 
   searchChangeCallback = (searchTerm) => {
     this.setState({searchTerm: searchTerm});
   }
 
+  setCustomerCallback = (customer) => {
+    this.setState({
+      selectedCustomer: customer
+    });
+  }
+
   render() {
   return (
     <Router>
@@ -43,6 +50,7 @@ class App extends Component {
               <Link to="/customers">Customers</Link>
             </li>
           </ul>
+          <p>Selected customer:{this.state.selectedCustomer.name}</p>
         </nav>
 
         {/* A <Switch> looks through its children <Route>s and
@@ -52,18 +60,24 @@ class App extends Component {
             <Search
               searchChangeCallback={this.searchChangeCallback}
               searchTerm={this.state.searchTerm}
-              />
-
+            />
           </Route>
+
           <Route path="/library">
             <Library />
           </Route>
+
           <Route path="/customers">
-            <Customers />
+            <CustomerCollection 
+              // setCustomerCallback={this.setCustomer}
+              setCustomerCallback={this.setCustomerCallback}
+            /> 
           </Route>
+
           <Route path="/">
             <Home />
           </Route>
+
         </Switch>
       </div>
     </Router>
@@ -76,10 +90,6 @@ function Library() {
   return <h2>This is the library page</h2>;
 }
 
-function Customers() {
-  return <CustomerCollection />;
-}
-
 function Home() {
   return <h2>This is home page</h2>;
 }

diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 const Customer = (props) => {
 
   const selectCustomer = () => {
-    console.log('this was pressed');
     props.selectCustomerCallback(props);
   }
 

diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js
@@ -8,7 +8,6 @@ class CustomerCollection extends React.Component {
 
     this.state = {
       customers: [],
-      selectedCustomer: '',
     }
   }
 
@@ -24,13 +23,8 @@ class CustomerCollection extends React.Component {
   }
 
 
-  selectCustomer = (customer) => {
-
-    this.setState({
-      selectedCustomer: customer
-    });
-
-    console.log('this was passed to collection');
+  setCustomer = (customer) => {
+    this.props.setCustomerCallback(customer);
   }
 
   makeCollection () {
@@ -45,7 +39,7 @@ class CustomerCollection extends React.Component {
         phone={customer.phone}
         accountCredit={customer.account_credit}
         moviesCheckedOutCount={customer.movies_checked_out_count}
-        selectCustomerCallback={this.selectCustomer}
+        selectCustomerCallback={this.props.setCustomerCallback}
         key={i}
       />;
     }

diff --git a/src/components/Search.js b/src/components/Search.js
@@ -22,7 +22,7 @@ class Search extends Component {
     axios.get('https://api.themoviedb.org/3/search/movie?api_key=ecf2c105ca9b748583ff93bf7cbfd7b1&query=searchTerm')
       .then((response) => {
         console.log(response.data.results);
-         this.setState({
+          this.setState({
           allMovies: response.data.results,
         });
       })