load previews correctly with fetch

src/AlternativeBody.js

@@ -1,11 +0,0 @@
-import * as React from "react";
-
-class AlternativeBody extends React.Component{
-    render() {
-        return (
-            <div>Second page!</div>
-        );
-    }
-}
-
-export default AlternativeBody;

src/App.css

@@ -1 +0,0 @@
-

src/App.js

@@ -1,29 +1,12 @@
 import React from 'react';
-import './App.css';
 import MainBody from "./MainBody";
-import AlternativeBody from "./AlternativeBody"
-import ReactDOM from 'react-dom';
+
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 class App extends React.Component {
-    page1click() {
-        console.log("click page1");
-
-        // rerender mainbody space here
-        ReactDOM.render(
-            <MainBody/>,
-            document.getElementById("mainbody")
-        );
-    }
-
-    page2click() {
-        console.log("click page2");
-
-        // rerender mainbody space here
-        ReactDOM.render(
-            <AlternativeBody/>,
-            document.getElementById("mainbody")
-        );
+    constructor(props, context) {
+        super(props, context);
+        this.state = {page: "default"};
     }
 
     render() {
@@ -34,36 +17,34 @@ class App extends React.Component {
 
                     <ul className="navbar-nav">
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Home</a>
+                            <a className="nav-link" onClick={() => this.loadHomePage()} href="!#">Home</a>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Random Video</a>
+                            <a className="nav-link" onClick={() => this.loadRandomPage()} href="!#">Random Video</a>
                         </li>
                         <li className="nav-item">
-                            <a className="nav-link" onClick={() => this.homePageClick()} href="!#">Categories</a>
+                            <a className="nav-link" onClick={() => this.loadCategoriesPage()} href="!#">Categories</a>
                         </li>
                     </ul>
                 </nav>
-                <div>
-                    <button onClick={() => this.page1click()}>Page1</button>
-                    <button onClick={() => this.page2click()}>Page2</button>
-                </div>
-                <div id="mainbody">
-                    mimimimimi
-                </div>
-
+                <MainBody page={this.state.page}/>
             </div>
         );
     }
 
-    homePageClick() {
-        console.log("click page1");
+    loadCategoriesPage() {
+        console.log("click categories");
+        this.setState({page: "categories"});
+    }
 
-        // rerender mainbody space here
-        ReactDOM.render(
-            <MainBody/>,
-            document.getElementById("mainbody")
-        );
+    loadRandomPage() {
+        console.log("click random");
+        this.setState({page: "random"});
+    }
+
+    loadHomePage() {
+        console.log("click default");
+        this.setState({page: "default"});
     }
 }
 

src/HomePage.js

@@ -0,0 +1,58 @@
+import React from "react";
+import Preview from "./Preview";
+import './css/video.css'
+
+class HomePage extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+
+        this.state = {
+            data: null
+        };
+    }
+
+    componentDidMount() {
+        // todo check if better here or in constructor
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'getMovies');
+
+        // fetch all videos available
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.json())
+            .then((result) => {
+                this.setState({data: result});
+            });
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    render() {
+        return (
+            <div>
+                <div><h1>Home page</h1></div>
+                {this.state.data ? this.loadPreviewBlock(12) : <div>not loaded yet</div>}
+            </div>
+        );
+    }
+
+    loadPreview(index) {
+        return (
+            <Preview
+                key={index}
+                name={this.state.data[index].movie_name}
+                movie_id={this.state.data[index].movie_id}/>
+            );
+    }
+
+    loadPreviewBlock(nr) {
+        let ret = [];
+        for (let i = 0; i < nr; i++) {
+            ret.push(this.loadPreview(i));
+        }
+        return (ret);
+    }
+}
+
+export default HomePage;

src/MainBody.js

@@ -1,19 +1,21 @@
 import React from "react";
+import HomePage from "./HomePage";
 
 class MainBody extends React.Component {
+    constructor(props) {
+        super(props);
+        this.props = props;
+    }
+
     render() {
-        const requestOptions = {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ title: 'React POST Request Example' })
-        };
-        fetch('https://jsonplaceholder.typicode.com/posts', requestOptions)
-            .then(response => response.json())
-            .then(data => this.setState({ postId: data.id }));
-        return (
-            <div>Hey from other class</div>
-        );
+        let page;
+        if (this.props.page === "default") {
+            page = <HomePage/>;
+        }else {
+            page = <div>unimplemented yet!</div>;
+        }
+        return (page);
     }
 }
 
-export default MainBody;
+export default MainBody;

src/Preview.js

@@ -0,0 +1,54 @@
+import React from "react";
+import "./css/Preview.css"
+
+class Preview extends React.Component {
+    constructor(props, context) {
+        super(props, context);
+        this.props = props;
+
+        this.state = {
+            previewpicture: null,
+            name: null,
+            url: null
+        };
+    }
+
+    componentWillUnmount() {
+        this.setState({});
+    }
+
+    componentDidMount() {
+        this.setState({
+            previewpicture: null,
+            name: this.props.name,
+            url: this.props.url
+        })
+
+        const updateRequest = new FormData();
+        updateRequest.append('action', 'readThumbnail');
+        updateRequest.append('movieid', this.props.movie_id);
+
+        fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
+            .then((response) => response.text())
+            .then((result) => {
+                this.setState(prevState => ({
+                    ...prevState.previewpicture, previewpicture: result
+                }));
+            });
+    }
+
+    render() {
+        return (
+            <div className='videopreview'>
+                <div className='previewtitle'>{this.state.name}</div>
+                <div className='previewpic'>
+                    <img className='previewimage'
+                         src={this.state.previewpicture}
+                         alt='no thumbnail found'/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Preview;

src/Zwei.js

@@ -1,65 +0,0 @@
-import React from 'react';
-
-class TodoApp extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {items: [], text: ''};
-        this.handleChange = this.handleChange.bind(this);
-        this.handleSubmit = this.handleSubmit.bind(this);
-    }
-
-    render() {
-        return (
-            <div>
-                <h3>TODO</h3>
-                <TodoList items={this.state.items}/>
-                <form onSubmit={this.handleSubmit}>
-                    <label htmlFor="new-todo">
-                        What needs to be done?
-                    </label>
-                    <input
-                        id="new-todo"
-                        onChange={this.handleChange}
-                        value={this.state.text}
-                    />
-                    <button>
-                        Add #{this.state.items.length + 1}
-                    </button>
-                </form>
-            </div>
-        );
-    }
-
-    handleChange(e) {
-        this.setState({text: e.target.value});
-    }
-
-    handleSubmit(e) {
-        e.preventDefault();
-        if (this.state.text.length === 0) {
-            return;
-        }
-        const newItem = {
-            text: this.state.text,
-            id: Date.now()
-        };
-        this.setState(state => ({
-            items: state.items.concat(newItem),
-            text: ''
-        }));
-    }
-}
-
-class TodoList extends React.Component {
-    render() {
-        return (
-            <ul>
-                {this.props.items.map(item => (
-                    <li key={item.id}>{item.text}</li>
-                ))}
-            </ul>
-        );
-    }
-}
-
-export default TodoApp;

src/css/Preview.css

@@ -0,0 +1,31 @@
+.previewtitle {
+    height: 10%;
+    color: white;
+    text-align: center;
+}
+
+.previewpic {
+    height: 80%;
+}
+
+.previewimage{
+    width:100%;
+    height:100%;
+}
+
+.videopreview {
+    height: 300px;
+    width: 30%;
+    float: left;
+    margin: 1%;
+    background-color: #7F7F7F;
+    cursor: pointer;
+    opacity: 0.9;
+    border: 10px;
+    border-radius: 20px;
+}
+
+.videopreview:hover {
+    opacity: 1;
+    transition: opacity 0.5s;
+}

src/css/video.css

@@ -0,0 +1,43 @@
+.hideit {
+    display: none;
+}
+
+.closebutton {
+    color: white;
+    height: 35px;
+    width: 90px;
+    margin-right: 80px;
+    float: right;
+    background-color: #FF0000;
+    cursor: pointer;
+}
+
+.myvideo {
+    width: 100%;
+    float: left;
+}
+
+.videoleftbanner{
+    float: left;
+    width: 100%;
+    height: 100%;
+    background-color: #e5e5ff;
+    border-radius: 40px;
+}
+.likefield{
+    margin-top: 15px;
+    margin-left: 15px;
+    margin-right: 15px;
+    height: 30px;
+    background-color: #9e5353;
+    border-radius: 10px;
+    text-align: center;
+    color: white;
+
+}
+
+.previewcontainer {
+    margin-left: 10%;
+    width: 80%;
+    margin-right: 10%;
+}

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './index.css';
+import './css/index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';