From 67b0b6a317122d0be8856422c7f21bcff37a4005 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Mon, 18 Apr 2022 23:30:40 -0500
Subject: [PATCH] Add BirthdayPanel

---
 app/soapbox/actions/accounts.js               |  2 +-
 app/soapbox/components/account.tsx            |  2 +-
 app/soapbox/components/birthday-panel.tsx     | 47 +++++++++++++++++++
 app/soapbox/components/birthday_reminders.js  |  2 +-
 app/soapbox/features/edit_profile/index.js    | 13 +++++
 .../features/ui/util/async-components.js      |  4 ++
 app/soapbox/pages/home_page.js                |  6 +++
 7 files changed, 73 insertions(+), 3 deletions(-)
 create mode 100644 app/soapbox/components/birthday-panel.tsx

diff --git a/app/soapbox/actions/accounts.js b/app/soapbox/actions/accounts.js
index 23aad5601..1005af838 100644
--- a/app/soapbox/actions/accounts.js
+++ b/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;
 
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index ab9c7af68..ccdc10578 100644
--- a/app/soapbox/components/account.tsx
+++ b/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>
               )}
diff --git a/app/soapbox/components/birthday-panel.tsx b/app/soapbox/components/birthday-panel.tsx
new file mode 100644
index 000000000..6008cb423
--- /dev/null
+++ b/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;
diff --git a/app/soapbox/components/birthday_reminders.js b/app/soapbox/components/birthday_reminders.js
index d57452150..aa50a2fec 100644
--- a/app/soapbox/components/birthday_reminders.js
+++ b/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() {
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js
index b683e8f19..fe0c66882 100644
--- a/app/soapbox/features/edit_profile/index.js
+++ b/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' />}
diff --git a/app/soapbox/features/ui/util/async-components.js b/app/soapbox/features/ui/util/async-components.js
index 9f031adbc..17f54d3f4 100644
--- a/app/soapbox/features/ui/util/async-components.js
+++ b/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');
 }
diff --git a/app/soapbox/pages/home_page.js b/app/soapbox/pages/home_page.js
index e8a12a5d8..e9b6630aa 100644
--- a/app/soapbox/pages/home_page.js
+++ b/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} />}