diff --git a/web-service/client/src/App.js b/web-service/client/src/App.js index 377d85c4fda2209d1ac815568c713265e243a014..6d0f6bfa58e96bdcd9d25967fea33347f69ffff2 100644 --- a/web-service/client/src/App.js +++ b/web-service/client/src/App.js @@ -1,5 +1,5 @@ -import React, { useState } from 'react'; -import './App.css' +import React, { useState, useEffect } from 'react'; +//import './App.css' //import {Route, BrowserRouter, Link} from 'react-router-domm import Streams from './Streams' import Login from './Login' @@ -9,6 +9,15 @@ const App = () => { const [user, setUser] = useState(null); const [streams, setStreams] = useState(null); + + // useEffect(() => { + // const loggedUserJSON = window.localStorage.getItem('token'); + // if(loggedUserJSON){ + // const user = JSON.parse(loggedUserJSON); + // setUser(user); + // } + // }) + /** * TODO: create a list available of streams using useEffect. * Each index is an object (stream) that has a name and a picture. @@ -27,14 +36,14 @@ const App = () => { window.location.reload(); } - if(window.localStorage.getItem('token')){ + // if(window.localStorage.getItem('token')){ return ( <Streams clearCookies={clearCookies}/> ) - } - return ( - <Login handleLogin={handleLogin} /> - ) + // } + // return ( + // <Login handleLogin={handleLogin} /> + // ) } export default App; \ No newline at end of file diff --git a/web-service/client/src/Streams.js b/web-service/client/src/Streams.js index 13d0ba3cd5a433723fcf8b7300cb260b7db95c09..3d3e3bb86d2eda6baa42b394d66e4d72d8f21ca6 100644 --- a/web-service/client/src/Streams.js +++ b/web-service/client/src/Streams.js @@ -1,18 +1,38 @@ -import React from 'react' +import React, { useState, useEffect } from 'react' import Stream from './Stream' +import testData from './seeds' /* This file will contain list of streams. The user is able to select which stream he/she will WebAuthentication. The user will be redirected to Stream.js file */ + + const Streams = ({clearCookies}) => { + const [thumbnails, setThumbnails] = useState([]); + + useEffect(() => { + const url = testData.thumbnail.map(i => i.video) + setThumbnails(url); + console.log('streams') + }, []) + + const renderThumbnails = () => { + console.log("Piippiip") + thumbnails.map(index => { + console.log(index) + return <img height='150px' src={index} alt='piip'/> + }) + } + return( - <div style={{'margin': 'auto', 'text-align': 'center'}}> + <div style={{'margin': 'auto', 'textAlign': 'center'}}> <h1>Streams component works!!</h1> <h2>Namibia here we come!</h2> <button onClick={clearCookies}>Logout</button> - <Stream /> + <button onClick={renderThumbnails}>Show streams</button> + {/* <img height='150px' src={thumbnails[0]} alt='piip'/> */} </div> ) } diff --git a/web-service/client/src/seeds.js b/web-service/client/src/seeds.js new file mode 100644 index 0000000000000000000000000000000000000000..bfffe2c7aeb3a206dfb7b53f38157ba76e52ed61 --- /dev/null +++ b/web-service/client/src/seeds.js @@ -0,0 +1,18 @@ +const testData = { + thumbnail: [ + { + name: 'source1', + video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80' + }, + { + name: 'source2', + video: 'https://images.unsplash.com/photo-1558981420-c532902e58b4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1477&q=80' + }, + { + name: 'source3', + video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80' + } + ] + } + + export default testData; \ No newline at end of file diff --git a/web-service/server/src/seeds.js b/web-service/server/src/seeds.js deleted file mode 100644 index a19004517c4ca875f7a3e41f3ac2496c20e04546..0000000000000000000000000000000000000000 --- a/web-service/server/src/seeds.js +++ /dev/null @@ -1,24 +0,0 @@ - -/** - * This is a test db intended to have some random data - * to be used for testing thumbnail (and why not something else) - */ - - const testData = { - thumbnail: [ - { - name: 'source1', - video: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4' - }, - { - name: 'source2', - video: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4' - }, - { - name: 'source3', - video: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4' - }, - name: 'source4', - video: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4' - ] - } \ No newline at end of file