Add BirthdayPanel

app/soapbox/actions/accounts.js

@@ -1035,7 +1035,7 @@ export function accountLookup(acct, cancelToken) {
   };
 }
 
-export function fetchBirthdayReminders(day, month) {
+export function fetchBirthdayReminders(month, day) {
   return (dispatch, getState) => {
     if (!isLoggedIn(getState)) return;
 

app/soapbox/components/account.tsx

@@ -175,7 +175,7 @@ const Account = ({
               <Text theme='muted' size='sm' truncate>@{username}</Text>
 
               {favicon && (
-                <Link to={`/timeline/${domain}`} className='w-4 h-4'>
+                <Link to={`/timeline/${domain}`} className='w-4 h-4 flex-none'>
                   <img src={favicon} alt='' title={domain} className='w-full max-h-full' />
                 </Link>
               )}

app/soapbox/components/birthday-panel.tsx

@@ -0,0 +1,47 @@
+import { OrderedSet as ImmutableOrderedSet } from 'immutable';
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+import { useDispatch } from 'react-redux';
+
+import { fetchBirthdayReminders } from 'soapbox/actions/accounts';
+import { Widget } from 'soapbox/components/ui';
+import AccountContainer from 'soapbox/containers/account_container';
+import { useAppSelector } from 'soapbox/hooks';
+
+interface IBirthdayPanel {
+  limit: number
+}
+
+const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
+  const dispatch = useDispatch();
+
+  const birthdays: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.getIn(['birthday_reminders', state.me], ImmutableOrderedSet()));
+  const birthdaysToRender = birthdays.slice(0, limit);
+
+  React.useEffect(() => {
+    const date = new Date();
+
+    const day = date.getDate();
+    const month = date.getMonth() + 1;
+
+    dispatch(fetchBirthdayReminders(month, day));
+  }, []);
+
+  if (birthdaysToRender.isEmpty()) {
+    return null;
+  }
+
+  return (
+    <Widget title={<FormattedMessage id='birthday_panel.title' defaultMessage='Birthdays' />}>
+      {birthdaysToRender.map(accountId => (
+        <AccountContainer
+          key={accountId}
+          // @ts-ignore: TS thinks `id` is passed to <Account>, but it isn't
+          id={accountId}
+        />
+      ))}
+    </Widget>
+  );
+};
+
+export default BirthdayPanel;

app/soapbox/components/birthday_reminders.js

@@ -51,7 +51,7 @@ class BirthdayReminders extends ImmutablePureComponent {
     const day = date.getDate();
     const month = date.getMonth() + 1;
 
-    dispatch(fetchBirthdayReminders(day, month));
+    dispatch(fetchBirthdayReminders(month, day));
   }
 
   getHandlers() {

app/soapbox/features/edit_profile/index.js

@@ -150,6 +150,7 @@ class EditProfile extends ImmutablePureComponent {
       display_name: state.display_name,
       website: state.website,
       location: state.location,
+      birthday: state.birthday,
       note: state.note,
       avatar: state.avatar_file,
       header: state.header_file,
@@ -263,6 +264,18 @@ class EditProfile extends ImmutablePureComponent {
             />
           </FormGroup>
 
+          {features.birthdays && (
+            <FormGroup
+              labelText={<FormattedMessage id='edit_profile.fields.birthday_label' defaultMessage='Birthday' />}
+            >
+              <Input
+                name='birthday'
+                value={this.state.birthday}
+                onChange={this.handleTextChange}
+              />
+            </FormGroup>
+          )}
+
           {features.accountLocation && (
             <FormGroup
               labelText={<FormattedMessage id='edit_profile.fields.location_label' defaultMessage='Location' />}

app/soapbox/features/ui/util/async-components.js

@@ -222,6 +222,10 @@ export function BirthdaysModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/birthdays_modal');
 }
 
+export function BirthdayPanel() {
+  return import(/* webpackChunkName: "features/ui" */'../../../components/birthday-panel');
+}
+
 export function AccountNoteModal() {
   return import(/* webpackChunkName: "features/ui" */'../components/account_note_modal');
 }

app/soapbox/pages/home_page.js

@@ -11,6 +11,7 @@ import {
   TrendsPanel,
   SignUpPanel,
   CryptoDonatePanel,
+  BirthdayPanel,
 } from 'soapbox/features/ui/util/async-components';
 // import GroupSidebarPanel from '../features/groups/sidebar_panel';
 import { getFeatures } from 'soapbox/utils/features';
@@ -93,6 +94,11 @@ class HomePage extends ImmutablePureComponent {
               {Component => <Component limit={cryptoLimit} />}
             </BundleContainer>
           )}
+          {features.birthdays && (
+            <BundleContainer fetchComponent={BirthdayPanel}>
+              {Component => <Component limit={10} />}
+            </BundleContainer>
+          )}
           {features.suggestions && (
             <BundleContainer fetchComponent={WhoToFollowPanel}>
               {Component => <Component limit={5} />}