Backup

web-service/client/src/Streams.js

 import React, { useState, useEffect } from 'react'
-import Stream from './Stream'
-import testData from './seeds'
+import Thumbnail from './Thumbnail'
 
 /* This file will contain list of streams.
 The user is able to select which stream he/she will WebAuthentication.
@@ -12,47 +11,17 @@ The user will be redirected to Stream.js file
 const Streams = ({clearCookies}) => {
     const [thumbnails, setThumbnails] = useState([]);
     
-    useEffect( async () => {
-        const jsonThumbnails = await fetch('/streams/');
-        const realThumbnails = await jsonThumbnails.json();
-        setThumbnails(realThumbnails);
-        console.log('THUMBNAILS', thumbnails)
+    useEffect( async() => {
+            const jsonThumbnails = await fetch('http://localhost:8080/streams/');
+            const realThumbnails = await jsonThumbnails.json();
+            setThumbnails(realThumbnails);
+            console.log('THUMBNAILS', thumbnails)
     }, [])
     /**
      * Fetch the thumbnails
      * setInterval() fetch every 1 second
      */
 
-    const fetchThumbnails = async () => {
-        const jsonThumbnails = await fetch('/streams/');
-        const realThumbnails = await jsonThumbnails.json();
-        return realThumbnails;
-    }
-
-    const renderThumbnails = async () => {
-        //updates all available thumbnail URIs
-        const thumbs = await fetchThumbnails()
-        setThumbnails((thumbs));
-        console.log(thumbnails[0]);
-        //Problem possibly here, it doesn't encode it correctly?
-        const encodedURL = encodeURI(thumbnails[0]);
-        console.log('ENCODED URL', encodedURL);
-        try{
-            const someData = await fetch(`/stream/rgb?uri=${encodedURL}`)
-            if(!someData){
-                throw new Error('Vitun vitun vittu');
-            }
-            const myBlob = await someData.blob
-            console.log('MYBLOB', myBlob)
-            const objectURL = URL.createObjectURL(myBlob);
-            console.log('URL ', objectURL);
-        } catch(err){
-            console.log('Kurwavaara:', err);
-        }
-        
-        return thumbnails;
-    }
-
 
 
     return(
@@ -61,7 +30,7 @@ const Streams = ({clearCookies}) => {
             <h2>Namibia here we come!</h2>
             <button onClick={clearCookies}>Logout</button>
             <br/>
-            <button onClick={renderThumbnails}></button>
+            <Thumbnail thumbnail={thumbnails[0]}/>
         </div>
     )
 }

web-service/client/src/Thumbnail.js

+import React, {Component} from 'react';
+
+const Thumbnail = ({thumbnail}) => {
+    const renderThumbnails = async () => {
+        let returnVal = "err";
+        const encodedURI = encodeURIComponent(thumbnail)
+        console.log(encodedURI)
+        try{
+            const someData = await fetch(`http://localhost:8080/stream/rgb?uri=${encodedURI}`)
+            console.log(someData)
+            if(!someData.ok){
+                throw new Error('Vitun vitun vittu');
+            }
+            const myBlob = await someData.blob()
+            console.log('MYBLOB', myBlob)
+            const objectURL = URL.createObjectURL(myBlob);
+            console.log('URL ', objectURL);
+            return objectURL;
+        } catch(err){
+            console.log('Kurwavaara:', err);
+        }
+        console.log('RETURN VALUE', returnVal)
+        return returnVal;
+    }
+    return (
+        <div>
+            <img src={renderThumbnails()} alt="Hups"></img>
+        </div>
+    )    
+}
+ 
+
+export default Thumbnail;
\ No newline at end of file

web-service/server/package.json

@@ -14,6 +14,7 @@
   "author": "Nicolas Pope",
   "license": "ISC",
   "dependencies": {
+    "cors": "^2.8.5",
     "express": "^4.16.4",
     "express-ws": "^4.0.0",
     "jsonwebtoken": "^8.5.1",

web-service/server/src/index.js

@@ -5,11 +5,14 @@ const Peer = require('./peer.js');
 const passport = require('passport');
 const passportSetup = require('./passport/passport');
 const jwt = require('jsonwebtoken');
-const keys = require('./passport/keys') 
+const keys = require('./passport/keys')
+const cors = require('cors'); 
 
 // ---- INDEXES ----------------------------------------------------------------
 app.use(passport.initialize());
 app.use(express.static('build'))
+app.use(cors())
+
 
 passport.serializeUser((user, done) => {
     done(null, user);