Progress with DMs

Progress with DMs

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

@@ -17,7 +17,6 @@ import ScrollableList from '../../../components/scrollable_list'
 class ChatConversationsList extends ImmutablePureComponent {
 
   componentDidMount() {
-    console.log("componentDidMount:", this.props.source)
     this.props.onFetchChatConversations(this.props.source)
   }
 
@@ -33,8 +32,6 @@ class ChatConversationsList extends ImmutablePureComponent {
       chatConversationIds,
     } = this.props
 
-    console.log("---source:", source, chatConversationIds)
-
     return (
       <div className={[_s.d, _s.w100PC, _s.overflowHidden, _s.boxShadowNone].join(' ')}>
         <ScrollableList

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

@@ -61,7 +61,9 @@ class ChatConversationsListItem extends ImmutablePureComponent {
     const avatarSize = 46
     const otherAccounts = chatConversation.get('other_accounts')
     const lastMessage = chatConversation.get('last_chat_message', null)
-    const content = { __html: !!lastMessage ? lastMessage.get('text', '') : '' }
+    let lastMessageText = !!lastMessage ? lastMessage.get('text', '') : ''
+    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')
 
     return (

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

@@ -9,6 +9,7 @@ import { sendChatMessage } from '../../../actions/chat_messages'
 import { CX } from '../../../constants'
 import Button from '../../../components/button'
 import Input from '../../../components/input'
+import Text from '../../../components/text'
 
 class ChatMessagesComposeForm extends React.PureComponent {
 
@@ -90,13 +91,13 @@ class ChatMessagesComposeForm extends React.PureComponent {
       maxH200PX: 1,
       borderColorSecondary: 1,
       border1PX: 1,
-      radiusSmall: 1,
+      radiusRounded: 1,
       py10: 1,
     })
 
     return (
-      <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.bgPrimary, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15, _s.py5].join(' ')}>
-        <div className={[_s.d, _s.pr15, _s.flexGrow1].join(' ')}>
+      <div className={[_s.d, _s.posAbs, _s.bottom0, _s.left0, _s.right0, _s.flexRow, _s.aiCenter, _s.minH58PX, _s.bgPrimary, _s.w100PC, _s.borderTop1PX, _s.borderColorSecondary, _s.px15].join(' ')}>
+        <div className={[_s.d, _s.pr15, _s.flexGrow1, _s.py10].join(' ')}>
           <Textarea
             id='chat-message-compose-input'
             inputRef={this.setTextbox}
@@ -112,12 +113,12 @@ class ChatMessagesComposeForm extends React.PureComponent {
             aria-autocomplete='list'
           />
         </div>
-        <div className={[_s.d, _s.h100PC, _s.mtAuto, _s.pb5].join(' ')}>
+        <div className={[_s.d, _s.h100PC, _s.aiCenter, _s.jcCenter].join(' ')}>
           <Button
             disabled={disabled}
             onClick={this.handleOnSendChatMessage}
           >
-            Send
+            <Text color='inherit' className={_s.px10}>Send</Text>
           </Button>
         </div>
       </div>

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

@@ -4,9 +4,11 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { connect } from 'react-redux'
 import { makeGetChatConversation } from '../../../selectors'
-import { openModal } from '../../../actions/modal'
+import { openPopover } from '../../../actions/popover'
 import { approveChatConversationRequest } from '../../../actions/chat_conversations'
-import { MODAL_CHAT_CONVERSATION_CREATE } from '../../../constants'
+import {
+  POPOVER_CHAT_CONVERSATION_OPTIONS
+} from '../../../constants'
 import Button from '../../../components/button'
 import AvatarGroup from '../../../components/avatar_group'
 import DisplayName from '../../../components/display_name'
@@ -18,6 +20,14 @@ class ChatMessageHeader extends React.PureComponent {
     this.props.onApproveChatConversationRequest(this.props.chatConversationId)
   }
 
+  handleOnOpenChatConversationOptionsPopover = () => {
+    this.props.onOpenChatConversationOptionsPopover(this.props.chatConversationId, this.optionsBtnRef)
+  }
+
+  setOptionsBtnRef = (c) => {
+    this.optionsBtnRef = c
+  }
+
   render () {
     const { chatConversation } = this.props
     
@@ -37,8 +47,9 @@ class ChatMessageHeader extends React.PureComponent {
           </React.Fragment>
         }
         <Button
+          buttonRef={this.setOptionsBtnRef}
           isNarrow
-          onClick={undefined}
+          onClick={this.handleOnOpenChatConversationOptionsPopover}
           color='primary'
           backgroundColor='secondary'
           className={[_s.mlAuto, _s.px5].join(' ')}
@@ -68,17 +79,22 @@ const mapStateToProps = (state, { chatConversationId }) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-  onOpenChatConversationCreateModal() {
-    dispatch(openModal(MODAL_CHAT_CONVERSATION_CREATE))
-  },
   onApproveChatConversationRequest(chatConversationId) {
     dispatch(approveChatConversationRequest(chatConversationId))
-  }
+  },
+  onOpenChatConversationOptionsPopover(chatConversationId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_OPTIONS, {
+      chatConversationId,
+      targetRef,
+      position: 'bottom',
+    }))
+  },
 })
 
 ChatMessageHeader.propTypes = {
-  onOpenChatConversationCreateModal: PropTypes.func.isRequired,
   chatConversationId: PropTypes.string,
+  onApproveChatConversationRequest: PropTypes.func.isRequired,
+  onOpenChatConversationOptionsPopover: PropTypes.func.isRequired,
 }
 
 export default connect(mapStateToProps, mapDispatchToProps)(ChatMessageHeader)

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

@@ -5,7 +5,11 @@ import moment from 'moment-mini'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import { NavLink } from 'react-router-dom'
-import { CX } from '../../../constants'
+import { openPopover } from '../../../actions/popover'
+import {
+  CX,
+  POPOVER_CHAT_MESSAGE_DELETE,
+ } from '../../../constants'
 import { me } from '../../../initial_state'
 import Input from '../../../components/input'
 import Avatar from '../../../components/avatar'
@@ -47,7 +51,11 @@ class ChatMessageItem extends ImmutablePureComponent {
   }
 
   handleMoreClick = () => {
-    //
+    this.props.onOpenChatMessageDeletePopover(this.props.chatMessageId, this.deleteBtnRef)
+  }
+
+  setDeleteBtnRef = (c) => {
+    this.deleteBtnRef = c
   }
 
   render() {
@@ -65,6 +73,8 @@ class ChatMessageItem extends ImmutablePureComponent {
     if (!chatMessage) return <div />
 
     const account = chatMessage.get('account')
+    if (!account) return <div />
+
     const content = { __html: chatMessage.get('text') }
     const alt = account.get('id', null) === me
     const createdAt = chatMessage.get('created_at')
@@ -89,9 +99,10 @@ class ChatMessageItem extends ImmutablePureComponent {
       d: 1,
       px15: 1,
       py5: 1,
-      bgTertiary: !alt,
-      bgSecondary: alt,
-      circle: 1,
+      maxW80PC: 1,
+      bgTertiary: alt,
+      bgSecondary: !alt,
+      radiusRounded: 1,
       ml10: 1,
       mr10: 1,
     })
@@ -138,6 +149,7 @@ class ChatMessageItem extends ImmutablePureComponent {
               alt &&
               <div className={buttonContainerClasses}>
                 <Button
+                  buttonRef={this.setDeleteBtnRef}
                   onClick={this.handleMoreClick}
                   color='tertiary'
                   backgroundColor='none'
@@ -165,15 +177,25 @@ const mapStateToProps = (state, { lastChatMessageId, chatMessageId }) => ({
   lastChatMessageSameSender: lastChatMessageId ? state.getIn(['chat_messages', `${lastChatMessageId}`, 'from_account_id'], null) === state.getIn(['chat_messages', `${chatMessageId}`, 'from_account_id'], null) : false,
 })
 
+const mapDispatchToProps = (dispatch) => ({
+  onOpenChatMessageDeletePopover(chatMessageId, targetRef) {
+    dispatch(openPopover(POPOVER_CHAT_MESSAGE_DELETE, {
+      targetRef,
+      chatMessageId,
+      position: 'top',
+    }))
+  },
+})
+
 ChatMessageItem.propTypes = {
   intl: PropTypes.object.isRequired,
   lastChatMessageId: PropTypes.string,
   lastChatMessageDate: PropTypes.string,
-  lastChatMessageSameSender: PropTypes.string,
+  lastChatMessageSameSender: PropTypes.bool,
   chatMessageId: PropTypes.string.isRequired,
   chatMessage: ImmutablePropTypes.map,
   isHidden: PropTypes.bool,
   alt: PropTypes.bool,
 }
 
-export default connect(mapStateToProps)(ChatMessageItem)
+export default connect(mapStateToProps, mapDispatchToProps)(ChatMessageItem)

app/javascript/gabsocial/features/ui/ui.js

@@ -208,7 +208,7 @@ class SwitchingArea extends React.PureComponent {
         <WrappedRoute path='/messages/requests' exact page={MessagesPage} component={ChatConversationRequests} content={children} componentParams={{ isSettings: true, source: 'requested' }} />
         <WrappedRoute path='/messages/blocks' exact page={MessagesPage} component={ChatConversationBlockedAccounts} content={children} componentParams={{ isSettings: true }} />
         <WrappedRoute path='/messages/mutes' exact page={MessagesPage} component={ChatConversationMutedAccounts} content={children} componentParams={{ isSettings: true }} />
-        <WrappedRoute path='/messages/:conversationId' exact page={MessagesPage} component={Messages} content={children} componentParams={{ source: 'approved' }} />
+        <WrappedRoute path='/messages/:chatConversationId' exact page={MessagesPage} component={Messages} content={children} componentParams={{ source: 'approved' }} />
 
         <WrappedRoute path='/timeline/all' exact page={CommunityPage} component={CommunityTimeline} content={children} componentParams={{ title: 'Community Feed' }} />
         <WrappedRoute path='/timeline/pro' exact page={ProPage} component={ProTimeline} content={children} componentParams={{ title: 'Pro Feed' }} />

app/javascript/gabsocial/features/ui/util/async_components.js

@@ -12,7 +12,9 @@ export function ChatConversationCreate() { return import(/* webpackChunkName: "f
 export function ChatConversationCreateModal() { return import(/* webpackChunkName: "components/chat_conversation_create_modal" */'../../../components/modal/chat_conversation_create_modal') }
 export function ChatConversationDeleteModal() { return import(/* webpackChunkName: "components/chat_conversation_delete_modal" */'../../../components/modal/chat_conversation_delete_modal') }
 export function ChatConversationMutedAccounts() { return import(/* webpackChunkName: "features/chat_conversation_muted_accounts" */'../../chat_conversation_muted_accounts') }
+export function ChatConversationOptionsPopover() { return import(/* webpackChunkName: "components/chat_conversation_options_popover" */'../../../components/popover/chat_conversation_options_popover') }
 export function ChatConversationRequests() { return import(/* webpackChunkName: "features/chat_conversation_requests" */'../../chat_conversation_requests') }
+export function ChatMessageDeletePopover() { return import(/* webpackChunkName: "components/chat_message_delete_popover" */'../../../components/popover/chat_message_delete_popover') }
 export function CommentSortingOptionsPopover() { return import(/* webpackChunkName: "components/comment_sorting_options_popover" */'../../../components/popover/comment_sorting_options_popover') }
 export function CommunityTimeline() { return import(/* webpackChunkName: "features/community_timeline" */'../../community_timeline') }
 export function CommunityTimelineSettingsModal() { return import(/* webpackChunkName: "components/community_timeline_settings_modal" */'../../../components/modal/community_timeline_settings_modal') }