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.
This commit is contained in:
infinite-persistence 2022-07-05 18:55:04 +08:00 committed by GitHub
parent 02d017d415
commit 769b1cdabb
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 68 additions and 46 deletions

View file

@ -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) {
notificationLink += '?lc=' + notification_parameters.dynamic.hash + '&view=discussion';
}
push(notificationLink);
push(getNotificationLink(notification));
}
function getWebUri(notification) {
const { notification_parameters } = notification;
let notificationLink = formatLbryUrlForWeb(notification_parameters.device.target);
if (notification_parameters.dynamic?.hash) {
notificationLink += '?lc=' + notification_parameters.dynamic.hash + '&view=discussion';
}
return notificationLink;
return getNotificationLink(notification);
}
function menuEntry(notification) {

View file

@ -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()}`;
}

View file

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