[FEATURE] Increase browser support + switch to react-router

package.json

@@ -12,27 +12,29 @@
     "@material-ui/core": "^3.9.2",
     "@material-ui/icons": "^3.0.2",
     "@types/axios": "^0.14.0",
-    "@types/hookrouter": "^2.2.1",
     "@types/jest": "^24.0.9",
     "@types/node": "^11.9.5",
     "@types/react": "^16.8.5",
     "@types/react-dom": "^16.8.2",
     "@types/react-jss": "^8.6.3",
     "@types/react-redux": "^7.0.3",
+    "@types/react-router-dom": "^5.1.0",
     "@types/shortid": "^0.0.29",
     "axios": "^0.18.0",
     "classnames": "^2.2.6",
+    "core-js": "^3.2.1",
     "cross-env": "^5.2.0",
     "gh-pages": "^2.0.1",
-    "hookrouter": "^1.2.3",
     "idb-keyval": "^3.1.0",
     "react": "^16.8.2",
     "react-dom": "^16.8.2",
     "react-jss": "^8.6.1",
     "react-redux": "^6.0.1",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.0.1",
     "redux": "^4.0.1",
     "redux-loop": "^4.5.4",
+    "regenerator-runtime": "^0.13.3",
     "reselect": "^4.0.0",
     "rpg-awesome": "^0.2.0",
     "shortid": "^2.2.14",

src/components/A.tsx

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import { A as routerA } from 'hookrouter'
+import { Link } from 'react-router-dom'
 
-const A = styled(routerA)`
+const A = styled(Link)`
   text-decoration: none;
 `
 

src/components/App/MainApp.tsx

@@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react'
 import { connect } from 'react-redux'
 
 import { RootState, actions, selectors } from '../../Redux/Store'
-import { useRouting } from '../../routes'
 
 import Content from '../Content'
 import TopBar from '../TopBar'
@@ -22,7 +21,6 @@ type Props = ReturnType<typeof mapStateToProps> &
   }
 
 const MainApp = ({ getUserConfiguration, isLoading }: Props) => {
-  const match = useRouting()
   const [drawerIsOpen, setDrawerIsOpen] = useState(false)
   const toggleDrawer = () => setDrawerIsOpen(!drawerIsOpen)
 
@@ -32,21 +30,9 @@ const MainApp = ({ getUserConfiguration, isLoading }: Props) => {
 
   return (
     <React.Fragment>
-      <TopBar
-        title={
-          match.urlParameters
-            ? `${match.title} ${match.urlParameters.id}`
-            : match.title
-        }
-        drawerIsOpen={drawerIsOpen}
-        toggleDrawer={toggleDrawer}
-      />
+      <TopBar drawerIsOpen={drawerIsOpen} toggleDrawer={toggleDrawer} />
       <DrawerMenu drawerIsOpen={drawerIsOpen} toggleDrawer={toggleDrawer} />
-      <Content
-        contentComponent={match.contentComponent}
-        isLoading={isLoading}
-        drawerIsOpen={drawerIsOpen}
-      />
+      <Content isLoading={isLoading} drawerIsOpen={drawerIsOpen} />
     </React.Fragment>
   )
 }

src/components/App/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { ThemeProvider } from 'styled-components/macro'
+import { BrowserRouter as Router } from 'react-router-dom'
 
 import 'rpg-awesome/css/rpg-awesome.min.css'
 
@@ -11,15 +12,15 @@ import { mainTheme, muiTheme } from '../../mainTheme'
 import MainApp from './MainApp'
 import Wrapper from './Wrapper'
 
-type Props = { classes: any }
-
 const App = React.memo(() => (
   <ThemeProvider theme={mainTheme}>
     <MuiThemeProvider theme={muiTheme}>
-      <Wrapper>
-        <CssBaseline />
-        <MainApp />
-      </Wrapper>
+      <Router>
+        <Wrapper>
+          <CssBaseline />
+          <MainApp />
+        </Wrapper>
+      </Router>
     </MuiThemeProvider>
   </ThemeProvider>
 ))

src/components/Content/index.tsx

@@ -1,24 +1,55 @@
 import React from 'react'
+import { Switch, Route, Redirect } from 'react-router-dom'
 
 import CircularProgress from '@material-ui/core/CircularProgress'
 
 import HeaderPlaceholder from './HeaderPlaceholder'
 import Wrapper from './Wrapper'
 
+import About from '../pages/About'
+import Nemeses from '../pages/Nemeses'
+import Mages from '../pages/Mages'
+import Supply from '../pages/Supply'
+import Settings from '../pages/Settings'
+import ContentCustomization from '../pages/Settings/Expansions/ContentCustomization'
+import TurnOrder from '../pages/TurnOrder'
+import Expeditions from '../pages/Expeditions'
+import Expedition from '../pages/Expeditions/Expedition'
+
 type Props = {
   isLoading: boolean
   drawerIsOpen: boolean
-  contentComponent: React.ReactNode
 }
 
-const Content = React.memo(
-  ({ isLoading, drawerIsOpen, contentComponent }: Props) => (
-    <Wrapper isLoading={isLoading} drawerIsOpen={drawerIsOpen}>
-      <HeaderPlaceholder />
-      {isLoading ? <CircularProgress /> : contentComponent}
-    </Wrapper>
-  )
-)
+const Routing = React.memo(() => (
+  <Switch>
+    <Redirect exact={true} from="/" to="/nemesis" />
+    <Route path="/nemesis" component={Nemeses} />
+    <Route path="/mages" component={Mages} />
+    <Route path="/supply" component={Supply} />
+    <Route path="/turnorder" component={TurnOrder} />
+    <Route path="/about" component={About} />
+    <Route
+      path="/settings/expansions/:id"
+      render={props => (
+        <ContentCustomization expansionId={props.match.params.id} />
+      )}
+    />
+    <Route path="/settings" component={Settings} />
+    <Route
+      path="/expeditions/:id"
+      render={props => <Expedition id={props.match.params.id} />}
+    />
+    <Route path="/expeditions" component={Expeditions} />
+  </Switch>
+))
+
+const Content = React.memo(({ isLoading, drawerIsOpen }: Props) => (
+  <Wrapper isLoading={isLoading} drawerIsOpen={drawerIsOpen}>
+    <HeaderPlaceholder />
+    {isLoading ? <CircularProgress /> : <Routing />}
+  </Wrapper>
+))
 
 Content.displayName = 'Content'
 

src/components/Link.tsx

@@ -14,7 +14,7 @@ type Props = {
 }
 
 const Link = React.memo(({ text, to, children, onClick }: Props) => (
-  <A href={to}>
+  <A to={to}>
     <ListItem button key={text} onClick={onClick}>
       <ListItemIcon>{children}</ListItemIcon>
       <ListItemText primary={text} />

src/components/NoSelectedExpansions.tsx

@@ -7,7 +7,7 @@ const NoSelectedExpansions = React.memo(() => (
   <Typography paragraph>
     There is currently no standalone set selected. Please activate at least one
     standalone set in the settings.{' '}
-    <A href="/settings">Click here to go to the settings</A>.
+    <A to="/settings">Click here to go to the settings</A>.
   </Typography>
 ))
 

src/components/TopBar/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { Switch, Route } from 'react-router-dom'
 
 import Toolbar from '@material-ui/core/Toolbar'
 
@@ -9,15 +10,27 @@ import MenuButton from './MenuButton'
 type Props = {
   drawerIsOpen: boolean
   toggleDrawer: () => void
-  title: string
 }
 
-const TopBar = React.memo(({ drawerIsOpen, toggleDrawer, title }: Props) => (
+const TopBar = React.memo(({ drawerIsOpen, toggleDrawer }: Props) => (
   <AppBar drawerIsOpen={drawerIsOpen}>
     <Toolbar disableGutters={!drawerIsOpen}>
       <MenuButton drawerIsOpen={drawerIsOpen} onClick={toggleDrawer} />
       <Title variant="h6" color="inherit">
-        {title}
+        <Switch>
+          <Route path="/nemesis" render={() => 'Nemesis'} />
+          <Route path="/mages" render={() => 'Mages'} />
+          <Route path="/supply" render={() => 'Supply'} />
+          <Route path="/turnorder" render={() => 'Turn Order'} />
+          <Route path="/about" render={() => 'About'} />
+          <Route
+            path="/settings/expansions/:id"
+            render={() => 'Settings: Expansions'}
+          />
+          <Route path="/settings" render={() => 'Settings'} />
+          <Route path="/expeditions/:id" render={() => 'Expeditions'} />
+          <Route path="/expeditions" render={() => 'Expeditions'} />
+        </Switch>
       </Title>
     </Toolbar>
   </AppBar>

src/components/pages/About/index.tsx

@@ -22,7 +22,7 @@ const About = React.memo(() => (
         To get started simply select which expansions you own and would like to
         use for randomization inside the settings. You can also disable specific
         cards/mages/nemeses inside the settings.
-        <A href="/settings"> Click here to go to the settings</A>.
+        <A to="/settings"> Click here to go to the settings</A>.
       </P>
       <H2>Supported Expansions</H2>
       <P>

src/components/pages/Expeditions/Expedition/index.tsx

@@ -9,7 +9,7 @@ type Props = {
 const Expedition = React.memo(({ id }: Props) => {
   return (
     <React.Fragment>
-      <A href="/expeditions">Zurück</A>
+      <A to="/expeditions">Zurück</A>
       <p>Expedition {id}</p>
     </React.Fragment>
   )

src/components/pages/Expeditions/index.tsx

@@ -28,7 +28,7 @@ const Expeditions = React.memo(({ expeditions, createExpedition }: Props) => {
       const url = `/expeditions/${expedition.id}`
       return (
         <li key={expedition.id}>
-          <A href={url}>
+          <A to={url}>
             {expedition.name} {expedition.id}
           </A>
         </li>

src/components/pages/Settings/Expansions/CheckboxWithControls.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components/macro'
-
-import { navigate } from 'hookrouter'
+import { useHistory } from 'react-router-dom'
 
 import Checkbox from '@material-ui/core/Checkbox'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
@@ -20,27 +19,31 @@ type Props = {
 }
 
 const CheckboxWithControls = React.memo(
-  ({ checked, item, label, changeHandler, id }: Props) => (
-    <Wrapper>
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={checked}
-            onChange={() => changeHandler(item)}
-            value={item}
-          />
-        }
-        label={label}
-      />
-      <IconButton
-        color="primary"
-        aria-label="Edit"
-        onClick={() => navigate(`/settings/expansions/${id}`)}
-      >
-        <EditIcon />
-      </IconButton>
-    </Wrapper>
-  )
+  ({ checked, item, label, changeHandler, id }: Props) => {
+    const history = useHistory()
+
+    return (
+      <Wrapper>
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={checked}
+              onChange={() => changeHandler(item)}
+              value={item}
+            />
+          }
+          label={label}
+        />
+        <IconButton
+          color="primary"
+          aria-label="Edit"
+          onClick={() => history.push(`/settings/expansions/${id}`)}
+        >
+          <EditIcon />
+        </IconButton>
+      </Wrapper>
+    )
+  }
 )
 
 export default CheckboxWithControls

src/components/pages/Settings/Expansions/ContentCustomization/index.tsx

@@ -73,7 +73,7 @@ const ContentCustomization = React.memo(
     <Card>
       <CardContent>
         <Typography>
-          <BackLink href="/settings">
+          <BackLink to="/settings">
             <ChevronLeftIcon /> Back to settings
           </BackLink>
         </Typography>

src/index.tsx

@@ -1,3 +1,6 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+
 import React from 'react'
 import ReactDOM from 'react-dom'
 import { Provider } from 'react-redux'