# All files / composer/components ProfileSection.jsx

60% Statements 12/20
60% Branches 6/10
50% Functions 5/10
66.67% Lines 10/15

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
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94

    1x

    2x
    2x

    2x
    2x

    2x
    2x

    2x

    2x

    2x

     /**
     * Component that shows the list of available profiles
     */
    import React from 'react';
    import PropTypes from 'prop-types';
    import Profile from '../components/Profile';
    import ProfileGroups from '../components/ProfileGroups';
    import Button from '../components/Button';
    import styles from './css/ProfileSection.css';
    import AppActionCreators from '../action-creators/AppActionCreators';

    class ProfileSection extends React.Component {
      static propTypes = {
        profiles: PropTypes.array.isRequired,
        appState: PropTypes.object.isRequired,
        userData: PropTypes.object,
        visibleNotifications: PropTypes.array.isRequired,
      };

      onScroll = (e) => {
        if (e.target !== this.refs.profilesScrollContainer) return;

        const scrollTop = e.target.scrollTop;
        this.scrollHandlers.forEach((handler) => handler(e, scrollTop));
      };

      onProfilesToggleClick = () => AppActionCreators.toggleAllProfiles();

      addContainerScrollHandler = (handler) => {
        this.scrollHandlers.add(handler);
      };

      removeContainerScrollHandler = (handler) => {
        this.scrollHandlers.delete(handler);
      };

      scrollHandlers = new Set();

      render() {
        const { appState, profiles, userData, visibleNotifications } = this.props;
        const { isBusinessUser, profileGroups } = userData;

        const hasBusinessProfiles = profiles.some((profile) => profile.isBusinessProfile);
        const shouldBeConsideredBusinessUser = isBusinessUser || hasBusinessProfiles;

        const selectedProfilesIds =
          this.props.profiles.filter((profile) => profile.isSelected).map((profile) => profile.id);
        const hasNoProfilesSelected = selectedProfilesIds.length === 0;

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

        return (
          <div className={styles.profileSection}>
            {shouldBeConsideredBusinessUser &&
              <Button
                className={profilesTogglerClassName} onClick={this.onProfilesToggleClick}
              >
                <span className={styles.profilesTogglerCopy}>
                  {hasNoProfilesSelected ? 'Select All' : 'Select None'}
                </span>
              </Button>
            }

            {shouldBeConsideredBusinessUser &&
              <ProfileGroups
                groups={profileGroups}
                selectedProfilesIds={selectedProfilesIds}
              />}

            <div className={styles.profilesContainer}>
              <div
                onScroll={this.onScroll}
                className={styles.profilesScrollContainer}
                ref="profilesScrollContainer"
              >
                {profiles.map((profile) =>
                  <Profile
                    profile={profile}
                    expandedProfileSubprofileDropdownId={appState.expandedProfileSubprofileDropdownId}
                    addContainerScrollHandler={this.addContainerScrollHandler}
                    removeContainerScrollHandler={this.removeContainerScrollHandler}
                    visibleNotifications={visibleNotifications}
                    className={styles.profile}
                    key={profile.id}
                  />)}
              </div>
            </div>
          </div>
        );
      }
    }

    export default ProfileSection;