From: Dessalines <dessalines@users.noreply.github.com>
Date: Tue, 2 Feb 2021 18:36:59 +0000 (-0500)
Subject: Adding simple scroll position restore. Fixes #18 (#162)
X-Git-Url: http://these/git/%22https:/join-lemmy.org/%7Bthis.imageSrc.unwrap%28%29%7D?a=commitdiff_plain;h=192ec14441710ab788f0df69cc01eae21af6f986;p=lemmy-ui.git

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 613c0c7..4c4e6d1 100644
--- 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 a99aa5e..1c7b7da 100644
--- 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 91e9b01..2e6d31e 100644
--- 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 1cdd35f..f4ef430 100644
--- 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 a431ff8..e838851 100644
--- 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 1bf22db..4315e2e 100644
--- 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);
+}