lbry-desktop/ui/page/notifications/view.jsx

95 lines
2.9 KiB
React
Raw Normal View History

2020-07-23 16:22:57 +02:00
// @flow
2020-08-11 22:32:03 +02:00
import * as ICONS from 'constants/icons';
2020-07-23 16:22:57 +02:00
import React from 'react';
import Page from 'component/page';
import Card from 'component/common/card';
import Spinner from 'component/spinner';
import Notification from 'component/notification';
2020-08-11 22:32:03 +02:00
import Button from 'component/button';
2020-08-21 21:44:54 +02:00
import Yrbl from 'component/yrbl';
import usePrevious from 'effects/use-previous';
2020-07-23 16:22:57 +02:00
type Props = {
2020-08-21 21:44:54 +02:00
notifications: Array<Notification>,
2020-07-23 16:22:57 +02:00
fetching: boolean,
2020-08-10 22:47:39 +02:00
unreadCount: number,
2020-08-21 21:44:54 +02:00
unseenCount: number,
doSeeAllNotifications: () => void,
2020-08-10 22:47:39 +02:00
doReadNotifications: () => void,
2020-07-23 16:22:57 +02:00
};
export default function NotificationsPage(props: Props) {
2020-08-21 21:44:54 +02:00
const { notifications, fetching, unreadCount, unseenCount, doSeeAllNotifications, doReadNotifications } = props;
const [hasFetched, setHasFetched] = React.useState(false);
const previousFetching = usePrevious(fetching);
const hasNotifications = notifications.length > 0;
2020-08-10 22:47:39 +02:00
React.useEffect(() => {
if (unreadCount > 0) {
doReadNotifications();
}
}, [unreadCount, doReadNotifications]);
2020-08-21 21:44:54 +02:00
React.useEffect(() => {
if ((fetching === false && previousFetching === true) || hasNotifications) {
setHasFetched(true);
}
}, [fetching, previousFetching, setHasFetched, hasNotifications]);
2020-07-23 16:22:57 +02:00
return (
<Page>
2020-08-21 21:44:54 +02:00
{fetching && !hasNotifications && (
2020-07-23 16:22:57 +02:00
<div className="main--empty">
<Spinner delayed />
</div>
)}
2020-08-21 21:44:54 +02:00
{hasFetched && (
<>
{notifications && notifications.length > 0 ? (
<Card
isBodyList
title={
<span>
{__('Notifications')}
{fetching && <Spinner type="small" />}
</span>
}
titleActions={
unseenCount > 0 && (
<Button
icon={ICONS.EYE}
onClick={doSeeAllNotifications}
button="secondary"
label={__('Mark all as read')}
/>
)
}
body={
<div className="notification_list">
{notifications.map((notification, index) => {
return <Notification key={notification.id} notification={notification} />;
})}
</div>
}
/>
) : (
<div className="main--empty">
<Yrbl
title={__('No Notifications')}
subtitle={
<div>
<p>{__("You don't have any notifications yet, but they will be here when you do!")}</p>
<div className="section__actions">
<Button button="primary" icon={ICONS.HOME} label={__('Go Home')} navigate="/" />
</div>
</div>
}
2020-08-21 21:44:54 +02:00
/>
2020-07-23 16:22:57 +02:00
</div>
2020-08-21 21:44:54 +02:00
)}
</>
2020-07-23 16:22:57 +02:00
)}
</Page>
);
}