member signup redirect

This commit is contained in:
geek 2017-08-14 15:16:52 +09:00
parent 5a3e643a1a
commit efce4ccbe9
4 changed files with 68 additions and 48 deletions

View File

@ -9,12 +9,13 @@ import {
import State from '../redux/state/SignUp';
import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
import { push as routerPush } from 'react-router-redux';
import * as signupActions from '../redux/action/signUp';
export function mapStateToProps(state: any): SignUpStateProps {
return {
member: state.member,
};
}
@ -24,6 +25,9 @@ export function mapDispatchToProps(dispatch: Dispatch<any>): SignUpDispatchProps
dispatch(asyncRequestActions.request('MemberService', 'signup', signupActions.REQUEST, JSON.stringify(member)));
// dispatch(signupActions.request(member));
},
onRedirectHome: () => {
dispatch(routerPush('/'));
},
};
}

View File

@ -10,10 +10,12 @@ import {
import MemberStatus from '../../api/model/MemberStatus';
export interface StateProps {
member?:Member;
}
export interface DispatchProps {
onSignUp?(member: Member): void;
onRedirectHome():void;
}
export type Props = StateProps & DispatchProps;
@ -56,48 +58,54 @@ export class SignUp extends React.Component<Props, State> {
}
public render(): JSX.Element {
return (
<Form>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<Form.Input fluid placeholder='Name' onChange= {
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}
}/>
<Form.Input fluid placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}
} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}
} />
<Form.Input fluid placeholder='Company' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}
}/>
<Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}
} />
<Form.Input fluid placeholder='phone' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}
} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>
);
let signupElement = <Form>
<Form.Input fluid value={this.state.email} placeholder='Email' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ email: data.value });
}} />
<Form.Input fluid placeholder='Name' onChange= {
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ name: data.value });
}
}/>
<Form.Input fluid placeholder='Password' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ pass: data.value });
}
} />
<Form.Input fluid placeholder='Password Confirm' type='password' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ passCon: data.value });
}
} />
<Form.Input fluid placeholder='Company' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ company: data.value });
}
}/>
<Form.Select fluid value={this.state.country} placeholder='Select your country' options={options} onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ country: data.value });
}
} />
<Form.Input fluid placeholder='phone' onChange={
(event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
this.setState({ phone: data.value });
}
} />
<Form.Group>
<Button primary fluid style={{margin:'7'}} onClick={this.signUpClick}> Sign Up </Button>
<Button fluid style={{margin:'7'}}> Cancel </Button>
</Form.Group>
</Form>;
if (this.props.member !== undefined && this.props.member.id > 0) {
// Todo Please check the member registration e-mail.
this.props.onRedirectHome();
} else {
return signupElement;
}
}
private signUpClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {

View File

@ -5,12 +5,20 @@ import Member from '@overflow/member/api/model/Member';
import * as SignUpActionTypes from '../action/signUp';
import SignUpState, { defaultState as signupDefaultState } from '../state/SignUp';
//
// [SignUpActionTypes.REQUEST_SUCCESS]: (state: SignUpState = signupDefaultState, action: Action<Member>): SignUpState => {
// return {
// ...state,
// member: <Member[]>action.payload,
// };
// },
const reducer: ReducersMapObject = {
[SignUpActionTypes.REQUEST_SUCCESS]: (state: SignUpState = signupDefaultState, action: Action<Member>): SignUpState => {
console.log(state);
console.log(action);
return state;
return {
...state,
member: <Member>action.payload,
isRegistered: true,
};
},
[SignUpActionTypes.REQUEST_FAILURE]: (state: SignUpState = signupDefaultState, action: Action<Error>): SignUpState => {
return state;

View File

@ -1,7 +1,7 @@
import Member from '../../api/model/Member';
export interface State {
readonly isRegistered: boolean;
readonly isRegistered?: boolean;
readonly member?: Member;
readonly error?: Error;
}