Adding simple scroll position restore. Fixes #18 (#162)

* Adding simple scroll position restore. Fixes #18

* Removing isBrowser check from community.tsx.

src/shared/components/community.tsx

@@ -48,12 +48,13 @@ import {
   notifyPost,
   setIsoData,
   wsSubscribe,
-  isBrowser,
   communityRSSUrl,
   wsUserOp,
   wsClient,
   authField,
   setOptionalAuth,
+  saveScrollPosition,
+  restoreScrollPosition,
 } from '../utils';
 import { i18n } from '../i18next';
 
@@ -144,10 +145,9 @@ export class Community extends Component<any, State> {
   }
 
   componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription.unsubscribe();
-      window.isoData.path = undefined;
-    }
+    saveScrollPosition(this.context);
+    this.subscription.unsubscribe();
+    window.isoData.path = undefined;
   }
 
   static getDerivedStateFromProps(props: any): CommunityProps {
@@ -482,6 +482,7 @@ export class Community extends Component<any, State> {
       this.state.posts = data.posts;
       this.state.postsLoading = false;
       this.setState(this.state);
+      restoreScrollPosition(this.context);
       setupTippy();
     } else if (
       op == UserOperation.EditPost ||

src/shared/components/main.tsx

@@ -53,11 +53,12 @@ import {
   notifyPost,
   setIsoData,
   wsSubscribe,
-  isBrowser,
   wsUserOp,
   setOptionalAuth,
   wsClient,
   authField,
+  saveScrollPosition,
+  restoreScrollPosition,
 } from '../utils';
 import { i18n } from '../i18next';
 import { T } from 'inferno-i18next';
@@ -169,10 +170,9 @@ export class Main extends Component<any, MainState> {
   }
 
   componentWillUnmount() {
-    if (isBrowser()) {
-      this.subscription.unsubscribe();
-      window.isoData.path = undefined;
-    }
+    saveScrollPosition(this.context);
+    this.subscription.unsubscribe();
+    window.isoData.path = undefined;
   }
 
   static getDerivedStateFromProps(props: any): MainProps {
@@ -757,6 +757,7 @@ export class Main extends Component<any, MainState> {
       this.state.posts = data.posts;
       this.state.loading = false;
       this.setState(this.state);
+      restoreScrollPosition(this.context);
       setupTippy();
     } else if (op == UserOperation.CreatePost) {
       let data = wsJsonToRes<PostResponse>(msg).data;

src/shared/components/post.tsx

@@ -50,6 +50,8 @@ import {
   wsClient,
   authField,
   setOptionalAuth,
+  saveScrollPosition,
+  restoreScrollPosition,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { Sidebar } from './sidebar';
@@ -155,6 +157,7 @@ export class Post extends Component<any, PostState> {
   componentWillUnmount() {
     this.subscription.unsubscribe();
     window.isoData.path = undefined;
+    saveScrollPosition(this.context);
   }
 
   componentDidMount() {
@@ -483,6 +486,7 @@ export class Post extends Component<any, PostState> {
       this.fetchCrossPosts();
       this.setState(this.state);
       setupTippy();
+      restoreScrollPosition(this.context);
     } else if (op == UserOperation.CreateComment) {
       let data = wsJsonToRes<CommentResponse>(msg).data;
 

src/shared/components/search.tsx

@@ -30,6 +30,8 @@ import {
   wsClient,
   authField,
   setOptionalAuth,
+  saveScrollPosition,
+  restoreScrollPosition,
 } from '../utils';
 import { PostListing } from './post-listing';
 import { HtmlTags } from './html-tags';
@@ -123,6 +125,7 @@ export class Search extends Component<any, SearchState> {
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
+    saveScrollPosition(this.context);
   }
 
   static getDerivedStateFromProps(props: any): SearchProps {
@@ -516,6 +519,7 @@ export class Search extends Component<any, SearchState> {
       this.state.loading = false;
       window.scrollTo(0, 0);
       this.setState(this.state);
+      restoreScrollPosition(this.context);
     } else if (op == UserOperation.CreateCommentLike) {
       let data = wsJsonToRes<CommentResponse>(msg).data;
       createCommentLikeRes(

src/shared/components/user.tsx

@@ -45,6 +45,8 @@ import {
   wsClient,
   authField,
   setOptionalAuth,
+  saveScrollPosition,
+  restoreScrollPosition,
 } from '../utils';
 import { UserListing } from './user-listing';
 import { HtmlTags } from './html-tags';
@@ -231,6 +233,7 @@ export class User extends Component<any, UserState> {
 
   componentWillUnmount() {
     this.subscription.unsubscribe();
+    saveScrollPosition(this.context);
   }
 
   static getDerivedStateFromProps(props: any): UserProps {
@@ -1113,6 +1116,7 @@ export class User extends Component<any, UserState> {
       this.setUserInfo();
       this.state.loading = false;
       this.setState(this.state);
+      restoreScrollPosition(this.context);
     } else if (op == UserOperation.SaveUserSettings) {
       let data = wsJsonToRes<LoginResponse>(msg).data;
       UserService.Instance.login(data);

src/shared/utils.ts

@@ -1173,3 +1173,15 @@ moment.updateLocale('en', {
     yy: '%dY',
   },
 });
+
+export function saveScrollPosition(context: any) {
+  let path: string = context.router.route.location.pathname;
+  let y = window.scrollY;
+  sessionStorage.setItem(`scrollPosition_${path}`, y.toString());
+}
+
+export function restoreScrollPosition(context: any) {
+  let path: string = context.router.route.location.pathname;
+  let y = Number(sessionStorage.getItem(`scrollPosition_${path}`));
+  window.scrollTo(0, y);
+}