Merge branch 'refetch-birthdays' into 'develop'

Refetch birthday reminders on midnight

See merge request soapbox-pub/soapbox-fe!1705

app/soapbox/actions/accounts.ts

@@ -946,7 +946,7 @@ const fetchBirthdayReminders = (month: number, day: number) =>
 
     dispatch({ type: BIRTHDAY_REMINDERS_FETCH_REQUEST, day, month, id: me });
 
-    api(getState).get('/api/v1/pleroma/birthdays', { params: { day, month } }).then(response => {
+    return api(getState).get('/api/v1/pleroma/birthdays', { params: { day, month } }).then(response => {
       dispatch(importFetchedAccounts(response.data));
       dispatch({
         type: BIRTHDAY_REMINDERS_FETCH_SUCCESS,

app/soapbox/components/birthday-panel.tsx

@@ -1,30 +1,50 @@
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
-import * as React from 'react';
+import React, { useRef } 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';
+import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+
+const timeToMidnight = () => {
+  const now = new Date();
+  const midnight = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 0);
+
+  return midnight.getTime() - now.getTime();
+};
 
 interface IBirthdayPanel {
   limit: number
 }
 
 const BirthdayPanel = ({ limit }: IBirthdayPanel) => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
 
   const birthdays: ImmutableOrderedSet<string> = useAppSelector(state => state.user_lists.birthday_reminders.get(state.me as string)?.items || ImmutableOrderedSet());
   const birthdaysToRender = birthdays.slice(0, limit);
 
-  React.useEffect(() => {
+  const timeout = useRef<NodeJS.Timeout>();
+
+  const handleFetchBirthdayReminders = () => {
     const date = new Date();
 
     const day = date.getDate();
     const month = date.getMonth() + 1;
 
-    dispatch(fetchBirthdayReminders(month, day));
+    dispatch(fetchBirthdayReminders(month, day))?.then(() => {
+      timeout.current = setTimeout(() => handleFetchBirthdayReminders(), timeToMidnight());
+    });
+  };
+
+  React.useEffect(() => {
+    handleFetchBirthdayReminders();
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
   }, []);
 
   if (birthdaysToRender.isEmpty()) {