load previews correctly with fetch

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;