Added shortcut star buttons to GroupHeader, ProfileHeader

• Added:
- shortcut star buttons to GroupHeader, ProfileHeader

app/javascript/gabsocial/components/group_header.js

@@ -7,6 +7,10 @@ import { defineMessages, injectIntl } from 'react-intl'
 import { openPopover, closePopover } from '../actions/popover'
 import { openModal } from '../actions/modal'
 import { joinGroup, leaveGroup } from '../actions/groups'
+import {
+  addShortcut,
+  removeShortcut,
+} from '../actions/shortcuts'
 import {
   PLACEHOLDER_MISSING_HEADER_SRC,
   BREAKPOINT_EXTRA_SMALL,
@@ -32,7 +36,24 @@ class GroupHeader extends ImmutablePureComponent {
   handleOnOpenGroupOptions = () => {
     const { relationships } = this.props
     const isAdmin = !!relationships ? relationships.get('admin') : false
-    this.props.onOpenGroupOptions(this.infoBtn, this.props.group, isAdmin)
+    const isModerator = !!relationships ? relationships.get('moderator') : false
+    this.props.onOpenGroupOptions(this.infoBtn, this.props.group, {
+      isAdmin,
+      isModerator,
+    })
+  }
+
+  handleToggleShortcut = () => {
+    const { group, isShortcut } = this.props
+    const groupId = !!group ? group.get('id') : null
+    
+    if (!groupId) return
+
+    if (isShortcut) {
+      this.props.onRemoveShortcut(groupId)
+    } else {
+      this.props.onAddShortcut(groupId)
+    }
   }
 
   setInfoBtn = (c) => {
@@ -45,6 +66,7 @@ class GroupHeader extends ImmutablePureComponent {
       group,
       intl,
       isXS,
+      isShortcut,
       relationships,
     } = this.props
 
@@ -52,12 +74,13 @@ class GroupHeader extends ImmutablePureComponent {
     const coverSrcMissing = coverSrc.indexOf(PLACEHOLDER_MISSING_HEADER_SRC) > -1 || !coverSrc
     const title = !!group ? group.get('title') : undefined
     const slug = !!group ? !!group.get('slug') ? `g/${group.get('slug')}` : undefined : undefined
+    const isPrivate = !!group ? group.get('is_private') : false
 
-    let isAdmin = false
+    let isAdminOrMod = false
     let actionButtonTitle
     let actionButtonOptions = {}
     if (relationships) {
-      isAdmin = relationships.get('admin')
+      isAdminOrMod = relationships.get('admin') || relationships.get('moderator')
       const isMember = relationships.get('member')
 
       actionButtonTitle = intl.formatMessage(isMember ? messages.member : messages.join)
@@ -79,13 +102,20 @@ class GroupHeader extends ImmutablePureComponent {
       // },
     ]
 
-    if (isAdmin && group) {
+    if (isAdminOrMod && group) {
       tabs.push({
         to: `/groups/${group.get('id')}/members`,
         title: 'Members',
       })
     }
 
+    if (isAdminOrMod && group && isPrivate) {
+      tabs.push({
+        to: `/groups/${group.get('id')}/requests`,
+        title: 'Requests',
+      }) 
+    }
+
     if (isXS && group) {
       tabs.push({
         to: `/groups/${group.get('id')}/about`,
@@ -193,14 +223,13 @@ class GroupHeader extends ImmutablePureComponent {
                             color='brand'
                             backgroundColor='none'
                             className={[_s.mr10, _s.px10].join(' ')}
-                            icon='star-outline'
+                            icon={isShortcut ? 'star' : 'star-outline'}
-                            onClick={this.handleOnOpenGroupOptions}
+                            onClick={this.handleToggleShortcut}
-                            buttonRef={this.setInfoBtn}
                           />  
                           <Button
                             color='primary'
                             backgroundColor='tertiary'
-                            className={[_s.mr10, _s.px10].join(' ')}
+                            className={[_s.mr15, _s.px10].join(' ')}
                             icon='ellipsis'
                             onClick={this.handleOnOpenGroupOptions}
                             buttonRef={this.setInfoBtn}
@@ -240,6 +269,15 @@ const messages = defineMessages({
   group_admin: { id: 'groups.detail.role_admin', defaultMessage: 'You\'re an admin' }
 })
 
+const mapStateToProps = (state, { group }) => {
+  const groupId = group ? group.get('id') : null
+  const shortcuts = state.getIn(['shortcuts', 'items'])
+  const isShortcut = !!shortcuts.find((s) => {
+    return s.get('shortcut_id') == groupId && s.get('shortcut_type') === 'group'
+  })
+  return { isShortcut }
+}
+
 const mapDispatchToProps = (dispatch, { intl }) => ({
 
   onToggleMembership(group, relationships) {
@@ -249,15 +287,20 @@ const mapDispatchToProps = (dispatch, { intl }) => ({
       dispatch(joinGroup(group.get('id')))
     }
   },
-
+  onOpenGroupOptions(targetRef, group, options) {
-  onOpenGroupOptions(targetRef, group, isAdmin) {
     dispatch(openPopover('GROUP_OPTIONS', {
       targetRef,
       group,
-      isAdmin,
+      ...options,
       position: 'left',
     }))
   },
+  onAddShortcut(groupId) {
+    dispatch(addShortcut('group', groupId))
+  },
+  onRemoveShortcut(groupId) {
+    dispatch(removeShortcut(null, 'group', groupId))
+  },
 
 })
 
@@ -265,10 +308,13 @@ GroupHeader.propTypes = {
   group: ImmutablePropTypes.map,
   children: PropTypes.any,
   intl: PropTypes.object.isRequired,
+  isShortcut: PropTypes.bool.isRequired,
   isXS: PropTypes.bool,
+  onAddShortcut: PropTypes.func.isRequired,
   onToggleMembership: PropTypes.func.isRequired,
+  onRemoveShortcut: PropTypes.func.isRequired,
   onOpenGroupOptions: PropTypes.func.isRequired,
   relationships: ImmutablePropTypes.map,
 }
 
-export default injectIntl(connect(null, mapDispatchToProps)(GroupHeader))
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(GroupHeader))

app/javascript/gabsocial/components/profile_header.js

@@ -12,6 +12,10 @@ import {
   MODAL_EDIT_PROFILE,
   BREAKPOINT_EXTRA_SMALL,
 } from '../constants'
+import {
+  addShortcut,
+  removeShortcut,
+} from '../actions/shortcuts'
 import { openModal } from '../actions/modal'
 import { openPopover } from '../actions/popover'
 import { me } from '../initial_state'
@@ -46,6 +50,19 @@ class ProfileHeader extends ImmutablePureComponent {
     })
   }
 
+  handleToggleShortcut = () => {
+    const { account, isShortcut } = this.props
+    const accountId = !!account ? account.get('id') : null
+    
+    if (!accountId) return
+
+    if (isShortcut) {
+      this.props.onRemoveShortcut(accountId)
+    } else {
+      this.props.onAddShortcut(accountId)
+    }
+  }
+
   onStickyStateChange = (status) => {
     if (status.status === Sticky.STATUS_FIXED) {
       this.setState({ stickied: true })
@@ -63,6 +80,7 @@ class ProfileHeader extends ImmutablePureComponent {
       account,
       children,
       intl,
+      isShortcut,
       isXS
     } = this.props
     const { stickied } = this.state
@@ -210,7 +228,16 @@ class ProfileHeader extends ImmutablePureComponent {
                     account && account.get('id') !== me && !!me &&
                     <div className={[_s.d, _s.flexRow, _s.py5].join(' ')}>
                       
-                      <div className={[_s.d, _s.flexRow, _s.mr10].join(' ')}>
+                      <Button
+                        icon={isShortcut ? 'star' : 'star-outline'}
+                        iconSize='18px'
+                        color='brand'
+                        backgroundColor='none'
+                        className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr15].join(' ')}
+                        onClick={this.handleToggleShortcut}
+                      />
+
+                      <div className={[_s.d, _s.flexRow, _s.mr15].join(' ')}>
                         <AccountActionButton account={account} />
                       </div>
 
@@ -222,7 +249,7 @@ class ProfileHeader extends ImmutablePureComponent {
                           iconClassName={_s.inheritFill}
                           color='brand'
                           backgroundColor='none'
-                          className={[_s.jcCenter, _s.aiCenter, _s.px10].join(' ')}
+                          className={[_s.jcCenter, _s.aiCenter, _s.ml10, _s.px10].join(' ')}
                           onClick={this.handleOpenMore}
                           buttonRef={this.setOpenMoreNodeRef}
                         />
@@ -323,10 +350,18 @@ class ProfileHeader extends ImmutablePureComponent {
 
                     {
                       account && account.get('id') !== me &&
-                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.py5].join(' ')}>
+                      <div className={[_s.d, _s.flexRow, _s.mlAuto, _s.pb2, _s.pt7].join(' ')}>
                         {
                           !!me &&
-                          <div>
+                          <div className={[_s.d, _s.flexRow, _s.mr5, _s.aiCenter, _s.jcCenter].join(' ')}>
+                            <Button
+                              icon={isShortcut ? 'star' : 'star-outline'}
+                              iconSize='18px'
+                              color='brand'
+                              backgroundColor='none'
+                              className={[_s.jcCenter, _s.aiCenter, _s.px10, _s.mr10].join(' ')}
+                              onClick={this.handleToggleShortcut}
+                            />
                             <Button
                               isOutline
                               icon='ellipsis'
@@ -334,14 +369,14 @@ class ProfileHeader extends ImmutablePureComponent {
                               iconClassName={_s.inheritFill}
                               color='brand'
                               backgroundColor='none'
-                              className={[_s.jcCenter, _s.aiCenter, _s.mr10, _s.px10].join(' ')}
+                              className={[_s.jcCenter, _s.aiCenter, _s.mr15, _s.px10].join(' ')}
                               onClick={this.handleOpenMore}
                               buttonRef={this.setOpenMoreNodeRef}
                             />
                           </div>
                         }
 
-                        <div className={[_s.d, _s.flexRow, _s.pb3].join(' ')}>
+                        <div className={[_s.d, _s.flexRow, _s.pb2].join(' ')}>
                           <AccountActionButton account={account} />
                         </div>
 
@@ -359,6 +394,15 @@ class ProfileHeader extends ImmutablePureComponent {
 
 }
 
+const mapStateToProps = (state, { account }) => {
+  const accountId = account ? account.get('id') : null
+  const shortcuts = state.getIn(['shortcuts', 'items'])
+  const isShortcut = !!shortcuts.find((s) => {
+    return s.get('shortcut_id') == accountId && s.get('shortcut_type') === 'account'
+  })
+  return { isShortcut }
+}
+
 const messages = defineMessages({
   followers: { id: 'account.followers', defaultMessage: 'Followers' },
   follows: { id: 'account.follows', defaultMessage: 'Following' },
@@ -374,24 +418,30 @@ const messages = defineMessages({
 })
 
 const mapDispatchToProps = (dispatch) => ({
-
   openProfileOptionsPopover(props) {
     dispatch(openPopover(POPOVER_PROFILE_OPTIONS, props))
   },
-
   onEditProfile() {
     dispatch(openModal(MODAL_EDIT_PROFILE))
   },
-
+  onAddShortcut(accountId) {
+    dispatch(addShortcut('account', accountId))
+  },
+  onRemoveShortcut(accountId) {
+    dispatch(removeShortcut(null, 'account', accountId))
+  },
 });
 
 ProfileHeader.propTypes = {
   account: ImmutablePropTypes.map,
   children: PropTypes.any,
   intl: PropTypes.object.isRequired,
+  onAddShortcut: PropTypes.func.isRequired,
   onEditProfile: PropTypes.func.isRequired,
+  onRemoveShortcut: PropTypes.func.isRequired,
   openProfileOptionsPopover: PropTypes.func.isRequired,
+  isShortcut: PropTypes.bool.isRequired,
   isXS: PropTypes.bool,
 }
 
-export default injectIntl(connect(null, mapDispatchToProps)(ProfileHeader))
+export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ProfileHeader))