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

Add Schedule screen, refactor screens and tz data

Browse Source
This commit is contained in:
rui hildt 2020-05-27 15:51:41 +02:00
parent a47ae13636
commit 2620bc92aa
9 changed files with 3867 additions and 517 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/index.html
View File

@ -24,20 +24,10 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>Meeting Planner</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

4109
src/assets/data/timezones.js
View File

File diff suppressed because it is too large Load Diff

17
src/components/General/TimezonesCascader.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import { timezones } from '../../assets/data/timezones';
import { Cascader } from 'rsuite';
export default function TzDropdown() {
// do something here
// const handleSelect = event => {
// console.log(event)
// }
return (
<>
<h1>Aha!</h1>
<Cascader data={timezones} style={{ width: 224 }} />
</>
);
}

13
src/components/General/TzDropdown.js
View File

@ -1,13 +0,0 @@
import React from 'react';
import { timezones } from './../../assets/data/timezones';
import { Dropdown } from 'rsuite';
export default function Tzdropdown() {
return (
<Dropdown title='Timezone'>
{timezones.map((tz) => (
<Dropdown.Item key={tz}>{tz}</Dropdown.Item>
))}
</Dropdown>
);
}

8
src/index.js
View File

@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import {render } from 'react-dom'; import { render } from 'react-dom';
import App from './screens/App'; import App from './screens/App';
import 'rsuite/lib/styles/index.less'; import 'rsuite/lib/styles/index.less';
render( render(
<React.StrictMode> // <React.StrictMode>
<App /> <App />,
</React.StrictMode>, // </React.StrictMode>,
document.getElementById('root') document.getElementById('root')
); );

16
src/screens/App.js
View File

@ -1,29 +1,22 @@
import React from 'react'; import React from 'react';
import 'rsuite/lib/styles/index.less'; import 'rsuite/lib/styles/index.less';
import { Container } from 'rsuite';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'; import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard'; import Dashboard from './Dashboard';
import Schedule from './Schedule';
import Login from './Login'; import Login from './Login';
import Register from './Register'; import Register from './Register';
import NavBar from '../components/Navbar/NavBar'; import NavBar from '../components/Navbar/NavBar';
const containerStyle = {
maxWidth: 700,
margin: '0 auto',
borderRadius: 7,
background: 'white',
marginTop: '10vh',
marginBottom: '10vh',
};
export default function App() { export default function App() {
return ( return (
<Router> <Router>
<Container style={containerStyle}>
<NavBar /> <NavBar />
<Switch> <Switch>
<Route path='/' exact> <Route path='/' exact>
<Schedule />
</Route>
<Route path='/dashboard'>
<Dashboard /> <Dashboard />
</Route> </Route>
<Route path='/login'> <Route path='/login'>
@ -33,7 +26,6 @@ export default function App() {
<Register /> <Register />
</Route> </Route>
</Switch> </Switch>
</Container>
</Router> </Router>
); );
} }

24
src/screens/Login.js
View File

@ -2,23 +2,29 @@ import React from 'react';
import { import {
FlexboxGrid, FlexboxGrid,
Panel,
Form, Form,
FormGroup, FormGroup,
FormControl, FormControl,
HelpBlock, // HelpBlock,
Button, Button,
} from 'rsuite'; } from 'rsuite';
const boxStyle = { const boxStyle = {
margin: '50px 10px', maxWidth: 373,
margin: '0 auto',
borderRadius: 7,
background: 'white',
marginTop: '10vh',
marginBottom: '10vh',
padding: '1rem',
}; };
const h3Style = { margin: '1rem' };
export default function Login() { export default function Login() {
return ( return (
<FlexboxGrid justify='center'> <FlexboxGrid justify='center' style={boxStyle}>
<FlexboxGrid.Item> <h3 style={h3Style}>Login</h3>
<Panel header={<h3>Login</h3>} bordered style={boxStyle}>
<Form horizontal> <Form horizontal>
<FormGroup> <FormGroup>
<FormControl <FormControl
@ -33,9 +39,9 @@ export default function Login() {
type='password' type='password'
placeholder='password' placeholder='password'
/> />
<HelpBlock tooltip> {/* <HelpBlock tooltip>
Minimum password length is 8 characters Minimum password length is 8 characters
</HelpBlock> </HelpBlock> */}
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Button appearance='primary' block> <Button appearance='primary' block>
@ -44,8 +50,6 @@ export default function Login() {
</FormGroup> </FormGroup>
<Button appearance='link'>Forgot password?</Button> <Button appearance='link'>Forgot password?</Button>
</Form> </Form>
</Panel>
</FlexboxGrid.Item>
</FlexboxGrid> </FlexboxGrid>
); );
} }

26
src/screens/Register.js
View File

@ -2,7 +2,6 @@ import React from 'react';
import { import {
FlexboxGrid, FlexboxGrid,
Panel,
Form, Form,
FormGroup, FormGroup,
FormControl, FormControl,
@ -10,22 +9,29 @@ import {
Button, Button,
} from 'rsuite'; } from 'rsuite';
import TzDropdown from './../components/General/TzDropdown'; import TzDropdown from '../components/General/TimezonesCascader';
const boxStyle = { const boxStyle = {
margin: '50px 10px', maxWidth: 373,
margin: '0 auto',
borderRadius: 7,
background: 'white',
marginTop: '10vh',
marginBottom: '10vh',
padding: '1rem',
}; };
const h3Style = { margin: '1rem' };
export default function Register() { export default function Register() {
return ( return (
<FlexboxGrid justify='center'> <FlexboxGrid justify='center' style={boxStyle}>
<FlexboxGrid.Item> <h3 style={h3Style}>Register</h3>
<Panel header={<h3>Register</h3>} bordered style={boxStyle}>
<Form horizontal> <Form horizontal>
<FormGroup> <FormGroup>
<FormControl <FormControl
name='username' name='username'
type='plaintext' type='text'
placeholder='username' placeholder='username'
/> />
</FormGroup> </FormGroup>
@ -36,7 +42,9 @@ export default function Register() {
placeholder='email' placeholder='email'
/> />
</FormGroup> </FormGroup>
<FormGroup><TzDropdown /></FormGroup> <FormGroup>
<TzDropdown />
</FormGroup>
<FormGroup> <FormGroup>
<FormControl <FormControl
name='password' name='password'
@ -53,8 +61,6 @@ export default function Register() {
</Button> </Button>
</FormGroup> </FormGroup>
</Form> </Form>
</Panel>
</FlexboxGrid.Item>
</FlexboxGrid> </FlexboxGrid>
); );
} }

29
src/screens/Schedule.js Normal file
View File

@ -0,0 +1,29 @@
import React from 'react';
import TzDropdown from '../components/General/TimezonesCascader';
import { Container, Form, FormControl, FormGroup, Input } from 'rsuite';
export default function Schedule() {
return (
<Container>
<h3>Schedule a meeting</h3>
<Form horizontal>
<FormGroup>
<FormControl name='title' type='text' placeholder='title' />
</FormGroup>
<FormGroup>
<Input
name='description'
componentClass='textarea'
type='text'
rows={3}
placeholder='Description'
/>
</FormGroup>
<FormGroup>
<TzDropdown />
</FormGroup>
</Form>
</Container>
);
}