Add birthday reminder notification

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

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 });
+    });
+  };
+}

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({

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 = (
+      <bdi>
+        <Link
+          className='notification__display-name'
+          title={account.get('acct')}
+          to={`/@${account.get('acct')}`}
+          dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }}
+        />
+      </bdi>
+    );
+
+    if (birthdays.size === 1) {
+      return <FormattedMessage id='notification.birthday' defaultMessage='{name} has birthday today' values={{ name: link }} />;
+    }
+
+    return (
+      <FormattedMessage
+        id='notification.birthday_plural'
+        defaultMessage='{name} and {more} have birthday today'
+        values={{
+          name: link,
+          more: (
+            <span type='button' role='presentation' onClick={this.handleOpenBirthdaysModal}>
+              <FormattedMessage
+                id='notification.birthday.more'
+                defaultMessage='{count} more {count, plural, one {friend} other {friends}}'
+                values={{ count: birthdays.size - 1 }}
+              />
+            </span>
+          ),
+        }}
+      />
+    );
+  }
+
+  render() {
+    const { birthdays } = this.props;
+
+    if (!birthdays || birthdays.size === 0) return null;
+
+    return (
+      <div className='notification notification-birthday focusable'>
+        <div className='notification__message'>
+          <div className='notification__icon-wrapper'>
+            <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+          </div>
+
+          <span>
+            {this.renderMessage()}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+}

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 = <FormattedMessage id='notifications.column_settings.filter_bar.show' defaultMessage='Show' />;
     const filterAdvancedStr = <FormattedMessage id='notifications.column_settings.filter_bar.advanced' defaultMessage='Display all categories' />;
@@ -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 && <FormattedMessage id='notifications.column_settings.push' defaultMessage='Push notifications' />;
+    const birthdaysStr = <FormattedMessage id='notifications.column_settings.birthdays.show' defaultMessage='Show birthday reminders' />;
 
     return (
       <div className='column-settings'>
@@ -84,6 +86,17 @@ class ColumnSettings extends React.PureComponent {
             </div>
           </div>
 
+          {supportsBirthDates &&
+            <div role='group' aria-labelledby='notifications-filter-bar'>
+              <span id='notifications-filter-bar' className='column-settings__section'>
+                <FormattedMessage id='notifications.column_settings.birthdays.category' defaultMessage='Birthdays' />
+              </span>
+              <div className='column-settings__row'>
+                <SettingToggle id='show-filter-bar' prefix='notifications' settings={settings} settingPath={['birthdays', 'show']} onChange={onChange} label={birthdaysStr} />
+              </div>
+            </div>
+          }
+
           <div role='group' aria-labelledby='notifications-follow'>
             <span id='notifications-follow' className='column-settings__section'><FormattedMessage id='notifications.column_settings.follow' defaultMessage='New followers:' /></span>
 

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,
   };
 };
 

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 = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
 
     let scrollableContent = null;
@@ -164,6 +174,8 @@ class Notifications extends React.PureComponent {
           onMoveDown={this.handleMoveDown}
         />
       ));
+
+      if (showBirthdayReminders) scrollableContent = scrollableContent.unshift(<BirthdayReminders key='birthdays' />);
     } else {
       scrollableContent = null;
     }

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 = <LoadingIndicator />;
+    } else {
+      const emptyMessage = <FormattedMessage id='status.reblogs.empty' defaultMessage='No one has reposted this post yet. When someone does, they will show up here.' />;
+
+      body = (
+        <ScrollableList
+          scrollKey='reblogs'
+          emptyMessage={emptyMessage}
+        >
+          {accountIds.map(id =>
+            <AccountContainer key={id} id={id} withNote={false} />,
+          )}
+        </ScrollableList>
+      );
+    }
+
+
+    return (
+      <div className='modal-root__modal reactions-modal'>
+        <div className='compose-modal__header'>
+          <h3 className='compose-modal__header__title'>
+            <FormattedMessage id='column.birthdays' defaultMessage='Birthdays' />
+          </h3>
+          <IconButton
+            className='compose-modal__close'
+            title={intl.formatMessage(messages.close)}
+            src={require('@tabler/icons/icons/x.svg')}
+            onClick={this.onClickClose} size={20}
+          />
+        </div>
+        {body}
+      </div>
+    );
+  }
+
+}

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 {

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');
 }

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;
   }

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;
+  }
+}

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',