feat(feed): auto-loading feed list

src/app/auto-scrollable.js

@@ -0,0 +1,38 @@
+import React, { Component } from 'react';
+import ReactDOM from 'react-dom';
+
+export default class AutoScrollable extends Component {
+	componentDidMount() {
+        if(this.onBottomScroll)
+		{
+            let component = this;
+			let prevScrollValue = 0;
+			let outFireStart = 0;
+			this.onScroll = () => {
+				let scrollHeight = Math.max(
+                    document.body.scrollHeight, document.documentElement.scrollHeight,
+                    document.body.offsetHeight, document.documentElement.offsetHeight,
+                    document.body.clientHeight, document.documentElement.clientHeight
+                );
+
+				if(prevScrollValue != scrollHeight)
+				{
+					prevScrollValue = scrollHeight;
+					outFireStart = scrollHeight / 6; // это значит что-то подгрузило на страницу и можно вполне увеличивать отступ скрола
+				}
+
+                if ((window.innerHeight + document.documentElement.scrollTop) >= scrollHeight - outFireStart) {
+					outFireStart = -1;
+			      	component.onBottomScroll();
+			    }
+			};
+			window.addEventListener('scroll', this.onScroll);
+		}
+	}
+	componentWillUnmount() {
+		if(this.onBottomScroll)
+		{
+			window.removeEventListener('scroll', this.onScroll);
+		}
+	}
+}

src/app/feed.js

@@ -1,31 +1,40 @@
 import React, { Component } from 'react';
+import AutoScrollable from './auto-scrollable'
 import TorrentLine from './torrent'
 import {List} from 'material-ui/List';
 import Divider from 'material-ui/Divider';
 import Subheader from 'material-ui/Subheader';
 
-export default class RecentTorrents extends Component {
+export default class RecentTorrents extends AutoScrollable {
 	constructor() {
 		super()
 		this.torrents = [];
 	}
 	componentDidMount() {
-		window.torrentSocket.emit('feed', window.customLoader((data) => {
-			if(data) {
-				this.torrents = data;
-				this.forceUpdate();
-			}
-		}))
+		super.componentDidMount();
+		this.loadMoreFeed();
 		this.feedFunc = ({feed}) => {
-			this.torrents = feed
+			this.torrents = feed.slice(0, this.torrents.length || 20)
 			this.forceUpdate()
 		};
 		window.torrentSocket.on('feedUpdate', this.feedFunc);
 	}
 	componentWillUnmount() {
+		super.componentWillUnmount();
 		if(this.feedFunc)
 			window.torrentSocket.off('feedUpdate', this.feedFunc);
 	}
+	onBottomScroll() {
+		this.loadMoreFeed();
+	}
+	loadMoreFeed() {
+		window.torrentSocket.emit('feed', this.torrents.length, window.customLoader((data) => {
+			if(data) {
+				this.torrents = this.torrents.concat(data);
+				this.forceUpdate();
+			}
+		}))
+	}
 	render() {
 		return (
 			<List className='animated torrents-container'>