[General] Open game store page in webview and refactor (#1149)

* Open game store page in webview and refactor

* Highlight correct sidebar store when showing game store page

* Remove debug code

Author: arielj

electron/legendary/library.ts

@@ -18,7 +18,12 @@ import {
 } from '../types'
 import { LegendaryGame } from './games'
 import { LegendaryUser } from './user'
-import { getLegendaryBin, isEpicServiceOffline, isOnline } from '../utils'
+import {
+  formatEpicStoreUrl,
+  getLegendaryBin,
+  isEpicServiceOffline,
+  isOnline
+} from '../utils'
 import {
   fallBackImage,
   installed,
@@ -483,7 +488,8 @@ export class LegendaryLibrary {
       title,
       canRunOffline,
       is_linux_native: false,
-      runner: 'legendary'
+      runner: 'legendary',
+      store_url: formatEpicStoreUrl(title)
     } as GameInfo)
 
     return app_name

electron/utils.ts

@@ -405,6 +405,21 @@ function getGOGdlBin(): { dir: string; bin: string } {
   )
 }
 
+const specialCharactersRegex =
+  /('\w)|(\\(\w|\d){5})|(\\"(\\.|[^"])*")|[^((0-9)|(a-z)|(A-Z)|\s)]/g // addeed regex for capturings "'s" + unicodes + remove subtitles in quotes
+const cleanTitle = (title: string) =>
+  title
+    .replaceAll(specialCharactersRegex, '')
+    .replaceAll(' ', '-')
+    .replaceAll('®', '')
+    .toLowerCase()
+    .split('--definitive')[0]
+
+const formatEpicStoreUrl = (title: string) => {
+  const storeUrl = `https://www.epicgames.com/store/product/`
+  return `${storeUrl}${cleanTitle(title)}`
+}
+
 export {
   checkForUpdates,
   errorHandler,
@@ -421,5 +436,6 @@ export {
   clearCache,
   resetHeroic,
   getLegendaryBin,
-  getGOGdlBin
+  getGOGdlBin,
+  formatEpicStoreUrl
 }

src/App.tsx

@@ -61,6 +61,7 @@ function App() {
             <Route exact path="/gogstore" component={WebView} />
             <Route exact path="/wiki" component={WebView} />
             <Route exact path="/gameconfig/:appName" component={GamePage} />
+            <Route path="/store-page" component={WebView} />
             <Route path="/login/:runner" component={WebView} />
             <Route path="/settings/:appName/:type" component={Settings} />
             <Route path="/wine-manager" component={WineManager} />

src/components/UI/Sidebar/components/SidebarLinks/index.tsx

@@ -150,7 +150,9 @@ export default function SidebarLinks() {
             data-testid="store"
             className="Sidebar__item SidebarLinks__subItem"
             isActive={(match, location) =>
-              location.pathname.includes('epicstore')
+              location.pathname.includes('epicstore') ||
+              (location.pathname === '/store-page' &&
+                location.search.includes('epicgames.com/store'))
             }
             to={{ pathname: '/epicstore' }}
           >
@@ -160,7 +162,9 @@ export default function SidebarLinks() {
             data-testid="store"
             className="Sidebar__item SidebarLinks__subItem"
             isActive={(match, location) =>
-              location.pathname.includes('gogstore')
+              location.pathname.includes('gogstore') ||
+              (location.pathname === '/store-page' &&
+                location.search.includes('gog.com/en/game'))
             }
             to={{ pathname: '/gogstore' }}
           >

src/helpers/index.ts

@@ -74,16 +74,6 @@ const getLegendaryConfig = async (): Promise<{
   return { library, user }
 }
 
-const specialCharactersRegex =
-  /('\w)|(\\(\w|\d){5})|(\\"(\\.|[^"])*")|[^((0-9)|(a-z)|(A-Z)|\s)]/g // addeed regex for capturings "'s" + unicodes + remove subtitles in quotes
-const cleanTitle = (title: string) =>
-  title
-    .replaceAll(specialCharactersRegex, '')
-    .replaceAll(' ', '-')
-    .replaceAll('®', '')
-    .toLowerCase()
-    .split('--definitive')[0]
-
 const getGameInfo = async (
   appName: string,
   runner: Runner = 'legendary'
@@ -114,11 +104,6 @@ const handleSavePath = async (game: string) => {
 const createNewWindow = (url: string) =>
   ipcRenderer.send('createNewWindow', url)
 
-const formatStoreUrl = (title: string, lang: string) => {
-  const storeUrl = `https://www.epicgames.com/store/${lang}/product/`
-  return `${storeUrl}${cleanTitle(title)}`
-}
-
 function getProgress(progress: InstallProgress): number {
   if (progress && progress.percent) {
     return Number(progress.percent.replace('%', ''))
@@ -226,7 +211,6 @@ function getAppSettings(): Promise<AppSettings> {
 export {
   createNewWindow,
   fixSaveFolder,
-  formatStoreUrl,
   getGameInfo,
   getGameSettings,
   getInstallInfo,

src/screens/Game/GameSubMenu/index.tsx

@@ -5,12 +5,7 @@ import React, { useContext, useEffect, useState } from 'react'
 import { AppSettings, Runner } from 'src/types'
 import { IpcRenderer } from 'electron'
 import { SmallInfo } from 'src/components/UI'
-import {
-  createNewWindow,
-  formatStoreUrl,
-  getGameInfo,
-  repair
-} from 'src/helpers'
+import { createNewWindow, getGameInfo, repair } from 'src/helpers'
 import { useTranslation } from 'react-i18next'
 import ContextProvider from 'src/state/ContextProvider'
 import { uninstall } from 'src/helpers/library'
@@ -46,11 +41,7 @@ export default function GamesSubmenu({
   const isLinux = platform === 'linux'
   const [info, setInfo] = useState({ prefix: '', wine: '' } as otherInfo)
   const [isNative, setIsNative] = useState(false)
-  const { t, i18n } = useTranslation('gamepage')
-  let lang = i18n.language
-  if (i18n.language === 'pt') {
-    lang = 'pt-BR'
-  }
+  const { t } = useTranslation('gamepage')
 
   const protonDBurl = `https://www.protondb.com/search?q=${title}`
 
@@ -193,14 +184,13 @@ export default function GamesSubmenu({
             )}
           </>
         )}
-        <button
-          onClick={() =>
-            createNewWindow(storeUrl || formatStoreUrl(title, lang))
-          }
+        <NavLink
           className="link button is-text is-link"
+          exact
+          to={`/store-page?store-url=${storeUrl}`}
         >
           {t('submenu.store')}
-        </button>
+        </NavLink>
         {!isWin && (
           <button
             onClick={() => createNewWindow(protonDBurl)}

src/screens/WebView/index.tsx

@@ -16,7 +16,7 @@ type SID = {
 
 export default function WebView() {
   const { i18n } = useTranslation()
-  const { pathname } = useLocation()
+  const { pathname, search } = useLocation()
   const { t } = useTranslation()
   const { handleFilter, handleCategory } = useContext(ContextProvider)
   const [loading, setLoading] = useState<{
@@ -34,7 +34,7 @@ export default function WebView() {
     lang = 'pt-BR'
   }
 
-  const loginUrl =
+  const epicLoginUrl =
     'https://www.epicgames.com/id/login?redirectUrl=https%3A%2F%2Fwww.epicgames.com%2Fid%2Fapi%2Fredirect'
   const epicStore = `https://www.epicgames.com/store/${lang}/`
   const gogStore = `https://gog.com`
@@ -46,17 +46,24 @@ export default function WebView() {
 
   const trueAsStr = 'true' as unknown as boolean | undefined
   const { runner } = useParams() as { runner: Runner }
-  const startUrl = runner
-    ? runner == 'legendary'
-      ? '/loginEpic'
-      : '/loginGOG'
-    : pathname
+
   const urls = {
     '/epicstore': epicStore,
     '/gogstore': gogStore,
     '/wiki': wikiURL,
-    '/loginEpic': loginUrl,
-    '/loginGOG': gogLoginUrl
+    '/loginEpic': epicLoginUrl,
+    '/loginGOG': gogLoginUrl,
+    '/login/legandary': epicLoginUrl,
+    '/login/gog': gogLoginUrl
+  }
+  let startUrl = urls[pathname]
+
+  if (pathname.match(/store-page/)) {
+    const searchParams = new URLSearchParams(search)
+    const queryParam = searchParams.get('store-url')
+    if (queryParam) {
+      startUrl = queryParam
+    }
   }
 
   useLayoutEffect(() => {
@@ -131,15 +138,15 @@ export default function WebView() {
     <div className="WebView">
       <WebviewControls
         webview={webviewRef.current}
-        initURL={urls[startUrl]}
+        initURL={startUrl}
         openInBrowser={!startUrl.startsWith('/login')}
       />
       {loading.refresh && <UpdateComponent message={loading.message} />}
       <webview
         ref={webviewRef}
         className="WebView__webview"
         partition="persist:epicstore"
-        src={urls[startUrl]}
+        src={startUrl}
         allowpopups={trueAsStr}
       />
     </div>