Progress with DMs

2020-12-03 17:13:11 -05:00
parent a129b3ce3b
commit 137a36b810
53 changed files with 539 additions and 182 deletions
--- a/app/javascript/gabsocial/components/list_item.js
+++ b/app/javascript/gabsocial/components/list_item.js
@@ -81,6 +81,7 @@ class ListItem extends React.PureComponent {
    const textContainerClasses = CX({
      d: 1,
      pr5: 1,
+      w100PC: hideArrow,
      maxW100PC42PX: !hideArrow || showActive,
    })

--- a/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
+++ b/app/javascript/gabsocial/components/navigation_bar/default_navigation_bar.js
@@ -67,6 +67,8 @@ class DefaultNavigationBar extends ImmutablePureComponent {
      account,
      noActions,
      logoDisabled,
+      unreadChatsCount,
+      notificationCount,
    } = this.props

    const navigationContainerClasses = CX({
@@ -171,7 +173,8 @@ class DefaultNavigationBar extends ImmutablePureComponent {

                    <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />

-                    <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' />
+                    <NavigationBarButton attrTitle='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
+                    <NavigationBarButton attrTitle='Chats' icon='chat' to='/messages' count={unreadChatsCount} />
                    <NavigationBarButton attrTitle='Dark/Muted/Light/White Mode' icon='light-bulb' onClick={this.handleOnClickLightBulb} />

                    <div className={[_s.d, _s.h20PX, _s.w1PX, _s.mr10, _s.ml10, _s.bgNavigationBlend].join(' ')} />
@@ -236,6 +239,7 @@ class DefaultNavigationBar extends ImmutablePureComponent {
                        attrTitle={action.attrTitle}
                        title={action.title}
                        icon={action.icon}
+                        count={action.count}
                        to={action.to || undefined}
                        onClick={action.onClick ? () => action.onClick() : undefined}
                        key={`action-btn-${i}`}
@@ -261,6 +265,8 @@ const mapStateToProps = (state) => ({
  emailConfirmationResends: state.getIn(['user', 'emailConfirmationResends'], 0),
  theme: state.getIn(['settings', 'displayOptions', 'theme'], DEFAULT_THEME),
  logoDisabled: state.getIn(['settings', 'displayOptions', 'logoDisabled'], false),
+  notificationCount: state.getIn(['notifications', 'unread']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
 })

 const mapDispatchToProps = (dispatch) => ({
@@ -288,6 +294,8 @@ DefaultNavigationBar.propTypes = {
  tabs: PropTypes.array,
  title: PropTypes.string,
  showBackBtn: PropTypes.bool,
+  notificationCount: PropTypes.number.isRequired,
+  unreadChatsCount: PropTypes.number.isRequired,
  onOpenNavSettingsPopover: PropTypes.func.isRequired,
  onOpenEmailModal: PropTypes.func.isRequired,
  onResendUserConfirmationEmail: PropTypes.func.isRequired,
--- a/app/javascript/gabsocial/components/navigation_bar_button.js
+++ b/app/javascript/gabsocial/components/navigation_bar_button.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { shortNumberFormat } from '../utils/numbers'
 import { CX } from '../constants'
 import Button from './button'
 import Icon from './icon'
@@ -53,17 +54,22 @@ class NavigationBarButton extends React.PureComponent {

    const countClasses = CX({
      d: 1,
+      text: 1,
+      textAlignCenter: 1,
+      minW20PX: 1,
+      mlAuto: 1,
      fs12PX: 1,
-      posAbs: 1,
+      px5: 1,
+      mr2: 1,
+      lineHeight15: 1,
+      ml5: 1,
+      cWhite: 1,
+      rightNeg5PX: 1,
      top0: 1,
-      mt15: 1,
-      right0: 1,
-      mr5: 1,
-      h4PX: 1,
-      w4PX: 1,
-      cBrand: 1,
-      bgNavigationBlend: 1,
-      radiusSmall: 1,
+      mt5: 1,
+      bgRed: 1,
+      posAbs: 1,
+      circle: 1,
    })

    const iconContainerClasses = CX({
@@ -112,7 +118,9 @@ class NavigationBarButton extends React.PureComponent {
        }
        {
          !title && count > 0 &&
-          <span className={countClasses} />
+          <span className={countClasses}>
+            {shortNumberFormat(count)}
+          </span>
        }
      </Button>
    )
--- a/app/javascript/gabsocial/components/popover/chat_conversation_options_popover.js
+++ b/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)
--- a/app/javascript/gabsocial/components/popover/chat_message_delete_popover.js
+++ b/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)
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/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 {

--- a/app/javascript/gabsocial/components/sidebar/default_sidebar.js
+++ b/app/javascript/gabsocial/components/sidebar/default_sidebar.js
@@ -54,6 +54,7 @@ class DefaultSidebar extends ImmutablePureComponent {
      title,
      showBackBtn,
      shortcuts,
+      unreadChatsCount,
    } = this.props
    const { hoveringShortcuts } = this.state

@@ -82,7 +83,7 @@ class DefaultSidebar extends ImmutablePureComponent {
        </SidebarSectionTitle>
        <SidebarSectionItem title='Home' icon='home' to='/home' count={homeItemsQueueCount} />
        <SidebarSectionItem title='Notifications' icon='notifications' to='/notifications' count={notificationCount} />
-        <SidebarSectionItem title='Chats' icon='chat' to='/messages' />
+        <SidebarSectionItem title='Chats' icon='chat' to='/messages' count={unreadChatsCount} />
        <SidebarSectionItem title='Groups' icon='group' to='/groups' />
        <SidebarSectionItem title='Lists' icon='list' to='/lists' />
        <SidebarSectionItem title='Explore' icon='explore' to='/explore' />
@@ -151,6 +152,7 @@ const mapStateToProps = (state) => ({
  shortcuts: state.getIn(['shortcuts', 'items']),
  moreOpen: state.getIn(['popover', 'popoverType']) === 'SIDEBAR_MORE',
  notificationCount: state.getIn(['notifications', 'unread']),
+  unreadChatsCount: state.getIn(['chats', 'chatsUnreadCount']),
  homeItemsQueueCount: state.getIn(['timelines', 'home', 'totalQueuedItemsCount']),
 })

@@ -170,6 +172,7 @@ DefaultSidebar.propTypes = {
  openSidebarMorePopover: PropTypes.func.isRequired,
  notificationCount: PropTypes.number.isRequired,
  homeItemsQueueCount: PropTypes.number.isRequired,
+  unreadChatsCount: PropTypes.number.isRequired,
  actions: PropTypes.array,
  tabs: PropTypes.array,
  title: PropTypes.string,
--- a/app/javascript/gabsocial/components/sidebar_section_item.js
+++ b/app/javascript/gabsocial/components/sidebar_section_item.js
@@ -45,7 +45,7 @@ class SidebarSectionItem extends React.PureComponent {
    const iconSize = '16px'
    const currentPathname = noRouter ? '' : this.context.router.route.location.pathname
    const shouldShowActive = hovering || active || currentPathname === to || currentPathname === href
-    const isNotifications = to === '/notifications'
+    const isHighlighted = ['/notifications', '/messages'].indexOf(to) > -1

    const containerClasses = CX({
      d: 1,
@@ -67,16 +67,18 @@ class SidebarSectionItem extends React.PureComponent {
    const countClasses = CX({
      d: 1,
      text: 1,
+      textAlignCenter: 1,
+      minW20PX: 1,
      mlAuto: 1,
      fs12PX: 1,
      px5: 1,
      mr2: 1,
      lineHeight15: 1,
      ml5: 1,
-      cSecondary: !isNotifications,
-      cWhite: isNotifications,
-      bgBrand: isNotifications,
-      radiusSmall: isNotifications,
+      cSecondary: !isHighlighted,
+      cWhite: isHighlighted,
+      bgRed: isHighlighted,
+      circle: isHighlighted,
    })

    return (