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
Download Patch File Download Diff File Expand all files Collapse all files

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 {render } from 'react-dom';
import { render } from 'react-dom';
import App from './screens/App';
import 'rsuite/lib/styles/index.less';
render(
<React.StrictMode>
<App />
</React.StrictMode>,
// <React.StrictMode>
<App />,
// </React.StrictMode>,
document.getElementById('root')
);

40
src/screens/App.js
View File

@@ -1,39 +1,31 @@
import React from 'react';
import 'rsuite/lib/styles/index.less';
import { Container } from 'rsuite';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Schedule from './Schedule';
import Login from './Login';
import Register from './Register';
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() {
return (
<Router>
<Container style={containerStyle}>
<NavBar />
<Switch>
<Route path='/' exact>
<Dashboard />
</Route>
<Route path='/login'>
<Login />
</Route>
<Route path='/register'>
<Register />
</Route>
</Switch>
</Container>
<NavBar />
<Switch>
<Route path='/' exact>
<Schedule />
</Route>
<Route path='/dashboard'>
<Dashboard />
</Route>
<Route path='/login'>
<Login />
</Route>
<Route path='/register'>
<Register />
</Route>
</Switch>
</Router>
);
}

70
src/screens/Login.js
View File

@@ -2,50 +2,54 @@ import React from 'react';
import {
FlexboxGrid,
Panel,
Form,
FormGroup,
FormControl,
HelpBlock,
// HelpBlock,
Button,
} from 'rsuite';
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() {
return (
<FlexboxGrid justify='center'>
<FlexboxGrid.Item>
<Panel header={<h3>Login</h3>} bordered style={boxStyle}>
<Form horizontal>
<FormGroup>
<FormControl
name='email'
type='email'
placeholder='email'
/>
</FormGroup>
<FormGroup>
<FormControl
name='password'
type='password'
placeholder='password'
/>
<HelpBlock tooltip>
Minimum password length is 8 characters
</HelpBlock>
</FormGroup>
<FormGroup>
<Button appearance='primary' block>
Sign in
</Button>
</FormGroup>
<Button appearance='link'>Forgot password?</Button>
</Form>
</Panel>
</FlexboxGrid.Item>
<FlexboxGrid justify='center' style={boxStyle}>
<h3 style={h3Style}>Login</h3>
<Form horizontal>
<FormGroup>
<FormControl
name='email'
type='email'
placeholder='email'
/>
</FormGroup>
<FormGroup>
<FormControl
name='password'
type='password'
placeholder='password'
/>
{/* <HelpBlock tooltip>
Minimum password length is 8 characters
</HelpBlock> */}
</FormGroup>
<FormGroup>
<Button appearance='primary' block>
Sign in
</Button>
</FormGroup>
<Button appearance='link'>Forgot password?</Button>
</Form>
</FlexboxGrid>
);
}

86
src/screens/Register.js
View File

@@ -2,7 +2,6 @@ import React from 'react';
import {
FlexboxGrid,
Panel,
Form,
FormGroup,
FormControl,
@@ -10,51 +9,58 @@ import {
Button,
} from 'rsuite';
import TzDropdown from './../components/General/TzDropdown';
import TzDropdown from '../components/General/TimezonesCascader';
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() {
return (
<FlexboxGrid justify='center'>
<FlexboxGrid.Item>
<Panel header={<h3>Register</h3>} bordered style={boxStyle}>
<Form horizontal>
<FormGroup>
<FormControl
name='username'
type='plaintext'
placeholder='username'
/>
</FormGroup>
<FormGroup>
<FormControl
name='email'
type='email'
placeholder='email'
/>
</FormGroup>
<FormGroup><TzDropdown /></FormGroup>
<FormGroup>
<FormControl
name='password'
type='password'
placeholder='password'
/>
<HelpBlock tooltip>
Minimum password length is 8 characters
</HelpBlock>
</FormGroup>
<FormGroup>
<Button appearance='primary' block>
Register
</Button>
</FormGroup>
</Form>
</Panel>
</FlexboxGrid.Item>
<FlexboxGrid justify='center' style={boxStyle}>
<h3 style={h3Style}>Register</h3>
<Form horizontal>
<FormGroup>
<FormControl
name='username'
type='text'
placeholder='username'
/>
</FormGroup>
<FormGroup>
<FormControl
name='email'
type='email'
placeholder='email'
/>
</FormGroup>
<FormGroup>
<TzDropdown />
</FormGroup>
<FormGroup>
<FormControl
name='password'
type='password'
placeholder='password'
/>
<HelpBlock tooltip>
Minimum password length is 8 characters
</HelpBlock>
</FormGroup>
<FormGroup>
<Button appearance='primary' block>
Register
</Button>
</FormGroup>
</Form>
</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>
);
}