diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js index aacdcd106..e0bcbd46c 100644 --- a/app/soapbox/actions/accounts.js +++ b/app/soapbox/actions/accounts.js @@ -109,6 +109,10 @@ export const NOTIFICATION_SETTINGS_REQUEST = 'NOTIFICATION_SETTINGS_REQUEST'; export const NOTIFICATION_SETTINGS_SUCCESS = 'NOTIFICATION_SETTINGS_SUCCESS'; export const NOTIFICATION_SETTINGS_FAIL = 'NOTIFICATION_SETTINGS_FAIL'; +export const BIRTHDAY_REMINDERS_FETCH_REQUEST = 'BIRTHDAY_REMINDERS_FETCH_REQUEST'; +export const BIRTHDAY_REMINDERS_FETCH_SUCCESS = 'BIRTHDAY_REMINDERS_FETCH_SUCCESS'; +export const BIRTHDAY_REMINDERS_FETCH_FAIL = 'BIRTHDAY_REMINDERS_FETCH_FAIL'; + export function createAccount(params) { return (dispatch, getState) => { dispatch({ type: ACCOUNT_CREATE_REQUEST, params }); @@ -1030,3 +1034,26 @@ export function accountLookup(acct, cancelToken) { }); }; } + +export function fetchBirthdayReminders(day, month) { + return (dispatch, getState) => { + if (!isLoggedIn(getState)) return; + + const me = getState().get('me'); + + dispatch({ type: BIRTHDAY_REMINDERS_FETCH_REQUEST, day, month, id: me }); + + api(getState).get('/api/v1/pleroma/birthday_reminders', { params: { day, month } }).then(response => { + dispatch(importFetchedAccounts(response.data)); + dispatch({ + type: BIRTHDAY_REMINDERS_FETCH_SUCCESS, + accounts: response.data, + day, + month, + id: me, + }); + }).catch(error => { + dispatch({ type: BIRTHDAY_REMINDERS_FETCH_FAIL, day, month, id: me }); + }); + }; +} diff --git a/app/soapbox/actions/settings.js b/app/soapbox/actions/settings.js index 4a50909fa..418c41292 100644 --- a/app/soapbox/actions/settings.js +++ b/app/soapbox/actions/settings.js @@ -100,6 +100,10 @@ export const defaultSettings = ImmutableMap({ move: false, 'pleroma:emoji_reaction': false, }), + + birthdays: ImmutableMap({ + show: true, + }), }), community: ImmutableMap({ diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js new file mode 100644 index 000000000..a00a1ba33 --- /dev/null +++ b/app/soapbox/components/birthday_reminders.js @@ -0,0 +1,118 @@ + +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import ImmutablePureComponent from 'react-immutable-pure-component'; +import { injectIntl, FormattedMessage } from 'react-intl'; +import { connect } from 'react-redux'; +import { Link } from 'react-router-dom'; + +import { fetchBirthdayReminders } from 'soapbox/actions/accounts'; +import { openModal } from 'soapbox/actions/modal'; +import Icon from 'soapbox/components/icon'; +import { makeGetAccount } from 'soapbox/selectors'; + +const mapStateToProps = (state, props) => { + const me = state.get('me'); + const getAccount = makeGetAccount(); + + const birthdays = state.getIn(['user_lists', 'birthday_reminders', me]); + + if (birthdays && birthdays.size > 0) { + return { + birthdays, + account: getAccount(state, birthdays.first()), + }; + } + + return { + birthdays, + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class BirthdayReminders extends ImmutablePureComponent { + + static propTypes = { + birthdays: ImmutablePropTypes.orderedSet, + intl: PropTypes.object.isRequired, + dispatch: PropTypes.func.isRequired, + }; + + componentDidMount() { + const { dispatch } = this.props; + + const date = new Date(); + + const day = date.getDate(); + const month = date.getMonth() + 1; + + dispatch(fetchBirthdayReminders(day, month)); + } + + handleOpenBirthdaysModal = () => { + const { dispatch } = this.props; + + dispatch(openModal('BIRTHDAYS')); + } + + renderMessage() { + const { birthdays, account } = this.props; + + const link = ( + + + + ); + + if (birthdays.size === 1) { + return ; + } + + return ( + + + + ), + }} + /> + ); + } + + render() { + const { birthdays } = this.props; + + if (!birthdays || birthdays.size === 0) return null; + + return ( +
+
+
+ +
+ + + {this.renderMessage()} + +
+
+ ); + } + +} \ No newline at end of file diff --git a/app/soapbox/features/notifications/components/column_settings.js b/app/soapbox/features/notifications/components/column_settings.js index e033eb6be..39dd79836 100644 --- a/app/soapbox/features/notifications/components/column_settings.js +++ b/app/soapbox/features/notifications/components/column_settings.js @@ -24,6 +24,7 @@ class ColumnSettings extends React.PureComponent { onClear: PropTypes.func.isRequired, onClose: PropTypes.func.isRequired, supportsEmojiReacts: PropTypes.bool, + supportsBirthDates: PropTypes.bool, }; onPushChange = (path, checked) => { @@ -39,7 +40,7 @@ class ColumnSettings extends React.PureComponent { } render() { - const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts } = this.props; + const { intl, settings, pushSettings, onChange, onClear, onClose, supportsEmojiReacts, supportsBirthDates } = this.props; const filterShowStr = ; const filterAdvancedStr = ; @@ -50,6 +51,7 @@ class ColumnSettings extends React.PureComponent { const soundSettings = [['sounds', 'follow'], ['sounds', 'favourite'], ['sounds', 'pleroma:emoji_reaction'], ['sounds', 'mention'], ['sounds', 'reblog'], ['sounds', 'poll'], ['sounds', 'move']]; const showPushSettings = pushSettings.get('browserSupport') && pushSettings.get('isSubscribed'); const pushStr = showPushSettings && ; + const birthdaysStr = ; return (
@@ -84,6 +86,17 @@ class ColumnSettings extends React.PureComponent {
+ {supportsBirthDates && +
+ + + +
+ +
+
+ } +
diff --git a/app/soapbox/features/notifications/containers/column_settings_container.js b/app/soapbox/features/notifications/containers/column_settings_container.js index da37f306f..05dc1f0eb 100644 --- a/app/soapbox/features/notifications/containers/column_settings_container.js +++ b/app/soapbox/features/notifications/containers/column_settings_container.js @@ -24,6 +24,7 @@ const mapStateToProps = state => { settings: getSettings(state).get('notifications'), pushSettings: state.get('push_notifications'), supportsEmojiReacts: features.emojiReacts, + supportsBirthDates: features.birthDates, }; }; diff --git a/app/soapbox/features/notifications/index.js b/app/soapbox/features/notifications/index.js index b174d776e..57edf8315 100644 --- a/app/soapbox/features/notifications/index.js +++ b/app/soapbox/features/notifications/index.js @@ -8,8 +8,10 @@ import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { getSettings } from 'soapbox/actions/settings'; +import BirthdayReminders from 'soapbox/components/birthday_reminders'; import SubNavigation from 'soapbox/components/sub_navigation'; import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification'; +import { getFeatures } from 'soapbox/utils/features'; import { expandNotifications, @@ -45,14 +47,21 @@ const getNotifications = createSelector([ return notifications.filter(item => item !== null && allowedType === item.get('type')); }); -const mapStateToProps = state => ({ - showFilterBar: getSettings(state).getIn(['notifications', 'quickFilter', 'show']), - notifications: getNotifications(state), - isLoading: state.getIn(['notifications', 'isLoading'], true), - isUnread: state.getIn(['notifications', 'unread']) > 0, - hasMore: state.getIn(['notifications', 'hasMore']), - totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), -}); +const mapStateToProps = state => { + const settings = getSettings(state); + const instance = state.get('instance'); + const features = getFeatures(instance); + + return { + showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']), + notifications: getNotifications(state), + isLoading: state.getIn(['notifications', 'isLoading'], true), + isUnread: state.getIn(['notifications', 'unread']) > 0, + hasMore: state.getIn(['notifications', 'hasMore']), + totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0), + showBirthdayReminders: settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthDates, + }; +}; export default @connect(mapStateToProps) @injectIntl @@ -68,6 +77,7 @@ class Notifications extends React.PureComponent { hasMore: PropTypes.bool, dequeueNotifications: PropTypes.func, totalQueuedNotificationsCount: PropTypes.number, + showBirthdayReminders: PropTypes.bool, }; componentWillUnmount() { @@ -137,7 +147,7 @@ class Notifications extends React.PureComponent { } render() { - const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props; + const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount, showBirthdayReminders } = this.props; const emptyMessage = ; let scrollableContent = null; @@ -164,6 +174,8 @@ class Notifications extends React.PureComponent { onMoveDown={this.handleMoveDown} /> )); + + if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(); } else { scrollableContent = null; } diff --git a/app/soapbox/features/ui/components/birthdays_modal.js b/app/soapbox/features/ui/components/birthdays_modal.js new file mode 100644 index 000000000..995ad5cc5 --- /dev/null +++ b/app/soapbox/features/ui/components/birthdays_modal.js @@ -0,0 +1,97 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import ImmutablePropTypes from 'react-immutable-proptypes'; +import { injectIntl, FormattedMessage, defineMessages } from 'react-intl'; +import { connect } from 'react-redux'; + +import IconButton from 'soapbox/components/icon_button'; +import LoadingIndicator from 'soapbox/components/loading_indicator'; +import ScrollableList from 'soapbox/components/scrollable_list'; +import AccountContainer from 'soapbox/containers/account_container'; + +const messages = defineMessages({ + close: { id: 'lightbox.close', defaultMessage: 'Close' }, +}); + +const mapStateToProps = (state) => { + const me = state.get('me'); + + return { + accountIds: state.getIn(['user_lists', 'birthday_reminders', me]), + }; +}; + +export default @connect(mapStateToProps) +@injectIntl +class BirthdaysModal extends React.PureComponent { + + static contextTypes = { + router: PropTypes.object, + }; + + static propTypes = { + onClose: PropTypes.func.isRequired, + intl: PropTypes.object.isRequired, + accountIds: ImmutablePropTypes.orderedSet, + }; + + componentDidMount() { + this.unlistenHistory = this.context.router.history.listen((_, action) => { + if (action === 'PUSH') { + this.onClickClose(null, true); + } + }); + } + + componentWillUnmount() { + if (this.unlistenHistory) { + this.unlistenHistory(); + } + } + + onClickClose = (_, noPop) => { + this.props.onClose('BIRTHDAYS', noPop); + }; + + render() { + const { intl, accountIds } = this.props; + + let body; + + if (!accountIds) { + body = ; + } else { + const emptyMessage = ; + + body = ( + + {accountIds.map(id => + , + )} + + ); + } + + + return ( +
+
+

+ +

+ +
+ {body} +
+ ); + } + +} diff --git a/app/soapbox/features/ui/components/modal_root.js b/app/soapbox/features/ui/components/modal_root.js index 5425cf5eb..1cc6304c6 100644 --- a/app/soapbox/features/ui/components/modal_root.js +++ b/app/soapbox/features/ui/components/modal_root.js @@ -26,6 +26,7 @@ import { FavouritesModal, ReblogsModal, MentionsModal, + BirthdaysModal, } from '../../../features/ui/util/async-components'; import BundleContainer from '../containers/bundle_container'; @@ -57,6 +58,7 @@ const MODAL_COMPONENTS = { 'FAVOURITES': FavouritesModal, 'REACTIONS': ReactionsModal, 'MENTIONS': MentionsModal, + 'BIRTHDAYS': BirthdaysModal, }; export default class ModalRoot extends React.PureComponent { diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js index 08a223f90..7111a43c5 100644 --- a/app/soapbox/features/ui/util/async-components.js +++ b/app/soapbox/features/ui/util/async-components.js @@ -214,6 +214,10 @@ export function MentionsModal() { return import(/* webpackChunkName: "features/ui" */'../components/mentions_modal'); } +export function BirthdaysModal() { + return import(/* webpackChunkName: "features/ui" */'../components/birthdays_modal'); +} + export function ListEditor() { return import(/* webpackChunkName: "features/list_editor" */'../../list_editor'); } diff --git a/app/soapbox/reducers/user_lists.js b/app/soapbox/reducers/user_lists.js index 2b9feaaa2..076144f75 100644 --- a/app/soapbox/reducers/user_lists.js +++ b/app/soapbox/reducers/user_lists.js @@ -10,6 +10,7 @@ import { FOLLOW_REQUEST_AUTHORIZE_SUCCESS, FOLLOW_REQUEST_REJECT_SUCCESS, PINNED_ACCOUNTS_FETCH_SUCCESS, + BIRTHDAY_REMINDERS_FETCH_SUCCESS, } from '../actions/accounts'; import { BLOCKS_FETCH_SUCCESS, @@ -55,6 +56,7 @@ const initialState = ImmutableMap({ groups: ImmutableMap(), groups_removed_accounts: ImmutableMap(), pinned: ImmutableMap(), + birthday_reminders: ImmutableMap(), }); const normalizeList = (state, type, id, accounts, next) => { @@ -131,6 +133,8 @@ export default function userLists(state = initialState, action) { return state.updateIn(['groups_removed_accounts', action.groupId, 'items'], list => list.filterNot(item => item === action.id)); case PINNED_ACCOUNTS_FETCH_SUCCESS: return normalizeList(state, 'pinned', action.id, action.accounts, action.next); + case BIRTHDAY_REMINDERS_FETCH_SUCCESS: + return state.setIn(['birthday_reminders', action.id], ImmutableOrderedSet(action.accounts.map(item => item.id))); default: return state; } diff --git a/app/styles/components/notification.scss b/app/styles/components/notification.scss index 0a1e58a09..1bcbb937c 100644 --- a/app/styles/components/notification.scss +++ b/app/styles/components/notification.scss @@ -89,3 +89,18 @@ padding-bottom: 8px !important; } } + +.notification-birthday span[type="button"] { + &:focus, + &:hover, + &:active { + text-decoration: underline; + cursor: pointer; + } +} + +.columns-area .notification-birthday { + .notification__message { + padding-top: 0; + } +} diff --git a/docs/store.md b/docs/store.md index 34088ab8c..7f866bacb 100644 --- a/docs/store.md +++ b/docs/store.md @@ -391,6 +391,9 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn mention: true, poll: true, reblog: true + }, + birthdays: { + show: true } }, theme: 'azure',