Defer notification/categories

## Ticket
Part of "#385 Defer api.odysee.com calls to their respective pages / install new"

## Change
Pull out `notification/categories` from `doNotificationList` and fetch it in Notifications Page. I don't there there are other places that need it for now.

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);

ui/page/notifications/view.jsx

@@ -23,6 +23,7 @@ type Props = {
   doSeeAllNotifications: () => void,
   doReadNotifications: () => void,
   doNotificationList: (?Array<string>) => void,
+  doNotificationCategories: () => void,
   activeChannel: ?ChannelClaim,
   doCommentReactList: (Array<string>) => Promise<any>,
 };
@@ -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 = (
     <>
       <BrowserNotificationBanner />

ui/redux/actions/notifications.js

@@ -46,10 +46,7 @@ export function doDismissError() {
 }
 
 export function doNotificationList(types?: Array<string>, 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<string>, 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<string>, 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<number>) {
   return (dispatch: Dispatch, getState: GetState) => {
     const state = getState();