Progress on chat conversation search, scrolling

app/javascript/gabsocial/features/messages/components/chat_conversations_list.js

@@ -62,11 +62,25 @@ class ChatConversationsList extends ImmutablePureComponent {
 
 }
 
-const mapStateToProps = (state, { source }) => ({
-  chatConversationIds: state.getIn(['chat_conversation_lists', source, 'items']),
-  hasMore: !!state.getIn(['chat_conversation_lists', source, 'next']),
-  isLoading: state.getIn(['chat_conversation_lists', source, 'isLoading']),
-})
+const mapStateToProps = (state, { source }) => {
+  let chatConversationIds
+  if (source === 'approved') {
+    const chatSearchValue = state.getIn(['chats', 'searchValue'], '')
+    if (!!chatSearchValue && chatSearchValue.length > 0) {
+      chatConversationIds = state.getIn(['chat_conversation_lists', 'approved_search', 'items'])
+    } else {
+      chatConversationIds = state.getIn(['chat_conversation_lists', source, 'items'])
+    }
+  } else {
+    chatConversationIds = state.getIn(['chat_conversation_lists', source, 'items'])
+  }
+
+  return {
+    chatConversationIds,
+    hasMore: !!state.getIn(['chat_conversation_lists', source, 'next']),
+    isLoading: state.getIn(['chat_conversation_lists', source, 'isLoading']),
+  }
+}
 
 const mapDispatchToProps = (dispatch) => ({
   onFetchChatConversations(source) {

app/javascript/gabsocial/features/messages/components/chat_conversations_search.js

@@ -1,21 +1,18 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
+import { searchApprovedChatConversations } from '../../../actions/chat_conversations'
+import { onChangeSearch } from '../../../actions/chats'
 import Input from '../../../components/input'
 
 class ChatConversationsSearch extends React.PureComponent {
 
-  state = {
-    value: '',
-  }
-
   handleOnChange = (value) => {
-    this.setState({ value })
     this.props.onChange(value)
   }
 
   render() {
-    const { value } = this.state
+    const { value } = this.props
 
     return (
       <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
@@ -33,10 +30,20 @@ class ChatConversationsSearch extends React.PureComponent {
 
 }
 
+const mapStateToProps = (state) => ({
+  value: state.getIn(['chats', 'searchValue'], ''),
+})
+
 const mapDispatchToProps = (dispatch) => ({
   onChange(value) {
-    // dispatch()
+    dispatch(onChangeSearch(value))
+    dispatch(searchApprovedChatConversations(value))
   }
 })
 
-export default connect(null, mapDispatchToProps)(ChatConversationsSearch)
+ChatConversationsSearch.propTypes = {
+  value: PropTypes.string,
+  onChange: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationsSearch)

app/javascript/gabsocial/features/messages/components/chat_message_compose_form.js

@@ -45,10 +45,12 @@ class ChatMessagesComposeForm extends React.PureComponent {
   }
 
   onBlur = () => {
+    console.log("onBlur")
     this.setState({ focused: false })
   }
 
   onFocus = () => {
+    console.log("onFocus")
     this.setState({ focused: true })
   }
 

app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js

@@ -67,8 +67,8 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
     if (prevProps.chatMessageIds.size === 0 && this.props.chatMessageIds.size > 0 && this.scrollContainerRef) {
       this.scrollToBottom()
       this.props.onReadChatConversation(this.props.chatConversationId)
-    } else if (prevProps.chatMessageIds.size < this.props.chatMessageIds.size && this.scrollContainerRef) {
-      // this.setScrollTop(this.scrollContainerRef.scrollHeight)
+    } else if (this.props.chatMessageIds.size - prevProps.chatMessageIds.size === 1) {
+      this.scrollToBottom()
     }
   }
 
@@ -121,7 +121,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
 
   scrollToBottom = () => {
     if (this.messagesEnd) {
-      this.messagesEnd.scrollIntoView({ behavior: 'smooth' });
+      this.messagesEnd.scrollIntoView()
     }
   }
   
@@ -225,6 +225,11 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
     this.containerNode = c
   }
 
+  setMessagesEnd = (c) => {
+    this.messagesEnd = c
+    this.scrollToBottom()
+  }
+
   setScrollContainerRef = (c) => {
     this.scrollContainerRef = c
 
@@ -242,7 +247,6 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
       isPartial,
       hasMore,
       amITalkingToMyself,
-      onScrollToBottom,
       onScroll,
       isXS,
     } = this.props
@@ -338,11 +342,13 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
                   </IntersectionObserverArticle>
                 ))
               }
-              <div
-                style={{ float: 'left', clear: 'both' }}
-                ref={(el) => { this.messagesEnd = el }}
-              />
             </div>
+
+            <div
+              key='end-message'
+              style={{ float: 'left', clear: 'both' }}
+              ref={this.setMessagesEnd}
+            />
           </div>
         </div>
       )