Add BirthdayPanel
This commit is contained in:
parent
97b5c5af43
commit
67b0b6a317
7 changed files with 48 additions and 1 deletions
Binary file not shown.
|
@ -175,7 +175,7 @@ const Account = ({
|
||||||
<Text theme='muted' size='sm' truncate>@{username}</Text>
|
<Text theme='muted' size='sm' truncate>@{username}</Text>
|
||||||
|
|
||||||
{favicon && (
|
{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' />
|
<img src={favicon} alt='' title={domain} className='w-full max-h-full' />
|
||||||
</Link>
|
</Link>
|
||||||
)}
|
)}
|
||||||
|
|
47
app/soapbox/components/birthday-panel.tsx
Normal file
47
app/soapbox/components/birthday-panel.tsx
Normal file
|
@ -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;
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Loading…
Reference in a new issue