From 32b6a8bad3e46d281039f3b2234ea45fef2cb078 Mon Sep 17 00:00:00 2001 From: roshni-patel Date: Wed, 20 Jan 2021 17:36:01 -0600 Subject: [PATCH 01/16] Set up react router --- package.json | 5 ++-- src/App.js | 57 +++++++++++++++++++++++++++++++------ src/components/Customer.js | 7 +++++ src/components/Customers.js | 7 +++++ src/components/Home.js | 7 +++++ src/components/Library.js | 26 +++++++++++++++++ src/components/Search.js | 7 +++++ src/components/Video.js | 0 8 files changed, 105 insertions(+), 11 deletions(-) create mode 100644 src/components/Customer.js create mode 100644 src/components/Customers.js create mode 100644 src/components/Home.js create mode 100644 src/components/Library.js create mode 100644 src/components/Search.js create mode 100644 src/components/Video.js diff --git a/package.json b/package.json index 9cafb5214..bd3ac95a7 100644 --- a/package.json +++ b/package.json @@ -5,13 +5,14 @@ "dependencies": { "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/App.js b/src/App.js index 203067e4d..db5b8663f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,58 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; 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 Customers from './components/Customers'; + +// const API_URL_BASE = 'http://localhost:3000/'; class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

- To get started, edit src/App.js and save to reload. -

+ +
+ + + {/* A looks through its children s and + renders the first one that matches the current URL. */} + + + + + + + + + + + + + +
+ ); } } diff --git a/src/components/Customer.js b/src/components/Customer.js new file mode 100644 index 000000000..87b611e38 --- /dev/null +++ b/src/components/Customer.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Customer = () => { + return

This is the customer page.

+} + +export default Customer; \ No newline at end of file diff --git a/src/components/Customers.js b/src/components/Customers.js new file mode 100644 index 000000000..bda149088 --- /dev/null +++ b/src/components/Customers.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Customers = () => { + return

This is the customers page.

+} + +export default Customers; \ No newline at end of file diff --git a/src/components/Home.js b/src/components/Home.js new file mode 100644 index 000000000..2ea839d36 --- /dev/null +++ b/src/components/Home.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Home = () => { + return

This is the home page.

+} + +export default Home; \ No newline at end of file diff --git a/src/components/Library.js b/src/components/Library.js new file mode 100644 index 000000000..09305d78c --- /dev/null +++ b/src/components/Library.js @@ -0,0 +1,26 @@ +import React, { useEffect, useState} from 'react'; +// import axios from 'axios'; + + +const Library = () => { +// const [videoList, setVideoList] = useState([]); +// const [errorMessage, setErrorMessage] = useState(null); + +// const VIDEO_URL = 'http://localhost:3000/videos' + +// useEffect(() => { +// axios.get(VIDEO_URL) +// .then((response) => { +// const apiVideoList = response.data; +// setVideoList(apiVideoList); +// }) +// .catch((error) => { +// setErrorMessage('Could not retrieve videos from library'); +// }); +// }, []); + + + return

This is the library page.

+} + +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..db07701d1 --- /dev/null +++ b/src/components/Search.js @@ -0,0 +1,7 @@ +import React from 'react'; + +const Search = () => { + return

This is the search page.

+} + +export default Search; \ No newline at end of file diff --git a/src/components/Video.js b/src/components/Video.js new file mode 100644 index 000000000..e69de29bb From 6e2257a09bcd8199fc1cca719502fc28832a630d Mon Sep 17 00:00:00 2001 From: roshni-patel Date: Wed, 20 Jan 2021 17:39:47 -0600 Subject: [PATCH 02/16] Added empty video file --- src/components/Video.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/Video.js b/src/components/Video.js index e69de29bb..2f9593bf4 100644 --- a/src/components/Video.js +++ b/src/components/Video.js @@ -0,0 +1,9 @@ +import React from 'react'; + +const Video = () => { + return ( + + ) +} + +export default Video; \ No newline at end of file From 355c1624e130ffe8c6a7d0fd5e8009c1a4f2ddba Mon Sep 17 00:00:00 2001 From: roshni-patel Date: Wed, 20 Jan 2021 19:21:42 -0600 Subject: [PATCH 03/16] Videos now show up on library page, added base url const to app --- package.json | 1 + src/App.js | 6 ++--- src/components/Library.js | 49 +++++++++++++++++++++++++-------------- src/components/Video.js | 6 +++-- 4 files changed, 40 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index bd3ac95a7..f8fc0eb8c 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,7 @@ "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", diff --git a/src/App.js b/src/App.js index db5b8663f..4b8f78664 100644 --- a/src/App.js +++ b/src/App.js @@ -11,7 +11,7 @@ import Library from './components/Library'; import Search from './components/Search'; import Customers from './components/Customers'; -// const API_URL_BASE = 'http://localhost:3000/'; +const BASE_URL = 'http://localhost:3000/'; class App extends Component { render() { @@ -39,13 +39,13 @@ class App extends Component { renders the first one that matches the current URL. */} - + - + diff --git a/src/components/Library.js b/src/components/Library.js index 09305d78c..270f2fc7a 100644 --- a/src/components/Library.js +++ b/src/components/Library.js @@ -1,26 +1,41 @@ import React, { useEffect, useState} from 'react'; -// import axios from 'axios'; +import axios from 'axios'; +import Video from './Video'; -const Library = () => { -// const [videoList, setVideoList] = useState([]); -// const [errorMessage, setErrorMessage] = useState(null); +const Library = (props) => { + const [videoList, setVideoList] = useState([]); + const [errorMessage, setErrorMessage] = useState(null); -// const VIDEO_URL = 'http://localhost:3000/videos' + useEffect(() => { + axios.get(`${props.url}videos`) + .then((response) => { + const apiVideoList = response.data; + setVideoList(apiVideoList); + }) + .catch((error) => { + setErrorMessage('Could not retrieve videos from library'); + }); + }, []); -// useEffect(() => { -// axios.get(VIDEO_URL) -// .then((response) => { -// const apiVideoList = response.data; -// setVideoList(apiVideoList); -// }) -// .catch((error) => { -// setErrorMessage('Could not retrieve videos from library'); -// }); -// }, []); + const videoComponents = videoList.map((video) => { + return ( +