diff --git a/app/javascript/gabsocial/components/popover/group_options_popover.js b/app/javascript/gabsocial/components/popover/group_options_popover.js index a52b8294..a77f94aa 100644 --- a/app/javascript/gabsocial/components/popover/group_options_popover.js +++ b/app/javascript/gabsocial/components/popover/group_options_popover.js @@ -8,7 +8,11 @@ import { addShortcut, removeShortcut, } from '../../actions/shortcuts' -import { closePopover } from '../../actions/popover' +import { + openPopover, + closePopover, +} from '../../actions/popover' +import { POPOVER_SHARE } from '../../constants' import PopoverLayout from './popover_layout' import List from '../list' @@ -27,6 +31,10 @@ class GroupOptionsPopover extends ImmutablePureComponent { } } + handleOnShare = () => { + this.props.onShare(this.props.group) + } + render() { const { group, @@ -66,8 +74,16 @@ class GroupOptionsPopover extends ImmutablePureComponent { to: `/groups/${groupId}/edit`, isHidden: !isAdmin, }) + listItems.push({}) } + listItems.push({ + hideArrow: true, + icon: 'share', + title: 'Share group', + onClick: this.handleOnShare, + }) + listItems.push({}) listItems.push({ hideArrow: true, icon: 'star', @@ -109,7 +125,7 @@ const mapStateToProps = (state, { group }) => { return { isShortcut } } -const mapDispatchToProps = (dispatch) => ({ +const mapDispatchToProps = (dispatch, { innerRef }) => ({ onClosePopover: () => dispatch(closePopover()), onAddShortcut(groupId) { dispatch(addShortcut('group', groupId)) @@ -117,6 +133,13 @@ const mapDispatchToProps = (dispatch) => ({ onRemoveShortcut(groupId) { dispatch(removeShortcut(null, 'group', groupId)) }, + onShare(group) { + dispatch(openPopover(POPOVER_SHARE, { + innerRef, + group, + position: 'top', + })) + }, }) GroupOptionsPopover.defaultProps = { diff --git a/app/javascript/gabsocial/components/popover/popover_root.js b/app/javascript/gabsocial/components/popover/popover_root.js index be254907..641689eb 100644 --- a/app/javascript/gabsocial/components/popover/popover_root.js +++ b/app/javascript/gabsocial/components/popover/popover_root.js @@ -18,7 +18,7 @@ import { POPOVER_SIDEBAR_MORE, POPOVER_STATUS_OPTIONS, POPOVER_STATUS_EXPIRATION_OPTIONS, - POPOVER_STATUS_SHARE, + POPOVER_SHARE, POPOVER_STATUS_VISIBILITY, POPOVER_TIMELINE_INJECTION_OPTIONS, POPOVER_USER_INFO, @@ -43,7 +43,7 @@ import { SidebarMorePopover, StatusExpirationOptionsPopover, StatusOptionsPopover, - StatusSharePopover, + SharePopover, StatusVisibilityPopover, TimelineInjectionOptionsPopover, UserInfoPopover, @@ -82,7 +82,7 @@ const POPOVER_COMPONENTS = { [POPOVER_SIDEBAR_MORE]: SidebarMorePopover, [POPOVER_STATUS_OPTIONS]: StatusOptionsPopover, [POPOVER_STATUS_EXPIRATION_OPTIONS]: StatusExpirationOptionsPopover, - [POPOVER_STATUS_SHARE]: StatusSharePopover, + [POPOVER_SHARE]: SharePopover, [POPOVER_STATUS_VISIBILITY]: StatusVisibilityPopover, [POPOVER_TIMELINE_INJECTION_OPTIONS]: TimelineInjectionOptionsPopover, [POPOVER_USER_INFO]: UserInfoPopover, @@ -135,6 +135,10 @@ class PopoverRoot extends React.PureComponent { return } + setRef = () => { + // : todo : ? + } + render() { const { type, props, onClose } = this.props const { width } = this.state diff --git a/app/javascript/gabsocial/components/popover/profile_options_popover.js b/app/javascript/gabsocial/components/popover/profile_options_popover.js index c0e59e66..552afc99 100644 --- a/app/javascript/gabsocial/components/popover/profile_options_popover.js +++ b/app/javascript/gabsocial/components/popover/profile_options_popover.js @@ -17,7 +17,11 @@ import { } from '../../actions/shortcuts' import { initReport } from '../../actions/reports' import { openModal } from '../../actions/modal' -import { closePopover } from '../../actions/popover' +import { + openPopover, + closePopover, +} from '../../actions/popover' +import { POPOVER_SHARE } from '../../constants' import { unfollowModal, me, isStaff } from '../../initial_state' import { makeGetAccount } from '../../selectors' import PopoverLayout from './popover_layout' @@ -37,14 +41,12 @@ class ProfileOptionsPopover extends React.PureComponent { if (!account) return menu if (account.get('id') === me) return menu - if ('share' in navigator) { - menu.push({ - hideArrow: true, - icon: 'share', - title: intl.formatMessage(messages.share, { name: account.get('username') }), - onClick: this.handleShare - }); - } + menu.push({ + hideArrow: true, + icon: 'share', + title: intl.formatMessage(messages.share, { name: account.get('username') }), + onClick: this.handleShare + }); menu.push({ hideArrow: true, @@ -119,7 +121,7 @@ class ProfileOptionsPopover extends React.PureComponent { } handleShare = () => { - // : todo : + this.props.onShare(this.props.account) } handleFollow = () => { @@ -225,7 +227,7 @@ const mapStateToProps = (state, { account }) => { } } -const mapDispatchToProps = (dispatch, { intl }) => ({ +const mapDispatchToProps = (dispatch, { intl, innerRef }) => ({ onFollow(account) { if (account.getIn(['relationship', 'following']) || account.getIn(['relationship', 'requested'])) { if (unfollowModal) { @@ -291,6 +293,13 @@ const mapDispatchToProps = (dispatch, { intl }) => ({ dispatch(closePopover()) dispatch(removeShortcut(null, 'account', accountId)) }, + onShare(account) { + dispatch(openPopover(POPOVER_SHARE, { + innerRef, + account, + position: 'top', + })) + }, }) ProfileOptionsPopover.defaultProps = { diff --git a/app/javascript/gabsocial/components/popover/status_share_popover.js b/app/javascript/gabsocial/components/popover/share_popover.js similarity index 76% rename from app/javascript/gabsocial/components/popover/status_share_popover.js rename to app/javascript/gabsocial/components/popover/share_popover.js index 4ed4634c..485ac70c 100644 --- a/app/javascript/gabsocial/components/popover/status_share_popover.js +++ b/app/javascript/gabsocial/components/popover/share_popover.js @@ -3,20 +3,51 @@ import PropTypes from 'prop-types' import ImmutablePropTypes from 'react-immutable-proptypes' import ImmutablePureComponent from 'react-immutable-pure-component' import { connect } from 'react-redux' -import { defineMessages, injectIntl } from 'react-intl' import { openModal } from '../../actions/modal' import { showToast } from '../../actions/toasts' import { closePopover } from '../../actions/popover' +import { TOAST_TYPE_SUCCESS } from '../../constants' import PopoverLayout from './popover_layout' import Button from '../button' import Heading from '../heading' import Text from '../text' import List from '../list' -class StatusSharePopover extends ImmutablePureComponent { +class SharePopover extends ImmutablePureComponent { + + state = { + url: '', + type: '', + } + + componentDidMount() { + this._setUrl() + } + + componentDidUpdate() { + this._setUrl() + } + + _setUrl = () => { + const { account, group, status } = this.props + let url, type + + if (!!account) { + type = 'account' + url = account.get('url') + } else if (!!group) { + type = 'group' + url = group.get('url') + } else if (!!status) { + type = 'status' + url = status.get('url') + } + + this.setState({ url, type }) + } handleCopy = () => { - const url = this.props.status.get('url') + const { url } = this.state const textarea = document.createElement('textarea') textarea.textContent = url @@ -41,13 +72,12 @@ class StatusSharePopover extends ImmutablePureComponent { } render() { - const { intl, status } = this.props + const { url, type } = this.state - if (!status) return
+ if (!url) return
- const encodedStatusUrl = encodeURIComponent(status.get('url')) - const mailToHref = `mailto:?subject=Gab&body=${encodedStatusUrl}` - const content = status.get('contentHtml') + const encodedUrl = encodeURIComponent(url) + const mailToHref = `mailto:?subject=Gab&body=${encodedUrl}` const iconSize = '18px' return ( @@ -56,7 +86,7 @@ class StatusSharePopover extends ImmutablePureComponent { >
- Share Gab + Share Gab {type}
@@ -67,7 +97,7 @@ class StatusSharePopover extends ImmutablePureComponent { color='primary' backgroundColor='secondary' onClick={this.handleCopy} - title={intl.formatMessage(messages.copy)} + title={`Copy this ${type}`} className={[_s.jcCenter, _s.aiCenter, _s.mr10, _s.px10].join(' ')} />