added checkout button to navbar

src/App.js

@@ -75,15 +75,25 @@ const App = () => {
           <Nav.Link>
               <Link to="/library" exact={true}>Video Library</Link>
           </Nav.Link>
+
+          <Nav.Link>
+            Selected Video: {selectedVideo &&(selectedVideo.title)}
+          </Nav.Link>
+
+          <Nav.Link>
+            Selected Customer: {selectedCustomer &&(selectedCustomer.name)}
+          </Nav.Link>
+
+          <Nav.Link>
+          {selectedVideo && selectedCustomer ? 
+            <button className="customer-button" onClick={() => addRental()}>
+                Checkout
+            </button> : ''}
+          </Nav.Link>
+
           </Nav>
         </Navbar>
 
-      <SelectedVideo video={selectedVideo}/>
-      <SelectedCustomer customer={selectedCustomer}/>
-
-        {/* <VideoLibrary/> */}
-        {/* <SelectedVideo video={selectedVideo}/> */}
-
 
         <Switch>
           <Route exact={true} path="/">
@@ -103,6 +113,10 @@ const App = () => {
             <Detail />
           </Route>
         </Switch>
+
+        <SelectedVideo video={selectedVideo}/>
+        <SelectedCustomer customer={selectedCustomer}/>
+
       </Router>
     </div>
   );

src/components/CustomerList.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import Select from 'react-select';
 import axios from 'axios'
 
+import {Container} from 'react-bootstrap'
+
 const CustomerList = (props) => {
 
   const allCustomersURL = 'http://localhost:3000/customers'
@@ -26,6 +28,7 @@ const CustomerList = (props) => {
 
     return (
       <div>
+        <Container>
           <h3>All Customers</h3>
           <h4>Search or Select a Customer: </h4>
 
@@ -41,6 +44,7 @@ const CustomerList = (props) => {
                     };
                     })}
                 /> 
+        </Container>
       </div>
   )  
 }

src/components/VideoLibrary.js

@@ -2,7 +2,7 @@ import {React, useState, useEffect} from 'react'
 import Select from 'react-select'
 import PropTypes from 'prop-types'
 import axios from 'axios';
-
+import {Container} from 'react-bootstrap'
 
 
 const VideoLibrary = (props) => {
@@ -34,6 +34,7 @@ const VideoLibrary = (props) => {
 
     return (
         <div>
+            <Container>
             <h3>Video Library</h3>
             <h4>Search or Select a Video: </h4>
                 <Select
@@ -48,17 +49,7 @@ const VideoLibrary = (props) => {
                     };
                     })}
                 />  
-                {props.selectedVideo && props.selectedCustomer ? 
-                    <button
-                    className="customer-button"
-                    onClick={() => props.addRental()}
-
-                  >
-                    {''}
-                    Checkout
-                  </button>
-                  : ''
-}
+            </Container>
         </div>
     )
 }