remove button in feed channels

src/api/reddit.js

@@ -14,7 +14,7 @@ export default class RedditAPI {
   async getChannelByUrl(url) {
     const id = getChannelId(url);
     try {
-      const tracks = await this.getTracks(id, {limit: 1});
+      const tracks = await this.getTracks(id, {limit: 10});
       return convertChannel(id, tracks.list[0].cover);
     } catch (err) {
       return null;

src/components/channels/channel.js

@@ -1,13 +1,15 @@
 import React, {PropTypes} from 'react';
 import cn from 'classnames';
 import Avatar from 'components/ui/avatar';
+import IconButton from 'components/ui/icon-button';
 import styles from './channels.scss';
 
 export default class Channel extends React.PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
     name: PropTypes.string.isRequired,
     onToggle: PropTypes.func.isRequired,
+    onRemove: PropTypes.func,
     image: PropTypes.string,
     isEnabled: PropTypes.bool,
     isLoading: PropTypes.bool,
@@ -27,12 +29,26 @@ export default class Channel extends React.PureComponent {
     return (
       <li className={cn(styles.channel, {[styles.channelEnabled]: isEnabled})} onClick={this._toggle}>
         <Avatar url={image} className={styles.avatar} />
-        {name}
+        <span className={styles.name}>{name}</span>
+        {this._hasRemove() && <IconButton
+          glyph="remove"
+          size="medium"
+          onClick={this._remove}
+          className={styles.remove}/>}
       </li>
     );
   }
 
   _toggle = () => {
     this.props.onToggle(this.props);
   }
+
+  _remove = e => {
+    e.stopPropagation();
+    this.props.onRemove(this.props.id);
+  }
+
+  _hasRemove() {
+    return typeof this.props.onRemove === 'function';
+  }
 }

src/components/channels/channels.scss

@@ -10,19 +10,21 @@
 }
 
 .channel {
+  display: flex;
   height: 36px;
   padding: 6px 8px;
   margin: 0;
   line-height: 24px;
   font-size: 13px;
   box-sizing: border-box;
   cursor: pointer;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 
   &:hover {
     background-color: rgba(#efefef, .5);
+
+    & .remove {
+      display: inline-block;
+    }
   }
 
   &Enabled {
@@ -40,4 +42,18 @@
   margin-right: 8px;
   float: left;
   background-color: #efefef;
+  flex-shrink: 0;
+}
+
+.name {
+  flex-grow: 1;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.remove {
+  flex-shrink: 0;
+  margin: 0 4px;
+  display: none;
 }

src/components/channels/index.js

@@ -6,14 +6,19 @@ export default class Channels extends React.PureComponent {
   static propTypes = {
     channels: PropTypes.array.isRequired,
     onToggleChannel: PropTypes.func.isRequired,
+    onRemoveChannel: PropTypes.func,
   }
 
   render() {
-    const {channels, onToggleChannel} = this.props;
+    const {channels, onToggleChannel, onRemoveChannel} = this.props;
 
     return <ul className={style.root}>
       {channels.map(channel => (
-        <Channel key={channel.id} {...channel} onToggle={onToggleChannel} />
+        <Channel
+          key={channel.id}
+          {...channel}
+          onToggle={onToggleChannel}
+          onRemove={onRemoveChannel} />
       ))}
     </ul>;
   }

src/components/sidebar/index.js

@@ -4,7 +4,7 @@ import cn from 'classnames';
 import Header from 'components/header';
 import Channels from 'components/channels';
 import Discover from 'components/discover';
-import {setChannelEnabled} from '../../actions/feed';
+import {setChannelEnabled, removeFeedChannel} from '../../actions/feed';
 import {setDiscoverVisible} from '../../actions/discover';
 import styles from './sidebar.scss';
 
@@ -23,7 +23,10 @@ export class Sidebar extends React.PureComponent {
         channelsCount={channels.length}
         isDiscoverVisible={isDiscoverVisible}
         onToggleDiscover={this._toggleDiscover} />
-      <Channels channels={channels} onToggleChannel={this._toggleChannel} />
+      <Channels
+        channels={channels}
+        onToggleChannel={this._toggleChannel}
+        onRemoveChannel={this._removeChannel} />
       <Discover
         visible={isDiscoverVisible}
         onClose={this._toggleDiscover}
@@ -36,6 +39,10 @@ export class Sidebar extends React.PureComponent {
     this.props.dispatch(setChannelEnabled(channel, !channel.isEnabled));
   }
 
+  _removeChannel = channelId => {
+    this.props.dispatch(removeFeedChannel(channelId));
+  }
+
   _toggleDiscover = () => {
     this.props.dispatch(setDiscoverVisible(!this.props.isDiscoverVisible));
   }