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

* Adding simple scroll position restore. Fixes #18

* Removing isBrowser check from community.tsx.

diff --git a/src/shared/components/community.tsx b/src/shared/components/community.tsx
index 613c0c7c178565704aa9d205dfb5f94384c62eb3..4c4e6d1bcbe2e4ae471c4c92c3063b92ee474bd3 100644 (file)
--- a/src/shared/components/community.tsx
+++ b/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 ||

diff --git a/src/shared/components/main.tsx b/src/shared/components/main.tsx
index a99aa5e6a9c8f05407619499d65a470e09c69284..1c7b7da97df44ce8b27c770ce080dd5276b5df5d 100644 (file)
--- a/src/shared/components/main.tsx
+++ b/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;

diff --git a/src/shared/components/post.tsx b/src/shared/components/post.tsx
index 91e9b013aa9176d935ceb049ff3514a45e905a10..2e6d31e889605017adcab68228a986f0935fd9bd 100644 (file)
--- a/src/shared/components/post.tsx
+++ b/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;
 

diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx
index 1cdd35f1ac877919a36bc82daff40f5fff233574..f4ef43016ae6dea8bd1905f2695a35f4ecf6f5ba 100644 (file)
--- a/src/shared/components/search.tsx
+++ b/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(

diff --git a/src/shared/components/user.tsx b/src/shared/components/user.tsx
index a431ff8fa3b72fbf068574199facba642fdb988e..e838851925f665b9070db28cdb559a084e06ad4d 100644 (file)
--- a/src/shared/components/user.tsx
+++ b/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);

diff --git a/src/shared/utils.ts b/src/shared/utils.ts
index 1bf22db7a252359af9d0f4f1890665b627193aa0..4315e2e9a09f97deca3720957a1d6bfc722fdfac 100644 (file)
--- a/src/shared/utils.ts
+++ b/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);
+}