Progress

accounts approved, video player testing, bookmark collections
2020-12-17 01:34:00 -05:00
parent 04053c0e31
commit 5a37a7090e
88 changed files with 688 additions and 395 deletions
--- a/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/chat_conversation_expiration_options_popover.js
@@ -14,6 +14,7 @@ import {
 } from '../../constants'
 import PopoverLayout from './popover_layout'
 import List from '../list'
+import Text from '../text'

 class ChatConversationExpirationOptionsPopover extends React.PureComponent {

@@ -94,7 +95,7 @@ class ChatConversationExpirationOptionsPopover extends React.PureComponent {
        isXS={isXS}
        onClose={this.handleOnClosePopover}
      >
-        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>This chats delete after:</Text>
+        <Text className={[_s.d, _s.px15, _s.py10, _s.bgSecondary].join(' ')}>Chats delete after:</Text>
        <List
          scrollKey='chat_conversation_expiration'
          items={listItems}
--- a/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
+++ b/app/javascript/gabsocial/components/popover/compose_post_destination_popover.js
@@ -106,7 +106,7 @@ class ComposePostDesinationPopover extends ImmutablePureComponent {
            <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.maxH340PX].join(' ')}>
              <List
                scrollKey='groups-post-destination-add'
-                showLoading={groups.size === 0}
+                showLoading={groups.length === 0}
                emptyMessage="You are not a member of any groups yet."
                items={groupItems}
              />
--- a/app/javascript/gabsocial/components/popover/popover_root.js
+++ b/app/javascript/gabsocial/components/popover/popover_root.js
@@ -1,5 +1,6 @@
 import {
  BREAKPOINT_EXTRA_SMALL,
+  POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS,
  POPOVER_CHAT_CONVERSATION_OPTIONS,
  POPOVER_CHAT_MESSAGE_OPTIONS,
  POPOVER_COMMENT_SORTING_OPTIONS,
@@ -23,6 +24,7 @@ import {
  POPOVER_VIDEO_STATS,
 } from '../../constants'
 import {
+  ChatConversationExpirationOptionsPopover,
  ChatConversationOptionsPopover,
  ChatMessageOptionsPopover,
  CommentSortingOptionsPopover,
@@ -60,6 +62,7 @@ import LoadingPopover from './loading_popover'
 const initialState = getWindowDimension()

 const POPOVER_COMPONENTS = {
+  [POPOVER_CHAT_CONVERSATION_EXPIRATION_OPTIONS]: ChatConversationExpirationOptionsPopover,
  [POPOVER_CHAT_CONVERSATION_OPTIONS]: ChatConversationOptionsPopover,
  [POPOVER_CHAT_MESSAGE_OPTIONS]: ChatMessageOptionsPopover,
  [POPOVER_COMMENT_SORTING_OPTIONS]: CommentSortingOptionsPopover,
--- a/app/javascript/gabsocial/components/popover/status_options_popover.js
+++ b/app/javascript/gabsocial/components/popover/status_options_popover.js
@@ -21,6 +21,10 @@ import {
  editStatus,
 } from '../../actions/statuses';
 import { quoteCompose } from '../../actions/compose'
+import {
+  fetchBookmarkCollections,
+  updateBookmarkCollectionStatus,
+} from '../../actions/bookmarks'
 import {
  fetchGroupRelationships,
  createRemovedAccount,
@@ -40,7 +44,9 @@ import {
  POPOVER_STATUS_SHARE,
 } from '../../constants'
 import PopoverLayout from './popover_layout'
+import Button from '../button'
 import List from '../list'
+import Text from '../text'

 class StatusOptionsPopover extends ImmutablePureComponent {

@@ -48,11 +54,9 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    router: PropTypes.object,
  }

-  updateOnProps = [
-    'status',
-    'groupRelationships',
-    'isXS',
-  ]
+  state = {
+    showingBookmarkCollections: false,
+  }

  componentDidMount() {
    const {
@@ -109,6 +113,7 @@ class StatusOptionsPopover extends ImmutablePureComponent {
  }

  handleBookmarkClick = () => {
+    // : todo : add to specific bookmark collection
    if (this.props.isPro) {
      this.props.onBookmark(this.props.status)
    } else {
@@ -116,6 +121,19 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    }
  }

+  handleBookmarkChangeClick = () => {
+    if (!this.props.bookmarkCollectionsIsFetched) this.props.onFetchBookmarkCollections()
+    this.setState({ showingBookmarkCollections: true })
+  }
+
+  handleBookmarkChangeBackClick = () => {
+    this.setState({ showingBookmarkCollections: false })
+  }
+
+  handleBookmarkChangeSelectClick = (bookmarkCollectionId) => {
+    this.props.onUpdateBookmarkCollectionStatus(this.props.status.get('id'), bookmarkCollectionId)
+  }
+
  handleDeleteClick = () => {
    this.props.onDelete(this.props.status)
  }
@@ -142,11 +160,13 @@ class StatusOptionsPopover extends ImmutablePureComponent {

  render() {
    const {
-      status,
-      intl,
-      groupRelationships,
      isXS,
+      intl,
+      status,
+      groupRelationships,
+      bookmarkCollections,
    } = this.props
+    const { showingBookmarkCollections } = this.state

    if (!status) return <div />

@@ -155,8 +175,6 @@ class StatusOptionsPopover extends ImmutablePureComponent {
    const isReply = !!status.get('in_reply_to_id')
    const withGroupAdmin = !!groupRelationships ? (groupRelationships.get('admin') || groupRelationships.get('moderator')) : false

-    console.log("publicStatus:", status, publicStatus)
-
    let menu = []

    if (me) {
@@ -171,11 +189,19 @@ class StatusOptionsPopover extends ImmutablePureComponent {

      menu.push({
        icon: 'bookmark',
-        hideArrow: true,
+        hideArrow: status.get('bookmarked'),
        title: intl.formatMessage(status.get('bookmarked') ? messages.unbookmark : messages.bookmark),
        onClick: this.handleBookmarkClick,
      })
-      
+
+      if (status.get('bookmarked')) {
+        menu.push({
+          icon: 'bookmark',
+          title: 'Update bookmark collection',
+          onClick: this.handleBookmarkChangeClick,
+        })
+      }
+
      if (status.getIn(['account', 'id']) === me) {
        if (publicStatus) {
          menu.push({
@@ -264,16 +290,62 @@ class StatusOptionsPopover extends ImmutablePureComponent {
      })
    }

+    const popoverWidth = !isStaff ? 260 : 362
+
+    let bookmarkCollectionItems = !!bookmarkCollections ? bookmarkCollections.map((bookmarkCollection) => ({
+      hideArrow: true,
+      onClick: () => this.handleBookmarkChangeSelectClick(bookmarkCollection.get('id')),
+      title: bookmarkCollection.get('title'),
+      isActive: bookmarkCollection.get('id') === status.get('bookmark_collection_id'),
+    })) : []
+    bookmarkCollectionItems = bookmarkCollectionItems.unshift({
+      hideArrow: true,
+      onClick: () => this.handleBookmarkChangeSelectClick('saved'),
+      title: 'Saved',
+      isActive: !status.get('bookmark_collection_id'),
+    })
+
    return (
      <PopoverLayout
        isXS={isXS}
        onClose={this.handleClosePopover}
+        width={popoverWidth}
      >
-        <List
-          scrollKey='profile_options'
-          items={menu}
-          size={isXS ? 'large' : 'small'}
-        />
+        {
+          !showingBookmarkCollections &&
+          <List
+            scrollKey='profile_options'
+            items={menu}
+            size={isXS ? 'large' : 'small'}
+          />
+        }
+        {
+          showingBookmarkCollections &&
+          <div className={[_s.d, _s.w100PC].join(' ')}>
+            <div className={[_s.d, _s.flexRow, _s.bgSecondary].join(' ')}>
+              <Button
+                isText
+                icon='back'
+                color='primary'
+                backgroundColor='none'
+                className={[_s.aiCenter, _s.jcCenter, _s.pl15, _s.pr5].join(' ')}
+                onClick={this.handleBookmarkChangeBackClick}
+              />
+              <Text className={[_s.d, _s.pl5, _s.py10].join(' ')}>
+                Select bookmark collection:
+              </Text>
+            </div>
+            <div className={[_s.d, _s.w100PC, _s.overflowYScroll, _s.maxH340PX].join(' ')}>
+              <List
+                scrollKey='status_options_bookmark_collections'
+                showLoading={bookmarkCollectionItems.length === 0}
+                emptyMessage="You have no bookmark collections yet."
+                items={bookmarkCollectionItems}
+                size={isXS ? 'large' : 'small'}
+              />
+            </div>
+          </div>
+        }
      </PopoverLayout>
    )
  }
@@ -323,6 +395,8 @@ const mapStateToProps = (state, { statusId }) => {
    groupId,
    groupRelationships,
    isPro: state.getIn(['accounts', me, 'is_pro']),
+    bookmarkCollectionsIsFetched: state.getIn(['bookmark_collections', 'isFetched']),
+    bookmarkCollections: state.getIn(['bookmark_collections', 'items']),
  }
 }

@@ -454,7 +528,6 @@ const mapDispatchToProps = (dispatch) => ({
    dispatch(closePopover())
    dispatch(openModal(MODAL_PRO_UPGRADE))
  },
-
  onPinGroupStatus(status) {
    dispatch(closePopover())

@@ -464,7 +537,13 @@ const mapDispatchToProps = (dispatch) => ({
      dispatch(pinGroupStatus(status.getIn(['group', 'id']), status.get('id')))
    }
  },
-
+  onFetchBookmarkCollections() {
+    dispatch(fetchBookmarkCollections())
+  },
+  onUpdateBookmarkCollectionStatus(statusId, bookmarkCollectionId) {
+    dispatch(updateBookmarkCollectionStatus(statusId, bookmarkCollectionId))
+    dispatch(closePopover())
+  },
  onClosePopover: () => dispatch(closePopover()),
 })

@@ -487,6 +566,8 @@ StatusOptionsPopover.propTypes = {
  fetchIsPinnedGroupStatus: PropTypes.func.isRequired,
  fetchIsBookmark: PropTypes.func.isRequired,
  fetchIsPin: PropTypes.func.isRequired,
+  onFetchBookmarkCollections: PropTypes.func.isRequired,
+  onUpdateBookmarkCollectionStatus: PropTypes.func.isRequired,
  isXS: PropTypes.bool,
  isPro: PropTypes.bool,
 }
--- a/app/javascript/gabsocial/components/popover/user_info_popover.js
+++ b/app/javascript/gabsocial/components/popover/user_info_popover.js
@@ -12,7 +12,7 @@ import PopoverLayout from './popover_layout'
 import AccountActionButton from '../account_action_button'
 import Avatar from '../avatar'
 import DisplayName from '../display_name'
-import Text from '../text'
+import UserStat from '../user_stat'

 class UserInfoPopover extends ImmutablePureComponent {

@@ -47,28 +47,19 @@ class UserInfoPopover extends ImmutablePureComponent {
          </div>

          <div className={[_s.d, _s.flexRow, _s.mt10].join(' ')}>
-            <NavLink
-              to={`${to}/followers`}
-              className={[_s.d, _s.flexRow, _s.mr10, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
-            >
-              <Text weight='extraBold' color='primary'>
-                {shortNumberFormat(account.get('followers_count'))}&nbsp;
-              </Text>
-              <Text color='secondary'>
-                <FormattedMessage id='account.followers' defaultMessage='Followers' />
-              </Text>
-            </NavLink>
-            <NavLink
-              to={`${to}/following`}
-              className={[_s.d, _s.flexRow, _s.noUnderline, _s.cPrimary, _s.underline_onHover].join(' ')}
-            >
-              <Text weight='extraBold' color='primary'>
-                {shortNumberFormat(account.get('following_count'))}&nbsp;
-              </Text>
-              <Text color='secondary'>
-                <FormattedMessage id='account.follows' defaultMessage='Following' />
-              </Text>
-            </NavLink>
+            <UserStat
+              title={<FormattedMessage id='account.followers' defaultMessage='Followers' />}
+              value={shortNumberFormat(account.get('followers_count'))}
+              to={`/${account.get('acct')}/followers`}
+              isInline
+            />
+            <UserStat
+              isLast
+              title={<FormattedMessage id='account.follows' defaultMessage='Following' />}
+              value={shortNumberFormat(account.get('following_count'))}
+              to={`/${account.get('acct')}/following`}
+              isInline
+            />
          </div>

        </div>