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'>

src/background/api.js

@@ -1006,9 +1006,9 @@ module.exports = async ({
 		});
 	})
 
-	const feedCall = (callback) =>
+	const feedCall = (index, callback) =>
 	{
-		callback(feed.feed)
+		callback(feed.feed.slice(index || 0, (index || 0) + 20));
 	}
 	recive('feed', mergeTorrentsWithDownloadsFn(feedCall, true)); // don't overwrite feed value
 
@@ -1032,6 +1032,11 @@ module.exports = async ({
 
 					if(Array.isArray(remoteFeed) || !remoteFeed.feed)
 						return // old version call
+
+					if(remoteFeed.feed.length > feed.max) {
+						logT('feed', 'remote feed have more torrent that needed: ', remoteFeed.feed.length, ' > ', feed.max);
+						remoteFeed.feed = remoteFeed.feed.slice(0, feed.max);
+					}
 
 					if(remoteFeed.feed.length > feed.size() || (remoteFeed.feed.length == feed.size() && remoteFeed.feedDate > feed.feedDate))
 					{