xxx.jsx

## Application Blocking

### ApplicationControl.jsx
```js
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import BlockedAppsModal from './BlockedAppsModal';
import {
    MODAL_BLOCKED_APPS
} from './constants';

class ApplicationControl extends PureComponent {
    static propTypes = {
        initialState: PropTypes.object,
        state: PropTypes.object,
        stateChanged: PropTypes.bool,
        actions: PropTypes.actions
    };

    initialState = this.getInitialState();
    state = this.getInitialState();
    actions = {
        fetchBlockedApps: () => {
            const blockedApps = [ // API
                {
                    category: "Games",
                    stats: { blocked: 22, total: 22 },
                    blockNewApps: true,
                    blockedApps: [ // blocked apps
                        { appName: "Garena", vendorName: "Garena" },
                        { appName: "Garena", vendorName: "Garena" },
                        // :   :   :
                        { appName: "Garena", vendorName: "Garena" }
                    ]
                }
            ];

            this.setState({ blockedApps: blockedApps });
        },
        updateBlockedApps: () => {
            // TODO
        },
        fetchCategories: () => {
            const categories = [ // API
                { categoryName: "Browser and Browser Tools", totalApps: 50, apps: [] },
                { categoryName: "Developer Tools", totalApps: 60, apps: [] },
                { categoryName: "Distributed Computing", totalApps: 70, apps: [] },
                { categoryName: "Encryption", totalApps: 100, apps: [] }
            ];
            this.setState({ categories: categories });
        },
        fetchAppsByCategoryName: (categoryName) => {
            const apps = [ // API
                { appName: "Google Chrome", vendorName: "Vendor name" },
                { appName: "Polarity", vendorName: "Vendor name" },
                        // :   :   :
                { appName: "Opera", vendorName: "Vendor name" }               
            ];

            const categories = _.map(this.state.categories, c => {
                if (c.categoryName === categoryName) {
                    c.apps = apps;
                } else {
                    c.apps = c.apps || [];
                }
            });

            this.setState({ categories: categories });
        },
        openModal: (name = '', params = {}) => {
            this.setState({
                modal: { name, params }
            });
        },
        closeModal: () => {
            this.setState({
                modal: { name: '', params: {} }
            });
        },
        updateModalParams: (params = {}) => {
            this.setState({
                modal: {
                    ...this.state.modal,
                    params: {
                        ...this.state.modal.params,
                        ...params
                    }
                }
            });
        }
    };

    getInitialState() {
        return {
            blockedApps: [],
            categories: [],
            modal: {
                name: '',
                params: {}
            }
        };
    }
    componentDidMount() {
        this.actions.fetchBlockedApps();
    }
    render() {
        return (
            <div>
                {this.state.modal.name === MODAL_BLOCKED_APPS &&
                    <BlockedAppsModal state={this.state} actions={this.actions} />
                }
                <BlockedAppsTable state={this.state} actions={this.actions} />
            </div>
        );
    }
};
```

### BlockedAppsModal.jsx
```js
import PropTypes from 'prop-types';
import React, { PureComponent } from 'react';
import Modal from '@trendmicro/react-modal';

class BlockedAppsModal extends PureComponent {
    componentDidMount() {
        const { actions } = this.props;
        actions.fetchCategories();
    }
    render() {
        const { state, actions } = this.props;
        const { blockedApps, categories } = state;

        return (
            <Modal onClose={actions.closeModal}>
                <Modal.Header>
                    <Modal.Title>
                        Add/Edit Applications to Block for Group: XXXXX
                    </Modal.Title>
                </Modal.Header>
                <Modal.Body>
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={actions.updateBlockedApps}>OK</Button>
                    <Button onClick={actions.closeModal}>Cancel</Button>
                </Modal.Footer>
            </Modal>
        );
    }
}

BlockedAppsModal.propTypes = {
    state: PropTypes.object,
    actions: PropTypes.object
};

export default BlockedAppsModal;
```