# All files / composer/components BoardSelector.jsx

0% Statements 0/13
0% Branches 0/10
0% Functions 0/7
0% Lines 0/13

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
    95
    96
    97

     import React from 'react';
    import PropTypes from 'prop-types';
    import styles from './css/BoardSelector.css';
    import BoardSelectorBoardItem from '../components/BoardSelectorBoardItem';
    import BoardCreator from '../components/BoardCreator';
    import Input from '../components/Input';

    class BoardSelector extends React.Component {
      static propTypes = {
        subprofilesCount: PropTypes.number,
        profile: PropTypes.object.isRequired,
        subprofiles: PropTypes.array.isRequired,
        visibleNotifications: PropTypes.array.isRequired,
        canUnselectSubprofiles: PropTypes.bool,
        onChange: PropTypes.func,
      };

      static defaultProps = {
        canUnselectSubprofiles: true,
        onChange: () => {},
      };

      state = {
        searchQuery: '',
      };

      componentDidUpdate = (prevProps) => {
        if (prevProps.subprofilesCount < this.props.subprofilesCount &&
            !this.props.profile.subprofilesOrignatedFromAPI) {
          this.refs.subprofilesContainer.scrollTop = this.refs.subprofilesContainer.scrollHeight;
        }
      };

      onClick = (e) => {
        e.stopPropagation();
      };

      onSearchChange = (e) => {
        this.setState({
          searchQuery: e.target.value,
        });
      };

      render() {
        const { profile, subprofiles, canUnselectSubprofiles, onChange, visibleNotifications } =
          this.props;

        const searchQuery = this.state.searchQuery.toLowerCase();
        const boards = subprofiles.filter((board) =>
          board.name && board.name.toLowerCase().includes(searchQuery));

        const searchBoardIconClassName = [
          styles.searchBoardIcon,
          'bi bi-search',
        ].join(' ');

        const hasBoardsDisplayed = boards.length > 0;
        const profileHasBoards = this.props.subprofiles.length > 0;

        return (
          <div className={styles.boardSelector} onClick={this.onClick}>
            <div className={styles.boardTriangle}>▲</div>

            <div className={styles.boardSearchContainer}>
              <i className={searchBoardIconClassName} />
              <Input
                type="text"
                placeholder="Search your boards"
                className={styles.boardSearchInput}
                value={this.state.searchQuery}
                onChange={this.onSearchChange}
              />
            </div>
            <div className={styles.subprofilesContainer} ref="subprofilesContainer">
              {[...boards].map((board) =>
                <BoardSelectorBoardItem
                  profile={profile} board={board} onChange={onChange}
                  canUnselectSubprofiles={canUnselectSubprofiles} key={board.id}
                />)}
            </div>

            {!hasBoardsDisplayed &&
              <div className={styles.emptySearchResults}>
               {profileHasBoards ?
                 'Sorry, no boards matched your search!' :
                 `Looks like this profile doesn't have any boards yet.
                  No worries, you can create one below! :)`}
              </div>}

            <BoardCreator profile={profile} visibleNotifications={visibleNotifications} />
          </div>
        );
      }
    }

    export default BoardSelector;