From 0e24ceecee3298247d9bd7e5c2f05e623f768ba4 Mon Sep 17 00:00:00 2001
From: Szymon Szlachtowicz <38212223+Szymx95@users.noreply.github.com>
Date: Wed, 2 Jun 2021 14:46:08 +0200
Subject: [PATCH] Add router (#4)

Co-authored-by: Szymon Szlachtowicz <szymon.szlachtowicz@Szymons-MacBook-Pro.local>
---
 package.json              |  2 ++
 src/App.tsx               | 29 ++++++++++++++++++++++-------
 src/components/TopBar.tsx | 33 +++++++++++++++++++++++++++++++++
 src/pages/Directory.tsx   |  5 +++++
 src/pages/Info.tsx        |  5 +++++
 src/pages/Votes.tsx       |  5 +++++
 yarn.lock                 | 22 ++++++++++++++++++++++
 7 files changed, 94 insertions(+), 7 deletions(-)
 create mode 100644 src/components/TopBar.tsx
 create mode 100644 src/pages/Directory.tsx
 create mode 100644 src/pages/Info.tsx
 create mode 100644 src/pages/Votes.tsx

diff --git a/package.json b/package.json
index 466e931..1e968d9 100644
--- a/package.json
+++ b/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",
diff --git a/src/App.tsx b/src/App.tsx
index 2e7aead..c82e589 100644
--- a/src/App.tsx
+++ b/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%;
+`
diff --git a/src/components/TopBar.tsx b/src/components/TopBar.tsx
new file mode 100644
index 0000000..77e7c8e
--- /dev/null
+++ b/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)``
diff --git a/src/pages/Directory.tsx b/src/pages/Directory.tsx
new file mode 100644
index 0000000..54f64bd
--- /dev/null
+++ b/src/pages/Directory.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Directory() {
+  return <div>Directory</div>
+}
diff --git a/src/pages/Info.tsx b/src/pages/Info.tsx
new file mode 100644
index 0000000..1f6508f
--- /dev/null
+++ b/src/pages/Info.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Info() {
+  return <div>Info</div>
+}
diff --git a/src/pages/Votes.tsx b/src/pages/Votes.tsx
new file mode 100644
index 0000000..62fb0cb
--- /dev/null
+++ b/src/pages/Votes.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+export function Votes() {
+  return <div>Votes</div>
+}
diff --git a/yarn.lock b/yarn.lock
index fe28236..2cf6cbf 100644
--- a/yarn.lock
+++ b/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"