From dc3c2733118c1fbdc7559cd49b1451f717b2a63e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 17 Apr 2022 23:27:33 +0200
Subject: [PATCH] Birthdays modal to TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/features/birthdays/account.tsx    | 16 ++--
 .../ui/components/account_note_modal.js       | 50 ++++------
 .../features/ui/components/birthdays_modal.js | 96 -------------------
 .../ui/components/birthdays_modal.tsx         | 51 ++++++++++
 4 files changed, 79 insertions(+), 134 deletions(-)
 delete mode 100644 app/soapbox/features/ui/components/birthdays_modal.js
 create mode 100644 app/soapbox/features/ui/components/birthdays_modal.tsx

diff --git a/app/soapbox/features/birthdays/account.tsx b/app/soapbox/features/birthdays/account.tsx
index e72499b3d..94b7e08a6 100644
--- a/app/soapbox/features/birthdays/account.tsx
+++ b/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(() => {
-    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,
           })}
diff --git a/app/soapbox/features/ui/components/account_note_modal.js b/app/soapbox/features/ui/components/account_note_modal.js
index 166e39f60..2c7ed11ed 100644
--- a/app/soapbox/features/ui/components/account_note_modal.js
+++ b/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 { 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>
     );
   }
 
diff --git a/app/soapbox/features/ui/components/birthdays_modal.js b/app/soapbox/features/ui/components/birthdays_modal.js
deleted file mode 100644
index 904d06a20..000000000
--- a/app/soapbox/features/ui/components/birthdays_modal.js
+++ /dev/null
@@ -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>
-    );
-  }
-
-}
diff --git a/app/soapbox/features/ui/components/birthdays_modal.tsx b/app/soapbox/features/ui/components/birthdays_modal.tsx
new file mode 100644
index 000000000..8977c95ee
--- /dev/null
+++ b/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;