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