Progress

comments yo
2020-05-05 01:16:01 -04:00
parent 498f163880
commit 01bb440385
19 changed files with 234 additions and 73 deletions
--- a/app/javascript/gabsocial/components/comment.js
+++ b/app/javascript/gabsocial/components/comment.js
@@ -10,6 +10,9 @@ import { replyCompose } from '../actions/compose'
 import { openModal } from '../actions/modal'
 import { openPopover } from '../actions/popover'
 import { makeGetStatus } from '../selectors'
+import {
+  CX,
+} from '../constants'
 import { me } from '../initial_state'
 import Avatar from './avatar'
 import Button from './button'
@@ -74,9 +77,11 @@ class Comment extends ImmutablePureComponent {
  static propTypes = {
    indent: PropTypes.number,
    intl: PropTypes.object.isRequired,
+    ancestorAccountId: PropTypes.string.isRequired,
    status: ImmutablePropTypes.map.isRequired,
    isHidden: PropTypes.bool,
    isIntersecting: PropTypes.bool,
+    isHighlighted: PropTypes.bool,
    onReply: PropTypes.func.isRequired,
    onFavorite: PropTypes.func.isRequired,
    onOpenStatusOptions: PropTypes.func.isRequired,
@@ -89,6 +94,7 @@ class Comment extends ImmutablePureComponent {
    'indent',
    'isHidden',
    'isIntersecting',
+    'isHighlighted',
  ]

  state = {
@@ -115,6 +121,8 @@ class Comment extends ImmutablePureComponent {
      intl,
      status,
      isHidden,
+      isHighlighted,
+      ancestorAccountId,
    } = this.props

    if (isHidden) {
@@ -130,6 +138,16 @@ class Comment extends ImmutablePureComponent {
      paddingLeft: `${indent * 42}px`,
    }

+    const contentClasses = CX({
+      default: 1,
+      px10: 1,
+      pt5: 1,
+      pb10: 1,
+      radiusSmall: 1,
+      bgSubtle: !isHighlighted,
+      highlightedComment: isHighlighted,
+    })
+
    return (
      <div className={[_s.default, _s.px15, _s.mb10, _s.py5].join(' ')} data-comment={status.get('id')}>
        <div className={[_s.default].join(' ')} style={style}>
@@ -144,8 +162,9 @@ class Comment extends ImmutablePureComponent {
            </NavLink>

            <div className={[_s.default, _s.flexShrink1, _s.maxWidth100PC42PX].join(' ')}>
-              <div className={[_s.default, _s.px10, _s.pt5, _s.pb10, _s.radiusSmall, _s.bgSubtle].join(' ')}>
+              <div className={contentClasses}>
                <CommentHeader
+                  ancestorAccountId={ancestorAccountId}
                  status={status}
                  onOpenLikes={this.props.onOpenLikes}
                  onOpenReposts={this.props.onOpenReposts}
--- a/app/javascript/gabsocial/components/comment_header.js
+++ b/app/javascript/gabsocial/components/comment_header.js
@@ -6,6 +6,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component'
 import Button from './button'
 import DisplayName from './display_name'
 import DotTextSeperator from './dot_text_seperator'
+import Icon from './icon'
 import RelativeTimestamp from './relative_timestamp'
 import Text from './text'

@@ -21,6 +22,7 @@ class CommentHeader extends ImmutablePureComponent {

  static propTypes = {
    intl: PropTypes.object.isRequired,
+    ancestorAccountId: PropTypes.string.isRequired,
    status: ImmutablePropTypes.map.isRequired,
    openLikesList: PropTypes.func.isRequired,
    openRepostsList: PropTypes.func.isRequired,
@@ -38,12 +40,16 @@ class CommentHeader extends ImmutablePureComponent {
    const {
      intl,
      status,
+      ancestorAccountId,
    } = this.props

+    if (!status) return null
+
    const repostCount = status.get('reblogs_count')
    const favoriteCount = status.get('favourites_count')

    const statusUrl = `/${status.getIn(['account', 'acct'])}/posts/${status.get('id')}`;
+    const isOwner = ancestorAccountId === status.getIn(['account', 'id'])

    return (
      <div className={[_s.default, _s.alignItemsStart, _s.py2, _s.flexGrow1].join(' ')}>
@@ -57,6 +63,16 @@ class CommentHeader extends ImmutablePureComponent {
            <DisplayName account={status.get('account')} isSmall />
          </NavLink>

+          {
+            isOwner &&
+            <div className={[_s.default, _s.alignItemsCenter, _s.ml5].join(' ')}>
+              <span className={_s.visiblyHidden}>
+                Original Gabber
+              </span>
+              <Icon id='mic' size='10px' className={_s.fillBrand} />
+            </div>
+          }
+
          {
            status.get('revised_at') !== null &&
            <Fragment>
--- a/app/javascript/gabsocial/components/comment_list.js
+++ b/app/javascript/gabsocial/components/comment_list.js
@@ -12,21 +12,21 @@ export default class CommentList extends ImmutablePureComponent {
    commentsLimited: PropTypes.bool,
    descendants: ImmutablePropTypes.list,
    onViewComments: PropTypes.func.isRequired,
+    ancestorAccountId: PropTypes.string.isRequired,
  }

  render() {
    const {
      descendants,
      commentsLimited,
-      onViewComments
+      onViewComments,
+      ancestorAccountId
    } = this.props

    const size = descendants.size
    const upperLimit = commentsLimited ? 6 : size
    const max = Math.min(commentsLimited ? 2 : upperLimit, size)

-    console.log("size, max:", size, max)
-
    const Wrapper = !commentsLimited ? ScrollableList : DummyContainer

    return (
@@ -37,7 +37,9 @@ export default class CommentList extends ImmutablePureComponent {
              <Comment
                key={`comment-${descendant.get('statusId')}-${i}`}
                id={descendant.get('statusId')}
+                ancestorAccountId={ancestorAccountId}
                indent={descendant.get('indent')}
+                isHighlighted={descendant.get('isHighlighted')}
              />
            ))
          }
--- a/app/javascript/gabsocial/components/display_name.js
+++ b/app/javascript/gabsocial/components/display_name.js
@@ -144,7 +144,7 @@ class DisplayName extends ImmutablePureComponent {
    // }

    // : todo : remote
-    console.log("domain, isRemoteUser:", domain, isRemoteUser)
+    // console.log("domain, isRemoteUser:", domain, isRemoteUser)

    return (
      <div
--- a/app/javascript/gabsocial/components/icon.js
+++ b/app/javascript/gabsocial/components/icon.js
@@ -40,6 +40,7 @@ import LoadingIcon from '../assets/loading_icon'
 import LockIcon from '../assets/lock_icon'
 import LockFilledIcon from '../assets/lock_filled_icon'
 import MediaIcon from '../assets/media_icon'
+import MicIcon from '../assets/mic_icon'
 import MinimizeFullscreenIcon from '../assets/minimize_fullscreen_icon'
 import MissingIcon from '../assets/missing_icon'
 import MoreIcon from '../assets/more_icon'
@@ -110,6 +111,7 @@ const ICONS = {
  'lock': LockIcon,
  'lock-filled': LockFilledIcon,
  'media': MediaIcon,
+  'mic': MicIcon,
  'minimize-fullscreen': MinimizeFullscreenIcon,
  'missing': MissingIcon,
  'more': MoreIcon,
--- a/app/javascript/gabsocial/components/modal/boost_modal.js
+++ b/app/javascript/gabsocial/components/modal/boost_modal.js
@@ -55,6 +55,7 @@ class BoostModal extends ImmutablePureComponent {
      
      <div className={[_s.default, _s.px15, _s.py10, _s.mt5].join(' ')}>
        <StatusContainer
+          contextType='boost-modal'
          id={status.get('id')}
          isChild
        />
--- a/app/javascript/gabsocial/components/notification.js
+++ b/app/javascript/gabsocial/components/notification.js
@@ -144,6 +144,7 @@ class Notification extends ImmutablePureComponent {
                !!statusId &&
                <div className={[_s.default, _s.pt10, _s.mt5].join(' ')}>
                  <StatusContainer
+                    contextType='notification'
                    id={statusId}
                    isChild
                  />
--- a/app/javascript/gabsocial/components/profile_header.js
+++ b/app/javascript/gabsocial/components/profile_header.js
@@ -146,6 +146,10 @@ class ProfileHeader extends ImmutablePureComponent {
                  />
                </div>
              }
+              {
+                headerMissing &&
+                <div className={[_s.default, _s.py10, _s.width100PC].join(' ')} />
+              }

              <div className={[_s.default, _s.width100PC].join(' ')}>

--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -69,6 +69,7 @@ class Status extends ImmutablePureComponent {
    isMuted: PropTypes.bool,
    isHidden: PropTypes.bool,
    isIntersecting: PropTypes.bool,
+    isComment: PropTypes.bool,
    onClick: PropTypes.func,
    onReply: PropTypes.func,
    onRepost: PropTypes.func,
@@ -82,6 +83,7 @@ class Status extends ImmutablePureComponent {
    onMoveUp: PropTypes.func,
    onMoveDown: PropTypes.func,
    onFetchComments: PropTypes.func,
+    onFetchContext: PropTypes.func,
    getScrollPosition: PropTypes.func,
    updateScrollBottom: PropTypes.func,
    cacheMediaWidth: PropTypes.func,
@@ -103,6 +105,7 @@ class Status extends ImmutablePureComponent {
    'isMuted',
    'isHidden',
    'isIntersecting',
+    'isComment',
  ]

  state = {
@@ -127,6 +130,8 @@ class Status extends ImmutablePureComponent {
  }

  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isChild) return null
+
    if (!nextProps.isHidden && (nextProps.isIntersecting || !nextProps.commentsLimited) && !prevState.loadedComments) {
      return {
        loadedComments: true
@@ -147,11 +152,14 @@ class Status extends ImmutablePureComponent {
  // Compensate height changes
  componentDidUpdate(prevProps, prevState, snapshot) {
    // timeline lazy loading comments
-    if (!prevState.loadedComments && this.state.loadedComments && this.props.status) {
+    if (!prevState.loadedComments && this.state.loadedComments && this.props.status && !this.props.isChild) {
      const commentCount = this.props.status.get('replies_count')
-      if (commentCount > 0) {
+      if (commentCount > 0 && !this.props.isComment) {
        this.props.onFetchComments(this.props.status.get('id'))
-        this._measureHeight(prevState.height !== this.state.height)
+        // this._measureHeight(prevState.height !== this.state.height)
+      } else {
+        console.log("before fetch:", this.props.status)
+        this.props.onFetchContext(this.props.status.get('id'))
      }
    }

@@ -311,7 +319,11 @@ class Status extends ImmutablePureComponent {
  }

  _properStatus() {
-    const { status } = this.props
+    const { status, ancestorStatus } = this.props
+
+    if (ancestorStatus) {
+      return ancestorStatus
+    }

    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
      return status.get('reblog')
@@ -346,6 +358,8 @@ class Status extends ImmutablePureComponent {
      isHidden,
      descendantsIds,
      commentsLimited,
+      ancestorStatus,
+      isComment,
    } = this.props
    
    let { status } = this.props
@@ -354,13 +368,17 @@ class Status extends ImmutablePureComponent {

    let reblogContent, rebloggedByText = null

-    if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
-      rebloggedByText = intl.formatMessage(
-        { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
-        { name: status.getIn(['account', 'acct']) }
-      )
-      reblogContent = status.get('contentHtml')
-      status = status.get('reblog')
+    if (ancestorStatus) {
+      status = ancestorStatus
+    } else {
+      if (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object') {
+        rebloggedByText = intl.formatMessage(
+          { id: 'status.reposted_by', defaultMessage: '{name} reposted' },
+          { name: status.getIn(['account', 'acct']) }
+        )
+        reblogContent = status.get('contentHtml')
+        status = status.get('reblog')
+      }
    }

    const handlers = (this.props.isMuted || isChild) ? {} : {
@@ -417,8 +435,6 @@ class Status extends ImmutablePureComponent {
      bgSubtle_onHover: isChild,
    })

-    console.log("status:", status)
-
    return (
      <HotKeys handlers={handlers}>
        <div
@@ -433,7 +449,12 @@ class Status extends ImmutablePureComponent {

            <div data-id={status.get('id')}>

-              <StatusPrepend status={this.props.status} isPromoted={isPromoted} isFeatured={isFeatured} />
+              <StatusPrepend
+                status={this.props.status}
+                isPromoted={isPromoted}
+                isFeatured={isFeatured}
+                isComment={isComment}
+              />

              <StatusHeader status={status} reduced={isChild} />

@@ -495,6 +516,7 @@ class Status extends ImmutablePureComponent {
              {
                descendantsIds && !compactMode && !isChild && descendantsIds.size > 0 &&
                <CommentList
+                  ancestorAccountId={status.getIn(['account', 'id'])}
                  commentsLimited={commentsLimited}
                  descendants={descendantsIds}
                  onViewComments={this.handleClick}
--- a/app/javascript/gabsocial/components/status_prepend.js
+++ b/app/javascript/gabsocial/components/status_prepend.js
@@ -21,6 +21,7 @@ class StatusPrepend extends ImmutablePureComponent {
  static propTypes = {
    intl: PropTypes.object.isRequired,
    status: ImmutablePropTypes.map,
+    isComment: PropTypes.bool,
    isFeatured: PropTypes.bool,
    isPromoted: PropTypes.bool,
  }
@@ -31,15 +32,22 @@ class StatusPrepend extends ImmutablePureComponent {
      status,
      isFeatured,
      isPromoted,
+      isComment,
    } = this.props

    if (!status) return null

    const isRepost = (status.get('reblog', null) !== null && typeof status.get('reblog') === 'object')

-    if (!isFeatured && !isPromoted && !isRepost) return null
+    console.log("isComment:", isComment)

-    const iconId = isFeatured ? 'pin' : isPromoted ? 'star' : 'repost'
+    if (!isFeatured && !isPromoted && !isRepost && !isComment) return null
+
+    let iconId
+    if (isFeatured) iconId = 'pin'
+    else if (isPromoted) iconId = 'star'
+    else if (isRepost) iconId = 'repost'
+    else if (isComment) iconId = 'comment'

    const containerClasses = CX({
      default: 1,
@@ -54,7 +62,7 @@ class StatusPrepend extends ImmutablePureComponent {
        <div className={[_s.default, _s.width100PC, _s.flexRow, _s.alignItemsCenter, _s.py5, _s.px15].join(' ')}>
          <Icon id={iconId} size='12px' className={[_s.fillSecondary, _s.mr5].join(' ')} />
          {
-            isRepost &&
+            isRepost && !isComment &&
            <div className={[_s.default, _s.flexRow].join(' ')}>
              <Text size='small' color='secondary'>
                <FormattedMessage
@@ -79,11 +87,34 @@ class StatusPrepend extends ImmutablePureComponent {
            </div>
          }
          {
-            !isRepost &&
+            !isRepost && !isComment &&
            <Text color='secondary' size='small'>
              {intl.formatMessage(isFeatured ? messages.pinned : messages.promoted)}
            </Text>
          }
+          {
+            isComment &&
+            <Text color='secondary' size='small'>
+              <FormattedMessage
+                id='status.commented_on_this'
+                defaultMessage='{name} commented on this gab'
+                values={{
+                  name: (
+                    <NavLink
+                      className={[_s.noUnderline, _s.underline_onHover].join(' ')}
+                      to={`/${status.getIn(['account', 'acct'])}`}
+                    >
+                      <Text size='small' color='secondary'>
+                        <bdi>
+                          <span dangerouslySetInnerHTML={{ __html: status.getIn(['account', 'display_name_html']) }} />
+                        </bdi>
+                      </Text>
+                    </NavLink>
+                  )
+                }}
+              />
+            </Text>
+          }
        </div>
      </div>
    )