Ren + Blaine = Fire

src/App.js

@@ -18,39 +18,22 @@ function App() {
 
   const BASE_URL = 'http://localhost:3000'
 
-//   const searchVideo = (searchQuery) => { 
+  const [ selectedCustomer, setSelectedCustomer ] = useState(null)
+  const [ selectedVideo, setSelectedVideo ] = useState(null)
 
-    axios.get(`${BASE_URL}/videos?query=${searchQuery}`)
-    .then((response) => {
-      console.log(response.data);
-      //  response.data;
-      // console.log(apiCustomerResponse[0].name)
-      // Set the state
-      setSearchResultList(response.data);
-    })
-    .catch((error) => {
-      // setErrorMessage(error.message);
-      // console.log(error.message);
-    });
-  };
 
-  //   {
-  //     searchResultComponentArray.push(
-  //       <SearchResult
-  //           key={result.id}
-  //           id={result.id}
-  //           title={result.title}
-  //           overview={result.overview}
-  //           releaseDate={result.release_date}
-  //           externalId={result.external_id}
-  //           imageUrl={result.image_url}
-  //           // onClickCallback={onButtonClick}
-  //       />
-  //     )
-  //   }
 
-  //   return searchResultComponentArray;
-  // }; 
+  // select function - what is used to id whats been selected
+  const selectCustomer = (customer) => {
+    setSelectedCustomer(customer) }
+  const selectVideo = (video) => {
+    setSelectedVideo(video)
+  }
+
+
+  // return display of selected Cust/Vid
+  // rental button - triggers event that posts to checkout
+
 
   return (
     <Router>
@@ -66,6 +49,10 @@ function App() {
           <button type="button" class="btn btn-outline-danger"><Link to="/library">Video Library</Link></button>
           <button type="button" class="btn btn-outline-danger"><Link to="/customers">Customer Index</Link></button>
           <button type="button" class="btn btn-outline-danger"><Link to="/search">Search</Link></button>
+          <ul>
+            <li>{selectedCustomer && selectedCustomer.name} </li>
+            <li>{selectedVideo && selectedVideo.title}</li>
+          </ul>
           </span>
           <br></br><br></br>
           <img src={divider} className="divider" alt="stars divider" />
@@ -77,10 +64,10 @@ function App() {
             <Home />
           </Route>
           <Route path="/library">
-            <Videos baseUrl={BASE_URL}/>
+            <Videos baseUrl={BASE_URL} selectedVideoCallback={selectVideo}/>
           </Route>
           <Route path="/customers">
-            <Customers baseUrl={BASE_URL}/>
+            <Customers baseUrl={BASE_URL} selectedCustomerCallback={selectCustomer}/>
           </Route>
           <Route path="/checkout">
             <h1>Checkout Deets Will Go Here</h1>

src/components/Customer.js

@@ -1,12 +1,13 @@
 const Customer = (props) => {
+  const customer = props.customer
   return (
 
     <tr class="table-active">
-        <th scope="row">{props.name}</th>
-        <td>{props.phone}</td>
-        <td>{props.accountCredit}</td>
-        <td>{props.videosCheckedOutCount}</td>
-        <td><button type="button" class="btn btn-outline-primary">Select!</button></td>
+        <th scope="row">{customer.name}</th>
+        <td>{customer.phone}</td>
+        <td>${customer.account_credit}</td>
+        <td>{customer.videos_checked_out_count}</td>
+        <td><button onClick={() => (props.selectedCustomerCallback(customer))} className="btn btn-outline-primary">Select!</button></td>
     </tr>
 )
 }

src/components/Customers.js

@@ -2,24 +2,15 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import Customer from './Customer';
 
-// import logo from './logo.svg';
-// import './App.css';
-
 const Customers = (props) => {
 
   const [customersList, setCustomersList] = useState([]);
   const [errorMessage, setErrorMessage] = useState(null);
 
-  // const CUSTOMER_URL = 'http://localhost:3000/customers'
-  // const CUSTOMER_URL = `${props.baseUrl}/customers` //this doesn't work yet??
-
   useEffect(() => {
     axios.get(`${props.baseUrl}/customers`)
       .then((response) => {
-        // console.log(response.data);
         const railsCustomerList = response.data;
-        // console.log(apiCustomerResponse[0].name)
-        // Set the state
         setCustomersList(railsCustomerList);
       })
       .catch((error) => {
@@ -34,17 +25,10 @@ const Customers = (props) => {
     {
       customerComponentArray.push(
         <Customer
-            key={customer.id}
-            id={customer.id}
-            name={customer.name}
-            registeredAt={customer.registered_at}
-            address={customer.address}
-            city={customer.city}
-            state={customer.state}
-            postalCode={customer.postal_code}
-            phone={customer.phone}
-            accountCredit={customer.account_credit}
-            videosCheckedOutCount={customer.videos_checked_out_count}
+          key={customer.id}
+          customer={customer}
+          selectedCustomerCallback={props.selectedCustomerCallback}
+
         />
       )
     }

src/components/Home.js

@@ -18,9 +18,9 @@ const Home = () => {
       </section>
       <br></br>
       <h4><em>New Releases Coming Soon!</em></h4>
-      <img src={poster1} className="poster" alt="10 Things Movie Poster" />
+      <img src={poster1} className="poster" alt="Space Jam Movie Poster" />
       <img src={poster2} className="poster" alt="10 Things Movie Poster" />
-      <img src={poster3} className="poster" alt="10 Things Movie Poster" />
+      <img src={poster3} className="poster" alt="She's All That Movie Poster" />
       <section className="spacer" />
     </div>  
   )

src/components/SearchBar.js

@@ -12,9 +12,6 @@ const SearchBar = (props) => {
         axios.get(`${props.baseUrl}/videos?query=${searchQuery}`)
         .then((response) => {
           console.log(response.data);
-          //  response.data;
-          // console.log(apiCustomerResponse[0].name)
-          // Set the state
           setSearchResultList(response.data);
         })
         .catch((error) => {
@@ -24,20 +21,6 @@ const SearchBar = (props) => {
 
     };
 
-    const addVideo = (id) => {
-        axios.post(`${props.baseUrl}/videos/${id}`)
-          .then((response) => {
-            // What should we do when we know the post request worked?
-            console.log(response)
-            // const updatedData = [...studentList, response.data];
-            // setStudentList(updatedData);
-            // setErrorMessage('');
-          })
-          .catch((error) => {
-            // What should we do when we know the post request failed?
-            // setErrorMessage(error.message);
-          });
-      }
 
     const generateSearchResults = (searchResults) => {
     let searchResultComponentArray = [];
@@ -48,13 +31,8 @@ const SearchBar = (props) => {
         searchResultComponentArray.push(
         <SearchResult
             key={result.id}
-            id={result.id}
-            title={result.title}
-            overview={result.overview}
-            releaseDate={result.release_date}
-            externalId={result.external_id}
-            imageUrl={result.image_url}
-            // onClickCallback={onButtonClick}
+            video={result}
+            baseUrl={props.baseUrl}
         />
         )
     }

src/components/SearchResult.js

@@ -1,11 +1,31 @@
+import axios from 'axios';
+
 const SearchResult = (props) => {
+const { video } = props
+const addVideo = () => {
+console.log(video)
+console.log(props.baseUrl)
+  axios.post(`${props.baseUrl}/videos`, video)
+    .then((response) => {
+      // What should we do when we know the post request worked?
+      console.log(response)
+      // const updatedData = [...studentList, response.data];
+      // setStudentList(updatedData);
+      // setErrorMessage('');
+    })
+    .catch((error) => {
+      // What should we do when we know the post request failed?
+      // setErrorMessage(error.message);
+    });
+}
+
     return (
 
         <tr class="table-active">
-            <th scope="row"><img src={props.imageUrl} className="w-75" alt="poster" /></th>
-            <th scope="row">{props.overview}</th>
-            <td>{props.releaseDate}</td>
-            <td><button type="button" class="btn btn-outline-primary">Add!</button></td>
+            <th scope="row"><img src={video.image_url} className="w-75" alt="poster" /></th>
+            <th scope="row">{video.title}</th>
+            <td>{video.release_date}</td>
+            <td><button onClick={addVideo} class="btn btn-outline-primary">Add!</button></td>
         </tr>
     )
   }

src/components/Video.js

@@ -1,11 +1,11 @@
 const Video = (props) => {
+  const video = props.video
     return (
-
         <tr class="table-active">
-            <th scope="row"><img src={props.imageUrl} className="w-75" alt="poster" /></th>
-            <th scope="row">{props.overview}</th>
-            <td>{props.releaseDate}</td>
-            <td><button type="button" class="btn btn-outline-primary">Select!</button></td>
+            <th scope="row"><img src={video.image_url} className="w-75" alt="poster" /></th>
+            <th scope="row">{video.title}</th>
+            <td>{video.release_date}</td>
+            <td><button onClick={() => (props.selectedVideoCallback(video))} className="btn btn-outline-primary">Select!</button></td>
         </tr>
     )
   }

src/components/Videos.js

@@ -2,23 +2,15 @@ import React, { useEffect, useState } from 'react';
 import axios from 'axios';
 import Video from './Video';
 
-// import logo from './logo.svg';
-// import './App.css';
-
 const Videos = (props) => {
 
   const [videoList, setVideosList] = useState([]);
   const [errorMessage, setErrorMessage] = useState(null);
-
-  // const VIDEO_URL = 'http://localhost:3000/videos'
 
   useEffect(() => {
     axios.get(`${props.baseUrl}/videos`)
       .then((response) => {
-        // console.log(response.data);
         const railsVideoList = response.data;
-        // console.log(apiCustomerResponse[0].name)
-        // Set the state
         setVideosList(railsVideoList);
       })
       .catch((error) => {
@@ -34,12 +26,8 @@ const Videos = (props) => {
     videoComponentArray.push(
       <Video
           key={video.id}
-          id={video.id}
-          title={video.title}
-          overview={video.overview}
-          releaseDate={video.release_date}
-          imageUrl={video.image_url}
-          externalId={video.externalId}
+          video={video}
+          selectedVideoCallback={props.selectedVideoCallback}
       />
     )
   }