Add Schedule screen, refactor screens and tz data
This commit is contained in:
parent
a47ae13636
commit
2620bc92aa
@ -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>
|
||||||
|
File diff suppressed because it is too large
Load Diff
17
src/components/General/TimezonesCascader.js
Normal file
17
src/components/General/TimezonesCascader.js
Normal 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 }} />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
@ -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>
|
|
||||||
);
|
|
||||||
}
|
|
@ -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')
|
||||||
);
|
);
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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
29
src/screens/Schedule.js
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user