Skip to content
Snippets Groups Projects
Commit 3474be85 authored by Sami Spets's avatar Sami Spets
Browse files

Removed react code (client folder)

parent 80b5d427
No related branches found
No related tags found
No related merge requests found
Showing with 0 additions and 25380 deletions
# See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies
/node_modules
# testing
/coverage
# production
/build
# misc
.DS_Store
.env
npm-debug.log*
yarn-debug.log*
yarn-error.log*
Source diff could not be displayed: it is too large. Options to address this: view the blob.
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-scripts": "^3.1.1"
},
"devDependencies": {},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"buildFull": "react-scripts build && cp -r build ~/work/ftl/web-service/server"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tag above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`.
To create a production bundle, use `npm run build`.
-->
</body>
</html>
body {
margin-left: auto;
margin-right: auto;
}
a {
-webkit-tap-highlight-color: transparent;
text-decoration: none;
}
.button {
display: inline-block;
max-width: 300px;
margin-top: 50px;
border: 0;
padding: 0 18px;
text-align: left;
width: 100%;
height: 37px;
border-radius: 4px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
color: rgba(0, 0, 0, 0.84) !important;
fill: rgba(0, 0, 0, 0.84) !important;
box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
font: inherit;
outline: none;
}
.button .svgIcon {
vertical-align: middle;
fill: rgba(0, 0, 0, 0.54);
padding-right: 4px;
height: 37px;
display: inline-block;
}
.div {
vertical-align: center;
text-align: center
}
\ No newline at end of file
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'
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.
* When making the request for the objects the same request
* authenticates the users JWT
*
*/
const handleLogin = () => {
//BEFORE BUILD CHANGE THE URL TO /google
window.location.href="/google";
}
const clearCookies = () => {
window.localStorage.clear();
window.location.reload();
}
// if(window.localStorage.getItem('token')){
// return (
//
// )
// }
return (
<Streams clearCookies={clearCookies}/>
// <Login handleLogin={handleLogin} />
)
}
export default App;
\ No newline at end of file
import React from 'react';
const Configuration = () => {
}
\ No newline at end of file
import React from 'react';
const Login = ({handleLogin}) => {
return(
<div style={{'padding-top': '150px', 'text-align': 'center'}}>
<h2>Welcome to Future Technology Lab</h2>
<h3>Please login!</h3>
<a className="button" onClick={handleLogin}>
<div>
<span className="svgIcon t-popup-svg">
<svg className="svgIcon-use" width="25" height="37" viewBox="0 0 25 25">
<g fill="none" fill-rule="evenodd">
<path d="M20.66 12.693c0-.603-.054-1.182-.155-1.738H12.5v3.287h4.575a3.91 3.91 0 0 1-1.697 2.566v2.133h2.747c1.608-1.48 2.535-3.65 2.535-6.24z" fill="#4285F4"/>
<path d="M12.5 21c2.295 0 4.22-.76 5.625-2.06l-2.747-2.132c-.76.51-1.734.81-2.878.81-2.214 0-4.088-1.494-4.756-3.503h-2.84v2.202A8.498 8.498 0 0 0 12.5 21z" fill="#34A853"/>
<path d="M7.744 14.115c-.17-.51-.267-1.055-.267-1.615s.097-1.105.267-1.615V8.683h-2.84A8.488 8.488 0 0 0 4 12.5c0 1.372.328 2.67.904 3.817l2.84-2.202z" fill="#FBBC05"/>
<path d="M12.5 7.38c1.248 0 2.368.43 3.25 1.272l2.437-2.438C16.715 4.842 14.79 4 12.5 4a8.497 8.497 0 0 0-7.596 4.683l2.84 2.202c.668-2.01 2.542-3.504 4.756-3.504z" fill="#EA4335"/>
</g>
</svg>
</span>
<span className="button-label">Sign in with Google</span>
</div>
</a>
</div>
)
}
export default Login;
\ No newline at end of file
import React from 'react'
/*
Component for individual stream
Router will render to this component in path /stream
Gets specific streams object key as prop
*/
const Stream = () => {
return(
<div>
<video controls autoPlay src='https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4'/>
</div>
)
}
export default Stream;
\ No newline at end of file
import React, { useState, useEffect } from 'react'
import Thumbnail from './Thumbnail'
/* 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( 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 renderThumbnails = () => {
const returnVal = thumbnails.map(i => <Thumbnail thumbnail={i} />)
return returnVal
}
return(
<div style={{'margin': 'auto', 'textAlign': 'center'}}>
<h1>Streams component works!!</h1>
<h2>Namibia here we come!</h2>
<button onClick={clearCookies}>Logout</button>
<br/>
{console.log("THUMBNAILIT ON", thumbnails)}
{renderThumbnails()}
</div>
)
}
export default Streams;
/*
Server has web socket method "list_streams" that returns the keys for all streams.
TODO:
React Router
Path might be something like /streams
How will the component get a stream thumbnail?
After getting the stream keys it renders bunch of child components
that each get one key. After getting the key the individual child component makes
a request for "get_stream" method.
How will the component connect to a stream?
When one of the thumbnails is clicked, it redirects to path /stream and gives it the specific streams object key as props
*/
\ No newline at end of file
import React, {Component} from 'react';
class Thumbnail extends Component {
constructor(props){
super(props)
this.state = {imgSrc: ''}
}
componentDidMount(){
this.renderThumbnails()
}
renderThumbnails = async () => {
console.log('PROPS', this.props)
const thumbs = this.props.thumbnail
console.log(thumbs);
const encodedURI = encodeURIComponent(thumbs)
console.log('ENCODED', 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);
this.setState({imgSrc: objectURL});
} catch(err){
console.log('Kurwavaara:', err);
this.setState({imgSrc: 'Error while loading the picture'})
}
}
render(){
const val = this.state.imgSrc
return (
<div>
{console.log('SRC', this.state.imgSrc)}
<img src={val} width='500px'></img>
<button onClick={() => {this.renderThumbnails()}}>Refresh</button>
</div>
)
}
}
export default Thumbnail;
\ No newline at end of file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Source diff could not be displayed: it is too large. Options to address this: view the blob.
Source diff could not be displayed: it is too large. Options to address this: view the blob.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment