Skip to content

Commit

Permalink
[Tech] Update React Router to v6 + React to v18 (#1259)
Browse files Browse the repository at this point in the history 
* feat: migrated Links

* feat: migrate settings and gamepage routes

* fix: webview navigation

* chore: add router exact vesion
  • Loading branch information
@flavioislima
flavioislima authored May 2, 2022
1 parent a1772a5 commit 6c4d972
Show file tree
Hide file tree
Showing 14 changed files with 190 additions and 256 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@
"react": "18.0.0",
"react-dom": "18.0.0",
"react-i18next": "^11.16.7",
"react-router-dom": "^5.3.1",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"simple-keyboard": "^3.4.24",
"source-map-support": "^0.5.21",
Expand Down
47 changes: 27 additions & 20 deletions src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,41 @@
import React, { lazy } from 'react'
import React from 'react'

import './App.css'
import { HashRouter, Route, Switch } from 'react-router-dom'
import Sidebar from 'src/components/UI/Sidebar'
import { HashRouter, Route, Routes } from 'react-router-dom'
import Login from './screens/Login'
import WebView from './screens/WebView'

const Library = lazy(async () => import('./screens/Library'))
const Settings = lazy(async () => import('./screens/Settings'))
const GamePage = lazy(async () => import('./screens/Game/GamePage'))
const WineManager = lazy(async () => import('./screens/WineManager'))
import { GamePage } from './screens/Game'
import Library from './screens/Library'
import WineManager from './screens/WineManager'
import Sidebar from 'src/components/UI/Sidebar'
import Settings from './screens/Settings'

function App() {
return (
<div className="App">
<HashRouter>
<Sidebar />
<main className="content">
<Switch>
<Route exact path="/" component={Library} />
<Route exact path="/login" component={Login} />
<Route exact path="/epicstore" component={WebView} />
<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} />
</Switch>
<Routes>
<Route path="/" element={<Library />} />
<Route path="login" element={<Login />} />
<Route path="epicstore" element={<WebView />} />
<Route path="gogstore" element={<WebView />} />
<Route path="wiki" element={<WebView />} />
<Route path="gamepage">
<Route path=":appName" element={<GamePage />} />
</Route>
<Route path="/store-page" element={<WebView />} />
<Route path="loginweb">
<Route path=":runner" element={<WebView />} />
</Route>
<Route path="settings">
<Route path=":appName">
<Route path=":type" element={<Settings />} />
</Route>
</Route>
<Route path="/wine-manager" element={<WineManager />} />
</Routes>
</main>
</HashRouter>
</div>
Expand Down
134 changes: 63 additions & 71 deletions src/components/UI/Sidebar/components/SidebarLinks/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,11 @@ import {
faUser
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import classNames from 'classnames'
import cx from 'classnames'
import React, { useCallback, useContext, useEffect, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { NavLink, useHistory, useLocation } from 'react-router-dom'
import { NavLink, useNavigate, useLocation } from 'react-router-dom'
import { getAppSettings } from 'src/helpers'
import { configStore, gogConfigStore } from 'src/helpers/electronStores'
import ContextProvider from 'src/state/ContextProvider'
Expand All @@ -26,7 +27,7 @@ interface LocationState {

export default function SidebarLinks() {
const { t } = useTranslation()
const history = useHistory()
const navigate = useNavigate()
const [showUnrealMarket, setShowUnrealMarket] = useState(false)
const { state } = useLocation() as { state: LocationState }
const location = useLocation() as { pathname: string }
Expand Down Expand Up @@ -78,33 +79,27 @@ export default function SidebarLinks() {
setShowUnrealMarket(showUnrealMarket)
)
if (!isEpicLoggedIn && !isGOGLoggedIn) {
return history.push('/login')
return navigate('/login')
}
}, [])

return (
<div className="SidebarLinks Sidebar__section">
<NavLink
className="Sidebar__item"
data-testid="library"
isActive={(match, location) => {
if (match) {
return true
}
return (
location.pathname === '/login' ||
location.pathname.includes('gameconfig')
)
}}
exact
className={({ isActive }) =>
classNames('Sidebar__item', { active: isActive })
}
to={pressAction}
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={displayIcon} />
</div>
{isEpicLoggedIn || isGOGLoggedIn
? t('Library')
: t('button.login', 'Login')}
<>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={displayIcon} />
</div>
{isEpicLoggedIn || isGOGLoggedIn
? t('Library')
: t('button.login', 'Login')}
</>
</NavLink>
{showLibrarySubmenu && (
<>
Expand Down Expand Up @@ -144,53 +139,57 @@ export default function SidebarLinks() {
</>
)}
<NavLink
className="Sidebar__item"
to={{ pathname: '/epicstore' }}
isActive={(match, location) => location.pathname.includes('store')}
className={({ isActive }) =>
classNames('Sidebar__item', { active: isActive })
}
to="/epicstore"
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faStore} />
</div>
{t('stores', 'Stores')}
<>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faStore} />
</div>
{t('stores', 'Stores')}
</>
</NavLink>
{isStore && (
<>
<NavLink
data-testid="store"
className="Sidebar__item SidebarLinks__subItem"
isActive={(match, location) =>
location.pathname.includes('epicstore') ||
(location.pathname === '/store-page' &&
location.search.includes('epicgames.com/store'))
className={({ isActive }) =>
classNames('Sidebar__item', 'SidebarLinks__subItem', {
active: isActive
})
}
to={{ pathname: '/epicstore' }}
to="/epicstore"
>
{t('store', 'Epic Store')}
</NavLink>
<NavLink
data-testid="store"
className="Sidebar__item SidebarLinks__subItem"
isActive={(match, location) =>
location.pathname.includes('gogstore') ||
(location.pathname === '/store-page' &&
location.search.includes('gog.com/en/game'))
className={({ isActive }) =>
classNames('Sidebar__item', 'SidebarLinks__subItem', {
active: isActive
})
}
to={{ pathname: '/gogstore' }}
to="/gogstore"
>
{t('gog-store', 'GOG Store')}
</NavLink>
</>
)}
<NavLink
className="Sidebar__item"
data-testid="settings"
isActive={(match, location) => location.pathname.includes('settings')}
className={({ isActive }) =>
classNames('Sidebar__item', { active: isActive })
}
to={{ pathname: '/settings/default/general' }}
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faSlidersH} />
</div>
{t('Settings')}
<>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faSlidersH} />
</div>
{t('Settings')}
</>
</NavLink>
{isSettings && (
<>
Expand All @@ -208,10 +207,8 @@ export default function SidebarLinks() {
{shouldRenderWineSettings && (
<NavLink
role="link"
to={{
pathname: `/settings/${appName}/wine`,
state: { ...state, runner: state?.runner }
}}
to={`/settings/${appName}/wine`}
state={{ ...state, runner: state?.runner }}
className={cx('Sidebar__item SidebarLinks__subItem', {
['active']: category === 'wine'
})}
Expand All @@ -223,10 +220,8 @@ export default function SidebarLinks() {
<NavLink
role="link"
data-testid="linkSync"
to={{
pathname: `/settings/${appName}/sync`,
state: { ...state, runner: state?.runner }
}}
to={`/settings/${appName}/sync`}
state={{ ...state, runner: state?.runner }}
className={cx('Sidebar__item SidebarLinks__subItem', {
['active']: type === 'sync'
})}
Expand All @@ -236,10 +231,8 @@ export default function SidebarLinks() {
)}
<NavLink
role="link"
to={{
pathname: `/settings/${appName}/other`,
state: { ...state, runner: state?.runner }
}}
to={`/settings/${appName}/other`}
state={{ ...state, runner: state?.runner }}
className={cx('Sidebar__item SidebarLinks__subItem', {
['active']: type === 'other'
})}
Expand All @@ -249,10 +242,8 @@ export default function SidebarLinks() {
{isDefaultSetting && (
<NavLink
role="link"
to={{
pathname: `/settings/${appName}/advanced`,
state: { ...state, runner: state?.runner }
}}
to={`/settings/${appName}/advanced`}
state={{ ...state, runner: state?.runner }}
className={cx('Sidebar__item SidebarLinks__subItem', {
['active']: type === 'advanced'
})}
Expand All @@ -262,10 +253,8 @@ export default function SidebarLinks() {
)}
<NavLink
role="link"
to={{
pathname: `/settings/${appName}/log`,
state: { ...state, runner: state?.runner }
}}
to={`/settings/${appName}/log`}
state={{ ...state, runner: state?.runner }}
className={cx('Sidebar__item SidebarLinks__subItem', {
['active']: type === 'log'
})}
Expand All @@ -276,14 +265,17 @@ export default function SidebarLinks() {
)}
<NavLink
data-testid="wiki"
className="Sidebar__item"
isActive={(match, location) => location.pathname.includes('wiki')}
className={({ isActive }) =>
classNames('Sidebar__item', { active: isActive })
}
to={{ pathname: '/wiki' }}
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faBookOpen} />
</div>
{t('wiki', 'Wiki')}
<>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faBookOpen} />
</div>
{t('wiki', 'Wiki')}
</>
</NavLink>
</div>
)
Expand Down
22 changes: 12 additions & 10 deletions src/components/UI/Sidebar/components/SidebarUtils/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,10 @@ import {
faWineGlass
} from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import classNames from 'classnames'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { NavLink, useHistory } from 'react-router-dom'
import { NavLink, useNavigate } from 'react-router-dom'
import { openDiscordLink } from 'src/helpers'
import { configStore, gogConfigStore } from 'src/helpers/electronStores'
import ContextProvider from 'src/state/ContextProvider'
Expand All @@ -19,7 +20,7 @@ const { ipcRenderer } = window.require('electron')

export default function SidebarUtils() {
const { t } = useTranslation()
const history = useHistory()
const navigate = useNavigate()
const { platform } = React.useContext(ContextProvider)
const user = configStore.get('userInfo') || gogConfigStore.get('userData')
const isLinux = platform === 'linux'
Expand All @@ -28,16 +29,17 @@ export default function SidebarUtils() {
<div className="SidebarUtils Sidebar__section">
{isLinux && (
<NavLink
className="Sidebar__item"
isActive={(match, location) =>
location.pathname.includes('wine-manager')
className={({ isActive }) =>
classNames('Sidebar__item', { active: isActive })
}
to={{ pathname: '/wine-manager' }}
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faWineGlass} />
</div>
{t('wine.manager.link', 'Wine Manager')}
<>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faWineGlass} />
</div>
{t('wine.manager.link', 'Wine Manager')}
</>
</NavLink>
)}
<button className="Sidebar__item" onClick={() => openDiscordLink()}>
Expand Down Expand Up @@ -75,7 +77,7 @@ export default function SidebarUtils() {
<div className="SidebarUtils__dropdownPopup ">
<button
className="Sidebar__item"
onClick={() => history.push('/login')}
onClick={() => navigate('/login')}
>
<div className="Sidebar__itemIcon">
<FontAwesomeIcon icon={faUserAlt} />
Expand Down
Loading

0 comments on commit 6c4d972

Please sign in to comment.