Fix notification target for some types (#1790)

## Ticket
"1742 Notification popup: incorrect target"

Commentron uses old links for some of the notification types.

## Change
Factored out the code that determines the new target and use it both Notifications Page and Popup Menu.

ui/component/headerNotificationButton/view.jsx

@@ -9,7 +9,6 @@ import Icon from 'component/common/icon';
 import NotificationBubble from 'component/notificationBubble';
 import React from 'react';
 import Tooltip from 'component/common/tooltip';
-import { formatLbryUrlForWeb } from 'util/url';
 import Notification from 'component/notification';
 import DateTime from 'component/dateTime';
 import ChannelThumbnail from 'component/channelThumbnail';
@@ -18,6 +17,7 @@ import Button from 'component/button';
 import ClickAwayListener from '@mui/material/ClickAwayListener';
 import { RULE } from 'constants/notifications';
 import UriIndicator from 'component/uriIndicator';
+import { getNotificationLink } from '../notification/helpers/target';
 import { generateNotificationTitle } from '../notification/helpers/title';
 import { generateNotificationText } from '../notification/helpers/text';
 import { parseURI } from 'util/lbryURI';
@@ -106,26 +106,18 @@ export default function NotificationHeaderButton(props: Props) {
   if (!notificationsEnabled) return null;
 
   function handleNotificationClick(notification) {
-    const { id, notification_parameters, is_read } = notification;
+    const { id, is_read } = notification;
 
     if (!is_read) {
       seeNotification([id]);
       readNotification([id]);
     }
-    let notificationLink = formatLbryUrlForWeb(notification_parameters.device.target);
+
-    if (notification_parameters.dynamic?.hash) {
+    push(getNotificationLink(notification));
-      notificationLink += '?lc=' + notification_parameters.dynamic.hash + '&view=discussion';
-    }
-    push(notificationLink);
   }
 
   function getWebUri(notification) {
-    const { notification_parameters } = notification;
+    return getNotificationLink(notification);
-    let notificationLink = formatLbryUrlForWeb(notification_parameters.device.target);
-    if (notification_parameters.dynamic?.hash) {
-      notificationLink += '?lc=' + notification_parameters.dynamic.hash + '&view=discussion';
-    }
-    return notificationLink;
   }
 
   function menuEntry(notification) {

ui/component/notification/helpers/target.jsx

@@ -0,0 +1,59 @@
+// @flow
+import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
+import { RULE } from 'constants/notifications';
+import * as PAGES from 'constants/pages';
+import { DISCUSSION_PAGE, PAGE_VIEW_QUERY } from 'page/channel/view'; // TODO: move into const to avoid lazy-load problems
+import { parseURI } from 'util/lbryURI';
+import { formatLbryUrlForWeb } from 'util/url';
+
+export function getNotificationTarget(notification: WebNotification) {
+  const { notification_rule, notification_parameters } = notification;
+
+  switch (notification_rule) {
+    case RULE.WEEKLY_WATCH_REMINDER:
+    case RULE.DAILY_WATCH_AVAILABLE:
+    case RULE.DAILY_WATCH_REMIND:
+      return `/$/${PAGES.CHANNELS_FOLLOWING}`;
+    case RULE.MISSED_OUT:
+    case RULE.REWARDS_APPROVAL_PROMPT:
+      return `/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`;
+    case RULE.FIAT_TIP:
+      return `/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`;
+    default:
+      return notification_parameters.device.target;
+  }
+}
+
+function getUrlParams(notification, notificationTarget) {
+  const { notification_rule, notification_parameters } = notification;
+
+  const isCommentNotification =
+    notification_rule === RULE.COMMENT ||
+    notification_rule === RULE.COMMENT_REPLY ||
+    notification_rule === RULE.CREATOR_COMMENT;
+
+  const urlParams = new URLSearchParams();
+
+  if (isCommentNotification && notification_parameters.dynamic.hash) {
+    urlParams.append(LINKED_COMMENT_QUERY_PARAM, notification_parameters.dynamic.hash);
+  }
+
+  try {
+    const { isChannel } = parseURI(notificationTarget);
+    if (isChannel) urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
+  } catch (e) {}
+
+  return urlParams;
+}
+
+/**
+ *
+ * @param notification
+ * @param target Optional (minor optimization if pre-calculated outside). Must be value from getNotificationTarget().
+ * @returns {string}
+ */
+export function getNotificationLink(notification: WebNotification, target: ?string) {
+  const notificationTarget = target || getNotificationTarget(notification);
+  const urlParams = getUrlParams(notification, notificationTarget);
+  return `${formatLbryUrlForWeb(notificationTarget)}?${urlParams.toString()}`;
+}

ui/component/notification/view.jsx

@@ -1,14 +1,11 @@
 // @flow
 import { lazyImport } from 'util/lazyImport';
-import { formatLbryUrlForWeb } from 'util/url';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import { NavLink } from 'react-router-dom';
-import { PAGE_VIEW_QUERY, DISCUSSION_PAGE } from 'page/channel/view';
 import { parseURI } from 'util/lbryURI';
 import { RULE } from 'constants/notifications';
 import { useHistory } from 'react-router';
 import * as ICONS from 'constants/icons';
-import * as PAGES from 'constants/pages';
 import Button from 'component/button';
 import ChannelThumbnail from 'component/channelThumbnail';
 import classnames from 'classnames';
@@ -18,9 +15,9 @@ import Icon from 'component/common/icon';
 import NotificationContentChannelMenu from 'component/notificationContentChannelMenu';
 import React from 'react';
 import UriIndicator from 'component/uriIndicator';
+import { getNotificationLink, getNotificationTarget } from './helpers/target';
 import { generateNotificationTitle } from './helpers/title';
 import { generateNotificationText } from './helpers/text';
-import { LINKED_COMMENT_QUERY_PARAM } from 'constants/comment';
 
 const CommentCreate = lazyImport(() => import('component/commentCreate' /* webpackChunkName: "comments" */));
 const CommentReactions = lazyImport(() => import('component/commentReactions' /* webpackChunkName: "comments" */));
@@ -46,7 +43,9 @@ export default function Notification(props: Props) {
     notification_rule === RULE.COMMENT ||
     notification_rule === RULE.COMMENT_REPLY ||
     notification_rule === RULE.CREATOR_COMMENT;
-  const notificationTarget = getNotificationTarget();
+
+  const notificationTarget = getNotificationTarget(notification);
+  const notificationLink = getNotificationLink(notification, notificationTarget);
 
   const creatorIcon = (channelUrl, channelThumbnail) => (
     <UriIndicator uri={channelUrl} link showAtSign channelInfo={{ uri: channelUrl, name: '' }}>
@@ -91,12 +90,6 @@ export default function Notification(props: Props) {
       icon = <Icon icon={ICONS.NOTIFICATION} sectionIcon />;
   }
 
-  let notificationLink = formatLbryUrlForWeb(notificationTarget);
-  let urlParams = new URLSearchParams();
-  if (isCommentNotification && notification_parameters.dynamic.hash) {
-    urlParams.append(LINKED_COMMENT_QUERY_PARAM, notification_parameters.dynamic.hash);
-  }
-
   let channelName;
   if (channelUrl) {
     try {
@@ -104,30 +97,8 @@ export default function Notification(props: Props) {
     } catch (e) {}
   }
 
-  try {
-    const { isChannel } = parseURI(notificationTarget);
-    if (isChannel) urlParams.append(PAGE_VIEW_QUERY, DISCUSSION_PAGE);
-  } catch (e) {}
-
-  notificationLink += `?${urlParams.toString()}`;
   const navLinkProps = { to: notificationLink, onClick: (e) => e.stopPropagation() };
 
-  function getNotificationTarget() {
-    switch (notification_rule) {
-      case RULE.WEEKLY_WATCH_REMINDER:
-      case RULE.DAILY_WATCH_AVAILABLE:
-      case RULE.DAILY_WATCH_REMIND:
-        return `/$/${PAGES.CHANNELS_FOLLOWING}`;
-      case RULE.MISSED_OUT:
-      case RULE.REWARDS_APPROVAL_PROMPT:
-        return `/$/${PAGES.REWARDS_VERIFY}?redirect=/$/${PAGES.REWARDS}`;
-      case RULE.FIAT_TIP:
-        return `/$/${PAGES.WALLET}?fiatType=incoming&tab=fiat-payment-history&currency=fiat`;
-      default:
-        return notification_parameters.device.target;
-    }
-  }
-
   function handleNotificationClick() {
     if (!is_read) readNotification();
     if (menuButton && notificationLink) push(notificationLink);