[FIX]: top nav highlight does not switch when using the back arrow (#460)

* feat(webview-controls): return to home page if not previous navigation in page

* chore(webview-controls): add comments

* chore(types): use electron's webview tag

* Revert "feat(webview-controls): return to home page if not previous navigation in page"

This reverts commit 4b2a265.

* refactor(webview): store webview url in a new store

* refactor(top-navbar): apply current active tab styles based on the current url in webview navigation store

* refactor(extract-domain): return null if invalid url

* refactor(types): remove WebviewType

* refactor(extract-domain): use console.warn on error

* refactor(web-navigation-store): use getters and set method

* refactor(top-navbar): return inactive styles if not current url

* fix(web-navigation-store): make observable on instantiation not on init

* refactor: remove unused import

* refactor(constants): add GOG_EMBED_URL

* fix(top-navbar): remove trailing /

* refactor(webview): use old gog regex

* point proxy to main

* proxy prettier

---------

Co-authored-by: BrettCleary <27568879+BrettCleary@users.noreply.github.com>

Author: eliobricenov

jest.config.js

@@ -16,7 +16,7 @@ module.exports = {
     '<rootDir>/coverage'
   ],
   coverageReporters: ['text', 'html'],
-  projects: ['<rootDir>/src/backend'],
+  projects: ['<rootDir>/src/backend', '<rootDir>/src/frontend'],
 
   rootDir: '.'
 }

src/backend/hyperplay-proxy-server

@@ -244,6 +244,7 @@ export interface GameStatus {
 }
 
 export type GlobalConfigVersion = 'auto' | 'v0'
+
 export interface InstallProgress {
   bytes: string
   eta?: string
@@ -253,6 +254,7 @@ export interface InstallProgress {
   diskSpeed?: number
   file?: string
 }
+
 export interface InstalledInfo {
   executable: string
   install_path: string
@@ -281,6 +283,7 @@ export type UserInfo = {
   displayName: string
   user: string
 }
+
 export interface WineInstallation {
   bin: string
   name: string
@@ -565,21 +568,6 @@ interface GamepadActionArgsWithoutMetadata {
   metadata?: undefined
 }
 
-type ElWebview = {
-  canGoBack: () => boolean
-  canGoForward: () => boolean
-  goBack: () => void
-  goForward: () => void
-  reload: () => void
-  isLoading: () => boolean
-  getURL: () => string
-  copy: () => string
-  selectAll: () => void
-  findInPage: (text: string | RegExp) => void
-}
-
-export type WebviewType = HTMLWebViewElement & ElWebview
-
 export type InstallPlatform =
   | LegendaryInstallPlatform
   | GogInstallPlatform
@@ -601,6 +589,7 @@ export interface Tools {
 }
 
 export type DMStatus = 'done' | 'error' | 'abort' | 'paused'
+
 export interface DMQueueElement {
   type: 'update' | 'install'
   params: InstallParams
@@ -678,6 +667,7 @@ export interface GameScoreInfo {
   score: string
   urlid: string
 }
+
 export interface PCGamingWikiInfo {
   steamID: string
   howLongToBeatID: string

src/common/types.ts

@@ -0,0 +1,34 @@
+import { extractMainDomain } from 'frontend/helpers/extract-main-domain'
+
+describe('extractMainDomain', () => {
+  it('should correctly extract main domain without subdomain', () => {
+    const url = 'https://epicgames.com/store'
+    const mainDomain = extractMainDomain(url)
+    expect(mainDomain).toEqual('epicgames.com')
+  })
+
+  it('should correctly extract main domain with www subdomain', () => {
+    const url = 'https://www.epicgames.com/store'
+    const mainDomain = extractMainDomain(url)
+    expect(mainDomain).toEqual('epicgames.com')
+  })
+
+  it('should correctly extract main domain with multiple subdomains', () => {
+    const url = 'https://sub.sub.epicgames.com/store'
+    const mainDomain = extractMainDomain(url)
+    expect(mainDomain).toEqual('epicgames.com')
+  })
+
+  it('should return the full domain when no subdomains present', () => {
+    const url = 'https://example.com'
+    const mainDomain = extractMainDomain(url)
+    expect(mainDomain).toEqual('example.com')
+  })
+
+  it('return null when url is invalid', () => {
+    jest.spyOn(console, 'warn').mockImplementationOnce(jest.fn)
+    const url = 'invalid url'
+    const mainDomain = extractMainDomain(url)
+    expect(mainDomain).toEqual(null)
+  })
+})

src/frontend/__tests__/helpers/extract-main-domain.test.ts

@@ -10,33 +10,34 @@ import { observable } from 'mobx'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'frontend/state/ContextProvider'
 import { NavLink, useLocation } from 'react-router-dom'
+import {
+  EPIC_STORE_URL,
+  GOG_STORE_URL,
+  HYPERPLAY_STORE_URL
+} from 'frontend/constants'
+import webviewNavigationStore from 'frontend/store/WebviewNavigationStore'
+import { extractMainDomain } from '../../../helpers/extract-main-domain'
 
 const TopNavBar = observer(() => {
   const { t } = useTranslation()
 
   const { showMetaMaskBrowserSidebarLinks } = useContext(ContextProvider)
   const [badgeText, setBadgeText] = useState('0')
-  const { pathname, search } = useLocation()
+  const { pathname } = useLocation()
   const pagesToShowStoreNavOptions = [
     '/hyperplaystore',
     '/gogstore',
     '/epicstore',
-    '/store-page/'
+    '/store-page'
   ]
-  const searchParams = new URLSearchParams(search)
-  const queryParam = searchParams.get('store-url')
-  let isEpicStore = false
-  if (queryParam !== null) {
-    const storeUrl = new URL(queryParam)
-    isEpicStore = storeUrl.host === 'store.epicgames.com'
-  }
 
   const showStoreNavOptions = pagesToShowStoreNavOptions.includes(pathname)
 
   /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
   function setBadgeString(err: any, text: string) {
     setBadgeText(text)
   }
+
   useEffect(() => {
     const removeHandleSetBadgeText =
       window.api.handleSetBadgeTextInRenderer(setBadgeString)
@@ -45,14 +46,19 @@ const TopNavBar = observer(() => {
       removeHandleSetBadgeText()
     }
   }, [])
-  function getStoreTextStyle(storePath: string, isActive?: boolean) {
+
+  function getStoreTextStyle(viewURL: string) {
+    const { currentUrl } = webviewNavigationStore
     const inactiveStyle = { color: 'var(--color-neutral-400)' }
     const activeStyle = { color: '' }
-    if (isActive !== undefined && isActive) {
-      return activeStyle
-    }
-    return pathname === storePath ? activeStyle : inactiveStyle
+    // initial value of currentUrl is ''
+    if (!currentUrl) return inactiveStyle
+    const viewURLMainDomain = extractMainDomain(viewURL)
+    const currentURLMainDomain = extractMainDomain(currentUrl)
+    const isActive = viewURLMainDomain === currentURLMainDomain
+    return isActive ? activeStyle : inactiveStyle
   }
+
   return (
     <div className={styles.navBar}>
       <div>
@@ -73,7 +79,7 @@ const TopNavBar = observer(() => {
               <Button
                 type="link"
                 size="small"
-                style={getStoreTextStyle('/hyperplaystore')}
+                style={getStoreTextStyle(HYPERPLAY_STORE_URL)}
               >
                 HyperPlay
               </Button>
@@ -82,7 +88,7 @@ const TopNavBar = observer(() => {
               <Button
                 type="link"
                 size="small"
-                style={getStoreTextStyle('/epicstore', isEpicStore)}
+                style={getStoreTextStyle(EPIC_STORE_URL)}
               >
                 {t('Epic Games', 'Epic Games')}
               </Button>
@@ -91,7 +97,7 @@ const TopNavBar = observer(() => {
               <Button
                 type="link"
                 size="small"
-                style={getStoreTextStyle('/gogstore')}
+                style={getStoreTextStyle(GOG_STORE_URL)}
               >
                 {t('GOG', 'GOG')}
               </Button>

src/frontend/components/UI/TopNavBar/index.tsx

@@ -5,14 +5,14 @@ import {
   Replay
 } from '@mui/icons-material'
 import cx from 'classnames'
+import { WebviewTag } from 'electron'
 import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { WebviewType } from 'common/types'
 import SvgButton from '../SvgButton'
 import './index.css'
 
 interface WebviewControlsProps {
-  webview: WebviewType | null
+  webview: WebviewTag | null
   initURL: string
   openInBrowser: boolean
 }

src/frontend/components/UI/WebviewControls/index.tsx

@@ -0,0 +1,7 @@
+export const EPIC_LOGIN_URL = 'https://legendary.gl/epiclogin'
+export const HYPERPLAY_STORE_URL = 'https://store.hyperplay.xyz?isLauncher=true'
+export const EPIC_STORE_URL = 'https://www.epicgames.com/store'
+export const GOG_STORE_URL = `https://gog.com`
+export const WIKI_URL = 'https://docs.hyperplaygaming.com/'
+export const GOG_LOGIN_URL =
+  'https://auth.gog.com/auth?client_id=46899977096215655&redirect_uri=https%3A%2F%2Fembed.gog.com%2Fon_login_success%3Forigin%3Dclient&response_type=code&layout=galaxy'

src/frontend/constants.ts

@@ -0,0 +1,15 @@
+export function extractMainDomain(url: string) {
+  try {
+    const domain = new URL(url).hostname
+    const parts = domain.split('.')
+
+    if (parts.length >= 2) {
+      return parts.slice(-2).join('.')
+    }
+
+    return domain
+  } catch (e) {
+    console.warn(e)
+    return null
+  }
+}

src/frontend/helpers/extract-main-domain.ts

@@ -0,0 +1,27 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { compilerOptions } = require('../../tsconfig')
+
+module.exports = {
+  displayName: 'Frontend',
+
+  moduleDirectories: ['node_modules', '<rootDir>'],
+  // Module file extensions for importing
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+  testPathIgnorePatterns: ['./node_modules/'],
+  resetMocks: true,
+
+  rootDir: '../..',
+
+  // The root of your source code, typically /src
+  // `<rootDir>` is a token Jest substitutes
+  roots: ['<rootDir>/src/frontend'],
+
+  testMatch: ['**/__tests__/**/*.test.{ts,tsx}'],
+  // Jest transformations -- this adds support for TypeScript
+  // using ts-jest
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest'
+  },
+
+  modulePaths: [compilerOptions.baseUrl]
+}

src/frontend/jest.config.js

@@ -7,15 +7,25 @@ import React, {
 } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useNavigate, useLocation, useParams } from 'react-router'
+import { DidNavigateEvent, WebviewTag } from 'electron'
 
 import { UpdateComponent } from 'frontend/components/UI'
 import WebviewControls from 'frontend/components/UI/WebviewControls'
 import ContextProvider from 'frontend/state/ContextProvider'
-import { Runner, WebviewType } from 'common/types'
+import webviewNavigationStore from 'frontend/store/WebviewNavigationStore'
+import { Runner } from 'common/types'
 import './index.css'
 import LoginWarning from '../Login/components/LoginWarning'
 import authStore from 'frontend/store/AuthStore'
 import { observer } from 'mobx-react-lite'
+import {
+  EPIC_LOGIN_URL,
+  EPIC_STORE_URL,
+  GOG_LOGIN_URL,
+  GOG_STORE_URL,
+  HYPERPLAY_STORE_URL,
+  WIKI_URL
+} from '../../constants'
 
 function urlIsHpUrl(url: string) {
   const urlToTest = new URL(url)
@@ -35,39 +45,34 @@ function WebView() {
     message: t('loading.website', 'Loading Website')
   }))
   const navigate = useNavigate()
-  const webviewRef = useRef<WebviewType>(null)
+  const webviewRef = useRef<WebviewTag>(null)
 
   let lang = i18n.language
   if (i18n.language === 'pt') {
     lang = 'pt-BR'
   }
 
-  const epicLoginUrl = 'https://legendary.gl/epiclogin'
-
   const hyperplayStore =
-    'https://store.hyperplay.xyz?isLauncher=true' +
+    HYPERPLAY_STORE_URL +
     (authStore.authToken !== '' ? '&qamode=' + authStore.authToken : '')
 
-  const epicStore = `https://www.epicgames.com/store/${lang}/`
-  const gogStore = `https://gog.com`
-  const wikiURL = 'https://docs.hyperplaygaming.com/'
+  const epicStore = `${EPIC_STORE_URL}/${lang}/`
   const gogEmbedRegExp = new RegExp('https://embed.gog.com/on_login_success?')
-  const gogLoginUrl =
-    'https://auth.gog.com/auth?client_id=46899977096215655&redirect_uri=https%3A%2F%2Fembed.gog.com%2Fon_login_success%3Forigin%3Dclient&response_type=code&layout=galaxy'
 
   const trueAsStr = 'true' as unknown as boolean | undefined
   const { runner } = useParams() as { runner: Runner }
 
   const urls = {
     '/hyperplaystore': hyperplayStore,
     '/epicstore': epicStore,
-    '/gogstore': gogStore,
-    '/wiki': wikiURL,
-    '/loginEpic': epicLoginUrl,
-    '/loginGOG': gogLoginUrl,
-    '/loginweb/legendary': epicLoginUrl,
-    '/loginweb/gog': gogLoginUrl
+    '/gogstore': GOG_STORE_URL,
+    '/wiki': WIKI_URL,
+    '/loginEpic': EPIC_LOGIN_URL,
+    '/loginGOG': GOG_LOGIN_URL,
+    '/loginweb/legendary': EPIC_LOGIN_URL,
+    '/loginweb/gog': GOG_LOGIN_URL
   }
+
   let startUrl = Object.prototype.hasOwnProperty.call(urls, pathname)
     ? urls[pathname]
     : ''
@@ -82,7 +87,7 @@ function WebView() {
     }
   }
 
-  const isEpicLogin = runner === 'legendary' && startUrl === epicLoginUrl
+  const isEpicLogin = runner === 'legendary' && startUrl === EPIC_LOGIN_URL
   const [preloadPath, setPreloadPath] = useState('')
 
   useEffect(() => {
@@ -193,6 +198,18 @@ function WebView() {
     }
   }, [startUrl])
 
+  useEffect(() => {
+    const handleNavigation = (event: DidNavigateEvent) => {
+      webviewNavigationStore.setCurrentUrl(event.url)
+    }
+
+    webviewRef.current?.addEventListener('did-navigate', handleNavigation)
+
+    return () => {
+      webviewRef.current?.removeEventListener('did-navigate', handleNavigation)
+    }
+  }, [webviewRef])
+
   const onLoginWarningClosed = () => {
     setShowLoginWarningFor(null)
   }