correct load on scrolling and show video on click

src/HomePage.js

@@ -3,16 +3,22 @@ import Preview from "./Preview";
 import './css/video.css'
 
 class HomePage extends React.Component {
+    // stores all available movies
+    data = null;
+    // stores current index of loaded elements
+    loadindex = 0;
+
     constructor(props, context) {
         super(props, context);
 
         this.state = {
-            data: null
+            loadeditems: []
         };
     }
 
     componentDidMount() {
-        // todo check if better here or in constructor
+        document.addEventListener('scroll', this.trackScrolling);
+
         const updateRequest = new FormData();
         updateRequest.append('action', 'getMovies');
 
@@ -20,38 +26,54 @@ class HomePage extends React.Component {
         fetch('/php/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json())
             .then((result) => {
-                this.setState({data: result});
+                this.data = result;
+                this.loadPreviewBlock(12);
             });
     }
 
     componentWillUnmount() {
         this.setState({});
+        document.removeEventListener('scroll', this.trackScrolling);
     }
 
     render() {
         return (
             <div>
                 <div><h1>Home page</h1></div>
-                {this.state.data ? this.loadPreviewBlock(12) : <div>not loaded yet</div>}
+                {this.state.loadeditems.map(elem => (
+                    <Preview
+                        name={elem.movie_name}
+                        movie_id={elem.movie_id}/>
+                ))}
             </div>
         );
     }
 
-    loadPreview(index) {
-        return (
-            <Preview
-                key={index}
-                name={this.state.data[index].movie_name}
-                movie_id={this.state.data[index].movie_id}/>
-            );
-    }
-
     loadPreviewBlock(nr) {
+        console.log("loadpreviewblock called ...")
         let ret = [];
         for (let i = 0; i < nr; i++) {
-            ret.push(this.loadPreview(i));
+            // only add if not end
+            if (this.data.length > this.loadindex + i) {
+                ret.push(this.data[this.loadindex + i]);
+            }
+        }
+
+        this.setState({
+            loadeditems: [
+                ...this.state.loadeditems,
+                ...ret
+            ]
+        });
+
+
+        this.loadindex += nr;
+    }
+
+    trackScrolling = (e) => {
+        if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
+            this.loadPreviewBlock(6);
         }
-        return (ret);
     }
 }