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 --- 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 ( -
- - {account} -
+ + + + + + + + + + + ) } + +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 ( +
+ + Votes + + + Directory + + + Info + + {account ? ( +
{shortenAddress(account)}
+ ) : ( + + )} +
+ ) +} + +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
Directory
+} 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
Info
+} 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
Votes
+} 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"