diff --git a/package.json b/package.json
index 9cafb5214..f8fc0eb8c 100644
--- a/package.json
+++ b/package.json
@@ -3,15 +3,17 @@
"version": "0.1.1",
"private": true,
"dependencies": {
+ "axios": "^0.21.1",
"react": "^17.0.1",
"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",
diff --git a/src/ApiSupport.js b/src/ApiSupport.js
new file mode 100644
index 000000000..906e3d5c1
--- /dev/null
+++ b/src/ApiSupport.js
@@ -0,0 +1,9 @@
+import axios from 'axios'
+
+const BASE_URL = 'http://localhost:3000';
+
+const API = axios.create({
+ baseURL: BASE_URL,
+});
+
+export default API;
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
index c5c6e8a68..bf07687e9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,6 +22,37 @@
font-size: large;
}
+.App-cart {
+ float: right;
+ width: 25%;
+ border: 1px solid black;
+ border-radius: 5px;
+ margin-bottom: 12px;
+ padding: 20px;
+}
+
+.Nav-bar {
+ list-style-type: none;
+ margin: 0;
+ overflow: hidden;
+ background-color: 000000;
+ display: block;
+ color: white;
+ text-align: center;
+ padding: 14px 16px;
+ text-decoration: none;
+}
+
+li {
+ float: left;
+ display: inline;
+ float: left;
+ width: 25.0%;
+ color: white;
+ font-size: large;
+
+}
+
@keyframes App-logo-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
diff --git a/src/App.js b/src/App.js
index 203067e4d..99ac2ad2b 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,21 +1,112 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
+import React, { Component, useState, useEffect } from 'react';
import './App.css';
+import {
+ BrowserRouter as Router,
+ Switch,
+ Route,
+ Link
+} from 'react-router-dom';
+import Home from './components/Home';
+import Library from './components/Library';
+import Search from './components/Search';
+import CustomerList from './components/CustomerList';
+import Customer from './components/Customer';
+import API from './ApiSupport'
+import './components/Library.css';
-class App extends Component {
- render() {
- return (
-
-
- 
- Welcome to React
-
-
- To get started, edit src/App.js and save to reload.
-
-
+
+
+
+ {selectedCustomer && selectedVideo ? : null}
+ {/* */}
+ {selectedCustomer !== null ? selectedCustomer.name : 'Select a customer' }
+ {selectedVideo !== null ? selectedVideo.title : ` \n Select a video` }
+
+
+ {/* A
looks through its children s and
+ renders the first one that matches the current URL. */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {props.name}
+ )
+}
+
+export default Customer;
\ No newline at end of file
diff --git a/src/components/CustomerList.js b/src/components/CustomerList.js
new file mode 100644
index 000000000..5c83c0954
--- /dev/null
+++ b/src/components/CustomerList.js
@@ -0,0 +1,58 @@
+import React, { useState, useEffect } from 'react';
+// import axios from 'axios';
+import API from '../ApiSupport'
+import Customer from './Customer';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+
+const CustomerList = (props) => {
+ // initially empty but changes during component's life cycle when API is called
+ const [customerList, setCustomerList] = useState([]);
+ const [errorMessage, setErrorMessage] = useState(null);
+
+ useEffect(() => {
+ API.get(`customers`)
+ .then((response) => {
+ const apiCustomerList = response.data;
+ setCustomerList(apiCustomerList);
+ })
+ .catch((error) => {
+ setErrorMessage('Could not retrieve customers');
+ });
+ }, []);
+
+ const customerComponents = customerList.map((customer) => {
+ return (
+ errorMessage == null ?
+ props.onCustomerSelected(customer)}>
+
+
+ : errorMessage
+ )
+ })
+
+ return (
+
+ {customerComponents}
+
+ )
+}
+
+
+CustomerList.propTypes = {
+ onClickCustomer: PropTypes.func.isRequired,
+ name: PropTypes.string.isRequired,
+}
+
+export default CustomerList;
\ No newline at end of file
diff --git a/src/components/Home.js b/src/components/Home.js
new file mode 100644
index 000000000..ad439c9e7
--- /dev/null
+++ b/src/components/Home.js
@@ -0,0 +1,8 @@
+import React from 'react';
+
+const Home = () => {
+ return 
+
+ {videoComponents}
+
+ )
+}
+
+export default Library;
\ No newline at end of file
diff --git a/src/components/Search.js b/src/components/Search.js
new file mode 100644
index 000000000..3822627e7
--- /dev/null
+++ b/src/components/Search.js
@@ -0,0 +1,53 @@
+import React, { useState, useEffect } from 'react';
+import API from '../ApiSupport'
+import SearchItem from './SearchItem';
+
+
+const Search = (props) => {
+ const [searchList, setSearchList] = useState([]);
+ const [errorMessage, setErrorMessage] = useState(null);
+
+ const search = (event) => {
+ let query = event.target.value;
+ API.get(`videos?query=${query}`)
+ .then((response) => {
+ const searchList = response.data;
+ setSearchList(searchList);
+ })
+ .catch((error) => {
+ setErrorMessage('Could not retrieve videos');
+ });;
+ }
+
+ return (
+ errorMessage == null ?
+
+
+
This is the search page.
+
+
+
+ {
+ searchList.map(item => {
+ return (
+
+ )
+ })
+ }
+
+ : errorMessage
+ )
+}
+
+export default Search;
\ No newline at end of file
diff --git a/src/components/SearchItem.js b/src/components/SearchItem.js
new file mode 100644
index 000000000..dd6d6bc84
--- /dev/null
+++ b/src/components/SearchItem.js
@@ -0,0 +1,18 @@
+import React, { useState, useEffect } from 'react';
+import API from '../ApiSupport';
+import './Library.css';
+
+const SearchItem = (props) => {
+ // we need the video, info is in the props
+ const clickHandler = () => {
+ props.addVideoCallback(props.video)
+ }
+ return (
+ {props.video.title}
+
+
+
+
{props.title}
+
{props.overview}
+
+