added a videocontainer where previews can be stored in - usefull for category page

src/pages/CategoryPage.js

@@ -30,24 +30,21 @@ class CategoryPage extends React.Component {
                     <hr/>
                 </div>
                 <SideBar>
-                    <div className='sidebartitle'>Infos:</div>
-                    <hr/>
                     <div className='sidebartitle'>Default Tags:</div>
-                    <Tag onClick={() => {
-                        this.setState({tag: "All"});
-                        this.fetchVideoData("all");
-                    }}>All
-                    </Tag>
+                    <Tag>All</Tag>
                     <Tag>FullHd</Tag>
                     <Tag>LowQuality</Tag>
                     <Tag>HD</Tag>
+                    <hr/>
+                    <button className='btn btn-success'>Add a new Tag!</button>
                 </SideBar>
                 <div id='categorycontent'>
                     {this.state.loadedtags ?
                         this.state.loadedtags.map((m) => (
                             <TagPreview
                                 name={m.tag_name}
-                                tag_id={m.tag_id}/>
+                                tag_id={m.tag_id}
+                                viewbinding={this.props.viewbinding}/>
                         )) :
                         "loading"
                     }

src/pages/HomePage.js

@@ -1,22 +1,16 @@
 import React from "react";
-import Preview from "../elements/Preview";
 import SideBar from "../elements/SideBar";
 import Tag from "../elements/Tag";
+import VideoContainer from "../elements/VideoContainer";
 
 import "../css/HomePage.css"
 import "../css/DefaultPage.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 = {
-            loadeditems: [],
             sideinfo: {
                 videonr: null,
                 fullhdvideonr: null,
@@ -25,12 +19,13 @@ class HomePage extends React.Component {
                 tagnr: null
             },
             tag: "All",
-            selectionnr: null
+            data: [],
+            selectionnr: 0
         };
     }
 
     componentDidMount() {
-        document.addEventListener('scroll', this.trackScrolling);
+        // document.addEventListener('scroll', this.trackScrolling);
         // initial get of all videos
         this.fetchVideoData("all");
         this.fetchStartData();
@@ -47,17 +42,19 @@ class HomePage extends React.Component {
         updateRequest.append('action', 'getMovies');
         updateRequest.append('tag', tag);
 
+        console.log("fetching data");
+
         // fetch all videos available
         fetch('/api/videoload.php', {method: 'POST', body: updateRequest})
             .then((response) => response.json()
                 .then((result) => {
-                    this.data = result;
                     this.setState({
-                        loadeditems: [],
-                        selectionnr: this.data.length
+                        data: []
+                    });
+                    this.setState({
+                        data: result,
+                        selectionnr: result.length
                     });
-                    this.loadindex = 0;
-                    this.loadPreviewBlock(16);
                 }))
             .catch(() => {
                 console.log("no connection to backend");
@@ -90,11 +87,6 @@ class HomePage extends React.Component {
             });
     }
 
-    componentWillUnmount() {
-        this.setState({});
-        document.removeEventListener('scroll', this.trackScrolling);
-    }
-
     render() {
         return (
             <div>
@@ -134,15 +126,10 @@ class HomePage extends React.Component {
                     }}>HD
                     </Tag>
                 </SideBar>
-                <div className='maincontent'>
-                    {this.state.loadeditems.map(elem => (
-                        <Preview
-                            key={elem.movie_id}
-                            name={elem.movie_name}
-                            movie_id={elem.movie_id}
-                            viewbinding={this.props.viewbinding}/>
-                    ))}
-                </div>
+                {this.state.data.length !== 0 ?
+                    <VideoContainer
+                        data={this.state.data}
+                        viewbinding={this.props.viewbinding}/> : null}
                 <div className='rightinfo'>
 
                 </div>
@@ -150,35 +137,6 @@ class HomePage extends React.Component {
             </div>
         );
     }
-
-    loadPreviewBlock(nr) {
-        console.log("loadpreviewblock called ...")
-        let ret = [];
-        for (let i = 0; i < nr; 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 = () => {
-        // comparison if current scroll position is on bottom
-        // 200 stands for bottom offset to trigger load
-        if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
-            this.loadPreviewBlock(8);
-        }
-    }
 }
 
 export default HomePage;