import React from "react";
import { includes, map, remove } from "lodash-es";
import { connect } from "react-redux";
import { Row, Col, Panel } from "react-bootstrap";
import { ListGroupItem, Checkbox } from "../../base";

import { editUser, listUsers } from "../actions";

class UserGroup extends React.Component {

    componentDidUpdate (prevProps) {
        if (this.props.toggled !== prevProps.toggled) {
            prevProps.onListUsers();
        }
    }

    handleClick = () => {
        const { userGroups, groupId, userId } = this.props;
        let newGroups;

        if (this.props.toggled) {
            newGroups = remove(userGroups, (group) =>
                group !== groupId
            );
            return this.props.onEditGroup(userId, newGroups);
        }

        newGroups = userGroups.slice();
        newGroups.push(groupId);
        this.props.onEditGroup(userId, newGroups);
    };

    render () {
        return (
            <Col xs={12} md={4} key={this.props.groupId}>
                <ListGroupItem
                    className="text-capitalize"
                    onClick={this.handleClick}
                    disabled={this.props.disabled}
                >
                    {this.props.groupId}
                    <Checkbox checked={this.props.toggled} pullRight />
                </ListGroupItem>
            </Col>
        );
    }
}

const UserGroups = ({ accountUserId, allGroups, memberGroups, EditGroup, userId, list }) => {

    const groupComponents = map(allGroups, groupId =>
        <UserGroup
            key={groupId}
            groupId={groupId}
            userGroups={memberGroups}
            accountUserId={accountUserId}
            userId={userId}
            toggled={includes(memberGroups, groupId)}
            onEditGroup={EditGroup}
            onListUsers={list}
        />
    );

    return (
        <Panel>
            <Panel.Body>
                <Row>
                    {groupComponents}
                </Row>
            </Panel.Body>
        </Panel>
    );
};

const mapStateToProps = state => ({
    accountUserId: state.account.id,
    allGroups: map(state.groups.list, "id")
});

const mapDispatchToProps = dispatch => ({

    EditGroup: (userId, groups) => {
        dispatch(editUser(userId, { groups }));
    },

    list: () => {
        dispatch(listUsers());
    }

});

export default connect(mapStateToProps, mapDispatchToProps)(UserGroups);

@@ -193,16 +193,27 @@
 Checkbox
+, NoneFound
  %7D from 
@@ -1863,16 +1863,102 @@
     );%0A%0A
+    if (!groupComponents.length) %7B%0A        return %3CNoneFound noun=%22groups%22 /%3E;%0A    %7D%0A%0A
     retu

Add NoneFound for user details groups