fix: wrong viewport position when history goes forward or backward

Author: geekdada

src/components/BackButton/index.tsx

@@ -3,7 +3,6 @@ import { jsx } from '@emotion/core'
 import { IconButton } from '@sumup/circuit-ui'
 import { ChevronLeft } from '@sumup/icons'
 import React from 'react'
-import styled from '@emotion/styled/macro'
 import css from '@emotion/css/macro'
 import tw from 'twin.macro'
 import { useHistory } from 'react-router-dom'

src/components/ScrollToTop/index.tsx

@@ -1,14 +1,39 @@
 import { useModal } from '@sumup/circuit-ui'
 import React, { useEffect } from 'react'
-import { useLocation } from 'react-router-dom'
+import { useHistory, useLocation } from 'react-router-dom'
+
+function useScrollMemory(): void {
+  const history = useHistory<{ scroll: number } | undefined>()
+
+  useEffect(() => {
+    const { push, replace } = history
+
+    // Override the history PUSH method to automatically set scroll state.
+    history.push = (path: string) => {
+      push(path, { scroll: window.scrollY })
+    }
+    // Override the history REPLACE method to automatically set scroll state.
+    history.replace = (path: string) => {
+      replace(path, { scroll: window.scrollY })
+    }
+
+    // Listen for location changes and set the scroll position accordingly.
+    // @ts-ignore
+    const unregister = history.listen((location, action) => {
+      window.scrollTo(0, action !== 'POP' ? 0 : location.state?.scroll ?? 0)
+    })
+
+    // Unregister listener when component unmounts.
+    return () => {
+      unregister()
+    }
+  }, [history])
+}
 
 const ScrollToTop: React.FC = () => {
   const { pathname } = useLocation()
   const { isModalOpen, removeModal } = useModal()
-
-  useEffect(() => {
-    window.scrollTo(0, 0)
-  }, [pathname])
+  useScrollMemory()
 
   useEffect(
     () => {

src/models/profile.tsx

@@ -77,6 +77,11 @@ export const usePlatformVersion = ():
 
   return context.profile?.platformVersion
 }
+export const usePlatformBuild = (): Profile['platformBuild'] | undefined => {
+  const context = React.useContext(ProfileContext)
+
+  return context.profile?.platformBuild
+}
 
 export const useSurgeHost = (): string | null => {
   const context = React.useContext(ProfileContext)

src/pages/Index/components/HostInfo.tsx

@@ -0,0 +1,20 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/core'
+import React from 'react'
+import tw from 'twin.macro'
+import css from '@emotion/css/macro'
+
+import ProfileCell from '../../../components/ProfileCell'
+import { useProfile } from '../../../models/profile'
+
+const HostInfo = (): JSX.Element => {
+  const profile = useProfile()
+
+  return (
+    <div tw="bg-gray-100 rounded-lg">
+      {profile && <ProfileCell variant="left" profile={profile} />}
+    </div>
+  )
+}
+
+export default HostInfo

src/pages/Index/index.tsx

@@ -2,7 +2,6 @@
 import { jsx } from '@emotion/core'
 import React, { useCallback } from 'react'
 import { Button, Heading, Toggle } from '@sumup/circuit-ui'
-import styled from '@emotion/styled/macro'
 import css from '@emotion/css/macro'
 import { useTranslation } from 'react-i18next'
 import tw from 'twin.macro'
@@ -13,18 +12,19 @@ import store from 'store2'
 
 import ChangeLanguage from '../../components/ChangeLanguage'
 import { DataGroup, DataRow, DataRowMain } from '../../components/Data'
-import ProfileCell from '../../components/ProfileCell'
 import Ad from '../../components/Ad'
 import VersionSupport from '../../components/VersionSupport'
 import {
   usePlatform,
+  usePlatformBuild,
   usePlatformVersion,
   useProfile,
 } from '../../models/profile'
 import { Capability } from '../../types'
 import { isRunInSurge } from '../../utils'
 import { ExistingProfiles, LastUsedProfile } from '../../utils/constant'
 import fetcher from '../../utils/fetcher'
+import HostInfo from './components/HostInfo'
 import TrafficCell from './components/TrafficCell'
 import Events from './components/Events'
 import MenuTile, { MenuTileTitle } from './components/MenuTile'
@@ -45,6 +45,7 @@ const Page: React.FC = () => {
   const { t } = useTranslation()
   const platform = usePlatform()
   const platformVersion = usePlatformVersion()
+  const platformBuild = usePlatformBuild()
 
   const toggleSystemProxy = useCallback(() => {
     fetcher({
@@ -107,9 +108,9 @@ const Page: React.FC = () => {
           {profile && (
             <div tw="w-full flex justify-between items-center">
               <div
-                css={[tw`w-2/3 bg-gray-100 rounded-lg`]}
+                tw="w-2/3"
                 onDoubleClick={() => window.location.reload(true)}>
-                <ProfileCell variant="left" profile={profile} />
+                <HostInfo />
               </div>
 
               {isRunInSurge() ? (
@@ -209,6 +210,15 @@ const Page: React.FC = () => {
           <div tw="mt-4 px-4">
             <ChangeLanguage />
           </div>
+
+          <div tw="text-center mt-4 text-sm">
+            {Boolean(platform && platformBuild && platformVersion) && (
+              <code tw="px-4 py-2 rounded bg-gray-100 text-gray-500">
+                v{process.env.REACT_APP_VERSION} - {platform} v{platformVersion}
+                ({platformBuild})
+              </code>
+            )}
+          </div>
         </div>
       </div>
     </React.Fragment>