Setup of yarn and package.json. Also added first page which queries api for info

client/app/components/App.jsx

@@ -0,0 +1,23 @@
+/*
+	./app/components/App.jsx
+	
+	<FetchData url={"https://apollo.kevinmidboe.com/api/v1/plex/playing"} />
+*/
+import React from 'react';
+import FetchData from './FetchData.js';
+import ListStrays from './ListStrays.jsx'
+
+export default class App extends React.Component {
+	render() {
+		return (
+			<div>
+				<div style={{textAlign: 'center'}}>
+					<h1>Welcome to Seasoned</h1>
+				</div>
+					<ListStrays />
+
+					<FetchData />
+			</div>
+		);
+	}
+}

client/app/components/FetchData.js

@@ -0,0 +1,58 @@
+import React from 'react';
+
+class FetchData extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			imgUrls: [],
+      		hei: '1',
+      		intervalId: null,
+      		url: ''
+		}
+	}
+
+	componentDidMount(){
+		var that = this;
+		fetch("https://apollo.kevinmidboe.com/api/v1/plex/playing").then(
+			function(response){
+				response.json().then(function(data){
+					console.log(data.size);
+					that.setState({
+						imgUrls: that.state.imgUrls.concat(data.video)
+					})
+					console.log(data.video.title);
+				})
+			}
+		)
+	}
+
+	componentWillUnmount() {
+	   // use intervalId from the state to clear the interval
+	   clearInterval(this.state.intervalId);
+	}
+
+	getPlaying() {
+		console.log('Should not reach')
+		// Need callback to work
+		// Should try to clear out old requests to limit mem use
+	}
+
+	render(){
+			return(
+			<div className="FetchData">
+			{this.state.imgUrls.map((imgObj) => {
+				return ([
+					<span>{imgObj.title}</span>,
+					<span>{imgObj.season}</span>,
+					<span>{imgObj.episode}</span>,
+				]);
+			})}
+
+			</div>
+		);
+	}
+
+	
+}
+
+export default FetchData;

client/app/components/ListStrays.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+class ListStrays extends React.Component {
+	constructor(props){
+		super(props)
+		this.state = {
+			strays: [],
+      		hei: '1'
+		}
+	}
+
+	componentDidMount(){
+		var that = this;
+		fetch('https://apollo.kevinmidboe.com/api/v1/seasoned/all').then(
+			function(response){
+				response.json().then(function(data){
+					// console.log(data);
+					that.setState({
+						strays: that.state.strays.concat(data)
+					})
+				})
+			}
+		)
+	}
+
+	render(){
+		return(
+			<div className="ListStrays">
+				{this.state.strays.map((strayObj) => {
+					if (strayObj.verified == 0) {
+						var url = "https://kevinmidboe.com/seasoned/verified.html?id=" + strayObj.id;
+						console.log(url);
+						return ([
+							<span key={strayObj.id}>{strayObj.name}</span>,
+							<a href={url}>{strayObj.id}</a>
+						])
+					}
+				})}
+
+			</div>
+		)
+	}
+}
+
+export default ListStrays;