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 = ({
@{username}
{favicon && (
-
+
)}
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 = 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 (
+ }>
+ {birthdaysToRender.map(accountId => (
+ , but it isn't
+ id={accountId}
+ />
+ ))}
+
+ );
+};
+
+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 {
/>
+ {features.birthdays && (
+ }
+ >
+
+
+ )}
+
{features.accountLocation && (
}
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 => }
)}
+ {features.birthdays && (
+
+ {Component => }
+
+ )}
{features.suggestions && (
{Component => }