🔥Ida & Jing

package.json

@@ -3,15 +3,20 @@
   "version": "0.1.1",
   "private": true,
   "dependencies": {
+    "axios": "^0.21.1",
+    "bootstrap": "^4.6.0",
+    "node-sass": "^5.0.0",
     "react": "^17.0.1",
+    "react-bootstrap": "^1.4.3",
     "react-dom": "^17.0.1",
+    "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.1"
   },
   "devDependencies": {
-    "gh-pages": "^3.1.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.3",
-    "@testing-library/user-event": "^12.6.0"
+    "@testing-library/user-event": "^12.6.0",
+    "gh-pages": "^3.1.0"
   },
   "scripts": {
     "start": "PORT=3001 react-scripts start",

src/App.css

@@ -26,3 +26,5 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
+@import "bootstrap/dist/css/bootstrap.min.css";

src/App.js

@@ -1,21 +1,172 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { useState, useEffect } from 'react';
+import axios from 'axios';
+import VideoList from './components/VideoList';
+import SearchForm from './components/SearchForm';
+import { Route, Link } from 'react-router-dom';
+import CustomerCollection from './components/CustomerCollection';
+import NavBar from './components/NavBar';
+import Cart from './components/Cart';
+import { Container, Row, Col, Alert } from 'react-bootstrap';
 import './App.css';
+import { useLocation } from 'react-router-dom';
 
-class App extends Component {
-  render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <h1 className="App-title">Welcome to React</h1>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.js</code> and save to reload.
-        </p>
+const API_URL_BASE = 'http://localhost:3000/videos';
+
+const App = () => {
+  const [videoList, setVideoList] = useState([]);
+  const [customerList, setCustomerList] = useState([]);
+  const [errorMessage, setErrorMessage] = useState(null);
+  const [selectedCustomer, setSelectedCustomer] = useState('');
+  const [selectedVideo, setSelectedVideo] = useState('');
+  const [videoResults, setVideoResults] = useState([]);
+
+  useEffect(() => {
+    axios
+      .get(API_URL_BASE)
+      .then((response) => {
+        const apiVideoList = response.data;
+        setVideoList(apiVideoList);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+
+    axios
+      .get('http://localhost:3000/customers')
+      .then((response) => {
+        const apiCustomerList = response.data;
+        console.log(apiCustomerList);
+        setCustomerList(apiCustomerList);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+        console.log(error.message);
+      });
+  }, []);
+
+  const selectCustomerToCart = (customer) => {
+    setSelectedCustomer(customer);
+  };
+  const selectVideoToCart = (video) => {
+    setSelectedVideo(video);
+  };
+
+  const checkout = (customer, video) => {
+    const params = {};
+    params['customer_id'] = customer.id;
+    params['due_date'] = '2/1/2022';
+
+    console.log(params);
+    axios
+      .post(`http://localhost:3000/rentals/${video.title}/check-out`, params)
+      .then((response) => {
+        setErrorMessage(`Checkout ${video.title} to ${customer.name}.`);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+
+    setSelectedCustomer('');
+    setSelectedVideo('');
+  };
+
+  const searchVideo = (query) => {
+    axios
+      .get(`${API_URL_BASE}?query=${query}`)
+      .then((response) => {
+        const searchResults = response.data;
+        setVideoResults(searchResults);
+        setErrorMessage('');
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+  };
+
+  const selectVideo = (video) => {
+    axios
+      .post(`${API_URL_BASE}`, video)
+      .then((response) => {
+        setErrorMessage(`Succesfully added ${video.title} to the library.`);
+      })
+      .catch((error) => {
+        setErrorMessage(error.message);
+      });
+  };
+
+  return (
+    <main>
+      <header>
+        <h1>
+          <Link to={'/'}>Aloha Video Store</Link>
+        </h1>
+      </header>
+      <div>
+        <Alert variant="info">{errorMessage}</Alert>
       </div>
-    );
-  }
-}
+      <nav>
+        <NavBar location={useLocation()} />
+      </nav>
+
+      <Container>
+        <Row>
+          <Col>
+            <Route
+              exact={true}
+              path={'/'}
+              render={() => <h2>Welcome to Aloha Video Store!</h2>}
+            />
+
+            <Route
+              path={'/library'}
+              render={(props) => (
+                <VideoList
+                  {...props}
+                  videoList={videoList}
+                  selectedVideo={selectedVideo}
+                  onClickSelect={selectVideoToCart}
+                />
+              )}
+            />
+            <Route
+              path={'/customers'}
+              render={(props) => (
+                <CustomerCollection
+                  {...props}
+                  customerList={customerList}
+                  selectedCustomer={selectedCustomer}
+                  onClickSelect={selectCustomerToCart}
+                />
+              )}
+            />
+          </Col>
+          <Col md="auto"></Col>
+          <Col xs lg="2">
+            <Cart
+              customer={selectedCustomer}
+              video={selectedVideo}
+              onClickCheckout={checkout}
+            />
+          </Col>
+        </Row>
+      </Container>
+
+      <Route
+        path={'/search'}
+        render={(props) => (
+          <SearchForm
+            {...props}
+            videoList={videoList}
+            searchVideoCallback={searchVideo}
+            videoResults={videoResults}
+            videoSelectionCallback={selectVideo}
+          />
+        )}
+      />
+
+      <footer>Copyright</footer>
+    </main>
+  );
+};
 
 export default App;

src/components/Cart.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Container, Row, Col, Button, Card} from 'react-bootstrap';
+
+const Cart = (props) => {
+
+  return (
+    <div>
+      <Card>
+        <Card.Body>
+          <Card.Title>{props.customer?.name}</Card.Title>
+          <Card.Img src={props.video?.image_url} />
+          <Card.Text>{props.video?.title}</Card.Text>
+          <Button variant='primary' onClick={()=> props.onClickCheckout(props.customer,props.video)} >checkout</Button>
+        </Card.Body>
+      </Card>
+    </div>
+
+  )
+};
+
+export default Cart;

src/components/Customer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Button} from 'react-bootstrap';
+
+const Customer = (props) => {
+  const onSelectButtonClick = () => {
+    if (props.customer.name !== props.selectedCustomer?.name) {
+      props.onClickSelect(props.customer)
+    } else {
+      props.onClickSelect('')
+    };
+  };
+
+  return (
+    <tr>
+      <td>{props.customer.id}</td>
+      <td>{props.customer.name}</td>
+      <td>{props.customer.phone}</td>
+      <td><Button variant="info" onClick={onSelectButtonClick} >
+        {props.customer.name === props.selectedCustomer?.name ? 'unselect' : 'select'}
+      </Button></td>
+    </tr>
+  );
+};
+
+// Customer.PropTypes = {
+
+// };
+
+export default Customer;

src/components/CustomerCollection.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Customer from './Customer';
+import {Table} from 'react-bootstrap';
+
+const CustomerCollection = (props) => {
+
+  const customerList = props.customerList.map((customer, i) => {
+    return (
+        <Customer customer={customer} 
+            selectedCustomer={props.selectedCustomer} 
+            onClickSelect={props.onClickSelect}
+        />
+    );
+  });
+
+  return (
+    <Table striped bordered hover size="sm">
+      <thead>
+        <tr>
+          <th>#</th>
+          <th>Name</th>
+          <th>phone</th>
+          <th>select a customer</th>
+        </tr>
+      </thead>
+
+      <tbody>
+        {customerList}
+      </tbody>
+
+    </Table>
+  );
+};
+
+// CustomerCollection.PropTypes = {
+
+// };
+
+export default CustomerCollection

src/components/NavBar.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {BrowserRouter, Link} from 'react-router-dom';
+import {Row, Col, Nav} from 'react-bootstrap';
+
+const NavBar = (props) => {
+
+  return (
+    <Nav fill variant="tabs" defaultActiveKey={props.location?.pathname}>
+      <Nav.Item>
+        <Nav.Link as={Link} to="/library">all videos</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link as={Link} to="/customers">all customers</Nav.Link>
+      </Nav.Item>
+      <Nav.Item>
+        <Nav.Link as={Link} to="/search">search for a video</Nav.Link>
+      </Nav.Item>
+    </Nav>
+  );
+};
+
+export default NavBar;

src/components/SearchForm.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+
+const Search = (props) => {
+  const [title, setTitle] = useState('');
+
+  const onFormSubmit = (event) => {
+    event.preventDefault();
+
+    props.searchVideoCallback(title);
+    setTitle('');
+  };
+
+  const renderVideoDetails = () => {
+    return props.videoResults.map((result) => (
+      <>
+        <div> title: {result.title} </div>
+        <div> overview: {result.overview} </div>
+        <div> release date: {result.release_date} </div>
+        <button onClick={() => props.videoSelectionCallback(result)}>
+          Add to Library
+        </button>
+      </>
+    ));
+  };
+
+  return (
+    <div>
+      <form
+        className="new-search-form"
+        onSubmit={onFormSubmit}
+        data-testid="NewSearchForm--form"
+      >
+        <div>
+          <label htmlFor="text">Title:</label>
+          <input
+            id="title"
+            name="title"
+            onChange={(event) => setTitle(event.target.value)}
+            value={title}
+            className="title"
+          />
+        </div>
+        <input type="submit" value="Find Video" />
+      </form>
+      <p> {renderVideoDetails()} </p>
+    </div>
+  );
+};
+export default Search;

src/components/Video.css

@@ -0,0 +1,3 @@
+.video-details {
+  list-style-type: none;
+}