From d423a7532da5f144154a72ad8508a8cb053ee34e Mon Sep 17 00:00:00 2001
From: Sami Spets <savasp@utu.fi>
Date: Wed, 25 Sep 2019 16:21:03 +0300
Subject: [PATCH] progress in thumbnail
---
web-service/client/src/App.js | 23 ++++++++++++++++-------
web-service/client/src/Streams.js | 26 +++++++++++++++++++++++---
web-service/client/src/seeds.js | 18 ++++++++++++++++++
web-service/server/src/seeds.js | 24 ------------------------
4 files changed, 57 insertions(+), 34 deletions(-)
create mode 100644 web-service/client/src/seeds.js
delete mode 100644 web-service/server/src/seeds.js
diff --git a/web-service/client/src/App.js b/web-service/client/src/App.js
index 377d85c4f..6d0f6bfa5 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 13d0ba3cd..3d3e3bb86 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 000000000..bfffe2c7a
--- /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 a19004517..000000000
--- 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
--
GitLab