Merge branch 'next_' into 'next'

Birthdays modal to TS/FC

See merge request soapbox-pub/soapbox-fe!1238

app/soapbox/features/birthdays/account.tsx

@@ -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(() => {
+  // useEffect(() => {
-    if (accountId && !account) {
+  //   if (accountId && !account) {
-      fetchAccount(accountId);
+  //     fetchAccount(accountId);
-    }
+  //   }
-  }, [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,
           })}

app/soapbox/features/ui/components/account_note_modal.js

@@ -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 { Modal, Text } from 'soapbox/components/ui';
-import { Button } 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,19 +70,20 @@ class AccountNoteModal extends React.PureComponent {
     }
   }
 
-
   render() {
     const { account, isSubmitting, comment, onClose, intl } = this.props;
 
     return (
-      <div className='modal-root__modal account-note-modal'>
+      <Modal
-        <div className='account-note-modal__header'>
+        title={<FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account.get('acct') }} />}
-          <Icon src={require('@tabler/icons/icons/note.svg')} />
+        onClose={onClose}
-          <FormattedMessage id='account_note.target' defaultMessage='Note for @{target}' values={{ target: account.get('acct') }} />
+        confirmationAction={this.handleSubmit}
-        </div>
+        confirmationText={intl.formatMessage(messages.save)}
-
+        confirmationDisabled={isSubmitting}
-        <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>
+        <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>
 
         <textarea
           className='setting-text light'
@@ -95,14 +94,7 @@ class AccountNoteModal extends React.PureComponent {
           disabled={isSubmitting}
           autoFocus
         />
-        </div>
+      </Modal>
-        <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>
     );
   }
 

app/soapbox/features/ui/components/birthdays_modal.js

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

app/soapbox/features/ui/components/birthdays_modal.tsx

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