moony/Gab-Social
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Added shortcut star buttons to GroupHeader, ProfileHeader

Browse Source 
• Added:
- shortcut star buttons to GroupHeader, ProfileHeader
This commit is contained in:
mgabdev 2020-09-02 17:53:57 -05:00
parent 2202cea0e1
commit 9ca6b6a884
2 changed files with 118 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
app/javascript/gabsocial/components/group_header.js
View File

@ -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'
onClick={this.handleOnOpenGroupOptions}
buttonRef={this.setInfoBtn}
icon={isShortcut ? 'star' : 'star-outline'}
onClick={this.handleToggleShortcut}
/>
<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, isAdmin) {
onOpenGroupOptions(targetRef, group, options) {
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))

70
app/javascript/gabsocial/components/profile_header.js
View File

@ -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))