5-7. ContactModalContainer 컴포넌트 만들기

이번 컴포넌트는 다룰 액션에 꽤 많은데요, 이번에 만들어야 할 함수들은 다음과 같습니다:

• handleHide
• handleChange
• handleRemove
• handleAction { create, modify }

handleAction 은 두 함수를 내장하고있는 객체입니다. 모달의 모드에 따라 다른 함수가 실행되도록 설정 할 것입니다.

그리고, 화면을 어둡게 하는 Dimmed 컴포넌트를 이 컨테이너 안에 포함 시키도록 하겠습니다.

src/containers/ContactModalContainer.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import ContactModal from '../components/ContactModal';
import Dimmed from '../components/Dimmed';

import * as modalActions from '../modules/modal';
import * as contactsActions from '../modules/contacts';

import shortid from 'shortid';

class ContactModalContainer extends Component {

    handleHide = () => {
        const { ModalActions } = this.props;

        ModalActions.hide();
    }

    handleChange = ({name, value}) => {
        const { ModalActions } = this.props;

        ModalActions.change({
            name,
            value
        });
    }

    handleAction = {
        create: () => {
            const { ContactActions, modal } = this.props;
            const { name, phone, color } = modal.get('contact').toJS();
            const id = shortid.generate();

            ContactActions.create({
                id,
                name,
                phone,
                color
            });

            this.handleHide();
        },

        modify: () => {
            const { ContactActions, modal } = this.props;
            const { id, name, phone } = modal.get('contact').toJS();

            ContactActions.modify({
                id,
                contact: {
                    name,
                    phone
                }
            });

            this.handleHide();
        }
    }

    handleRemove = () => {
        const { ContactActions, modal } = this.props;
        const id = modal.getIn(['contact', 'id']);

        ContactActions.remove(id);
        this.handleHide();
    }


    render() {
        const { modal } = this.props;
        const { visible, mode, contact } = modal.toJS();

        const { 
            handleHide, 
            handleAction,
            handleChange, 
            handleRemove
        } = this;


        return (
            <div>
                <ContactModal
                    visible={visible}
                    mode={mode}
                    name={contact.name}
                    phone={contact.phone}
                    color={contact.color}
                    onHide={handleHide}
                    onAction={handleAction[mode]}
                    onRemove={handleRemove}
                    onChange={handleChange}
                />
                <Dimmed visible={visible}/>
            </div>
        );
    }
}

export default connect(
    (state) => ({
        modal: state.modal
    }),
    (dispatch) => ({
        ContactActions: bindActionCreators(contactsActions, dispatch),
        ModalActions: bindActionCreators(modalActions, dispatch)
    })
)(ContactModalContainer);

App 에서 불러와서 사용하기

이제 위 컴포넌트를 App 컴포넌트에서 불러와서 사용하겠습니다.

렌더링을 하고 FloatingButton 컴포넌트를 눌러서 모달이 제대로 작동하는지 체크하세요.

import React, { Component } from 'react';
import Header from './components/Header';
import Container from './components/Container';
import { connect } from 'react-redux'

import ViewSelectorContainer from './containers/ViewSelectorContainer';
import InputContainer from './containers/InputContainer';
import FavoriteListContainer from './containers/FavoriteListContainer';
import FloatingButtonContainer from './containers/FloatingButtonContainer';
import ContactModalContainer from './containers/ContactModalContainer';


class App extends Component {
    render() {
        // 레퍼런스 준비
        const { view } = this.props;

        return (
            <div>
                <Header/>
                <ViewSelectorContainer/>

                {/* view 값에 따라 다른 컨테이너를 보여준다 */}
                <Container visible={view==='favorite'}>
                    <FavoriteListContainer/>
                </Container>
                <Container visible={view==='list'}>
                    <InputContainer/>
                    {/* ContactListContainer */}
                </Container>

                <ContactModalContainer/>
                <FloatingButtonContainer/>
            </div>
        );
    }
}

export default connect(
    (state) => ({
        view: state.base.get('view')
    })
)(App);