restructure axios get higher up to access state, and brings selected …

…customer and movie to the top level, sort of
kaseea · Jun 26, 2019 · 32ae56f · 32ae56f
1 parent 0f4b6b8
commit 32ae56f
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 167 deletions.
diff --git a/src/App.js b/src/App.js
@@ -9,16 +9,7 @@ import './App.css';
 
 class App extends Component {
 
-  constructor() {
-    super();
 
-    this.state = {
-      movies: [],
-      errorMessage: null,
-      customers: [],
-
-    };
-  }
 
   // addCardCallback = (card) => {
   //   console.log(card.text);
@@ -51,25 +42,6 @@ class App extends Component {
   //   });
   // }
 
-  // componentDidMount() {
-  //   // const localUrl = this.props.url + this.props.boardName + "/cards"
-  //   const localUrl = 'http://localhost:3007/customers'
-  //   console.log(localUrl);
-  //   // is this needed and why?
-  //   // const cards = this.state.cards
-  //   axios.get(localUrl)
-  //     .then((response) => {
-  //       // console.log("in axios!");
-  //       // console.log(response.data)
-  //       this.setState({ 
-  //         cards: response.data,
-  //       })
-  //     })
-  //     .catch((error) => {
-  //       this.setState({ errorMessage: error.message });
-  //     });
-  // }
-
 
 
   render() {
@@ -90,13 +62,6 @@ class App extends Component {
 
 
 
-        {/*
-           It's possible to use regular expressions to control what param values should be matched.
-              * "/order/asc"  - matched
-              * "/order/desc" - matched
-              * "/order/foo"  - not matched
-        */}
-
       </div>
     </Router>
     );

diff --git a/src/components/Customer.js b/src/components/Customer.js
@@ -21,8 +21,16 @@ class Customer extends Component {
   render() {
     return (
       <div>
-        { console.log(this.props.customer) }
+
+
         <p>{this.props.customer.name}</p>
+        <p>{this.props.customer.id}</p>
+        <button 
+        // { console.log(this.props.customer.id) }
+            // onClick = {() => console.log(this.props)}>
+            onClick = {() => this.props.onSelectCustomerCallback(this.props.customer.id) }>
+            Select
+        </button>
       </div>
     )
   }

diff --git a/src/components/CustomerCollection.js b/src/components/CustomerCollection.js
@@ -10,52 +10,23 @@ class CustomerCollection extends Component {
     constructor(props) {
         super(props);
 
-        this.state = {
-          customers: [],
-        };
     }
 
 
-componentDidMount() {
-    // const localUrl = this.props.url + this.props.boardName + "/cards"
-    const localUrl = 'http://localhost:3007/customers'
-    console.log(localUrl);
-    // is this needed and why?
-    // const cards = this.state.cards
-    axios.get(localUrl)
-        .then((response) => {
-        console.log("in axios!");
-        console.log(response.data)
-        this.setState({ 
-
-          customers: response.data,
-            })
-        })
-        .catch((error) => {
-        this.setState({ errorMessage: error.message });
-        });
-    }
-
-
-
-
   render() {
-      const customerComponents = this.state.customers.map((customer, i) => {
-          console.log(customer)
+      const customerComponents = this.props.customers.map((customer, i) => {
         return (
             <div key={i}>
-            {/* { console.log(customer)} */}
-
-                <Customer customer={customer}/> 
+                <Customer 
+                customer={customer}
+                onSelectCustomerCallback={this.props.onSelectCustomerCallback}
+                /> 
             </div>
         )
     });
 
     return (
         <section>
-          <p>{this.state.message}</p>
-
-
           <ul>
             {customerComponents}
           </ul>

diff --git a/src/components/Library.js b/src/components/Library.js
@@ -4,54 +4,25 @@ import axios from 'axios';
 
 
 class Library extends Component {
-
     constructor(props) {
-        super(props);
-
-        this.state = {
-          movies: [],
-        };
-    }
-
-
-componentDidMount() {
-    // const localUrl = this.props.url + this.props.boardName + "/cards"
-    const localUrl = 'http://localhost:3007/movies'
-    console.log(localUrl);
-    // is this needed and why?
-    // const cards = this.state.cards
-    axios.get(localUrl)
-        .then((response) => {
-        console.log("in axios!");
-        console.log(response.data)
-        this.setState({ 
-
-          movies: response.data,
-            })
-        })
-        .catch((error) => {
-        this.setState({ errorMessage: error.message });
-        });
+        super(props);    
     }
 
-
-
-
   render() {
-      const movieComponents = this.state.movies.map((movie, i) => {
-          console.log(movie)
+      const movieComponents = this.props.movies.map((movie, i) => {
         return (
             <div key={i}>
                 <p>{movie.title}</p>
+                <button 
+            onClick = {() => this.props.onSelectMovieCallback(movie.id) }>
+            Select
+        </button>
             </div>
         )
     });
 
     return (
         <section>
-          <p>{this.state.message}</p>
-
-
           <ul>
             {movieComponents}
           </ul>
@@ -60,16 +31,6 @@ componentDidMount() {
   }
 }
 
-// render() {
-//     return (
-//         <div>
-//         { console.log(this.props.customer) }
-//         <h2>THIS IS A MOVIE</h2>
-//         </div>
-//     )
-//     }
-// }
-
 Library.propTypes = {
 
 };

diff --git a/src/components/NavBar.js b/src/components/NavBar.js
@@ -9,70 +9,100 @@ import Search from './Search';
 import './NavBar.css';
 
 class NavBar extends Component {
+    constructor() {
+        super();
+
+        this.state = {
+          movies: [],
+          errorMessage: null,
+          customers: [],
+          selectedCustomer: null,
+          selectedMovie: null,
+        };
+      }
 
-    // componentDidMount() {
-    //     // const localUrl = this.props.url + this.props.boardName + "/cards"
-    //     const localUrl = 'http://localhost:3007/customers'
-    //     console.log(localUrl);
-    //     // is this needed and why?
-    //     // const cards = this.state.cards
-    //     axios.get(localUrl)
-    //       .then((response) => {
-    //         console.log("in axios!");
-    //         console.log(response.data)
-    //         // this.setState({ 
-    //         //   cards: response.data,
-    //         // })
-    //       })
-    //       .catch((error) => {
-    //         this.setState({ errorMessage: error.message });
-    //       });
-    //   }
+    onSelectCustomer = (customerId) => {
+        // console.log(this.state.customers)
+        // console.log(customerId);
+        const customer = this.state.customers.find(customer => customer.id === customerId)
+        console.log(customer);
+        this.setState({
+            selectedCustomer: customer
+        });
+    }
 
-
+    onSelectMovie = (movieId) => {
+        // console.log(this.state.movies)
+        // console.log(movieId);
+        const movie = this.state.movies.find(movie => movie.id === movieId)
+        console.log(movie);
+        this.setState({
+            selectedMovie: movie
+        });
+    }
+
+    componentDidMount() {
+        // const localUrl = this.props.url + this.props.boardName + "/cards"
+        const localUrl = 'http://localhost:3007/movies'
+        console.log(localUrl);
+        // is this needed and why?
+        // const cards = this.state.cards
+        axios.get(localUrl)
+            .then((response) => {
+            console.log("in axios!");
+            console.log(response.data)
+            this.setState({ 
+
+              movies: response.data,
+                })
+            })
+            .catch((error) => {
+            this.setState({ errorMessage: error.message });
+            });
+        const localUrl2 = 'http://localhost:3007/customers'
+        // is this needed and why?
+        // const cards = this.state.cards
+        axios.get(localUrl2)
+            .then((response) => {
+            console.log("in axios!");
+            console.log(response.data)
+            let updatedCustomers = response.data;
+                this.setState({             
+                    customers: updatedCustomers,
+                })
+            })
+            .catch((error) => {
+            this.setState({ errorMessage: error.message });
+            });
+
+    }
 
-  render() {
-    function Child({ match }) {
-        return (
-          <div>
-            <h3>ID: {match.params.id}</h3>
-            <p>awesome, we're getting { match.params.id } by typing in match.params.id </p>
-          </div>
-        );
-      }
 
-      function ComponentWithRegex({ match }) {
-        return (
-          <div>
-            <h3>Only asc/desc are allowed: {match.params.direction}</h3>
-          </div>
-        );
-      }
 
-      function onShowCustomers({ match }) {
-          return (
-            <div>
-            {console.log({ match })}
-            {console.log("POOOP")}
-              <h3>please pleeeeease</h3>
-            </div>
-          );
-      }
+  render() {
     return (
     <Router>
       <div>
-        <li onClick={onShowCustomers}>{this.props.allMovies} </li>
+        <li>{this.props.allMovies} </li>
         <li>{this.props.allCustomers}</li>
         <li>{this.props.search}</li>
       </div>
-      <Route path="/:id" component={Child} />
-      <Route path="/customers/" component={CustomerCollection} />
-      <Route path="/library/" component={Library} />
+      <Route path="/customers/" render={(props) => (
+          <CustomerCollection 
+          onSelectCustomerCallback={this.onSelectCustomer}
+          customers={this.state.customers}
+          />
+      )}/>
+
+      <Route path="/library/" render={(props) => (
+          <Library
+          onSelectMovieCallback={this.onSelectMovie}
+          movies={this.state.movies} 
+          />
+      )}/>
       <Route path="/search/" component={Search} />
-      <Route
-      path="/order/:direction(asc|desc)"
-      component={ComponentWithRegex}
-        />
+
+
 
     </Router>
     )