Signed-off-by: marcin mikołajczak <git@mkljczk.pl>merge-requests/1000/head
parent
409cb3819e
commit
d6f0023cc9
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
Loading…
Reference in new issue