sforkowany z mirror/soapbox
Remove BirthdayReminders component
rodzic
67b0b6a317
commit
6968c6bf40
|
@ -1,161 +0,0 @@
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
import { HotKeys } from 'react-hotkeys';
|
|
||||||
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/modals';
|
|
||||||
import Icon from 'soapbox/components/icon';
|
|
||||||
import { HStack, Text } from 'soapbox/components/ui';
|
|
||||||
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?.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,
|
|
||||||
onMoveDown: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
componentDidMount() {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
|
|
||||||
const date = new Date();
|
|
||||||
|
|
||||||
const day = date.getDate();
|
|
||||||
const month = date.getMonth() + 1;
|
|
||||||
|
|
||||||
dispatch(fetchBirthdayReminders(month, day));
|
|
||||||
}
|
|
||||||
|
|
||||||
getHandlers() {
|
|
||||||
return {
|
|
||||||
open: this.handleOpenBirthdaysModal,
|
|
||||||
moveDown: this.props.onMoveDown,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
handleOpenBirthdaysModal = () => {
|
|
||||||
const { dispatch } = this.props;
|
|
||||||
|
|
||||||
dispatch(openModal('BIRTHDAYS'));
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMessage() {
|
|
||||||
const { birthdays, account } = this.props;
|
|
||||||
|
|
||||||
const link = (
|
|
||||||
<bdi>
|
|
||||||
<Link
|
|
||||||
className='text-gray-800 dark:text-gray-200 font-bold hover:underline'
|
|
||||||
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 a 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>
|
|
||||||
),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
renderMessageForScreenReader = () => {
|
|
||||||
const { intl, birthdays, account } = this.props;
|
|
||||||
|
|
||||||
if (birthdays.size === 1) {
|
|
||||||
return intl.formatMessage({ id: 'notification.birthday', defaultMessage: '{name} has a birthday today' }, { name: account.get('display_name') });
|
|
||||||
}
|
|
||||||
|
|
||||||
return intl.formatMessage(
|
|
||||||
{
|
|
||||||
id: 'notification.birthday_plural',
|
|
||||||
defaultMessage: '{name} and {more} have birthday today',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: account.get('display_name'),
|
|
||||||
more: intl.formatMessage(
|
|
||||||
{
|
|
||||||
id: 'notification.birthday.more',
|
|
||||||
defaultMessage: '{count} more {count, plural, one {friend} other {friends}}',
|
|
||||||
},
|
|
||||||
{ count: birthdays.size - 1 },
|
|
||||||
),
|
|
||||||
},
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { birthdays } = this.props;
|
|
||||||
|
|
||||||
if (!birthdays || birthdays.size === 0) return null;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<HotKeys handlers={this.getHandlers()}>
|
|
||||||
<div className='notification notification-birthday focusable' tabIndex='0' title={this.renderMessageForScreenReader()}>
|
|
||||||
<div className='p-4 focusable'>
|
|
||||||
<HStack alignItems='center' space={1.5}>
|
|
||||||
<Icon
|
|
||||||
src={require('@tabler/icons/icons/ballon.svg')}
|
|
||||||
className='text-primary-600'
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Text
|
|
||||||
theme='muted'
|
|
||||||
size='sm'
|
|
||||||
>
|
|
||||||
{this.renderMessage()}
|
|
||||||
</Text>
|
|
||||||
</HStack>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</HotKeys>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -9,10 +9,8 @@ import { Virtuoso } from 'react-virtuoso';
|
||||||
import { createSelector } from 'reselect';
|
import { createSelector } from 'reselect';
|
||||||
|
|
||||||
import { getSettings } from 'soapbox/actions/settings';
|
import { getSettings } from 'soapbox/actions/settings';
|
||||||
import BirthdayReminders from 'soapbox/components/birthday_reminders';
|
|
||||||
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
import PullToRefresh from 'soapbox/components/pull-to-refresh';
|
||||||
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
import PlaceholderNotification from 'soapbox/features/placeholder/components/placeholder_notification';
|
||||||
import { getFeatures } from 'soapbox/utils/features';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
expandNotifications,
|
expandNotifications,
|
||||||
|
@ -30,12 +28,6 @@ const messages = defineMessages({
|
||||||
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
queue: { id: 'notifications.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {notification} other {notifications}}' },
|
||||||
});
|
});
|
||||||
|
|
||||||
const Header = ({ context }) => (
|
|
||||||
context.showBirthdayReminders ? (
|
|
||||||
<BirthdayReminders onMoveDown={context.handleMoveBelowBirthdays} />
|
|
||||||
) : null
|
|
||||||
);
|
|
||||||
|
|
||||||
const Footer = ({ context }) => (
|
const Footer = ({ context }) => (
|
||||||
context.hasMore ? (
|
context.hasMore ? (
|
||||||
<PlaceholderNotification />
|
<PlaceholderNotification />
|
||||||
|
@ -71,10 +63,6 @@ const getNotifications = createSelector([
|
||||||
|
|
||||||
const mapStateToProps = state => {
|
const mapStateToProps = state => {
|
||||||
const settings = getSettings(state);
|
const settings = getSettings(state);
|
||||||
const instance = state.get('instance');
|
|
||||||
const features = getFeatures(instance);
|
|
||||||
const showBirthdayReminders = settings.getIn(['notifications', 'birthdays', 'show']) && settings.getIn(['notifications', 'quickFilter', 'active']) === 'all' && features.birthdays;
|
|
||||||
const birthdays = showBirthdayReminders && state.getIn(['user_lists', 'birthday_reminders', state.get('me')]);
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']),
|
showFilterBar: settings.getIn(['notifications', 'quickFilter', 'show']),
|
||||||
|
@ -83,8 +71,6 @@ const mapStateToProps = state => {
|
||||||
isUnread: state.getIn(['notifications', 'unread']) > 0,
|
isUnread: state.getIn(['notifications', 'unread']) > 0,
|
||||||
hasMore: state.getIn(['notifications', 'hasMore']),
|
hasMore: state.getIn(['notifications', 'hasMore']),
|
||||||
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
|
totalQueuedNotificationsCount: state.getIn(['notifications', 'totalQueuedNotificationsCount'], 0),
|
||||||
showBirthdayReminders,
|
|
||||||
hasBirthdays: !!birthdays,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -102,8 +88,6 @@ class Notifications extends React.PureComponent {
|
||||||
hasMore: PropTypes.bool,
|
hasMore: PropTypes.bool,
|
||||||
dequeueNotifications: PropTypes.func,
|
dequeueNotifications: PropTypes.func,
|
||||||
totalQueuedNotificationsCount: PropTypes.number,
|
totalQueuedNotificationsCount: PropTypes.number,
|
||||||
showBirthdayReminders: PropTypes.bool,
|
|
||||||
hasBirthdays: PropTypes.bool,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
|
@ -140,25 +124,15 @@ class Notifications extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMoveUp = id => {
|
handleMoveUp = id => {
|
||||||
const { hasBirthdays } = this.props;
|
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
|
||||||
|
|
||||||
let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) - 1;
|
|
||||||
if (hasBirthdays) elementIndex++;
|
|
||||||
this._selectChild(elementIndex, true);
|
this._selectChild(elementIndex, true);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMoveDown = id => {
|
handleMoveDown = id => {
|
||||||
const { hasBirthdays } = this.props;
|
const elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
|
||||||
|
|
||||||
let elementIndex = this.props.notifications.findIndex(item => item !== null && item.get('id') === id) + 1;
|
|
||||||
if (hasBirthdays) elementIndex++;
|
|
||||||
this._selectChild(elementIndex, false);
|
this._selectChild(elementIndex, false);
|
||||||
}
|
}
|
||||||
|
|
||||||
handleMoveBelowBirthdays = () => {
|
|
||||||
this._selectChild(1, false);
|
|
||||||
}
|
|
||||||
|
|
||||||
_selectChild(index, align_top) {
|
_selectChild(index, align_top) {
|
||||||
const container = this.column;
|
const container = this.column;
|
||||||
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
|
const element = container.querySelector(`article:nth-of-type(${index + 1}) .focusable`);
|
||||||
|
@ -183,7 +157,7 @@ class Notifications extends React.PureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount, showBirthdayReminders } = this.props;
|
const { intl, notifications, isLoading, hasMore, showFilterBar, totalQueuedNotificationsCount } = this.props;
|
||||||
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
|
const emptyMessage = <FormattedMessage id='empty_column.notifications' defaultMessage="You don't have any notifications yet. Interact with others to start the conversation." />;
|
||||||
|
|
||||||
const filterBarContainer = showFilterBar
|
const filterBarContainer = showFilterBar
|
||||||
|
@ -208,13 +182,10 @@ class Notifications extends React.PureComponent {
|
||||||
)}
|
)}
|
||||||
context={{
|
context={{
|
||||||
hasMore,
|
hasMore,
|
||||||
showBirthdayReminders,
|
|
||||||
handleMoveBelowBirthdays: this.handleMoveBelowBirthdays,
|
|
||||||
isLoading,
|
isLoading,
|
||||||
emptyMessage,
|
emptyMessage,
|
||||||
}}
|
}}
|
||||||
components={{
|
components={{
|
||||||
Header,
|
|
||||||
ScrollSeekPlaceholder: PlaceholderNotification,
|
ScrollSeekPlaceholder: PlaceholderNotification,
|
||||||
Footer,
|
Footer,
|
||||||
EmptyPlaceholder,
|
EmptyPlaceholder,
|
||||||
|
|
Ładowanie…
Reference in New Issue