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(() => {
-    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,
           })}

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;