diff --git a/ui/page/notifications/index.js b/ui/page/notifications/index.js index 996016075..e0e57b1a3 100644 --- a/ui/page/notifications/index.js +++ b/ui/page/notifications/index.js @@ -9,7 +9,12 @@ import { } from 'redux/selectors/notifications'; import { doCommentReactList } from 'redux/actions/comments'; import { selectActiveChannelClaim } from 'redux/selectors/app'; -import { doReadNotifications, doNotificationList, doSeeAllNotifications } from 'redux/actions/notifications'; +import { + doReadNotifications, + doNotificationList, + doSeeAllNotifications, + doNotificationCategories, +} from 'redux/actions/notifications'; import NotificationsPage from './view'; const select = (state) => ({ @@ -25,6 +30,7 @@ const select = (state) => ({ export default connect(select, { doReadNotifications, doNotificationList, + doNotificationCategories, doSeeAllNotifications, doCommentReactList, })(NotificationsPage); diff --git a/ui/page/notifications/view.jsx b/ui/page/notifications/view.jsx index 95f390787..e87bace4c 100644 --- a/ui/page/notifications/view.jsx +++ b/ui/page/notifications/view.jsx @@ -23,6 +23,7 @@ type Props = { doSeeAllNotifications: () => void, doReadNotifications: () => void, doNotificationList: (?Array) => void, + doNotificationCategories: () => void, activeChannel: ?ChannelClaim, doCommentReactList: (Array) => Promise, }; @@ -37,6 +38,7 @@ export default function NotificationsPage(props: Props) { doSeeAllNotifications, doReadNotifications, doNotificationList, + doNotificationCategories, notificationCategories, activeChannel, doCommentReactList, @@ -79,7 +81,7 @@ export default function NotificationsPage(props: Props) { } }, [unseenCount, doSeeAllNotifications]); - const stringifiedNotificationCategories = JSON.stringify(notificationCategories); + const stringifiedNotificationCategories = notificationCategories ? JSON.stringify(notificationCategories) : ''; React.useEffect(() => { if (stringifiedNotificationCategories) { const arrayNotificationCategories = JSON.parse(stringifiedNotificationCategories); @@ -100,6 +102,12 @@ export default function NotificationsPage(props: Props) { } }, [name, notifications, stringifiedNotificationCategories]); + React.useEffect(() => { + if (!notificationCategories) { + doNotificationCategories(); + } + }, []); + const notificationListElement = ( <> diff --git a/ui/redux/actions/notifications.js b/ui/redux/actions/notifications.js index d839d2867..f092c0bf7 100644 --- a/ui/redux/actions/notifications.js +++ b/ui/redux/actions/notifications.js @@ -46,10 +46,7 @@ export function doDismissError() { } export function doNotificationList(types?: Array, resolve: boolean = true) { - return async (dispatch: Dispatch, getState: GetState) => { - const state = getState(); - const notificationTypes = selectNotificationCategories(state); - + return async (dispatch: Dispatch) => { dispatch({ type: ACTIONS.NOTIFICATION_LIST_STARTED }); let params: any = { is_app_readable: true }; @@ -58,18 +55,6 @@ export function doNotificationList(types?: Array, resolve: boolean = tru } try { - if (!notificationTypes) { - const notificationCategories = await Lbryio.call('notification', 'categories'); - if (notificationCategories) { - dispatch({ - type: ACTIONS.NOTIFICATION_CATEGORIES_COMPLETED, - data: { - notificationCategories: notificationCategories.reverse(), - }, - }); - } - } - return Lbryio.call('notification', 'list', params).then((response) => { const notifications = response || []; @@ -111,6 +96,25 @@ export function doNotificationList(types?: Array, resolve: boolean = tru }; } +export function doNotificationCategories() { + return async (dispatch: Dispatch, getState: GetState) => { + const state = getState(); + const categoriesFetched = Boolean(selectNotificationCategories(state)); + + if (!categoriesFetched) { + const notificationCategories = await Lbryio.call('notification', 'categories'); + if (notificationCategories) { + dispatch({ + type: ACTIONS.NOTIFICATION_CATEGORIES_COMPLETED, + data: { + notificationCategories: notificationCategories.reverse(), + }, + }); + } + } + }; +} + export function doReadNotifications(notificationsIds: Array) { return (dispatch: Dispatch, getState: GetState) => { const state = getState();