Add router (#4)

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>

package.json

@@ -27,6 +27,8 @@
     "@babel/preset-typescript": "^7.13.0",
     "@types/react": "^17.0.8",
     "@types/react-dom": "^17.0.6",
+    "@types/react-router": "^5.1.14",
+    "@types/react-router-dom": "^5.1.7",
     "@types/styled-components": "^5.1.9",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",

src/App.tsx

@@ -1,14 +1,29 @@
 import React from 'react'
+import { Redirect, Route, Switch } from 'react-router'
+import { BrowserRouter } from 'react-router-dom'
 
-import { useEthers } from '@usedapp/core'
+import styled from 'styled-components'
+import { TopBar } from './components/TopBar'
+import { Votes } from './pages/Votes'
+import { Directory } from './pages/Directory'
+import { Info } from './pages/Info'
 
 export function App() {
-  const { account, activateBrowserWallet } = useEthers()
-
   return (
-    <div>
-      <button onClick={() => activateBrowserWallet()}>Activate browser wallet</button>
-      {account}
-    </div>
+    <Page>
+      <BrowserRouter>
+        <TopBar />
+        <Switch>
+          <Route exact path="/votes" component={Votes} />
+          <Route exact path="/directory" component={Directory} />
+          <Route exact path="/info" component={Info} />
+        </Switch>
+        <Redirect exact from="/" to="/votes" />
+      </BrowserRouter>
+    </Page>
   )
 }
+
+const Page = styled.div`
+  height: 100%;
+`

src/components/TopBar.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import styled from 'styled-components'
+import { NavLink } from 'react-router-dom'
+import { useEthers, shortenAddress } from '@usedapp/core'
+
+export function TopBar() {
+  const { account, activateBrowserWallet } = useEthers()
+
+  return (
+    <Header>
+      <StyledNavLink activeClassName="active-page" to="/votes">
+        Votes
+      </StyledNavLink>
+      <StyledNavLink activeClassName="active-page" to="/directory">
+        Directory
+      </StyledNavLink>
+      <StyledNavLink activeClassName="active-page" to="/info">
+        Info
+      </StyledNavLink>
+      {account ? (
+        <div>{shortenAddress(account)}</div>
+      ) : (
+        <button onClick={() => activateBrowserWallet()}>Activate browser wallet</button>
+      )}
+    </Header>
+  )
+}
+
+const Header = styled.header`
+  backgorund-color: grey;
+`
+
+const StyledNavLink = styled(NavLink)``

src/pages/Directory.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Directory() {
+  return <div>Directory</div>
+}

src/pages/Info.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Info() {
+  return <div>Info</div>
+}

src/pages/Votes.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Votes() {
+  return <div>Votes</div>
+}

yarn.lock

@@ -1659,6 +1659,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.8"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.8.tgz#49348387983075705fe8f4e02fb67f7daaec4934"
+  integrity sha512-S78QIYirQcUoo6UJZx9CSP0O2ix9IaeAXwQi26Rhr/+mg7qqPy8TzaxHSUut7eGjL8WmLccT7/MXf304WjqHcA==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -1704,6 +1709,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.7.tgz#a126d9ea76079ffbbdb0d9225073eb5797ab7271"
+  integrity sha512-D5mHD6TbdV/DNHYsnwBTv+y73ei+mMjrkGrla86HthE4/PVvL1J94Bu3qABU+COXzpL23T1EZapVVpwHuBXiUg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*", "@types/react-router@^5.1.14":
+  version "5.1.14"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.14.tgz#e0442f4eb4c446541ad7435d44a97f8fe6df40da"
+  integrity sha512-LAJpqYUaCTMT2anZheoidiIymt8MuX286zoVFPM3DVb23aQBH0mAkFvzpd4LKqiolV8bBtZWT5Qp7hClCNDENw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.8":
   version "17.0.8"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.8.tgz#fe76e3ba0fbb5602704110fd1e3035cf394778e3"