Progress on DMs

Progress on DMs

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

@@ -7,6 +7,7 @@ import { makeGetChatConversation } from '../../../selectors'
 import { setChatConversationSelected } from '../../../actions/chats'
 import { CX } from '../../../constants'
 import Input from '../../../components/input'
+import Icon from '../../../components/icon'
 import DisplayNameGroup from '../../../components/display_name_group'
 import DisplayName from '../../../components/display_name'
 import AvatarGroup from '../../../components/avatar_group'
@@ -35,8 +36,6 @@ class ChatConversationsListItem extends ImmutablePureComponent {
 
     if (!chatConversation) return <div/>
 
-    console.log("chatConversation:", chatConversation)
-
     const containerClasses = CX({
       d: 1,
       w100PC: 1,
@@ -66,6 +65,8 @@ class ChatConversationsListItem extends ImmutablePureComponent {
     lastMessageText = lastMessageText.length >= 28 ? `${lastMessageText.substring(0, 28).trim()}...` : lastMessageText
     const content = { __html: lastMessageText }
     const date = !!lastMessage ? lastMessage.get('created_at') : chatConversation.get('created_at')
+    const isUnread = chatConversation.get('is_unread')
+    const isMuted = chatConversation.get('is_muted')
 
     return (
       <button
@@ -73,7 +74,13 @@ class ChatConversationsListItem extends ImmutablePureComponent {
         onClick={this.handleOnClick}
       >
         
-        { chatConversation.get('is_unread') && <div className={[_s.d, _s.posAbs, _s.left0, _s.top50PC, _s.ml10, _s.mtNeg5PX, _s.circle, _s.w10PX, _s.h10PX, _s.bgBrand].join(' ')} /> }
+        { isUnread && !isMuted && <div className={[_s.d, _s.posAbs, _s.left0, _s.top50PC, _s.ml10, _s.mtNeg5PX, _s.circle, _s.w10PX, _s.h10PX, _s.bgBrand].join(' ')} /> }
+        {
+          isMuted &&
+          <div className={[_s.d, _s.posAbs, _s.left0, _s.top50PC, _s.ml10, _s.mtNeg5PX, _s.circle, _s.w10PX, _s.h10PX, _s.bgTransparent].join(' ')}>
+            <Icon id='audio-mute' className={_s.cError} size='12px' /> 
+          </div>
+        }
         
         <div className={innerContainerClasses}>
           <AvatarGroup accounts={otherAccounts} size={avatarSize} noHover />

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

@@ -88,7 +88,11 @@ class ChatMessagesComposeForm extends React.PureComponent {
   }
 
   render () {
-    const { isXS, chatConversationId } = this.props
+    const {
+      isXS,
+      expiresAtValue,
+      chatConversationId,
+    } = this.props
     const { value } = this.state
     const disabled = false
 
@@ -108,6 +112,22 @@ class ChatMessagesComposeForm extends React.PureComponent {
       py10: 1,
     })
 
+    const expireBtnClasses = CX({
+      d: 1,
+      borderRight1PX: 1,
+      borderColorSecondary: 1,
+      w40PX: 1,
+      h100PC: 1,
+      aiCenter: 1,
+      jcCenter: 1,
+      cursorPointer: 1,
+      outlineNone: 1,
+      bgSubtle: !expiresAtValue,
+      bgBlack: !!expiresAtValue,
+    })
+
+    const expireBtnIconClassName = !!expiresAtValue ?  _s.cWhite : _s.cBlack
+
     const textarea = (
       <Textarea
         id='chat-message-compose-input'
@@ -137,13 +157,15 @@ class ChatMessagesComposeForm extends React.PureComponent {
     )
 
     const expiresBtn = (
-      <button
-        ref={this.setExpiresBtn}
-        className={[_s.d, _s.bgSubtle, _s.borderRight1PX, _s.borderColorSecondary, _s.w40PX, _s.h100PC, _s.aiCenter, _s.jcCenter, _s.cursorPointer, _s.outlineNone].join(' ')}
+      <Button
+        noClasses
+        buttonRef={this.setExpiresBtn}
+        className={expireBtnClasses}
         onClick={this.handleOnExpire}
-      >
-        <Icon id='stopwatch' className={[_s.cPrimary, _s.ml2].join(' ')} size='15px' />
-      </button>
+        icon='stopwatch'
+        iconSize='15px'
+        iconClassName={expireBtnIconClassName}
+      />
     )
 
     if (isXS) {
@@ -191,8 +213,9 @@ class ChatMessagesComposeForm extends React.PureComponent {
 
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, { chatConversationId }) => ({
   isPro: state.getIn(['accounts', me, 'is_pro']),
+  expiresAtValue: state.getIn(['chat_conversations', chatConversationId, 'chat_message_expiration_policy']),
 })
 
 const mapDispatchToProps = (dispatch, { chatConversationId }) => ({

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

@@ -12,9 +12,11 @@ import {
  } from '../../../constants'
 import { me } from '../../../initial_state'
 import Input from '../../../components/input'
+import Icon from '../../../components/icon'
 import Avatar from '../../../components/avatar'
 import Button from '../../../components/button'
 import Text from '../../../components/text'
+import DotTextSeperator from '../../../components/dot_text_seperator'
 import { makeGetChatMessage } from '../../../selectors'
 
 class ChatMessageItem extends ImmutablePureComponent {
@@ -30,9 +32,9 @@ class ChatMessageItem extends ImmutablePureComponent {
   }
 
   componentDidMount() {
-    const { lastChatMessageSameSender, lastChatMessageDate } = this.props
-    if (lastChatMessageDate) {
-      const createdAt = this.props.chatMessage.get('created_at')
+    const { lastChatMessageSameSender, lastChatMessageDate, chatMessage } = this.props
+    if (lastChatMessageDate && chatMessage) {
+      const createdAt = chatMessage.get('created_at')
       const isNewDay = moment(createdAt).format('L') !== moment(lastChatMessageDate).format('L')
       const isCloseToMyLast = moment(lastChatMessageDate).diff(createdAt, 'minutes') < 60 && lastChatMessageSameSender && !isNewDay
       this.setState({
@@ -125,6 +127,12 @@ class ChatMessageItem extends ImmutablePureComponent {
       displayNone: !isHovering,
     })
 
+    const expirationDate = chatMessage.get('expires_at')
+    let timeUntilExpiration
+    if (!!expirationDate) {
+      timeUntilExpiration = moment(expirationDate).fromNow()
+    }
+
     return (
       <div
         className={[_s.d, _s.w100PC, _s.pb10].join(' ')}
@@ -161,6 +169,15 @@ class ChatMessageItem extends ImmutablePureComponent {
           <div className={lowerContainerClasses}>
             <Text size='extraSmall' color='tertiary' align={alt ? 'right' : 'left'}>
               {moment(createdAt).format('lll')}
+
+              {
+                !!expirationDate &&
+                <React.Fragment>
+                  <DotTextSeperator />
+                  <Text size='extraSmall' color='tertiary' className={_s.ml5}>Expires in {timeUntilExpiration}</Text>
+                  <Icon id='stopwatch' size='11px' className={[_s.d, _s.ml5, _s.displayInline, _s.cSecondary].join(' ')} />
+                </React.Fragment>
+              }
             </Text>
           </div>
         </div>

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

@@ -47,15 +47,11 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
     this.detachIntersectionObserver()
   }
 
-  componentWillReceiveProps (nextProps) {
-    const { chatConversationId } = nextProps
-
-    if (chatConversationId !== this.props.chatConversationId) {
-      this.props.onExpandChatMessages(chatConversationId)
-    }
-  }
-
   componentDidUpdate(prevProps, prevState, snapshot) {
+    if (prevProps.chatConversationId !== this.props.chatConversationId) {
+      this.props.onExpandChatMessages(this.props.chatConversationId)
+    }
+    
     // Reset the scroll position when a new child comes in in order not to
     // jerk the scrollbar around if you're already scrolled down the page.
     if (snapshot !== null && this.scrollContainerRef) {
@@ -69,6 +65,8 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
     if (prevProps.chatMessageIds.size === 0 && this.props.chatMessageIds.size > 0 && this.scrollContainerRef) {
       this.scrollContainerRef.scrollTop = this.scrollContainerRef.scrollHeight
       this.props.onReadChatConversation(this.props.chatConversationId)
+    } else if (prevProps.chatMessageIds.size < this.props.chatMessageIds.size && this.scrollContainerRef) {
+      this.scrollContainerRef.scrollTop = this.scrollContainerRef.scrollHeight
     }
   }
 
@@ -265,7 +263,6 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
               lastChatMessageId={lastChatMessageId}
               onMoveUp={this.handleMoveUp}
               onMoveDown={this.handleMoveDown}
-              commentsLimited
             />
           )
         }

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

@@ -27,9 +27,13 @@ class ChatSettingsSidebar extends React.PureComponent {
               to: '/messages/requests',
             },
             {
-              title: 'Blocked Chats',
+              title: 'Blocked Chat Messengers',
               to: '/messages/blocks',
             },
+            {
+              title: 'Muted Conversations',
+              to: '/messages/muted_conversations',
+            },
           ]}
         />
       </ResponsiveClassesComponent>