From b16d78aaffdafc9bed50fdf335b2d3ccc9aeab09 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Sun, 13 Oct 2019 12:37:10 -0700 Subject: [PATCH] Auto fetch new posts for front page and communities. - Fixes #286 --- ui/src/components/community.tsx | 14 ++++++++++++-- ui/src/components/main.tsx | 16 +++++++++++++--- ui/src/utils.ts | 1 + 3 files changed, 26 insertions(+), 5 deletions(-) diff --git a/ui/src/components/community.tsx b/ui/src/components/community.tsx index 3459320c4..bcd232e32 100644 --- a/ui/src/components/community.tsx +++ b/ui/src/components/community.tsx @@ -5,7 +5,7 @@ import { UserOperation, Community as CommunityI, GetCommunityResponse, Community import { WebSocketService } from '../services'; import { PostListings } from './post-listings'; import { Sidebar } from './sidebar'; -import { msgOp, routeSortTypeToEnum, fetchLimit } from '../utils'; +import { msgOp, routeSortTypeToEnum, fetchLimit, postRefetchSeconds } from '../utils'; import { T, i18n } from 'inferno-i18next'; interface State { @@ -23,6 +23,7 @@ interface State { export class Community extends Component { private subscription: Subscription; + private postFetcher: any; private emptyState: State = { community: { id: null, @@ -79,10 +80,12 @@ export class Community extends Component { WebSocketService.Instance.getCommunityByName(this.state.communityName); } + this.keepFetchingPosts(); } componentWillUnmount() { this.subscription.unsubscribe(); + clearInterval(this.postFetcher); } // Necessary for back button for some reason @@ -161,6 +164,7 @@ export class Community extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } prevPage(i: Community) { @@ -168,6 +172,7 @@ export class Community extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } handleSortChange(i: Community, event: any) { @@ -176,6 +181,7 @@ export class Community extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } updateUrl() { @@ -183,6 +189,11 @@ export class Community extends Component { this.props.history.push(`/c/${this.state.community.name}/sort/${sortStr}/page/${this.state.page}`); } + keepFetchingPosts() { + this.fetchPosts(); + this.postFetcher = setInterval(() => this.fetchPosts(), postRefetchSeconds); + } + fetchPosts() { let getPostsForm: GetPostsForm = { page: this.state.page, @@ -221,7 +232,6 @@ export class Community extends Component { let res: GetPostsResponse = msg; this.state.posts = res.posts; this.state.loading = false; - window.scrollTo(0,0); this.setState(this.state); } else if (op == UserOperation.CreatePostLike) { let res: CreatePostLikeResponse = msg; diff --git a/ui/src/components/main.tsx b/ui/src/components/main.tsx index b6c901be1..1366c162c 100644 --- a/ui/src/components/main.tsx +++ b/ui/src/components/main.tsx @@ -6,7 +6,7 @@ import { UserOperation, CommunityUser, GetFollowedCommunitiesResponse, ListCommu import { WebSocketService, UserService } from '../services'; import { PostListings } from './post-listings'; import { SiteForm } from './site-form'; -import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum } from '../utils'; +import { msgOp, repoUrl, mdToHtml, fetchLimit, routeSortTypeToEnum, routeListingTypeToEnum, postRefetchSeconds } from '../utils'; import { i18n } from '../i18next'; import { T } from 'inferno-i18next'; @@ -25,6 +25,7 @@ interface MainState { export class Main extends Component { private subscription: Subscription; + private postFetcher: any; private emptyState: MainState = { subscribedCommunities: [], trendingCommunities: [], @@ -98,11 +99,12 @@ export class Main extends Component { WebSocketService.Instance.listCommunities(listCommunitiesForm); - this.fetchPosts(); + this.keepFetchingPosts(); } componentWillUnmount() { this.subscription.unsubscribe(); + clearInterval(this.postFetcher); } // Necessary for back button for some reason @@ -362,6 +364,7 @@ export class Main extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } prevPage(i: Main) { @@ -370,6 +373,7 @@ export class Main extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } handleSortChange(i: Main, event: any) { @@ -379,6 +383,7 @@ export class Main extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); } handleTypeChange(i: Main, event: any) { @@ -388,6 +393,12 @@ export class Main extends Component { i.setState(i.state); i.updateUrl(); i.fetchPosts(); + window.scrollTo(0,0); + } + + keepFetchingPosts() { + this.fetchPosts(); + this.postFetcher = setInterval(() => this.fetchPosts(), postRefetchSeconds); } fetchPosts() { @@ -437,7 +448,6 @@ export class Main extends Component { let res: GetPostsResponse = msg; this.state.posts = res.posts; this.state.loading = false; - window.scrollTo(0,0); this.setState(this.state); } else if (op == UserOperation.CreatePostLike) { let res: CreatePostLikeResponse = msg; diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 8fb64c6e6..32193db49 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -17,6 +17,7 @@ import * as emojiShortName from 'emoji-short-name'; export const repoUrl = 'https://github.com/dessalines/lemmy'; export const markdownHelpUrl = 'https://commonmark.org/help/'; +export const postRefetchSeconds: number = 60*1000; export const fetchLimit: number = 20; export const mentionDropdownFetchLimit = 6;