Progress on DMs responsiveness

Progress on DMs responsiveness

app/javascript/gabsocial/components/avatar_group.js

@@ -18,6 +18,7 @@ class AvatarGroup extends ImmutablePureComponent {
     return (
       <div className={[_s.d].join(' ')}>
         {
+          !!accounts &&
           accounts.map((account) => {
             const isPro = account.get('is_pro')
             const alt = `${account.get('display_name')} ${isPro ? '(PRO)' : ''}`.trim()

app/javascript/gabsocial/components/back_button.js

@@ -19,6 +19,7 @@ class BackButton extends React.PureComponent {
 
   handleBackClick = () => {
     this.historyBack()
+    if (!!this.props.onClick) this.props.onClick()
   }
 
   render() {

app/javascript/gabsocial/components/navigation_bar/chat_navigation_bar_xs.js

@@ -0,0 +1,100 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { makeGetChatConversation } from '../../selectors'
+import { openPopover } from '../../actions/popover'
+import { setChatConversationSelected } from '../../actions/chats'
+import { POPOVER_CHAT_CONVERSATION_OPTIONS } from '../../constants'
+import Heading from '../heading'
+import Button from '../button'
+import BackButton from '../back_button'
+import Text from '../text'
+import AvatarGroup from '../avatar_group'
+
+class ChatNavigationBar extends React.PureComponent {
+
+  handleOnOpenChatConversationOptionsPopover = () => {
+    this.props.onOpenChatConversationOptionsPopover(this.props.chatConversationId, this.optionsBtnRef)
+  }
+
+  handleOnBack = () => {
+    this.props.onSetChatConversationSelectedEmpty()
+  }
+
+  setOptionsBtnRef = (c) => {
+    this.optionsBtnRef = c
+  }
+
+  render() {
+    const { chatConversation } = this.props
+
+    const otherAccounts = chatConversation ? chatConversation.get('other_accounts') : null
+    const nameHTML = !!otherAccounts ? otherAccounts.get(0).get('display_name_html') : ''
+
+    return (
+      <div className={[_s.d, _s.z4, _s.h53PX, _s.w100PC].join(' ')}>
+        <div className={[_s.d, _s.h53PX, _s.bgNavigation, _s.aiCenter, _s.z3, _s.top0, _s.right0, _s.left0, _s.posFixed].join(' ')} >
+
+          <div className={[_s.d, _s.flexRow, _s.saveAreaInsetPT, _s.saveAreaInsetPL, _s.saveAreaInsetPR, _s.w100PC].join(' ')}>
+
+            <BackButton
+              className={[_s.h53PX, _s.pl10, _s.pr10].join(' ')}
+              iconSize='18px'
+              onClick={this.handleOnBack}
+              iconClassName={[_s.mr5, _s.fillNavigation].join(' ')}
+            />
+
+            <div className={[_s.d, _s.h53PX, _s.flexRow, _s.jcCenter, _s.aiCenter, _s.mrAuto].join(' ')}>
+              <AvatarGroup accounts={otherAccounts} size={35} noHover />
+              <Heading size='h1'>
+                <div className={[_s.dangerousContent, _s.pl10, _s.fs19PX].join(' ')} dangerouslySetInnerHTML={{ __html: nameHTML }} />
+              </Heading>
+            </div>
+
+            <div className={[_s.d, _s.h53PX, _s.mlAuto, _s.aiCenter, _s.jcCenter, _s.mr15].join(' ')}>
+              <Button
+                isNarrow
+                backgroundColor='tertiary'
+                color='primary'
+                onClick={this.handleOnOpenChatConversationOptionsPopover}
+                className={[_s.px5].join(' ')}
+                icon='ellipsis'
+                iconClassName={[_s.cSecondary, _s.px5, _s.py5].join(' ')}
+                iconSize='15px'
+              />
+            </div>
+
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+
+}
+
+const mapStateToProps = (state, { chatConversationId }) => ({
+  chatConversation: makeGetChatConversation()(state, { id: chatConversationId }),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  onSetChatConversationSelectedEmpty() {
+    dispatch(setChatConversationSelected(null))
+  },
+  onOpenChatConversationOptionsPopover(chatConversationId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_OPTIONS, {
+      chatConversationId,
+      targetRef,
+      position: 'bottom',
+    }))
+  },
+})
+
+ChatNavigationBar.propTypes = {
+  chatConversation: ImmutablePropTypes.map,
+  chatConversationId: PropTypes.string.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatNavigationBar)

app/javascript/gabsocial/components/popover/chat_message_delete_popover.js

@@ -42,6 +42,10 @@ class ChatMessageDeletePopover extends React.PureComponent {
 const mapDispatchToProps = (dispatch) => ({
   onDeleteChatMessage(chatMessageId) {
     dispatch(deleteChatMessage(chatMessageId))
+    dispatch(closePopover())
+  },
+  onClosePopover() {
+    dispatch(closePopover())
   },
 })
 

app/javascript/gabsocial/components/scrollable_list.js

@@ -4,12 +4,11 @@ import throttle from 'lodash.throttle'
 import { List as ImmutableList } from 'immutable'
 import IntersectionObserverArticle from './intersection_observer_article'
 import IntersectionObserverWrapper from '../features/ui/util/intersection_observer_wrapper'
+import { MOUSE_IDLE_DELAY } from '../constants'
 import Block from './block'
 import ColumnIndicator from './column_indicator'
 import LoadMore from './load_more'
 
-const MOUSE_IDLE_DELAY = 300
-
 class ScrollableList extends React.PureComponent {
 
   static contextTypes = {
@@ -27,7 +26,7 @@ class ScrollableList extends React.PureComponent {
   lastScrollWasSynthetic = false;
   scrollToTopOnMouseIdle = false;
 
-  setScrollTop = newScrollTop => {
+  setScrollTop = (newScrollTop) => {
     if (this.documentElement.scrollTop !== newScrollTop) {
       this.lastScrollWasSynthetic = true;
       this.documentElement.scrollTop = newScrollTop;
@@ -104,8 +103,6 @@ class ScrollableList extends React.PureComponent {
 
       if (scrollTop < 100 && this.props.onScrollToTop) {
         this.props.onScrollToTop()
-      } else if (scrollTop < 100 && this.props.onScrollToBottom) {
-        this.props.onScrollToBottom()
       } else if (this.props.onScroll) {
         this.props.onScroll()
       }
@@ -194,7 +191,6 @@ class ScrollableList extends React.PureComponent {
       placeholderComponent: Placeholder,
       placeholderCount,
       onScrollToTop,
-      onScrollToBottom,
     } = this.props
     const childrenCount = React.Children.count(children);
 
@@ -221,16 +217,6 @@ class ScrollableList extends React.PureComponent {
       return (
         <div onMouseMove={this.handleMouseMove} ref={this.setRef}>
           <div role='feed'>
-            {
-              (hasMore && onLoadMore && !isLoading) && !!onScrollToBottom &&
-              <LoadMore onClick={this.handleLoadMore} />
-            }
-
-            {
-              isLoading && !!onScrollToBottom &&
-              <ColumnIndicator type='loading' />
-            }
-            
             {
               !!this.props.children &&
               React.Children.map(this.props.children, (child, index) => (
@@ -287,7 +273,6 @@ ScrollableList.propTypes = {
   ]),
   children: PropTypes.node,
   onScrollToTop: PropTypes.func,
-  onScrollToBottom: PropTypes.func,
   onScroll: PropTypes.func,
   placeholderComponent: PropTypes.node,
   placeholderCount: PropTypes.number,

app/javascript/gabsocial/components/timeline_injections/timeline_injection_root.js

@@ -51,7 +51,6 @@ class TimelineInjectionRoot extends React.PureComponent {
 
   handleResize = () => {
     const { width } = getWindowDimension()
-
     this.setState({ width })
   }