[NEW-UI] Delete task and pagination edge-cases (#599)
Artyom Zankevich
7 years ago
committed by
Boris Sekachev
parent
f341419f22
commit
efa47a3aa3
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import DashboardContent from './dashboard-content';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<DashboardContent />, div);
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Dashboard from './dashboard';
|
||||
|
||||
import Dashboard from './dashboard-page';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import DashboardFooter from './dashboard-footer';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<DashboardFooter />, div);
|
||||
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import DashboardHeader from './dashboard-header';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<DashboardHeader />, div);
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Login from './login';
|
||||
|
||||
import Login from './login-page';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import NotFound from './not-found';
|
||||
|
||||
import NotFound from './page-not-found';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
@ -0,0 +1,10 @@
|
||||
.register-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
|
||||
&__title {
|
||||
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import RegisterPage from './register-page';
|
||||
|
||||
|
||||
it('renders without crashing', () => {
|
||||
const div = document.createElement('div');
|
||||
ReactDOM.render(<RegisterPage />, div);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
@ -0,0 +1,188 @@
|
||||
import React, { PureComponent } from 'react';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
// import { registerAsync } from '../../actions/auth.actions';
|
||||
|
||||
import { Button, Icon, Input, Form, Col, Row } from 'antd';
|
||||
import Title from 'antd/lib/typography/Title';
|
||||
|
||||
import './register-page.scss';
|
||||
|
||||
|
||||
class RegisterForm extends PureComponent<any, any> {
|
||||
constructor(props: any) {
|
||||
super(props);
|
||||
|
||||
this.state = { confirmDirty: false };
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
if (localStorage.getItem('session')) {
|
||||
this.props.history.push('/dashboard');
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { getFieldDecorator } = this.props.form;
|
||||
|
||||
return (
|
||||
<Row type="flex" justify="center" align="middle">
|
||||
<Col xs={12} md={10} lg={8} xl={6}>
|
||||
<Form className="register-form" onSubmit={ this.onSubmit }>
|
||||
<Title className="register-form__title">Register</Title>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('username', {
|
||||
rules: [{ required: true, message: 'Please enter your username!' }],
|
||||
})(
|
||||
<Input
|
||||
prefix={ <Icon type="user" /> }
|
||||
type="text"
|
||||
name="username"
|
||||
placeholder="Username"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('firstName', {
|
||||
rules: [],
|
||||
})(
|
||||
<Input
|
||||
prefix={ <Icon type="idcard" /> }
|
||||
type="text"
|
||||
name="first-name"
|
||||
placeholder="First name"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
{getFieldDecorator('lastName', {
|
||||
rules: [],
|
||||
})(
|
||||
<Input
|
||||
prefix={ <Icon type="idcard" /> }
|
||||
type="text"
|
||||
name="last-name"
|
||||
placeholder="Last name"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item hasFeedback>
|
||||
{getFieldDecorator('email', {
|
||||
rules: [
|
||||
{
|
||||
type: 'email',
|
||||
message: 'The input is not valid email!',
|
||||
},
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your email!',
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Input
|
||||
prefix={ <Icon type="mail" /> }
|
||||
type="text"
|
||||
name="email"
|
||||
placeholder="Email"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item hasFeedback>
|
||||
{getFieldDecorator('password', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please input your password!',
|
||||
},
|
||||
{
|
||||
validator: this.validateToNextPassword,
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Input.Password
|
||||
prefix={ <Icon type="lock" /> }
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item hasFeedback>
|
||||
{getFieldDecorator('passwordConfirmation', {
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please confirm your password!',
|
||||
},
|
||||
{
|
||||
validator: this.compareToFirstPassword,
|
||||
},
|
||||
],
|
||||
})(
|
||||
<Input.Password
|
||||
onBlur={ this.handleConfirmBlur }
|
||||
prefix={ <Icon type="lock" /> }
|
||||
name="password-confirmation"
|
||||
placeholder="Password confirmation"
|
||||
/>,
|
||||
)}
|
||||
</Form.Item>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit" loading={ this.props.isFetching }>
|
||||
Register
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
}
|
||||
|
||||
private handleConfirmBlur = (event: any) => {
|
||||
const { value } = event.target;
|
||||
|
||||
this.setState({ confirmDirty: this.state.confirmDirty || !!value });
|
||||
};
|
||||
|
||||
private compareToFirstPassword = (rule: any, value: string, callback: Function) => {
|
||||
const { form } = this.props;
|
||||
|
||||
if (value && value !== form.getFieldValue('password')) {
|
||||
callback('Two passwords that you enter are inconsistent!');
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
private validateToNextPassword = (rule: any, value: string, callback: Function) => {
|
||||
const { form } = this.props;
|
||||
|
||||
if (value && this.state.confirmDirty) {
|
||||
form.validateFields(['passwordConfirmation'], { force: true });
|
||||
}
|
||||
|
||||
callback();
|
||||
};
|
||||
|
||||
private onSubmit = (event: any) => {
|
||||
event.preventDefault();
|
||||
|
||||
this.props.form.validateFields((error: any, values: any) => {
|
||||
if (!error) {
|
||||
// this.props.dispatch(registerAsync(values.username, values.password, this.props.history));
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state: any) => {
|
||||
return state.authContext;
|
||||
};
|
||||
|
||||
export default Form.create()(connect(mapStateToProps)(RegisterForm));
|
||||
@ -0,0 +1,13 @@
|
||||
export default (params: { search?: string, page?: string }): { search?: string, page?: number } => {
|
||||
const queryObject: { search?: string, page?: number } = {};
|
||||
|
||||
if (params['search']) {
|
||||
queryObject.search = params.search.toString();
|
||||
}
|
||||
|
||||
if (params['page']) {
|
||||
queryObject.page = parseInt(params.page);
|
||||
}
|
||||
|
||||
return queryObject;
|
||||
}
|
||||
Loading…
Reference in New Issue