Only count joined channels

client/js/components/TabList.js

@@ -3,6 +3,7 @@ import classnames from 'classnames';
 import get from 'lodash/get';
 import Button from 'components/ui/Button';
 import TabListItem from 'containers/TabListItem';
+import { count } from 'utils';
 
 export default class TabList extends PureComponent {
   handleTabClick = (server, target) => this.props.select(server, target);
@@ -40,13 +41,19 @@ export default class TabList extends PureComponent {
         />
       );
 
-      let chanLabel;
+      const chanCount = count(server.channels, c => c.joined);
       const chanLimit =
         get(srv.features, ['CHANLIMIT', '#'], 0) || srv.features.MAXCHANNELS;
+
+      let chanLabel;
       if (chanLimit > 0) {
-        chanLabel = `CHANNELS (${server.channels.length}/${chanLimit})`;
+        chanLabel = (
-      } else {
+          <span>
-        chanLabel = `CHANNELS (${server.channels.length})`;
+            <span className="success">{chanCount}</span>/{chanLimit}
+          </span>
+        );
+      } else if (chanCount > 0) {
+        chanLabel = <span className="success">{chanCount}</span>;
       }
 
       tabs.push(
@@ -55,18 +62,19 @@ export default class TabList extends PureComponent {
           className="tab-label"
           onClick={() => openModal('channel', { server: address })}
         >
-          <span>{chanLabel}</span>
+          <span>CHANNELS {chanLabel}</span>
-          <Button>+</Button>
+          <Button title="Join Channel">+</Button>
         </div>
       );
 
-      server.channels.forEach(name =>
+      server.channels.forEach(({ name, joined }) =>
         tabs.push(
           <TabListItem
             key={address + name}
             server={address}
             target={name}
             content={name}
+            joined={joined}
             selected={tab.server === address && tab.name === name}
             onClick={this.handleTabClick}
           />
@@ -76,7 +84,12 @@ export default class TabList extends PureComponent {
       if (privateChats[address] && privateChats[address].length > 0) {
         tabs.push(
           <div key={`${address}-pm}`} className="tab-label">
-            <span>DIRECT MESSAGES ({privateChats[address].length})</span>
+            <span>
+              DIRECT MESSAGES{' '}
+              <span style={{ color: '#6bb758' }}>
+                {privateChats[address].length}
+              </span>
+            </span>
             {/*<Button>+</Button>*/}
           </div>
         );

client/js/containers/TabListItem.js

@@ -4,9 +4,6 @@ import TabListItem from 'components/TabListItem';
 import connect from 'utils/connect';
 
 const mapState = createStructuredSelector({
-  joined: (state, { server, target }) =>
-    get(state, ['channels', server, target, 'joined']),
-
   error: (state, { server, target }) => {
     const messages = get(state, ['messages', server, target]);
 

client/js/state/channels.js

@@ -97,8 +97,8 @@ export const getSortedChannels = createSelector(
     sortBy(
       Object.keys(channels).map(server => ({
         address: server,
-        channels: sortBy(Object.keys(channels[server]), channel =>
+        channels: sortBy(channels[server], channel =>
-          channel.toLowerCase()
+          channel.name.toLowerCase()
         )
       })),
       server => server.address.toLowerCase()

client/js/utils/index.js

@@ -170,7 +170,7 @@ export function measureScrollBarWidth() {
 }
 
 export function findIndex(arr, pred) {
-  if (!arr) {
+  if (!Array.isArray(arr) || typeof pred !== 'function') {
     return -1;
   }
 
@@ -190,3 +190,17 @@ export function find(arr, pred) {
   }
   return null;
 }
+
+export function count(arr, pred) {
+  if (!Array.isArray(arr) || typeof pred !== 'function') {
+    return 0;
+  }
+
+  let c = 0;
+  for (let i = 0; i < arr.length; i++) {
+    if (pred(arr[i])) {
+      c++;
+    }
+  }
+  return c;
+}