요청과 응답

member.ts

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { RouteComponentProps, Link } from 'react-router';
import { Provider, connect } from 'react-redux';
import * as classNames from 'classnames';

import * as state from '../../common/state';
import * as reducer from '../../common/reducer';
import * as actions from '../../common/actions';

import { Field } from './components/field'

interface TAppInfoMemberProps extends RouteComponentProps<{}, {}> {
    applications: state.TApplication[];
    memberInfo: state.Application.TMemberInfo;
    memberAddResult: state.Application.TMemberAddResult;
    requestMemberInfo: (key) => void;
    requestMemberAdd: (key, memberId, memberType) => void;
    requestMemberDelete: (key, memberId, memberType) => void;
    clearMemeberAddResult: () => void;
}

class AppInfoMemberComponent extends React.Component<TAppInfoMemberProps, {
}> {
    
    constructor(props) {
        super(props);
    }
    
    render() {
        const {
            applications,
            memberInfo,
            memberAddResult,
            
            params
        } = this.props;
        
        const key = params['key'];
        const app = state.getApplicationByKey(applications, key);
        const adminList = memberInfo && memberInfo.adminList
        const testerList = memberInfo && memberInfo.testerList
        if (memberAddResult && memberAddResult.key == key) {
            alert(memberAddResult.message)
            setTimeout(this.props.clearMemeberAddResult, 0)
        }
        
        return (
            <div className="app_w">
                <Field type="input-list" label="관리자 ID 등록(최대 3개)" values={adminList || []} max={3}
                    noUpdate={true}
                    description={
                        ``}
                    onAdded={(value) => {
                        this.props.requestMemberAdd(key, value, 'ADMIN')
                    }}
                    onDeleted={(index) => {
                        this.props.requestMemberDelete(key, adminList[index], 'ADMIN')
                    }}
                />
                <Field type="input-list" label="테스터 ID 등록(최대 20개)" values={testerList || []} max={20}
                    noUpdate={true}
                    description={
                        ``}
                    onAdded={(value) => {
                        this.props.requestMemberAdd(key, value, 'TESTER')
                    }}
                    onDeleted={(index) => {
                        this.props.requestMemberDelete(key, testerList[index], 'TESTER')
                    }}
                />
            </div>
        )
    }

    componentDidMount() {
        const {
            params,
            requestMemberInfo
        } = this.props;
        const key = params['key']
        if (key) {
            requestMemberInfo(key)
        }
    }
}

export var AppInfoMember = connect<state.IState, {}, TAppInfoMemberProps>(
    (state: state.IState) => ({
        applications: state.root.applications,
        memberInfo: state.root.memberInfo,
        memberAddResult: state.root.memberAddResult
    }),
    (dispatch) => ({
        requestMemberInfo: (key) => 
            dispatch(actions.requestMemberInfo(key)),
        requestMemberAdd: (key, memberId, memberType) => 
            dispatch(actions.requestMemberAdd(key, memberId, memberType)),
        requestMemberDelete: (key, memberId, memberType) => 
            dispatch(actions.requestMemeberDelete(key, memberId, memberType)),
        clearMemeberAddResult: () => 
            dispatch(actions.updateMemberAddResult(null))
    })
)(AppInfoMemberComponent);