Birthdays modal to TS
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
parent
239e4b9d61
commit
dc3c273311
4 changed files with 79 additions and 134 deletions
|
|
@ -1,5 +1,4 @@
|
|||
import React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { defineMessages, useIntl } from 'react-intl';
|
||||
|
||||
import Avatar from 'soapbox/components/avatar';
|
||||
|
|
@ -17,18 +16,17 @@ const getAccount = makeGetAccount();
|
|||
|
||||
interface IAccount {
|
||||
accountId: string,
|
||||
fetchAccount: (id: string) => void,
|
||||
}
|
||||
|
||||
const Account: React.FC<IAccount> = ({ accountId, fetchAccount }) => {
|
||||
const Account: React.FC<IAccount> = ({ accountId }) => {
|
||||
const intl = useIntl();
|
||||
const account = useAppSelector((state) => getAccount(state, accountId));
|
||||
|
||||
useEffect(() => {
|
||||
if (accountId && !account) {
|
||||
fetchAccount(accountId);
|
||||
}
|
||||
}, [accountId]);
|
||||
// useEffect(() => {
|
||||
// if (accountId && !account) {
|
||||
// fetchAccount(accountId);
|
||||
// }
|
||||
// }, [accountId]);
|
||||
|
||||
if (!account) return null;
|
||||
|
||||
|
|
@ -48,7 +46,7 @@ const Account: React.FC<IAccount> = ({ accountId, fetchAccount }) => {
|
|||
</div>
|
||||
</Permalink>
|
||||
<div
|
||||
className='account__birthday'
|
||||
className='flex items-center gap-0.5'
|
||||
title={intl.formatMessage(messages.birthday, {
|
||||
date: formattedBirthday,
|
||||
})}
|
||||
|
|
|
|||
|
|
@ -5,13 +5,11 @@ import { connect } from 'react-redux';
|
|||
|
||||
import { changeAccountNoteComment, submitAccountNote } from 'soapbox/actions/account_notes';
|
||||
import { closeModal } from 'soapbox/actions/modals';
|
||||
import Icon from 'soapbox/components/icon';
|
||||
import { Button } from 'soapbox/components/ui';
|
||||
import { Modal, Text } from 'soapbox/components/ui';
|
||||
import { makeGetAccount } from 'soapbox/selectors';
|
||||
|
||||
|
||||
const messages = defineMessages({
|
||||
close: { id: 'lightbox.close', defaultMessage: 'Close' },
|
||||
placeholder: { id: 'account_note.placeholder', defaultMessage: 'No comment provided' },
|
||||
save: { id: 'account_note.save', defaultMessage: 'Save' },
|
||||
});
|
||||
|
|
@ -72,37 +70,31 @@ class AccountNoteModal extends React.PureComponent {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
const { account, isSubmitting, comment, onClose, intl } = this.props;
|
||||
|
||||
return (
|
||||
<div className='modal-root__modal account-note-modal'>
|
||||
<div className='account-note-modal__header'>
|
||||
<Icon src={require('@tabler/icons/icons/note.svg')} />
|
||||
<FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account.get('acct') }} />
|
||||
</div>
|
||||
<Modal
|
||||
title={<FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account.get('acct') }} />}
|
||||
onClose={onClose}
|
||||
confirmationAction={this.handleSubmit}
|
||||
confirmationText={intl.formatMessage(messages.save)}
|
||||
confirmationDisabled={isSubmitting}
|
||||
>
|
||||
<Text theme='muted'>
|
||||
<FormattedMessage id='account_note.hint' defaultMessage='You can keep notes about this user for yourself (this will not be shared with them):' />
|
||||
</Text>
|
||||
|
||||
<div className='account-note-modal__container'>
|
||||
<p><FormattedMessage id='account_note.hint' defaultMessage='You can keep notes about this user for yourself (this will not be shared with them):' /></p>
|
||||
|
||||
<textarea
|
||||
className='setting-text light'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={this.handleCommentChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
disabled={isSubmitting}
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
<div className='account-note-modal__action-bar'>
|
||||
<Button onClick={onClose} className='account-note-modal__cancel-button'>
|
||||
<FormattedMessage id='confirmation_modal.cancel' defaultMessage='Cancel' />
|
||||
</Button>
|
||||
<Button text={intl.formatMessage(messages.save)} onClick={this.handleSubmit} disabled={isSubmitting} />
|
||||
</div>
|
||||
</div>
|
||||
<textarea
|
||||
className='setting-text light'
|
||||
placeholder={intl.formatMessage(messages.placeholder)}
|
||||
value={comment}
|
||||
onChange={this.handleCommentChange}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
disabled={isSubmitting}
|
||||
autoFocus
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,96 +0,0 @@
|
|||
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 { withRouter } from 'react-router-dom';
|
||||
|
||||
import IconButton from 'soapbox/components/icon_button';
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Spinner } from 'soapbox/components/ui';
|
||||
import Account from 'soapbox/features/birthdays/account';
|
||||
|
||||
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
|
||||
@withRouter
|
||||
class BirthdaysModal extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
onClose: PropTypes.func.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
accountIds: ImmutablePropTypes.orderedSet,
|
||||
history: PropTypes.object,
|
||||
};
|
||||
|
||||
componentDidMount() {
|
||||
this.unlistenHistory = this.props.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 = <Spinner />;
|
||||
} 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 =>
|
||||
<Account key={id} accountId={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>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
51
app/soapbox/features/ui/components/birthdays_modal.tsx
Normal file
51
app/soapbox/features/ui/components/birthdays_modal.tsx
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
import React from 'react';
|
||||
import { FormattedMessage } from 'react-intl';
|
||||
|
||||
import ScrollableList from 'soapbox/components/scrollable_list';
|
||||
import { Modal, Spinner } from 'soapbox/components/ui';
|
||||
import Account from 'soapbox/features/birthdays/account';
|
||||
import { useAppSelector } from 'soapbox/hooks';
|
||||
|
||||
interface IBirthdaysModal {
|
||||
onClose: (string: string) => void,
|
||||
}
|
||||
|
||||
const BirthdaysModal = ({ onClose }: IBirthdaysModal) => {
|
||||
const accountIds = useAppSelector<string[]>(state => state.user_lists.getIn(['birthday_reminders', state.me]));
|
||||
|
||||
const onClickClose = () => {
|
||||
onClose('BIRTHDAYS');
|
||||
};
|
||||
|
||||
let body;
|
||||
|
||||
if (!accountIds) {
|
||||
body = <Spinner />;
|
||||
} 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}
|
||||
className='space-y-3'
|
||||
>
|
||||
{accountIds.map(id =>
|
||||
<Account key={id} accountId={id} />,
|
||||
)}
|
||||
</ScrollableList>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={<FormattedMessage id='column.birthdays' defaultMessage='Birthdays' />}
|
||||
onClose={onClickClose}
|
||||
>
|
||||
{body}
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default BirthdaysModal;
|
||||
Loading…
Reference in a new issue