meeting-planner
/
frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Add routing with react-router-dom

This commit is contained in:
rui hildt 2020-05-13 15:39:31 +02:00
parent 65af60c2ea
commit 644af598af
7 changed files with 140 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
package-lock.json generated
View File

@ -6264,6 +6264,19 @@
"resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz",
"integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
},
"history": {
"version": "4.10.1",
"resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
"integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
"requires": {
"@babel/runtime": "^7.1.2",
"loose-envify": "^1.2.0",
"resolve-pathname": "^3.0.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0",
"value-equal": "^1.0.1"
}
},
"hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",
@ -8237,6 +8250,15 @@
"resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.0.tgz",
"integrity": "sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY="
},
"mini-create-react-context": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/mini-create-react-context/-/mini-create-react-context-0.4.0.tgz",
"integrity": "sha512-b0TytUgFSbgFJGzJqXPKCFCBWigAjpjo+Fl7Vf7ZbKRDptszpppKxXH6DRXEABZ/gcEQczeb0iZ7JvL8e8jjCA==",
"requires": {
"@babel/runtime": "^7.5.5",
"tiny-warning": "^1.0.3"
}
},
"mini-css-extract-plugin": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/mini-css-extract-plugin/-/mini-css-extract-plugin-0.9.0.tgz",
@ -10737,6 +10759,60 @@
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-router": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router/-/react-router-5.2.0.tgz",
"integrity": "sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"hoist-non-react-statics": "^3.1.0",
"loose-envify": "^1.3.1",
"mini-create-react-context": "^0.4.0",
"path-to-regexp": "^1.7.0",
"prop-types": "^15.6.2",
"react-is": "^16.6.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
},
"dependencies": {
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"isarray": {
"version": "0.0.1",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
"integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
},
"path-to-regexp": {
"version": "1.8.0",
"resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
"integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
"requires": {
"isarray": "0.0.1"
}
}
}
},
"react-router-dom": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.2.0.tgz",
"integrity": "sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA==",
"requires": {
"@babel/runtime": "^7.1.2",
"history": "^4.9.0",
"loose-envify": "^1.3.1",
"prop-types": "^15.6.2",
"react-router": "5.2.0",
"tiny-invariant": "^1.0.2",
"tiny-warning": "^1.0.0"
}
},
"react-scripts": {
"version": "3.4.1",
"resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-3.4.1.tgz",
@ -11162,6 +11238,11 @@
"resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz",
"integrity": "sha1-six699nWiBvItuZTM17rywoYh0g="
},
"resolve-pathname": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
"integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
},
"resolve-url": {
"version": "0.2.1",
"resolved": "https://registry.npmjs.org/resolve-url/-/resolve-url-0.2.1.tgz",
@ -12786,6 +12867,16 @@
"resolved": "https://registry.npmjs.org/timsort/-/timsort-0.3.0.tgz",
"integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q="
},
"tiny-invariant": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz",
"integrity": "sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw=="
},
"tiny-warning": {
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
"integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
},
"tmp": {
"version": "0.0.33",
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
@ -13162,6 +13253,11 @@
"spdx-expression-parse": "^3.0.0"
}
},
"value-equal": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
"integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
},
"vary": {
"version": "1.1.2",
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",

1
package.json
View File

@ -12,6 +12,7 @@
"react": "^16.13.1",
"react-app-rewired": "^2.1.6",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.1",
"rsuite": "^4.5.0"
},

27
src/components/Navbar/MenuDropdown.js
View File

@ -1,8 +1,13 @@
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
} from 'react-router-dom';
import { Nav, Icon, Dropdown, IconButton, Popover, Whisper } from 'rsuite';
function MenuDropdown() {
export default function MenuDropdown() {
const triggerRef = React.createRef();
function handleSelectMenu(eventKey, event) {
@ -13,12 +18,16 @@ function MenuDropdown() {
const MenuPopover = ({ onSelect, ...rest }) => (
<Popover {...rest} full>
<Dropdown.Menu onSelect={onSelect}>
<Dropdown.Item eventKey={1}>Dashboard</Dropdown.Item>
<Dropdown.Item eventKey={2}>
Schedule a Meeting
</Dropdown.Item>
<Dropdown.Item eventKey={3}>Account Settings</Dropdown.Item>
<Dropdown.Item eventKey={4}>Log Out</Dropdown.Item>
<NavLink to='/login'>
<Dropdown.Item eventKey={0}>Login</Dropdown.Item>
</NavLink>
<NavLink to='/register'>
<Dropdown.Item eventKey={1}>Register</Dropdown.Item>
</NavLink>
<Dropdown.Item eventKey={2}>Dashboard</Dropdown.Item>
<Dropdown.Item eventKey={3}>Schedule a Meeting</Dropdown.Item>
<Dropdown.Item eventKey={4}>Account Settings</Dropdown.Item>
<Dropdown.Item eventKey={5}>Log Out</Dropdown.Item>
</Dropdown.Menu>
</Popover>
);
@ -42,5 +51,3 @@ function MenuDropdown() {
</Nav>
);
}
export default MenuDropdown;

4
src/components/Navbar/NavBar.js
View File

@ -7,7 +7,7 @@ const headerStyle = {
borderRadius: '7px 7px 0 0',
};
function NavBar() {
export default function NavBar() {
return (
<Header>
<Navbar appearance='inverse' style={headerStyle}>
@ -18,5 +18,3 @@ function NavBar() {
</Header>
);
}
export default NavBar;

25
src/screens/App.js
View File

@ -1,11 +1,11 @@
import React from 'react';
import 'rsuite/lib/styles/index.less';
import { Container } from 'rsuite';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import Login from './Login';
import Register from './Register';
import TopBar from '../components/Navbar/NavBar';
import NavBar from '../components/Navbar/NavBar';
const containerStyle = {
maxWidth: 700,
@ -16,13 +16,20 @@ const containerStyle = {
marginBottom: '10vh',
};
function App() {
export default function App() {
return (
<Container style={containerStyle}>
<TopBar />
<Register />
</Container>
<Router>
<Container style={containerStyle}>
<NavBar />
<Switch>
<Route path='/login'>
<Login />
</Route>
<Route path='/register'>
<Register />
</Route>
</Switch>
</Container>
</Router>
);
}
export default App;

14
src/screens/Login.js
View File

@ -15,16 +15,12 @@ const boxStyle = {
margin: '50px 10px',
};
function Login() {
export default function Login() {
return (
<Content>
<FlexboxGrid justify='center'>
<FlexboxGrid.Item>
<Panel
header={<h3>Login</h3>}
bordered
style={boxStyle}
>
<Panel header={<h3>Login</h3>} bordered style={boxStyle}>
<Form horizontal>
<FormGroup>
<FormControl
@ -44,7 +40,9 @@ function Login() {
</HelpBlock>
</FormGroup>
<FormGroup>
<Button appearance='primary' block>Sign in</Button>
<Button appearance='primary' block>
Sign in
</Button>
</FormGroup>
<Button appearance='link'>Forgot password?</Button>
</Form>
@ -54,5 +52,3 @@ function Login() {
</Content>
);
}
export default Login;

8
src/screens/Register.js
View File

@ -16,7 +16,7 @@ const boxStyle = {
margin: '50px 10px',
};
function Register() {
export default function Register() {
return (
<Content>
<FlexboxGrid justify='center'>
@ -48,7 +48,9 @@ function Register() {
<Dropdown.Item>
Alaska Standard Time
</Dropdown.Item>
<Dropdown.Item>Bangladesh Standard Time </Dropdown.Item>
<Dropdown.Item>
Bangladesh Standard Time{' '}
</Dropdown.Item>
<Dropdown.Item>...</Dropdown.Item>
</Dropdown>
</FormGroup>
@ -74,5 +76,3 @@ function Register() {
</Content>
);
}
export default Register;