member modify

src/ts/@overflow/app/config/index.ts

@@ -47,7 +47,7 @@ export interface RPCConfig {
   url: string;
 }
 const rpcConfig: RPCConfig = {
-  url: 'ws://127.0.0.1:18081/rpc',
+  url: 'ws://192.168.1.209:18081/rpc',
 };
 
 // Redux Configuration

src/ts/@overflow/app/views/layout/AccountLayout.tsx

@@ -12,6 +12,7 @@ import SignUp from '../member/SignUp';
 import EmailConfirm from '../member/EmailConfirm';
 import ForgotPassword from '../member/ForgotPassword';
 import PWConfirm from '../member/PWConfirm';
+import Modify from '../member/Modify';
 
 export interface Props extends RouteComponentProps<any> {
 }
@@ -40,6 +41,7 @@ class AccountLayout extends React.Component<Props, State> {
               <Route path={`${this.props.match.url}/pw_confirm`} component={PWConfirm}/>
               <Route path={`${this.props.match.url}/check_email`} component={EmailConfirm}/>
               <Route path={`${this.props.match.url}/forgot_password`} component={ForgotPassword}/>
+              <Route path={`${this.props.match.url}/modify`} component={Modify}/>
             </Switch>
           </Segment>
         </Grid.Column>

src/ts/@overflow/app/views/layout/LeftMenu.tsx

@@ -123,6 +123,9 @@ class LeftMenu extends React.Component<Props, State> {
             <Menu.Item onClick={(e) => this.props.onChangeUrl('/account/pw_confirm')} style={{ 'marginLeft': '30px' }}>
               PW Confirm
             </Menu.Item>
+            <Menu.Item onClick={(e) => this.props.onChangeUrl('/account/modify')} style={{ 'marginLeft': '30px' }}>
+              Modify
+            </Menu.Item>
             <Menu.Item onClick={(e) => this.props.onChangeUrl('/account/logout')} style={{ 'marginLeft': '30px' }}>
               Log Out
             </Menu.Item>

src/ts/@overflow/app/views/member/Modify.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RouteComponentProps } from 'react-router';
+import ModifyContainer from '@overflow/member/react/Modify';
+
+export interface Props {
+}
+export interface State {
+}
+
+
+class Modify extends React.Component<RouteComponentProps<Props>, State> {
+
+  public constructor(props?: RouteComponentProps<Props>, context?: State) {
+    super(props, context);
+
+  }
+
+  public render(): JSX.Element {
+    return (
+      <ModifyContainer />
+    );
+  }
+
+}
+
+
+export default Modify;

src/ts/@overflow/app/views/member/SignUp.tsx

@@ -8,7 +8,7 @@ export interface State {
 }
 
 
-class SignIUp extends React.Component<RouteComponentProps<Props>, State> {
+class SignUp extends React.Component<RouteComponentProps<Props>, State> {
 
   public constructor(props?: RouteComponentProps<Props>, context?: State) {
     super(props, context);
@@ -24,4 +24,4 @@ class SignIUp extends React.Component<RouteComponentProps<Props>, State> {
 }
 
 
-export default SignIUp;
+export default SignUp;

src/ts/@overflow/member/react/Modify.tsx

@@ -0,0 +1,37 @@
+import { connect, Dispatch } from 'react-redux';
+import Member from '../api/model/Member';
+
+import {
+  Modify,
+  StateProps as ModifyStateProps,
+  DispatchProps as ModifyDispatchProps,
+} from './components/Modify';
+import State from '../redux/state/Modify';
+
+import * as asyncRequestActions from '@overflow/commons/redux/action/asyncRequest';
+import { push as routerPush } from 'react-router-redux';
+import * as modifyActions from '../redux/action/modify';
+
+
+export function mapStateToProps(state: any): ModifyStateProps {
+  return {
+    member: state.member,
+  };
+}
+
+export function mapDispatchToProps(dispatch: Dispatch<any>): ModifyDispatchProps {
+  return {
+    onModify: (member: Member) => {
+      dispatch(asyncRequestActions.request('MemberService', 'modify', modifyActions.REQUEST, JSON.stringify(member)));
+      // dispatch(signupActions.request(member));
+    },
+    onReadMember: (id: Number) => {
+      dispatch(asyncRequestActions.request('MemberService', 'read', modifyActions.REQUEST, id));
+    },
+    onRedirectHome: () => {
+      dispatch(routerPush('/'));
+    },
+  };
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(Modify);

src/ts/@overflow/member/react/components/Modify.tsx

@@ -0,0 +1,133 @@
+import *as React from 'react';
+import Member from '../../api/model/Member';
+
+import {
+  InputOnChangeData,
+  Button,
+  Form,
+  ButtonProps,
+} from 'semantic-ui-react';
+import MemberStatus from '../../api/model/MemberStatus';
+
+export interface StateProps {
+  member?:Member;
+}
+
+export interface DispatchProps {
+  onModify?(member: Member): void;
+  onReadMember?(id: Number): void;
+  onRedirectHome():void;
+}
+
+export type Props = StateProps & DispatchProps;
+
+export interface State {
+  email: string;
+  name: string;
+  pass: string;
+  passCon: string;
+  company: string;
+  phone: string;
+  country: string;
+}
+
+const options = [
+  { key: 'southkorea', value: '82', text: 'South Korea(82)' },
+  { key: 'unitedstates', value: '1', text: 'United States(1)' },
+];
+
+
+export class Modify extends React.Component<Props, State> {
+  constructor(props?: Props, context?: State) {
+    super(props, context);
+
+    this.state = {
+      email: null,
+      name: null,
+      pass: null,
+      passCon: null,
+      company: null,
+      phone: null,
+      country: null,
+    };
+
+  }
+
+  public componentWillMount(): void {
+    // Todo session get id
+    this.props.onReadMember(1);
+  }
+
+  public onChange (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData):void {
+    console.log(event);
+    console.log(data);
+  }
+
+  public render(): JSX.Element {
+
+    let modifyElement = <Form>
+      <Form.Input fluid value={this.state.email} placeholder='Email' disabled/>
+      <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' value={this.state.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' value={this.state.phone} onChange={
+        (event: React.SyntheticEvent<HTMLInputElement>, data: InputOnChangeData) => {
+          this.setState({ phone: data.value });
+        }
+      } />
+      <Form.Group>
+        <Button primary fluid style={{margin:'7'}} onClick={this.modifyClick}>   Modify  </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 modifyElement;
+    // }
+
+  }
+
+  private modifyClick = (event: React.SyntheticEvent<HTMLButtonElement>, data: ButtonProps):void => {
+
+    let member:Member = {};
+    member.pw = this.state.pass;
+
+    if (member.pw !== this.state.passCon) {
+      return;
+    }
+
+    member.email = this.state.email;
+    member.name = this.state.name;
+    member.companyName = this.state.company;
+    member.phone = this.state.phone;
+    // member.status = MemberStatus.NOAUTH;
+
+    this.props.onModify(member);
+  }
+
+}
+

src/ts/@overflow/member/redux/state/Modify.ts

@@ -1,3 +1,19 @@
 /**
  * Created by geek on 17. 7. 3.
  */
+
+import Member from '../../api/model/Member';
+
+export interface State {
+  readonly isModify?: boolean;
+  readonly member?: Member;
+  readonly error?: Error;
+}
+
+export const defaultState: State = {
+  isModify: undefined,
+  member: undefined,
+  error: undefined,
+};
+
+export default State;