# All files / composer/components ProfileGroups.jsx

85.71% Statements 12/14
50% Branches 2/4
66.67% Functions 4/6
91.67% Lines 11/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56

    1x

    1x
    2x

    2x

    2x
    2x

    2x

    2x

    2x

    2x

    1x

     import React from 'react';
    import PropTypes from 'prop-types';
    import AppActionCreators from '../action-creators/AppActionCreators';
    import ProfileGroupItem from '../components/ProfileGroupItem';
    import A from '../components/A';
    import styles from './css/ProfileGroups.css';

    const onGroupButtonClick = () => {
      AppActionCreators.listenToChangeEventsForGroups();
    };

    const ProfileGroups = (props) => {
      const { groups, selectedProfilesIds } = props;

      const hasGroups = groups.length > 0;

      const profileGroupsWithAllProfilesSelected = groups.filter((group) =>
        group.profileIds.every((profileId) => selectedProfilesIds.includes(profileId)));

      const selectedProfileGroupsIds = profileGroupsWithAllProfilesSelected.map((group) => group.id);

      const createEditGroupButtonClassName = [
        styles.createEditGroupButton,
        'js-disable-dragging',
      ].join(' ');

      return (
        <div className={styles.profileGroups}>
          {groups.map((group) =>
            <ProfileGroupItem
              group={group}
              selectedProfileGroupsIds={selectedProfileGroupsIds}
              key={group.id}
            />)}

          <A
            href={hasGroups ? '/app/edit_groups' : '/app/create_group'}
            onClick={onGroupButtonClick}
            target="_blank" rel="noreferrer noopener"
            className={createEditGroupButtonClassName}
          >
            <span className={styles.createEditGroupButtonCopy}>
              {hasGroups ? 'Edit Groups' : 'Create a Group'}
            </span>
          </A>
        </div>
      );
    };

    ProfileGroups.propTypes = {
      groups: PropTypes.array.isRequired,
      selectedProfilesIds: PropTypes.array.isRequired,
    };

    export default ProfileGroups;