This repository has been archived by the owner on Oct 11, 2022. It is now read-only.
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #2964 from withspectrum/send-notifications-for-wat…
…ercoolers Send notifications for watercooler threads
- Loading branch information
Showing
5 changed files
with
205 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,179 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import { connect } from 'react-redux'; | ||
| import Clipboard from 'react-clipboard.js'; | ||
| import { addToastWithTimeout } from '../../../actions/toasts'; | ||
| import { openModal } from '../../../actions/modals'; | ||
| import Icon from '../../../components/icons'; | ||
| import compose from 'recompose/compose'; | ||
| import { track } from '../../../helpers/events'; | ||
| import type { GetThreadType } from 'shared/graphql/queries/thread/getThread'; | ||
| import toggleThreadNotificationsMutation from 'shared/graphql/mutations/thread/toggleThreadNotifications'; | ||
| import { | ||
| FollowButton, | ||
| ShareButtons, | ||
| ShareButton, | ||
| WatercoolerActionBarContainer, | ||
| } from '../style'; | ||
|
|
||
| type Props = { | ||
| thread: GetThreadType, | ||
| currentUser: Object, | ||
| dispatch: Function, | ||
| toggleThreadNotifications: Function, | ||
| }; | ||
|
|
||
| type State = { | ||
| notificationStateLoading: boolean, | ||
| }; | ||
|
|
||
| class WatercoolerActionBar extends React.Component<Props, State> { | ||
| state = { notificationStateLoading: false }; | ||
|
|
||
| toggleNotification = () => { | ||
| const { thread, dispatch, toggleThreadNotifications } = this.props; | ||
| const threadId = thread.id; | ||
|
|
||
| this.setState({ | ||
| notificationStateLoading: true, | ||
| }); | ||
|
|
||
| toggleThreadNotifications({ | ||
| threadId, | ||
| }) | ||
| .then(({ data: { toggleThreadNotifications } }) => { | ||
| this.setState({ | ||
| notificationStateLoading: false, | ||
| }); | ||
|
|
||
| if (toggleThreadNotifications.receiveNotifications) { | ||
| track('thread', 'notifications turned on', null); | ||
| return dispatch( | ||
| addToastWithTimeout('success', 'Notifications activated!') | ||
| ); | ||
| } else { | ||
| track('thread', 'notifications turned off', null); | ||
| return dispatch( | ||
| addToastWithTimeout('neutral', 'Notifications turned off') | ||
| ); | ||
| } | ||
| }) | ||
| .catch(err => { | ||
| this.setState({ | ||
| notificationStateLoading: true, | ||
| }); | ||
| dispatch(addToastWithTimeout('error', err.message)); | ||
| }); | ||
| }; | ||
|
|
||
| render() { | ||
| const { thread, currentUser } = this.props; | ||
| const { notificationStateLoading } = this.state; | ||
|
|
||
| return ( | ||
| <WatercoolerActionBarContainer> | ||
| <div style={{ display: 'flex' }}> | ||
| {currentUser ? ( | ||
| <FollowButton | ||
| currentUser={currentUser} | ||
| icon={ | ||
| thread.receiveNotifications | ||
| ? 'notification-fill' | ||
| : 'notification' | ||
| } | ||
| tipText={ | ||
| thread.receiveNotifications | ||
| ? 'Turn off notifications' | ||
| : 'Get notified about replies' | ||
| } | ||
| tipLocation={'top-right'} | ||
| loading={notificationStateLoading} | ||
| onClick={this.toggleNotification} | ||
| dataCy="thread-notifications-toggle" | ||
| > | ||
| {thread.receiveNotifications ? 'Subscribed' : 'Get notifications'} | ||
| </FollowButton> | ||
| ) : ( | ||
| <FollowButton | ||
| currentUser={currentUser} | ||
| icon={'notification'} | ||
| tipText={'Get notified about replies'} | ||
| tipLocation={'top-right'} | ||
| dataCy="thread-notifications-login-capture" | ||
| onClick={() => | ||
| this.props.dispatch(openModal('CHAT_INPUT_LOGIN_MODAL', {})) | ||
| } | ||
| > | ||
| Notify me | ||
| </FollowButton> | ||
| )} | ||
| {!thread.channel.isPrivate && ( | ||
| <ShareButtons> | ||
| <ShareButton | ||
| tipText={'Share'} | ||
| tipLocation={'top-left'} | ||
| data-cy="thread-facebook-button" | ||
| > | ||
| <a | ||
| href={`https://www.facebook.com/sharer/sharer.php?u=https://spectrum.chat/thread/${ | ||
| thread.id | ||
| }&t=${thread.content.title}`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon glyph={'facebook'} size={24} /> | ||
| </a> | ||
| </ShareButton> | ||
|
|
||
| <ShareButton | ||
| tipText={'Tweet'} | ||
| tipLocation={'top-left'} | ||
| data-cy="thread-tweet-button" | ||
| > | ||
| <a | ||
| href={`https://twitter.com/share?text=${ | ||
| thread.content.title | ||
| } on @withspectrum&url=https://spectrum.chat/thread/${ | ||
| thread.id | ||
| }`} | ||
| target="_blank" | ||
| rel="noopener noreferrer" | ||
| > | ||
| <Icon glyph={'twitter'} size={24} /> | ||
| </a> | ||
| </ShareButton> | ||
|
|
||
| <Clipboard | ||
| style={{ background: 'none' }} | ||
| data-clipboard-text={`https://spectrum.chat/thread/${ | ||
| thread.id | ||
| }`} | ||
| onSuccess={() => | ||
| this.props.dispatch( | ||
| addToastWithTimeout('success', 'Copied to clipboard') | ||
| ) | ||
| } | ||
| > | ||
| <ShareButton | ||
| tipText={'Copy link'} | ||
| tipLocation={'top-left'} | ||
| data-cy="thread-copy-link-button" | ||
| > | ||
| <a> | ||
| <Icon glyph={'link'} size={24} /> | ||
| </a> | ||
| </ShareButton> | ||
| </Clipboard> | ||
| </ShareButtons> | ||
| )} | ||
| </div> | ||
| </WatercoolerActionBarContainer> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default compose(connect(), toggleThreadNotificationsMutation)( | ||
| WatercoolerActionBar | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters