Progress with DMs

Progress with DMs

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

@@ -0,0 +1,113 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ImmutablePropTypes from 'react-immutable-proptypes'
+import ImmutablePureComponent from 'react-immutable-pure-component'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import { openModal } from '../../actions/modal'
+import { MODAL_PRO_UPGRADE } from '../../constants'
+import { me } from '../../initial_state'
+import { makeGetChatConversation } from '../../selectors'
+import { changeSetting, saveSettings } from '../../actions/settings'
+import PopoverLayout from './popover_layout'
+import List from '../list'
+
+class ChatConversationOptionsPopover extends ImmutablePureComponent {
+
+  handleOnBlock = () => {
+    //
+  }
+
+  handleOnHide = () => {
+
+  }
+
+  handleOnMute = () => {
+
+  }
+
+  handleOnPurge = () => {
+    if (!this.props.isPro) {
+      this.props.openProUpgradeModal()
+    } else {
+      // 
+    }
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const {
+      intl,
+      isXS,
+    } = this.props
+
+    const items = [
+      {
+        hideArrow: true,
+        title: 'Block Messenger',
+        subtitle: 'The messenger will not be able to message you.',
+        onClick: () => this.handleOnBlock(),
+      },
+      {
+        hideArrow: true,
+        title: 'Mute Messenger',
+        subtitle: 'You will not be notified of new messsages',
+        onClick: () => this.handleOnMute(),
+      },
+      {
+        hideArrow: true,
+        title: 'Hide Conversation',
+        subtitle: 'Hide until next message',
+        onClick: () => this.handleOnHide(),
+      },
+      {},
+      {
+        hideArrow: true,
+        title: 'Purge messages',
+        subtitle: 'Remove all of your messages in this conversation',
+        onClick: () => this.handleOnPurge(),
+      },
+    ]
+
+    return (
+      <PopoverLayout
+        width={220}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <List
+          size={isXS ? 'large' : 'small'}
+          scrollKey='chat_conversation_options'
+          items={items}
+        />
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapStateToProps = (state, { chatConversationId }) => ({
+  isPro: state.getIn(['accounts', me, 'is_pro']),
+  chatConversation: makeGetChatConversation()(state, { id: chatConversationId }),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  openProUpgradeModal() {
+    dispatch(openModal(MODAL_PRO_UPGRADE))
+  },
+  onSetCommentSortingSetting(type) {
+    dispatch(closePopover())
+  },
+  onClosePopover: () => dispatch(closePopover()),
+})
+
+ChatConversationOptionsPopover.propTypes = {
+  isXS: PropTypes.bool,
+  isPro: PropTypes.bool.isRequired,
+  chatConversation: ImmutablePropTypes.map,
+  onClosePopover: PropTypes.func.isRequired,
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(ChatConversationOptionsPopover)

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

@@ -0,0 +1,54 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
+import { closePopover } from '../../actions/popover'
+import { deleteChatMessage } from '../../actions/chat_messages'
+import PopoverLayout from './popover_layout'
+import Button from '../button'
+import Text from '../text'
+
+class ChatMessageDeletePopover extends React.PureComponent {
+
+  handleOnClick = () => {
+    this.props.onDeleteChatMessage(this.props.chatMessageId)
+  }
+
+  handleOnClosePopover = () => {
+    this.props.onClosePopover()
+  }
+
+  render() {
+    const { isXS } = this.props
+
+    return (
+      <PopoverLayout
+        width={96}
+        isXS={isXS}
+        onClose={this.handleOnClosePopover}
+      >
+        <Button
+          onClick={this.handleOnClick}
+          color='primary'
+          backgroundColor='tertiary'
+          className={[_s.radiusSmall].join(' ')}
+        >
+          <Text align='center' color='inherit'>Remove</Text>
+        </Button>
+      </PopoverLayout>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  onDeleteChatMessage(chatMessageId) {
+    dispatch(deleteChatMessage(chatMessageId))
+  },
+})
+
+ChatMessageDeletePopover.propTypes = {
+  isXS: PropTypes.bool,
+  chatMessageId: PropTypes.string.isRequired,
+  onDeleteChatMessage: PropTypes.func.isRequired,
+}
+
+export default connect(null, mapDispatchToProps)(ChatMessageDeletePopover)

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

@@ -1,5 +1,7 @@
 import {
   BREAKPOINT_EXTRA_SMALL,
+  POPOVER_CHAT_CONVERSATION_OPTIONS,
+  POPOVER_CHAT_MESSAGE_DELETE,
   POPOVER_COMMENT_SORTING_OPTIONS,
   POPOVER_DATE_PICKER,
   POPOVER_EMOJI_PICKER,
@@ -20,6 +22,8 @@ import {
   POPOVER_VIDEO_STATS,
 } from '../../constants'
 import {
+  ChatConversationOptionsPopover,
+  ChatMessageDeletePopover,
   CommentSortingOptionsPopover,
   DatePickerPopover,
   EmojiPickerPopover,
@@ -53,25 +57,28 @@ import LoadingPopover from './loading_popover'
 
 const initialState = getWindowDimension()
 
-const POPOVER_COMPONENTS = {}
-POPOVER_COMPONENTS[POPOVER_COMMENT_SORTING_OPTIONS] = CommentSortingOptionsPopover
-POPOVER_COMPONENTS[POPOVER_DATE_PICKER] = DatePickerPopover
-POPOVER_COMPONENTS[POPOVER_EMOJI_PICKER] = EmojiPickerPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_LIST_SORT_OPTIONS] = GroupListSortOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_MEMBER_OPTIONS] = GroupMemberOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_OPTIONS] = GroupOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_OPTIONS] = GroupTimelineSortOptionsPopover
-POPOVER_COMPONENTS[POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS] = GroupTimelineSortTopOptionsPopover
-POPOVER_COMPONENTS[POPOVER_NAV_SETTINGS] = NavSettingsPopover
-POPOVER_COMPONENTS[POPOVER_PROFILE_OPTIONS] = ProfileOptionsPopover
-POPOVER_COMPONENTS[POPOVER_SIDEBAR_MORE] = SidebarMorePopover
-POPOVER_COMPONENTS[POPOVER_STATUS_OPTIONS] = StatusOptionsPopover
-POPOVER_COMPONENTS[POPOVER_STATUS_EXPIRATION_OPTIONS] = StatusExpirationOptionsPopover
-POPOVER_COMPONENTS[POPOVER_STATUS_SHARE] = StatusSharePopover
-POPOVER_COMPONENTS[POPOVER_STATUS_VISIBILITY] = StatusVisibilityPopover
-POPOVER_COMPONENTS[POPOVER_TIMELINE_INJECTION_OPTIONS] = TimelineInjectionOptionsPopover
-POPOVER_COMPONENTS[POPOVER_USER_INFO] = UserInfoPopover
-POPOVER_COMPONENTS[POPOVER_VIDEO_STATS] = VideoStatsPopover
+const POPOVER_COMPONENTS = {
+  [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
+  [POPOVER_CHAT_MESSAGE_DELETE]: ChatMessageDeletePopover,
+  [POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
+  [POPOVER_DATE_PICKER]: DatePickerPopover,
+  [POPOVER_EMOJI_PICKER]: EmojiPickerPopover,
+  [POPOVER_GROUP_LIST_SORT_OPTIONS]: GroupListSortOptionsPopover,
+  [POPOVER_GROUP_MEMBER_OPTIONS]: GroupMemberOptionsPopover,
+  [POPOVER_GROUP_OPTIONS]: GroupOptionsPopover,
+  [POPOVER_GROUP_TIMELINE_SORT_OPTIONS]: GroupTimelineSortOptionsPopover,
+  [POPOVER_GROUP_TIMELINE_SORT_TOP_OPTIONS]: GroupTimelineSortTopOptionsPopover,
+  [POPOVER_NAV_SETTINGS]: NavSettingsPopover,
+  [POPOVER_PROFILE_OPTIONS]: ProfileOptionsPopover,
+  [POPOVER_SIDEBAR_MORE]: SidebarMorePopover,
+  [POPOVER_STATUS_OPTIONS]: StatusOptionsPopover,
+  [POPOVER_STATUS_EXPIRATION_OPTIONS]: StatusExpirationOptionsPopover,
+  [POPOVER_STATUS_SHARE]: StatusSharePopover,
+  [POPOVER_STATUS_VISIBILITY]: StatusVisibilityPopover,
+  [POPOVER_TIMELINE_INJECTION_OPTIONS]: TimelineInjectionOptionsPopover,
+  [POPOVER_USER_INFO]: UserInfoPopover,
+  [POPOVER_VIDEO_STATS]: VideoStatsPopover,
+}
 
 class PopoverRoot extends React.PureComponent {