From 47d31a9a99094ff3c277f2f937a7494890079477 Mon Sep 17 00:00:00 2001 From: Kareha Agesa Date: Tue, 19 Jan 2021 21:46:43 -0800 Subject: [PATCH 01/32] working ex of video list --- package.json | 6 +- src/App.js | 16 +- src/components/Video.js | 24 + src/components/Videos.js | 46 + src/index.js | 3 +- yarn.lock | 11541 +++++++++++++++++++++++++++++++++++++ 6 files changed, 11623 insertions(+), 13 deletions(-) create mode 100644 src/components/Video.js create mode 100644 src/components/Videos.js create mode 100644 yarn.lock 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/App.js b/src/App.js index 203067e4d..ece375caa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,19 +1,15 @@ import React, { Component } from 'react'; -import logo from './logo.svg'; +import { BrowserRouter as Router, Link, Route} from 'react-router-dom'; import './App.css'; +import Videos from './components/Videos'; class App extends Component { render() { return ( -
-
- logo -

Welcome to React

-
-

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

-
+ + Videos + }/> + ); } } diff --git a/src/components/Video.js b/src/components/Video.js new file mode 100644 index 000000000..ec46d8915 --- /dev/null +++ b/src/components/Video.js @@ -0,0 +1,24 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Video = ({id, title, overview, releaseDate, imageUrl, externalId}) => { + + return( +
+

{id} {title} {overview} {releaseDate} {imageUrl} {externalId}

+
+ ) + +} + + +Video.propTypes = { + id: PropTypes.number.isRequired, + title: PropTypes.string.isRequired, + overview: PropTypes.string.isRequired, + releaseDate: PropTypes.string.isRequired, + imageUrl: PropTypes.string, + externalID: PropTypes.number +}; + +export default Video; \ No newline at end of file diff --git a/src/components/Videos.js b/src/components/Videos.js new file mode 100644 index 000000000..58a6aaf12 --- /dev/null +++ b/src/components/Videos.js @@ -0,0 +1,46 @@ +import React, { useEffect, useState } from 'react'; +import PropTypes from 'prop-types'; +import axios from 'axios'; +import Video from './Video'; + +const Videos = ({url}) => { + const [videos, setVideos] = useState([]); + + useEffect(() => { + axios.get(url + '/videos') + .then((response) => { + const apiVideos = response.data.map((apiVideo) => { + return ({ + id: apiVideo.id, + title: apiVideo.title, + overview: apiVideo.overview, + releaseDate: apiVideo.release_date, + imageUrl: apiVideo.image_url, + externalID: apiVideo.externalID + }) + }) + setVideos(apiVideos) + }) + .catch((error) => { + // do something with this.. maybe another state variable? + // console.log(error) + }) + }, [url]) + + const loadBoard = () => { + return videos.map((video) => { + return