Progress

hashtag in top of tag feed, scroll to comment, chat blocking, muting, filtering
2020-12-21 18:30:46 -05:00
parent ee91809e8d
commit 67d94858dc
39 changed files with 576 additions and 179 deletions
--- a/app/javascript/gabsocial/features/chat_conversation_blocked_accounts.js
+++ b/app/javascript/gabsocial/features/chat_conversation_blocked_accounts.js
@@ -59,9 +59,9 @@ class ChatConversationBlockedAccounts extends ImmutablePureComponent {
                key={`blocked-accounts-${id}`}
                id={id}
                compact
-                actionIcon='subtract'
+                actionIcon=''
 								onActionClick={() => this.props.onRemove(id)}
-								actionTitle='Remove'
+								actionTitle='Undo Chat Block'
              />
            ))
          }
--- a/app/javascript/gabsocial/features/chat_conversation_create.js
+++ b/app/javascript/gabsocial/features/chat_conversation_create.js
@@ -56,6 +56,7 @@ class ChatConversationCreate extends React.PureComponent {
                suggestionsIds.map((accountId) => (
                  <Account
                    compact
+                    noClick
                    key={`chat-conversation-account-create-${accountId}`}
                    id={accountId}
                    onActionClick={() => this.handleOnCreateChatConversation(accountId)}
--- a/app/javascript/gabsocial/features/chat_conversation_mutes.js
+++ b/app/javascript/gabsocial/features/chat_conversation_mutes.js
@@ -11,7 +11,7 @@ class ChatConversationMutes extends React.PureComponent {
        <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
          <BlockHeading title={'Muted Chat Conversations'} />
        </div>
-        <ChatConversationsList source='mutes' />
+        <ChatConversationsList source='muted' />
      </div>
    )
  }
--- a/app/javascript/gabsocial/features/hashtag_timeline.js
+++ b/app/javascript/gabsocial/features/hashtag_timeline.js
@@ -4,7 +4,9 @@ import { connect } from 'react-redux'
 import { FormattedMessage } from 'react-intl'
 import isEqual from 'lodash.isequal'
 import { expandHashtagTimeline, clearTimeline } from '../actions/timelines'
+import { fetchHashtag } from '../actions/hashtags'
 import StatusList from '../components/status_list'
+import HashtagItem from '../components/hashtag_item'

 class HashtagTimeline extends React.PureComponent {

@@ -64,10 +66,11 @@ class HashtagTimeline extends React.PureComponent {
  }

  componentDidMount () {
-    const { dispatch } = this.props
+    const { dispatch, tagName } = this.props
    const { id, tags } = this.props.params

    dispatch(expandHashtagTimeline(id, { tags }))
+    dispatch(fetchHashtag(tagName))
  }

  componentWillReceiveProps (nextProps) {
@@ -86,21 +89,28 @@ class HashtagTimeline extends React.PureComponent {
  }

  render () {
-    const { id } = this.props.params
+    const { tag, tagName } = this.props
+
+    console.log("tagName:", tag)

    return (
-      <StatusList
-        scrollKey='hashtag_timeline'
-        timelineId={`hashtag:${id}`}
-        onLoadMore={this.handleLoadMore}
-        emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
-      />
-    );
+      <React.Fragment>
+        { tag && <HashtagItem hashtag={tag} /> }
+        <StatusList
+          scrollKey='hashtag_timeline'
+          timelineId={`hashtag:${tagName}`}
+          onLoadMore={this.handleLoadMore}
+          emptyMessage={<FormattedMessage id='empty_column.hashtag' defaultMessage='There is nothing in this hashtag yet.' />}
+        />
+      </React.Fragment>
+    )
  }

 }

 const mapStateToProps = (state, props) => ({
+  tagName: props.params.id,
+  tag: state.getIn(['hashtags', `${props.params.id}`]),
  hasUnread: state.getIn(['timelines', `hashtag:${props.params.id}`, 'unread']) > 0,
 })

--- a/app/javascript/gabsocial/features/messages/components/chat_conversations_list.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_conversations_list.js
@@ -9,6 +9,8 @@ import {
  expandChatConversations,
  fetchChatConversationRequested,
  expandChatConversationRequested,
+  fetchChatConversationMuted,
+  expandChatConversationMuted,
 } from '../../../actions/chat_conversations'
 import AccountPlaceholder from '../../../components/placeholder/account_placeholder'
 import ChatConversationsListItem from './chat_conversations_list_item'
@@ -72,6 +74,8 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(fetchChatConversations())
    } else if (source ==='requested') {
      dispatch(fetchChatConversationRequested())
+    } else if (source ==='muted') {
+      dispatch(fetchChatConversationMuted())
    }
  },
  onExpandChatConversations(source) {
@@ -79,6 +83,8 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(expandChatConversations())
    } else if (source ==='requested') {
      dispatch(expandChatConversationRequested())
+    } else if (source ==='muted') {
+      dispatch(expandChatConversationMuted())
    }
  },
 })
--- a/app/javascript/gabsocial/features/messages/components/chat_conversations_search.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_conversations_search.js
@@ -1,29 +1,31 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { connect } from 'react-redux'
 import Input from '../../../components/input'

 class ChatConversationsSearch extends React.PureComponent {

-  static contextTypes = {
-    router: PropTypes.object,
+  state = {
+    value: '',
  }

-  state = {
-    composeFocused: false,
+  handleOnChange = (value) => {
+    this.setState({ value })
+    this.props.onChange(value)
  }

  render() {
-    const {
-      children
-    } = this.props
+    const { value } = this.state

    return (
      <div className={[_s.d, _s.h60PX, _s.w100PC, _s.px10, _s.py10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
        <Input
          type='search'
-          placeholder='Search for messages'
+          placeholder='Search for conversations'
          id='messages-search'
          prependIcon='search'
+          value={value}
+          onChange={this.handleOnChange}
        />
      </div>
    )
@@ -31,8 +33,10 @@ class ChatConversationsSearch extends React.PureComponent {

 }

-ChatConversationsSearch.propTypes = {
-  //
-}
+const mapDispatchToProps = (dispatch) => ({
+  onChange(value) {
+    // dispatch()
+  }
+})

-export default ChatConversationsSearch
+export default connect(null, mapDispatchToProps)(ChatConversationsSearch)
--- a/app/javascript/gabsocial/features/messages/components/chat_message_header.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_header.js
@@ -21,7 +21,12 @@ class ChatMessageHeader extends React.PureComponent {
  }

  handleOnOpenChatConversationOptionsPopover = () => {
-    this.props.onOpenChatConversationOptionsPopover(this.props.chatConversationId, this.optionsBtnRef)
+    const isChatConversationRequest = !!this.props.chatConversation ? !this.props.chatConversation.get('is_approved') : false
+    this.props.onOpenChatConversationOptionsPopover({
+      isChatConversationRequest,
+      chatConversationId: this.props.chatConversationId,
+      targetRef: this.optionsBtnRef,
+    })
  }

  setOptionsBtnRef = (c) => {
@@ -63,7 +68,7 @@ class ChatMessageHeader extends React.PureComponent {
            onClick={this.handleOnApproveMessageRequest}
            className={_s.ml10}
          >
-            <Text>
+            <Text color='inherit'>
              Approve Message Request
            </Text>
          </Button>
@@ -82,10 +87,9 @@ const mapDispatchToProps = (dispatch) => ({
  onApproveChatConversationRequest(chatConversationId) {
    dispatch(approveChatConversationRequest(chatConversationId))
  },
-  onOpenChatConversationOptionsPopover(chatConversationId, targetRef) {
+  onOpenChatConversationOptionsPopover(options) {
    dispatch(openPopover(POPOVER_CHAT_CONVERSATION_OPTIONS, {
-      chatConversationId,
-      targetRef,
+      ...options,
      position: 'left-end',
    }))
  },
--- a/app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js
+++ b/app/javascript/gabsocial/features/messages/components/chat_message_scrolling_list.js
@@ -22,6 +22,7 @@ import ChatMessagePlaceholder from '../../../components/placeholder/chat_message
 import ChatMessageItem from './chat_message_item'
 import ColumnIndicator from '../../../components/column_indicator'
 import LoadMore from '../../../components/load_more'
+import Text from '../../../components/text'

 class ChatMessageScrollingList extends ImmutablePureComponent {

@@ -238,6 +239,7 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
      isLoading,
      isPartial,
      hasMore,
+      amITalkingToMyself,
      onScrollToBottom,
      onScroll,
      isXS,
@@ -299,6 +301,15 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
            className={[_s.d, _s.h100PC, _s.w100PC, _s.px15, _s.py15, _s.overflowYScroll].join(' ')}
            ref={this.setScrollContainerRef}
          >
+            {
+              amITalkingToMyself &&
+              <div className={[_s.d, _s.bgTertiary, _s.radiusSmall, _s.mt5, _s.ml10, _s.mr15, _s.px15, _s.py15, _s.mb15].join(' ')}>
+                <Text size='medium' color='secondary'>
+                  This is a chat conversation with yourself. Use this space to keep messages, links and texts. Please remember that these messages are not encrypted.
+                </Text>
+              </div>
+            }
+
            {
              (hasMore && !isLoading) &&
              <LoadMore onClick={this.handleLoadOlder} />
@@ -349,7 +360,11 @@ class ChatMessageScrollingList extends ImmutablePureComponent {
 const mapStateToProps = (state, { chatConversationId }) => {
  if (!chatConversationId) return {}

+  const otherAccountIds = state.getIn(['chat_conversations', chatConversationId, 'other_account_ids'], null)
+  const amITalkingToMyself = !!otherAccountIds ? otherAccountIds.size == 1 && otherAccountIds.get(0) === me : false
+
  return {
+    amITalkingToMyself,
    chatMessageIds: state.getIn(['chat_conversation_messages', chatConversationId, 'items'], ImmutableList()),
    isLoading: state.getIn(['chat_conversation_messages', chatConversationId, 'isLoading'], true),
    isPartial: state.getIn(['chat_conversation_messages', chatConversationId, 'isPartial'], false),
--- a/app/javascript/gabsocial/features/messages_settings.js
+++ b/app/javascript/gabsocial/features/messages_settings.js
@@ -1,36 +1,25 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { connect } from 'react-redux'
-import { injectIntl, FormattedMessage } from 'react-intl'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import ImmutablePropTypes from 'react-immutable-proptypes'
-import debounce from 'lodash.debounce'
 import { me } from '../initial_state'
-import { fetchMutes, expandMutes } from '../actions/mutes'
-import Account from '../components/account'
+import { changeChatSetting } from '../actions/chat_settings'
 import BlockHeading from '../components/block_heading'
-import Button from '../components/button'
 import Form from '../components/form'
-import Switch from '../components/switch'
-import Text from '../components/text'
+import SettingSwitch from '../components/setting_switch'
 import Divider from '../components/divider'

 class MessagesSettings extends ImmutablePureComponent {

-  componentWillMount() {
-    this.props.onFetchMutes()
+  handleOnChange = (key, checked) => {
+    this.props.onSave(key, checked)
  }

-  handleLoadMore = debounce(() => {
-    this.props.onExpandMutes()
-  }, 300, { leading: true })
-
  render() {
-    const {
-      accountIds,
-      hasMore,
-      isLoading,
-    } = this.props
+    const { chatSettings } = this.props
+
+    if (!chatSettings) return null

    return (
      <div className={[_s.d, _s.w100PC, _s.boxShadowNone].join(' ')}>
@@ -40,23 +29,34 @@ class MessagesSettings extends ImmutablePureComponent {

        <div className={[_s.d, _s.px15, _s.py15, _s.overflowHidden].join(' ')}>
          <Form>
-            <Switch
+            <SettingSwitch
              label='Restrict messages from people you dont follow'
-              checked={true}
-              onChange={this.handleLockedChange}
+              settings={chatSettings}
+              settingPath='restrict_non_followers'
+              onChange={this.handleOnChange}
            />
+            { /* : todo :
            <div className={[_s.d, _s.w100PC, _s.my10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
-            <Switch
+            <SettingSwitch
              label='Show when you are active'
-              checked={false}
-              onChange={this.handleLockedChange}
+              settings={chatSettings}
+              settingPath='show_active'
+              onChange={this.handleOnChange}
            />
            <div className={[_s.d, _s.w100PC, _s.my10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
-            <Switch
-              label='Notification sound enabled'
-              checked={false}
-              onChange={this.handleLockedChange}
+            <SettingSwitch
+              label='Show read receipts'
+              settings={chatSettings}
+              settingPath='read_receipts'
+              onChange={this.handleOnChange}
            />
+            <div className={[_s.d, _s.w100PC, _s.my10, _s.borderColorSecondary, _s.borderBottom1PX].join(' ')} />
+            <SettingSwitch
+              label='Notification sound enabled'
+              settings={chatSettings}
+              settingPath='sounds'
+              onChange={this.handleOnChange}
+            /> */ }
          </Form>
        </div>
      </div>
@@ -66,22 +66,18 @@ class MessagesSettings extends ImmutablePureComponent {
 }

 const mapStateToProps = (state) => ({
-  accountIds: state.getIn(['user_lists', 'mutes', me, 'items']),
-  hasMore: !!state.getIn(['user_lists', 'mutes', me, 'next']),
-  isLoading: state.getIn(['user_lists', 'mutes', me, 'isLoading']),
+  chatSettings: state.getIn(['chat_settings']),
 })

 const mapDispatchToProps = (dispatch) => ({
-  onFetchMutes: () => dispatch(fetchMutes()),
-  onExpandMutes: () => dispatch(expandMutes()),
+  onSave(key, checked) {
+    // dispatch(changeChatSetting(key, checked))
+  },
 })

 MessagesSettings.propTypes = {
-  accountIds: ImmutablePropTypes.list,
-  hasMore: PropTypes.bool,
-  isLoading: PropTypes.bool,
-  onExpandMutes: PropTypes.func.isRequired,
-  onFetchMutes: PropTypes.func.isRequired,
+  chatSettings: ImmutablePropTypes.map,
+  onSave: PropTypes.func.isRequired,
 }

-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(MessagesSettings))
+export default connect(mapStateToProps, mapDispatchToProps)(MessagesSettings)