minor tweaks to thumbnail

web-service/client/src/Streams.js

@@ -22,6 +22,10 @@ const Streams = ({clearCookies}) => {
      * setInterval() fetch every 1 second
      */
 
+    const renderThumbnails = () => {
+        const returnVal = thumbnails.map(i => <Thumbnail thumbnail={i} />)
+        return returnVal
+    }
 
 
     return(
@@ -30,7 +34,8 @@ const Streams = ({clearCookies}) => {
             <h2>Namibia here we come!</h2>
             <button onClick={clearCookies}>Logout</button>
             <br/>
-            <Thumbnail thumbnail={thumbnails[0]}/>
+            {console.log("THUMBNAILIT ON", thumbnails)}
+            {renderThumbnails()}
         </div>
     )
 }

web-service/client/src/Thumbnail.js

@@ -10,19 +10,11 @@ class Thumbnail extends Component {
         this.renderThumbnails()
     }
 
-    fetchThumbnails = async () => {
-        const jsonThumbnails = await fetch('http://localhost:8080/streams/')
-        const realThumbnails = await jsonThumbnails.json();
-        console.log('REAL THUMBNAILS', realThumbnails)
-        return realThumbnails;
-    }
-
     renderThumbnails = async () => {
-        let returnVal = "err";
-        console.log(this.props)
-        const thumbs = await this.fetchThumbnails()
+        console.log('PROPS', this.props)
+        const thumbs = this.props.thumbnail
         console.log(thumbs);
-        const encodedURI = encodeURIComponent(thumbs[0])
+        const encodedURI = encodeURIComponent(thumbs)
         console.log('ENCODED', encodedURI)
         try{
             const someData = await fetch(`http://localhost:8080/stream/rgb?uri=${encodedURI}`)
@@ -37,6 +29,7 @@ class Thumbnail extends Component {
             this.setState({imgSrc: objectURL});
         } catch(err){
             console.log('Kurwavaara:', err);
+            this.setState({imgSrc: 'Error while loading the picture'})
         }
     }
     render(){
@@ -45,7 +38,7 @@ class Thumbnail extends Component {
             <div>
                 {console.log('SRC', this.state.imgSrc)}
                 <img src={val} width='500px'></img>
-                <button onClick={() => this.renderThumbnails()}></button>
+                <button onClick={() => {this.renderThumbnails()}}>Refresh</button>
             </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',
-          viewers: 9
-       },
-       {
-          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',
-          viewers: 9
-         },
-       {
-          name: 'source3',
-          video: 'https://images.unsplash.com/photo-1558981285-6f0c94958bb6?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80',
-          viewers: 9
-      }
-    ]
- }
- 
- export default testData;
\ No newline at end of file