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.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Meeting Planner</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<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>
</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 {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>
);
}