feat: allow force refresh the page in index page

Author: geekdada

src/pages/Index/index.tsx

@@ -1,10 +1,9 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core'
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback } from 'react'
 import { Button, Heading, Toggle } from '@sumup/circuit-ui'
 import css from '@emotion/css/macro'
 import { useTranslation } from 'react-i18next'
-import { toast } from 'react-toastify'
 import tw from 'twin.macro'
 import { delay } from 'bluebird'
 import { useHistory } from 'react-router-dom'
@@ -20,12 +19,11 @@ import {
   usePlatformBuild,
   usePlatformVersion,
   useProfile,
-  useProfileDispatch,
 } from '../../models/profile'
 import { Capability } from '../../types'
-import { isRunInSurge } from '../../utils'
+import { forceRefresh, isRunInSurge } from '../../utils'
 import { ExistingProfiles, LastUsedProfile } from '../../utils/constant'
-import fetcher, { httpClient } from '../../utils/fetcher'
+import fetcher from '../../utils/fetcher'
 import HostInfo from './components/HostInfo'
 import TrafficCell from './components/TrafficCell'
 import Events from './components/Events'
@@ -36,7 +34,6 @@ import menu from './menu'
 const Page: React.FC = () => {
   const history = useHistory()
   const profile = useProfile()
-  const profileDispatch = useProfileDispatch()
   const { data: systemProxy } = useSWR<Capability>(
     profile?.platform === 'macos' ? '/features/system_proxy' : null,
     fetcher,
@@ -49,7 +46,6 @@ const Page: React.FC = () => {
   const platform = usePlatform()
   const platformVersion = usePlatformVersion()
   const platformBuild = usePlatformBuild()
-  const isFirstShown = useRef(true)
 
   const toggleSystemProxy = useCallback(() => {
     fetcher({
@@ -99,36 +95,6 @@ const Page: React.FC = () => {
     }
   }
 
-  useEffect(() => {
-    if (!profile?.platform || !isFirstShown.current) {
-      return
-    }
-
-    httpClient
-      .request({
-        url: '/environment',
-        method: 'GET',
-      })
-      .then((res) => {
-        const currentPlatformVersion = res.headers['x-surge-version']
-
-        if (currentPlatformVersion !== platformVersion) {
-          profileDispatch({
-            type: 'updatePlatformVersion',
-            payload: {
-              platformVersion: currentPlatformVersion,
-            },
-          })
-        }
-
-        isFirstShown.current = false
-      })
-      .catch((err) => {
-        console.error(err)
-        toast.error(t('common.surge_too_old'))
-      })
-  }, [platformVersion, profile?.platform, profileDispatch, t])
-
   return (
     <React.Fragment>
       <div
@@ -143,7 +109,7 @@ const Page: React.FC = () => {
         >
           {profile && (
             <div tw="w-full flex justify-between items-center">
-              <div tw="w-2/3" onDoubleClick={() => window.location.reload()}>
+              <div tw="w-2/3" onDoubleClick={forceRefresh}>
                 <HostInfo />
               </div>
 

src/utils/index.ts

@@ -1,3 +1,5 @@
+import { unregisterAsync } from '../serviceWorkerRegistration'
+
 export const isFalsy = (obj: string | boolean | 1 | 0) =>
   obj === 0 || obj === false || (typeof obj === 'string' && obj.length === 0)
 
@@ -6,3 +8,11 @@ export const isTruthy = (obj: string | boolean | 1 | 0) =>
 
 export const isRunInSurge = (): boolean =>
   'REACT_APP_RUN_IN_SURGE' in process.env
+
+export const forceRefresh = async (): Promise<void> => {
+  if (process.env.REACT_APP_USE_SW) {
+    await unregisterAsync()
+  }
+
+  window.location.reload()
+}