Auto fetch new posts for front page and communities.

- Fixes #286

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<any, State> {
 
   private subscription: Subscription;
+  private postFetcher: any;
   private emptyState: State = {
     community: {
       id: null,
@@ -79,10 +80,12 @@ export class Community extends Component<any, State> {
       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<any, State> {
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
+    window.scrollTo(0,0);
   }
 
   prevPage(i: Community) { 
@@ -168,6 +172,7 @@ export class Community extends Component<any, State> {
     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<any, State> {
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
+    window.scrollTo(0,0);
   }
 
   updateUrl() {
@@ -183,6 +189,11 @@ export class Community extends Component<any, State> {
     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<any, State> {
       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;

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<any, MainState> {
 
   private subscription: Subscription;
+  private postFetcher: any;
   private emptyState: MainState = {
     subscribedCommunities: [],
     trendingCommunities: [],
@@ -98,11 +99,12 @@ export class Main extends Component<any, MainState> {
 
     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<any, MainState> {
     i.setState(i.state);
     i.updateUrl();
     i.fetchPosts();
+    window.scrollTo(0,0);
   }
 
   prevPage(i: Main) { 
@@ -370,6 +373,7 @@ export class Main extends Component<any, MainState> {
     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<any, MainState> {
     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<any, MainState> {
     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<any, MainState> {
       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;

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;