Add proper pagination and fix small issues with /connect (#503)

* Add proper pagination and fix small issues with /connect

app/javascript/chat/actions.js

@@ -72,11 +72,12 @@ export function conductModeration(
     .catch(failureCb);
 }
 
-export function getChannels(query,retrievalID, props, successCb, failureCb) {
+export function getChannels(query,retrievalID, props, paginationNumber, successCb, failureCb) {
   const client = algoliasearch(props.algoliaId, props.algoliaKey);
   const index = client.initIndex(props.algoliaIndex);
   index.search(query,{
-    hitsPerPage: 30,
+    hitsPerPage: 24,
+    page: paginationNumber
   })
   .then(function(content) {
     let channels = content.hits

app/javascript/chat/channels.jsx

@@ -112,7 +112,7 @@ const Channels = ({ activeChannelId,
   }
   return (
     <div className="chatchannels">
-      <div className="chatchannels__channelslist">
+      <div className="chatchannels__channelslist" id="chatchannels__channelslist">
         {topNotice}
         {channels}
         {channelsListFooter}

app/javascript/chat/chat.jsx

@@ -29,6 +29,8 @@ export default class Chat extends Component {
       chatChannels,
       filterQuery: '',
       channelsLoaded: false,
+      channelPaginationNum: 0,
+      fetchingPaginatedChannels: false,
       activeChannelId: chatOptions.activeChannelId,
       activeChannel: null,
       showChannelsList: chatOptions.showChannelsList,
@@ -65,13 +67,13 @@ export default class Chat extends Component {
       notificationsPermission: getNotificationState(),
     });
     if (this.state.showChannelsList) {
-      getChannels('', this.state.activeChannelId, this.props, this.loadChannels);
+      getChannels('', this.state.activeChannelId, this.props, this.state.channelPaginationNum, this.loadChannels);
     }
     if (!this.state.isMobileDevice) {
       document.getElementById("messageform").focus();
     }
+    document.getElementById('chatchannels__channelslist').addEventListener('scroll', this.handleChannelScroll);
   }
-
   componentDidUpdate() {
     if (!this.state.scrolled) {
       scrollToBottom();
@@ -134,6 +136,7 @@ export default class Chat extends Component {
         chatChannels: channels,
         scrolled: false,
         channelsLoaded: true,
+        channelPaginationNum: 0,
         activeChannel: this.filterForActiveChannel(channels, this.state.activeChannelId)
       });
     } if (this.state.activeChannelId) {
@@ -142,12 +145,14 @@ export default class Chat extends Component {
         scrolled: false,
         chatChannels: channels,
         channelsLoaded: true,
+        channelPaginationNum: 0,
         filterQuery: query
       });
     } else if (channels.length > 0) {
       this.setState({
         chatChannels: channels,
         channelsLoaded: true,
+        channelPaginationNum: 0,
         scrolled: false,
       });
       const channel = channels[0]
@@ -168,6 +173,23 @@ export default class Chat extends Component {
     });
   }
 
+  loadPaginatedChannels = (channels) => {
+    const currentChannelIds = this.state.chatChannels.map((channel, index) => {
+      return channel.id
+    })
+    let newChannels = this.state.chatChannels
+    channels.forEach((channel, index) => {
+      if (!currentChannelIds.includes(channel.id)) {
+        newChannels.push(channel)
+      }
+    });
+    this.setState({
+      chatChannels: newChannels,
+      fetchingPaginatedChannels: false,
+      channelPaginationNum: this.state.channelPaginationNum + 1
+    })
+  }
+
   setupChannel = channelId => {
     if (!this.state.messages[channelId] || this.state.messages[channelId].length === 0 ||
       this.state.messages[channelId][0].reception_method === 'pushed'){
@@ -268,6 +290,23 @@ export default class Chat extends Component {
     this.setState({ messages: newMessages });
   };
 
+  handleChannelScroll = e => {
+    if (this.state.fetchingPaginatedChannels || this.state.chatChannels.length < 24) {
+      return
+    }
+    this.setState({fetchingPaginatedChannels: true})
+    const target = e.target;
+    if((target.scrollTop + target.offsetHeight + 500) > target.scrollHeight)
+    {
+      getChannels(
+        this.state.filterQuery,
+        this.state.activeChannelId,
+        this.props,
+        this.state.channelPaginationNum,
+        this.loadPaginatedChannels);
+    }
+  }
+
   handleKeyDown = e => {
     const enterPressed = e.keyCode === 13;
     const targetValue = e.target.value;
@@ -464,7 +503,7 @@ export default class Chat extends Component {
   };
 
   triggerChannelFilter = e => {
-      getChannels(e.target.value, null, this.props, this.loadChannels);
+      getChannels(e.target.value, null, this.props, 0, this.loadChannels);
   }
 
   toggleExpand = () => {

app/javascript/src/utils/getUnopenedChannels.jsx

@@ -27,7 +27,6 @@ class UnopenedChannelNotice extends Component {
   }
 
   receiveNewMessage = e => {
-    console.log(location.pathname)
     if (location.pathname.startsWith("/connect")) {
       return
     }
@@ -37,12 +36,20 @@ class UnopenedChannelNotice extends Component {
       newObj.adjusted_slug != `@${window.currentUser.username}`) {
       channels.push(newObj);
     }
-    this.setState({visible: channels.length > 0, unopenedChannels: channels})
+    this.setState({
+      visible: (channels.length > 0 && e.user_id != window.currentUser.id),
+      unopenedChannels: channels
+    })
 
     const number = document.getElementById("connect-number")
     number.classList.add("showing")
     number.innerHTML = channels.length
     const component = this;
+    if (channels.length === 0) {
+      number.classList.remove("showing")
+    } else {
+      document.getElementById("connect-link").href = `/connect/${channels[0].adjusted_slug}`
+    }
     setTimeout(function(){
       component.setState({visible: false});
     }, 7500)
@@ -102,10 +109,12 @@ export default function getUnopenedChannels(user, successCb) {
   })
     .then(response => response.json())
     .then(json => {
+      const number = document.getElementById("connect-number")
       if (json.length > 0) {
-        const number = document.getElementById("connect-number")
         number.classList.add("showing")
         number.innerHTML = json.length
+      } else {
+        number.classList.remove("showing")
       }
     })
     .catch(error => {

app/models/message.rb

@@ -45,6 +45,7 @@ class Message < ApplicationRecord
   def update_chat_channel_last_message_at
     chat_channel.touch(:last_message_at)
     chat_channel.index!
+    chat_channel.delay.index!
   end
 
   def update_all_has_unopened_messages_statuses