From 5ccdbc01fead0d60f428ea01b51dda127a8fb3b7 Mon Sep 17 00:00:00 2001 From: Alexey Kasyanchuk Date: Sun, 21 Jul 2019 02:32:30 +0300 Subject: [PATCH] feat(feed): auto-loading feed list --- src/app/auto-scrollable.js | 38 ++++++++++++++++++++++++++++++++++++++ src/app/feed.js | 25 +++++++++++++++++-------- src/background/api.js | 9 +++++++-- 3 files changed, 62 insertions(+), 10 deletions(-) create mode 100644 src/app/auto-scrollable.js diff --git a/src/app/auto-scrollable.js b/src/app/auto-scrollable.js new file mode 100644 index 0000000..30de70f --- /dev/null +++ b/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); + } + } +} diff --git a/src/app/feed.js b/src/app/feed.js index f746dd0..bc7deff 100644 --- a/src/app/feed.js +++ b/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 ( diff --git a/src/background/api.js b/src/background/api.js index 21150f5..346d3c3 100644 --- a/src/background/api.js +++ b/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)) {