Modal improvements, profile information

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/birthday_reminders.js

@@ -1,6 +1,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import { HotKeys } from 'react-hotkeys';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { injectIntl, FormattedMessage } from 'react-intl';
@@ -51,6 +52,12 @@ class BirthdayReminders extends ImmutablePureComponent {
     dispatch(fetchBirthdayReminders(day, month));
   }
 
+  getHandlers() {
+    return {
+      open: this.handleOpenBirthdaysModal,
+    };
+  }
+
   handleOpenBirthdaysModal = () => {
     const { dispatch } = this.props;
 
@@ -101,7 +108,8 @@ class BirthdayReminders extends ImmutablePureComponent {
     if (!birthdays || birthdays.size === 0) return null;
 
     return (
-      <div className='notification notification-birthday focusable'>
+      <HotKeys handlers={this.getHandlers()}>
+        <div className='notification notification-birthday'>
           <div className='notification__message'>
             <div className='notification__icon-wrapper'>
               <Icon src={require('@tabler/icons/icons/ballon.svg')} />
@@ -112,6 +120,7 @@ class BirthdayReminders extends ImmutablePureComponent {
             </span>
           </div>
         </div>
+      </HotKeys>
     );
   }
 

app/soapbox/features/birthdays/account.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import ImmutablePropTypes from 'react-immutable-proptypes';
+import ImmutablePureComponent from 'react-immutable-pure-component';
+import { defineMessages, injectIntl } from 'react-intl';
+import { connect } from 'react-redux';
+
+import Avatar from 'soapbox/components/avatar';
+import DisplayName from 'soapbox/components/display_name';
+import Icon from 'soapbox/components/icon';
+import Permalink from 'soapbox/components/permalink';
+import { makeGetAccount } from 'soapbox/selectors';
+
+const messages = defineMessages({
+  birthDate: { id: 'account.birth_date', defaultMessage: 'Birth date: {date}' },
+});
+
+const makeMapStateToProps = () => {
+  const getAccount = makeGetAccount();
+
+  const mapStateToProps = (state, { accountId }) => {
+    const account = getAccount(state, accountId);
+
+    return {
+      account,
+    };
+  };
+
+  return mapStateToProps;
+};
+
+export default @connect(makeMapStateToProps)
+@injectIntl
+class Account extends ImmutablePureComponent {
+
+  static propTypes = {
+    accountId: PropTypes.string.isRequired,
+    intl: PropTypes.object.isRequired,
+    account: ImmutablePropTypes.map,
+  };
+
+  static defaultProps = {
+    added: false,
+  };
+
+  componentDidMount() {
+    const { account, accountId } = this.props;
+
+    if (accountId && !account) {
+      this.props.fetchAccount(accountId);
+    }
+  }
+
+  render() {
+    const { account, intl } = this.props;
+
+    if (!account) return null;
+
+    const birthDate = account.getIn(['pleroma', 'birth_date']);
+    if (!birthDate) return null;
+
+    const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'short', year: 'numeric' });
+
+    return (
+      <div className='account'>
+        <div className='account__wrapper'>
+          <Permalink className='account__display-name' title={account.get('acct')} href={`/@${account.get('acct')}`} to={`/@${account.get('acct')}`}>
+            <div className='account__display-name'>
+              <div className='account__avatar-wrapper'><Avatar account={account} size={36} /></div>
+              <DisplayName account={account} />
+
+            </div>
+          </Permalink>
+          <div
+            className='account__birth-date'
+            title={intl.formatMessage(messages.birthDate, {
+              date: formattedBirthDate,
+            })}
+          >
+            <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+            {formattedBirthDate}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+}

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

@@ -7,7 +7,7 @@ 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';
+import Account from 'soapbox/features/birthdays/account';
 
 const messages = defineMessages({
   close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -69,7 +69,7 @@ class BirthdaysModal extends React.PureComponent {
           emptyMessage={emptyMessage}
         >
           {accountIds.map(id =>
-            <AccountContainer key={id} id={id} withNote={false} />,
+            <Account key={id} accountId={id} withNote={false} />,
           )}
         </ScrollableList>
       );

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

@@ -80,6 +80,41 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     return badges;
   }
 
+  getBirthDate = () => {
+    const { account, intl } = this.props;
+
+    const birthDate = account.getIn(['pleroma', 'birth_date']);
+    if (!birthDate) return null;
+
+    const formattedBirthDate = intl.formatDate(birthDate, { day: 'numeric', month: 'long', year: 'numeric' });
+
+    const date = new Date(birthDate);
+    const today = new Date();
+
+    const hasBirthday = date.getDate() === today.getDate() && date.getMonth() === today.getMonth();
+
+    if (hasBirthday) {
+      return (
+        <div className='profile-info-panel-content__birth-date' title={formattedBirthDate}>
+          <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+          <FormattedMessage
+            id='account.birthday' defaultMessage='Has birthday today!'
+          />
+        </div>
+      );
+    }
+    return (
+      <div className='profile-info-panel-content__birth-date'>
+        <Icon src={require('@tabler/icons/icons/ballon.svg')} />
+        <FormattedMessage
+          id='account.birth_date' defaultMessage='Birth date: {date}' values={{
+            date: formattedBirthDate,
+          }}
+        />
+      </div>
+    );
+  }
+
   render() {
     const { account, displayFqn, intl, identity_proofs, username } = this.props;
 
@@ -103,7 +138,6 @@ class ProfileInfoPanel extends ImmutablePureComponent {
     const deactivated = !account.getIn(['pleroma', 'is_active'], true);
     const displayNameHtml = deactivated ? { __html: intl.formatMessage(messages.deactivated) } : { __html: account.get('display_name_html') };
     const memberSinceDate = intl.formatDate(account.get('created_at'), { month: 'long', year: 'numeric' });
-    const birthDate = account.getIn(['pleroma', 'birth_date']) && intl.formatDate(account.getIn(['pleroma', 'birth_date']), { day: 'numeric', month: 'long', year: 'numeric' });
     const verified = isVerified(account);
     const badges = this.getBadges();
 
@@ -151,14 +185,7 @@ class ProfileInfoPanel extends ImmutablePureComponent {
             />
           </div>}
 
-          {birthDate && <div className='profile-info-panel-content__birth-date'>
-            <Icon src={require('@tabler/icons/icons/ballon.svg')} />
-            <FormattedMessage
-              id='account.birth_date' defaultMessage='Birth date: {date}' values={{
-                date: birthDate,
-              }}
-            />
-          </div>}
+          {this.getBirthDate()}
 
           <ProfileStats
             className='profile-info-panel-content__stats'

app/soapbox/reducers/__tests__/user_lists-test.js

@@ -16,6 +16,7 @@ describe('user_lists reducer', () => {
       groups: ImmutableMap(),
       groups_removed_accounts: ImmutableMap(),
       pinned: ImmutableMap(),
+      birthday_reminders: ImmutableMap(),
     }));
   });
 });

app/styles/accounts.scss

@@ -554,3 +554,9 @@ a .account__avatar {
     padding-right: 3px;
   }
 }
+
+.account__birth-date {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}

docs/store.md

@@ -126,7 +126,8 @@ If it's not documented, it's because I inherited it from Mastodon and I don't kn
      groups: {},
      followers: {},
      mutes: {},
-     favourited_by: {}
+     favourited_by: {},
+     birthday_reminders: {}
    }
     ```