# All files / composer/components BoardCreator.jsx

0% Statements 0/21
0% Branches 0/6
0% Functions 0/7
0% Lines 0/21

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

     import React from 'react';
    import PropTypes from 'prop-types';
    import styles from './css/BoardCreator.css';
    import AppActionCreators from '../action-creators/AppActionCreators';
    import { NotificationScopes } from '../AppConstants';
    import NotificationContainer from '../components/NotificationContainer';
    import Input from '../components/Input';
    import NotificationActionCreators from '../action-creators/NotificationActionCreators';

    class BoardCreator extends React.Component {
      static propTypes = {
        subprofiles: PropTypes.array,
        profile: PropTypes.object,
        visibleNotifications: PropTypes.array.isRequired,
      };

      constructor(props) {
        super(props);
        this.state = this.getInitialBoardCreatorState();
      }

      onSubmit = (e) => {
        e.preventDefault();
        const notifications = this.props.visibleNotifications.filter((notif) =>
          notif.scope === NotificationScopes.BOARD_CREATION
        );
        for (const notification of notifications) {
          NotificationActionCreators.removeNotification(notification.id);
        }

        const boardName = this.state.boardName;
        const profileId = this.props.profile.id;

        AppActionCreators.createNewSubprofile(profileId, boardName);

        this.setState(this.getInitialBoardCreatorState());
      };

      onChange = (e) => {
        this.setState({
          boardName: e.target.value,
        });
      };

      getInitialBoardCreatorState = () => ({
        boardName: '',
      });

      render() {
        const isSubprofileCreationPending = this.props.profile.appState.isSubprofileCreationPending;
        const isBoardNameEmpty = this.state.boardName.length === 0;

        const isDisabled = isBoardNameEmpty || isSubprofileCreationPending;
        const submitButtonLabel = isSubprofileCreationPending ? 'Creating…' : 'Create';

        const submitButtonClassName = isDisabled ?
          styles.disabledCreateButton : styles.createBoardButton;

        const visibileNotificationsForProfile =
          this.props.visibleNotifications.filter((notif) =>
          notif.data.profileId === this.props.profile.id);

        return (
          <div className={styles.createNewBoard}>
            <form onSubmit={this.onSubmit} className={styles.createBoardForm}>
              <Input
                value={this.state.boardName}
                placeholder="New board name"
                className={styles.newBoardName}
                onChange={this.onChange}
              />
              <Input
                type="submit"
                value={submitButtonLabel}
                className={submitButtonClassName}
                disabled={isDisabled}
              />
            </form>
            <NotificationContainer
              visibleNotifications={visibileNotificationsForProfile}
              scope={NotificationScopes.BOARD_CREATION}
            />
          </div>

        );
      }
    }

    export default BoardCreator;