Add filter buttons to /connect (#508)

app/assets/stylesheets/chat.scss

@@ -105,6 +105,26 @@
   }
 }
 
+.chat__channeltypefilter{
+  padding: 3px 0px 3px;
+}
+
+.chat__channeltypefilterbutton{
+  background: transparent;
+  border: 0px;
+  font-size: 14px;
+  padding: 4px 8px 2px;
+  font-family: $monospace;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  display: inline-block;
+  border-bottom: 1px solid $light-medium-gray;
+}
+
+.chat__channeltypefilterbutton--active {
+  background: lighten($green, 18%);
+}
+
 .chat_chatconfig{
   position: absolute;
   bottom: 0px;
@@ -405,7 +425,7 @@
 }
 
 .chatchannels__channelslist {
-  padding: 10px 0;
+  padding: 3px 0 10px;
   flex-grow: 1;
   overflow: scroll;
   padding-bottom: 25px;

app/javascript/chat/actions.js

@@ -72,13 +72,18 @@ export function conductModeration(
     .catch(failureCb);
 }
 
-export function getChannels(query,retrievalID, props, paginationNumber, successCb, failureCb) {
+export function getChannels(query,retrievalID, props, paginationNumber, additionalFilters, successCb, failureCb) {
   const client = algoliasearch(props.algoliaId, props.algoliaKey);
   const index = client.initIndex(props.algoliaIndex);
+<<<<<<< HEAD
+  let filters = {...{
+=======
   index.search(query,{
+>>>>>>> b8d2c0033e7046bb5e13d456f89a2a6f328c209a
     hitsPerPage: 30 + paginationNumber,
     page: paginationNumber
-  })
+  }, ...additionalFilters};
+  index.search(query, filters)
   .then(function(content) {
     let channels = content.hits
     if (retrievalID === null || content.hits.filter(e => e.id === retrievalID).length === 1) {

app/javascript/chat/chat.jsx

@@ -28,6 +28,7 @@ export default class Chat extends Component {
       showAlert: false,
       chatChannels,
       filterQuery: '',
+      channelTypeFilter: 'all',
       channelsLoaded: false,
       channelPaginationNum: 0,
       fetchingPaginatedChannels: false,
@@ -67,7 +68,8 @@ export default class Chat extends Component {
       notificationsPermission: getNotificationState(),
     });
     if (this.state.showChannelsList) {
-      getChannels('', this.state.activeChannelId, this.props, this.state.channelPaginationNum, this.loadChannels);
+      const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter};
+      getChannels('', this.state.activeChannelId, this.props, this.state.channelPaginationNum, filters, this.loadChannels);
     }
     if (!this.state.isMobileDevice) {
       document.getElementById("messageform").focus();
@@ -301,11 +303,13 @@ export default class Chat extends Component {
     const target = e.target;
     if((target.scrollTop + target.offsetHeight + 1800) > target.scrollHeight) {
       this.setState({fetchingPaginatedChannels: true})
+      const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter};
       getChannels(
         this.state.filterQuery,
         this.state.activeChannelId,
         this.props,
         this.state.channelPaginationNum,
+        filters,
         this.loadPaginatedChannels);
     }
   }
@@ -472,6 +476,14 @@ export default class Chat extends Component {
     this.setState({ chatChannels: newChannelsObj });
   };
 
+  triggerChannelTypeFilter = e => {
+    const type = e.target.dataset.channelType;
+    this.setState({channelTypeFilter: type})
+    const filters = type === 'all' ? {} : {filters: 'channel_type:'+type};
+    console.log(filters)
+    getChannels(this.state.filterQuery, null, this.props, 0, filters, this.loadChannels);
+  }
+
   handleFailure = err => {
     console.error(err);
   };
@@ -505,7 +517,8 @@ export default class Chat extends Component {
   };
 
   triggerChannelFilter = e => {
-      getChannels(e.target.value, null, this.props, 0, this.loadChannels);
+      const filters = this.state.channelTypeFilter === 'all' ? {} : {filters: 'channel_type:'+this.state.channelTypeFilter};
+      getChannels(e.target.value, null, this.props, 0, filters, this.loadChannels);
   }
 
   toggleExpand = () => {
@@ -530,6 +543,17 @@ export default class Chat extends Component {
             {notificationsButton}
             <button className="chat__channelstogglebutt" onClick={this.toggleExpand}>{"<"}</button>
             <input placeholder='Filter' onKeyUp={this.triggerChannelFilter} />
+            <div className='chat__channeltypefilter'>
+              <button data-channel-type='all' onClick={this.triggerChannelTypeFilter} className={`chat__channeltypefilterbutton chat__channeltypefilterbutton--${this.state.channelTypeFilter === 'all' ? 'active' : 'inactive'}`}>
+                all
+              </button>
+              <button data-channel-type='direct' onClick={this.triggerChannelTypeFilter} className={`chat__channeltypefilterbutton chat__channeltypefilterbutton--${this.state.channelTypeFilter === 'direct' ? 'active' : 'inactive'}`}>
+                direct
+              </button>
+              <button data-channel-type='invite_only' onClick={this.triggerChannelTypeFilter} className={`chat__channeltypefilterbutton chat__channeltypefilterbutton--${this.state.channelTypeFilter === 'invite_only' ? 'active' : 'inactive'}`}>
+                group
+              </button>
+            </div>
             <Channels
               activeChannelId={this.state.activeChannelId}
               chatChannels={this.state.chatChannels}

app/models/chat_channel.rb

@@ -15,7 +15,7 @@ class ChatChannel < ApplicationRecord
       :channel_name, :channel_users, :last_message_at, :status,
       :messages_count, :channel_human_names
     searchableAttributes [:channel_name, :channel_slug, :channel_human_names]
-    attributesForFaceting ["filterOnly(viewable_by)","filterOnly(status)"]
+    attributesForFaceting ["filterOnly(viewable_by)", "filterOnly(status)", "filterOnly(channel_type)"]
     ranking ["desc(last_message_at)"]
   end