progress in thumbnail

web-service/client/src/App.js

-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

web-service/client/src/Streams.js

-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>
     )
 }

web-service/client/src/seeds.js

+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

web-service/server/src/seeds.js

-
-/**
- * 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