Remember scroll position on refresh

4 files changed, 37 insertions, 6 deletions

diff --git a/gui/src/renderer/app.tsx b/gui/src/renderer/app.tsx
index 0d9221c51f..97a6f6a310 100644
--- a/gui/src/renderer/app.tsx
+++ b/gui/src/renderer/app.tsx
@@ -25,7 +25,12 @@ import {
 import { messages, relayLocations } from '../shared/gettext';
 import { IGuiSettingsState, SYSTEM_PREFERRED_LOCALE_KEY } from '../shared/gui-settings-state';
 import { IRelayListPair, LaunchApplicationResult } from '../shared/ipc-schema';
-import { IChangelog, ICurrentAppVersionInfo, IHistoryObject } from '../shared/ipc-types';
+import {
+  IChangelog,
+  ICurrentAppVersionInfo,
+  IHistoryObject,
+  ScrollPositions,
+} from '../shared/ipc-types';
 import log, { ConsoleOutput } from '../shared/logging';
 import { LogLevel } from '../shared/logging-types';
 import { Scheduler } from '../shared/scheduler';
@@ -248,6 +253,8 @@ export default class AppRenderer {
 
     void this.updateLocation();
 
+    this.reduxActions.userInterface.setScrollPositions(initialState.scrollPositions);
+
     if (initialState.navigationHistory) {
       this.history = History.fromSavedHistory(initialState.navigationHistory);
     } else {
@@ -567,6 +574,10 @@ export default class AppRenderer {
     IpcRendererEventChannel.navigation.setHistory(history);
   }
 
+  public setScrollPositions(scrollPositions: ScrollPositions) {
+    IpcRendererEventChannel.navigation.setScrollPositions(scrollPositions);
+  }
+
   // Make sure that the content height is correct and log if it isn't. This is mostly for debugging
   // purposes since there's a bug in Electron that causes the app height to be another value than
   // the one we have set.
diff --git a/gui/src/renderer/components/NavigationBar.tsx b/gui/src/renderer/components/NavigationBar.tsx
index 2628f484eb..02de9fdb6e 100644
--- a/gui/src/renderer/components/NavigationBar.tsx
+++ b/gui/src/renderer/components/NavigationBar.tsx
@@ -1,7 +1,8 @@
-import React, { useCallback, useContext, useLayoutEffect, useRef } from 'react';
+import React, { useCallback, useContext, useEffect, useLayoutEffect, useRef } from 'react';
 
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
+import { useAppContext } from '../context';
 import useActions from '../lib/actionsHook';
 import { useHistory } from '../lib/history';
 import { useCombinedRefs } from '../lib/utilityHooks';
@@ -114,18 +115,20 @@ export const NavigationScrollbars = React.forwardRef(function NavigationScrollba
 ) {
   const history = useHistory();
   const { onScroll } = useContext(NavigationScrollContext);
+  const { setScrollPositions } = useAppContext();
 
   const ref = useRef<CustomScrollbarsRef>();
   const combinedRefs = useCombinedRefs(forwardedRef, ref);
 
   const { addScrollPosition, removeScrollPosition } = useActions(userInterface);
-  const scrollPosition = useSelector(
-    (state) => state.userInterface.scrollPosition[history.location.pathname],
-  );
+  const scrollPositions = useSelector((state) => state.userInterface.scrollPosition);
+
+  useEffect(() => setScrollPositions(scrollPositions), [scrollPositions]);
 
   useLayoutEffect(() => {
     const path = history.location.pathname;
 
+    const scrollPosition = scrollPositions[history.location.pathname];
     if (history.action === 'POP' && scrollPosition) {
       ref.current?.scrollTo(...scrollPosition);
       removeScrollPosition(path);
diff --git a/gui/src/renderer/redux/userinterface/actions.ts b/gui/src/renderer/redux/userinterface/actions.ts
index ce0cd5401b..cc8929934d 100644
--- a/gui/src/renderer/redux/userinterface/actions.ts
+++ b/gui/src/renderer/redux/userinterface/actions.ts
@@ -1,5 +1,5 @@
 import { MacOsScrollbarVisibility } from '../../../shared/ipc-schema';
-import { IChangelog } from '../../../shared/ipc-types';
+import { IChangelog, ScrollPositions } from '../../../shared/ipc-types';
 
 export interface IUpdateLocaleAction {
   type: 'UPDATE_LOCALE';
@@ -20,6 +20,11 @@ export interface ISetWindowFocusedAction {
   focused: boolean;
 }
 
+export interface ISetScrollPositions {
+  type: 'SET_SCROLL_POSITIONS';
+  scrollPositions: ScrollPositions;
+}
+
 export interface IAddScrollPosition {
   type: 'ADD_SCROLL_POSITION';
   path: string;
@@ -56,6 +61,7 @@ export type UserInterfaceAction =
   | IUpdateWindowArrowPositionAction
   | IUpdateConnectionInfoOpenAction
   | ISetWindowFocusedAction
+  | ISetScrollPositions
   | IAddScrollPosition
   | IRemoveScrollPosition
   | ISetMacOsScrollbarVisibility
@@ -90,6 +96,13 @@ function setWindowFocused(focused: boolean): ISetWindowFocusedAction {
   };
 }
 
+function setScrollPositions(scrollPositions: ScrollPositions): ISetScrollPositions {
+  return {
+    type: 'SET_SCROLL_POSITIONS',
+    scrollPositions,
+  };
+}
+
 function addScrollPosition(path: string, scrollPosition: [number, number]): IAddScrollPosition {
   return {
     type: 'ADD_SCROLL_POSITION',
@@ -140,6 +153,7 @@ export default {
   updateWindowArrowPosition,
   toggleConnectionPanel,
   setWindowFocused,
+  setScrollPositions,
   addScrollPosition,
   removeScrollPosition,
   setMacOsScrollbarVisibility,
diff --git a/gui/src/renderer/redux/userinterface/reducers.ts b/gui/src/renderer/redux/userinterface/reducers.ts
index ca470a8cba..1850d553ab 100644
--- a/gui/src/renderer/redux/userinterface/reducers.ts
+++ b/gui/src/renderer/redux/userinterface/reducers.ts
@@ -42,6 +42,9 @@ export default function (
     case 'SET_WINDOW_FOCUSED':
       return { ...state, windowFocused: action.focused };
 
+    case 'SET_SCROLL_POSITIONS':
+      return { ...state, scrollPosition: action.scrollPositions };
+
     case 'ADD_SCROLL_POSITION':
       return {
         ...state,