Earth - Sophie & Kal

package.json

@@ -3,7 +3,9 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "bootstrap": "^4.6.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/App.css

@@ -1,5 +1,5 @@
 .App {
-  text-align: center;
+  text-align: left;
 }
 
 .App-logo {

src/App.js

@@ -1,7 +1,8 @@
 import React, { Component, useState } from 'react';
-import logo from './logo.svg';
 import './App.css';
 import axios from 'axios'
+import 'bootstrap/dist/css/bootstrap.min.css';
+import {Nav, Navbar} from 'react-bootstrap'
 
 import CustomerList from './components/CustomerList';
 import VideoLibrary from './components/VideoLibrary';
@@ -13,7 +14,7 @@ import {
   BrowserRouter as Router,
   Route,
   Switch,
-  Link
+  Link,
 } from 'react-router-dom';
 import Detail from './components/Detail';
 
@@ -57,36 +58,36 @@ const App = () => {
 
     return (
 
-      <Router>
-
+      <div className="App">
+      <Router> 
+
+        <Navbar bg="dark">
+          <Nav>
+          <Nav.Link>
+            <Link to="/" exact={true}>Video Store</Link>
+          </Nav.Link>
+          <Nav.Link>
+              <Link to="/search" exact={true}>Search</Link>
+          </Nav.Link>
+          <Nav.Link>
+              <Link to="/customers" exact={true}>Customers</Link>
+          </Nav.Link>
+          <Nav.Link>
+              <Link to="/library" exact={true}>Video Library</Link>
+          </Nav.Link>
+          </Nav>
+        </Navbar>
+
       <SelectedVideo video={selectedVideo}/>
       <SelectedCustomer customer={selectedCustomer}/>
 
         {/* <VideoLibrary/> */}
         {/* <SelectedVideo video={selectedVideo}/> */}
-      <div>
-        <nav>
-          <ul>
-            <li>
-              <Link to="/" exact={true}>Home</Link>
-            </li>
-            <li>
-              <Link to="/search">Search</Link>
-            </li>
-            <li>
-              <Link to="/customers" exact={'true'}>Customers</Link>
-            </li>
-            <li>
-              <Link to="/library" exact={true}>Video Library</Link>
-            </li>
-          </ul>
-        </nav>
-
-        {/* A <Switch> looks through its children <Route>s and
-            renders the first one that matches the current URL. */}
+
+
         <Switch>
           <Route exact={true} path="/">
-            {/* <Home /> */}
+            <p>Homepage!</p>
           </Route>
           <Route path="/search">
             <Search />
@@ -102,11 +103,10 @@ const App = () => {
             <Detail />
           </Route>
         </Switch>
-      </div>
-    </Router>
+      </Router>
+    </div>
   );
 
-
-          }
+}
 
 export default App;

src/components/CustomerList.js

@@ -21,8 +21,8 @@ const CustomerList = (props) => {
       .catch((error) => {
           setErrorMessage(error.message);
           console.log(errorMessage);
+        }, []);
       });
-  }, []);
 
     return (
       <div>

src/components/SelectedVideo.js

@@ -1,8 +1,5 @@
-import {React, useState, useEffect} from 'react'
-import Select from 'react-select'
-import PropTypes from 'prop-types'
-import axios from 'axios'
-import VideoLibrary from './VideoLibrary'
+import React from 'react'
+import { Container, Row, Col} from 'react-bootstrap'
 
 
 const SelectedVideo = (props) => {
@@ -12,10 +9,18 @@ const SelectedVideo = (props) => {
     return(
         video &&(
         <div>
-            <h3>{video.title}</h3>
-            <p>{video.overview}</p>
-            <p>Released: {video.release_date}</p>
-            <img src={video.image_url} />
+            <Container>
+                <Row>
+                    <Col md={2}>
+                        <img src={video.image_url} />
+                    </Col>
+                    <Col md={4}>
+                        <h4>{video.title}</h4>
+                        <p>Released: {video.release_date}</p>
+                        <p>{video.overview}</p>
+                    </Col>
+                </Row>
+            </Container>
         </div>
         ))
     }

src/index.js

@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import registerServiceWorker from './registerServiceWorker';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
 
 ReactDOM.render(<App />, document.getElementById('root'));
 registerServiceWorker();