From 192ec14441710ab788f0df69cc01eae21af6f986 Mon Sep 17 00:00:00 2001 From: Dessalines Date: Tue, 2 Feb 2021 13:36:59 -0500 Subject: [PATCH] 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 | 11 ++++++----- src/shared/components/main.tsx | 11 ++++++----- src/shared/components/post.tsx | 4 ++++ src/shared/components/search.tsx | 4 ++++ src/shared/components/user.tsx | 4 ++++ src/shared/utils.ts | 12 ++++++++++++ 6 files changed, 36 insertions(+), 10 deletions(-) diff --git a/src/shared/components/community.tsx b/src/shared/components/community.tsx index 613c0c7c..4c4e6d1b 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 { } 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 { 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 a99aa5e6..1c7b7da9 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 { } 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 { 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(msg).data; diff --git a/src/shared/components/post.tsx b/src/shared/components/post.tsx index 91e9b013..2e6d31e8 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 { componentWillUnmount() { this.subscription.unsubscribe(); window.isoData.path = undefined; + saveScrollPosition(this.context); } componentDidMount() { @@ -483,6 +486,7 @@ export class Post extends Component { this.fetchCrossPosts(); this.setState(this.state); setupTippy(); + restoreScrollPosition(this.context); } else if (op == UserOperation.CreateComment) { let data = wsJsonToRes(msg).data; diff --git a/src/shared/components/search.tsx b/src/shared/components/search.tsx index 1cdd35f1..f4ef4301 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 { componentWillUnmount() { this.subscription.unsubscribe(); + saveScrollPosition(this.context); } static getDerivedStateFromProps(props: any): SearchProps { @@ -516,6 +519,7 @@ export class Search extends Component { this.state.loading = false; window.scrollTo(0, 0); this.setState(this.state); + restoreScrollPosition(this.context); } else if (op == UserOperation.CreateCommentLike) { let data = wsJsonToRes(msg).data; createCommentLikeRes( diff --git a/src/shared/components/user.tsx b/src/shared/components/user.tsx index a431ff8f..e8388519 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 { componentWillUnmount() { this.subscription.unsubscribe(); + saveScrollPosition(this.context); } static getDerivedStateFromProps(props: any): UserProps { @@ -1113,6 +1116,7 @@ export class User extends Component { this.setUserInfo(); this.state.loading = false; this.setState(this.state); + restoreScrollPosition(this.context); } else if (op == UserOperation.SaveUserSettings) { let data = wsJsonToRes(msg).data; UserService.Instance.login(data); diff --git a/src/shared/utils.ts b/src/shared/utils.ts index 1bf22db7..4315e2e9 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); +}