render()

in desktop/flipper-ui-core/src/NotificationsHub.tsx [502:576]
74 lines of code
16 McCabe index (conditional complexity)

  render() {
    const {
      notification,
      isSelected,
      inactive,
      onHidePlugin,
      onHideCategory,
      plugin,
    } = this.props;
    const {action} = notification;

    return (
      <ContextMenu<React.ComponentProps<typeof NotificationBox>>
        data-role="notification"
        component={NotificationBox}
        severity={notification.severity}
        onClick={this.props.onHighlight}
        isSelected={isSelected}
        inactive={inactive}
        items={this.contextMenuItems}>
        <Glyph name={(plugin ? plugin.icon : 'bell') || 'bell'} size={12} />
        <NotificationContent isSelected={isSelected}>
          <Title>{notification.title}</Title>
          {notification.message}
          {!inactive &&
            isSelected &&
            plugin &&
            (action || onHidePlugin || onHideCategory) && (
              <Actions>
                <FlexRow>
                  {action && (
                    <Button onClick={this.openDeeplink}>
                      Open in {getPluginTitle(plugin)}
                    </Button>
                  )}
                  <ButtonGroup>
                    {onHideCategory && (
                      <Button onClick={onHideCategory}>Hide similar</Button>
                    )}
                    {onHidePlugin && (
                      <Button onClick={onHidePlugin}>
                        Hide {getPluginTitle(plugin)}
                      </Button>
                    )}
                  </ButtonGroup>
                </FlexRow>
                <span>
                  {notification.timestamp
                    ? new Date(notification.timestamp).toTimeString()
                    : ''}
                </span>
              </Actions>
            )}
        </NotificationContent>
        {action && !inactive && !isSelected && (
          <FlexColumn style={{alignSelf: 'center'}}>
            {action && (
              <NotificationButton onClick={this.openDeeplink}>
                Open
              </NotificationButton>
            )}
            {this.state.reportedNotHelpful ? (
              <NotificationButton onClick={this.onHide}>
                Hide
              </NotificationButton>
            ) : (
              <NotificationButton onClick={this.reportNotUseful}>
                Not helpful
              </NotificationButton>
            )}
          </FlexColumn>
        )}
      </ContextMenu>
    );
  }