Notifications improve links #6711

Merged
saltrafael merged 1 commit from notifications_click into master 2021-08-18 23:40:36 +02:00
saltrafael commented 2021-07-27 19:08:57 +02:00 (Migrated from github.com)

PR Checklist

Please check all that apply to this PR using "x":

  • I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
  • I added a line describing my change to CHANGELOG.md
  • I have checked that this PR does not introduce a breaking change
  • This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting)
  • Refactoring (no functional changes)
  • Documentation changes
  • Other - Please describe:

Fixes

Issue Number: Closes #5095

What is the new behavior?

  • Notification links improved
  • Now can right click on notification items, open in new tabs, open other users channel, etc.
  • Added reactions to comments:
    image.png
## PR Checklist <!-- For the checkbox formatting to work properly, make sure there are no spaces on either side of the "x" --> Please check all that apply to this PR using "x": - [X] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [ ] I added a line describing my change to CHANGELOG.md - [ ] I have checked that this PR does not introduce a breaking change - [ ] This PR introduces breaking changes and I have provided a detailed explanation below ## PR Type What kind of change does this PR introduce? - [ ] Bugfix - [X] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: ## Fixes Issue Number: Closes #5095 ## What is the new behavior? - Notification links improved - Now can right click on notification items, open in new tabs, open other users channel, etc. - Added reactions to comments: [![image.png](https://i.postimg.cc/7ZydpNB0/image.png)](https://postimg.cc/D8BxG13w)
infinite-persistence (Migrated from github.com) requested changes 2021-07-29 08:36:51 +02:00
@ -69,0 +58,4 @@
<ChannelThumbnail small uri={channelUrl} />
</UriIndicator>
);
};
infinite-persistence (Migrated from github.com) commented 2021-07-29 07:57:42 +02:00

This one is probably not robust as it relies on how Commentron phrases the suggested title.
(e.g. will fail if phrasing changed to "@@Welcome to my post@@" received a new comment from @mike).

It might be better to inspect notification_parameters.dynamic for the author, but you'll need to do it differently for each notification type that has a channel-mention. For example, the author for a comment-notification can be parsed from notification_parameters.dynamic.comment_author.

Aside: It is also possible to reconstruct the title ourselve from notification_parameters's info. device.title is just Commentron's default.

This one is probably not robust as it relies on how Commentron phrases the suggested title. (e.g. will fail if phrasing changed to `"@@Welcome to my post@@" received a new comment from @mike`). It might be better to inspect `notification_parameters.dynamic` for the author, but you'll need to do it differently for each notification type that has a channel-mention. For example, the author for a comment-notification can be parsed from `notification_parameters.dynamic.comment_author`. Aside: It is also possible to reconstruct the title ourselve from `notification_parameters`'s info. `device.title` is just Commentron's default.
infinite-persistence (Migrated from github.com) commented 2021-07-29 08:20:27 +02:00

@jessopb, I believe this block is trying replace the channel name with something that's clickable. I recall this issue also affects livestream chat and maybe other places. Do you have a recommendation on how to address this issue in general?

The above breaks up the string. This will break any hopes of localizing the notifications page in the future.

Maybe something like how LbcMessage does the replacement will be a cleaner approach?

But anyway, since Commentron doesn't support a i18n-friendly format yet, this solution is still better than current state.

@jessopb, I believe this block is trying replace the channel name with something that's clickable. I recall this issue also affects livestream chat and maybe other places. Do you have a recommendation on how to address this issue in general? The above breaks up the string. This will break any hopes of localizing the notifications page in the future. - <img src="https://user-images.githubusercontent.com/64950861/127441224-22c8ef63-71e6-4938-8c3e-fd4692bae5a4.png" width="400"> - <img src="https://user-images.githubusercontent.com/64950861/127441451-c35e5f70-8657-4196-b502-9948032f7d01.png" width="400"> Maybe something like how `LbcMessage` does the replacement will be a cleaner approach? But anyway, since Commentron doesn't support a i18n-friendly format yet, this solution is still better than current state.
@ -86,3 +83,4 @@
icon = creatorIcon(channelUrl);
break;
case RULE.DAILY_WATCH_AVAILABLE:
case RULE.DAILY_WATCH_REMIND:
infinite-persistence (Migrated from github.com) commented 2021-07-29 07:06:31 +02:00

I'm seeing missing avatars when I loaded the branch. Not sure which part of the code was causing it, but the issue goes away when I switch back to master.

<img src="https://user-images.githubusercontent.com/64950861/127434844-b27301fe-90a4-4564-a5db-e9c919016855.png" width="400"> I'm seeing missing avatars when I loaded the branch. Not sure which part of the code was causing it, but the issue goes away when I switch back to `master`.
infinite-persistence (Migrated from github.com) commented 2021-07-29 07:33:36 +02:00

This crashes after bringing it out of the switch-case because not all notifications have comment_author

This crashes after bringing it out of the switch-case because not all notifications have `comment_author`
infinite-persistence (Migrated from github.com) commented 2021-07-29 07:40:24 +02:00

Ooops, seems like this PR is still work-in-progress? Can put in "Draft" status.

Ooops, seems like this PR is still work-in-progress? Can put in "Draft" status.
infinite-persistence (Migrated from github.com) commented 2021-07-29 08:02:34 +02:00

CommentReactions will show 0 reactions each time unless you've visited the comment before.
One suggestion is to collect a list of comment IDs at one level up and fetch all reactions in one shot.

`CommentReactions` will show 0 reactions each time unless you've visited the comment before. One suggestion is to collect a list of comment IDs at one level up and fetch all reactions in one shot.
infinite-persistence (Migrated from github.com) reviewed 2021-07-29 08:44:48 +02:00
@ -69,0 +58,4 @@
<ChannelThumbnail small uri={channelUrl} />
</UriIndicator>
);
};
infinite-persistence (Migrated from github.com) commented 2021-07-29 08:44:48 +02:00

Or maybe something like this, which also fixes the i18n problem:

  const commentedOnClaimMsg = (
    <I18nMessage
      tokens={{
        comment_author: <UriIndicator uri={notification_parameters.dynamic.comment_author} link />,
        claim_title: notification_parameters.dynamic.claim_title,
      }}
    >
      %comment_author% commented on %claim_title%
    </I18nMessage>
  );
Or maybe something like this, which also fixes the i18n problem: ``` const commentedOnClaimMsg = ( <I18nMessage tokens={{ comment_author: <UriIndicator uri={notification_parameters.dynamic.comment_author} link />, claim_title: notification_parameters.dynamic.claim_title, }} > %comment_author% commented on %claim_title% </I18nMessage> ); ```
sapioit commented 2021-07-30 21:15:26 +02:00 (Migrated from github.com)

Thanks for adding this feature! It makes it possible to open all the new-video notifications in new tabs, and binge-watch them all.

Thanks for adding this feature! It makes it possible to open all the new-video notifications in new tabs, and binge-watch them all.
kauffj commented 2021-08-02 17:12:37 +02:00 (Migrated from github.com)

Is this ready or are you still working on it @saltrafael?

Is this ready or are you still working on it @saltrafael?
saltrafael commented 2021-08-02 17:50:12 +02:00 (Migrated from github.com)

Is this ready or are you still working on it @saltrafael?

I had messaged infinite-persistence to see the latest changes, then it just needs rebase and fix Reply !

> Is this ready or are you still working on it @saltrafael? I had messaged infinite-persistence to see the latest changes, then it just needs rebase and fix Reply !
infinite-persistence (Migrated from github.com) requested changes 2021-08-03 06:21:59 +02:00
infinite-persistence (Migrated from github.com) commented 2021-08-03 06:13:17 +02:00

image

  • When I click on this kind of notification, I'll go to the intended page, but it immediately sends me back to the Notification page.
![image](https://user-images.githubusercontent.com/64950861/127956589-d1cb0211-911a-4c04-89cd-1944030cb047.png) - [ ] When I click on this kind of notification, I'll go to the intended page, but it immediately sends me back to the Notification page.
infinite-persistence (Migrated from github.com) commented 2021-08-03 06:21:19 +02:00

image

The navlink only works when clicked on text. If you middle-click on empty areas, it doesn't work.
ClaimPreview solves this by adding a wrapper to the blank areas.

Not super critical -- can postpone.

![image](https://user-images.githubusercontent.com/64950861/127957130-5489ac4d-73ba-45cd-91b6-d79f6ea7c701.png) The navlink only works when clicked on text. If you middle-click on empty areas, it doesn't work. `ClaimPreview` solves this by adding a wrapper to the blank areas. Not super critical -- can postpone.
@ -67,2 +55,2 @@
notificationLink += `?${urlParams.toString()}`;
const creatorIcon = (channelUrl) => {
return (
infinite-persistence (Migrated from github.com) commented 2021-08-03 04:51:45 +02:00
  • This ends up in an infinite loop of reaction.List calls (see Network Tab in Dev Tools). The backend team will scold us again, lol.

Suggestions:

  • We only need to fetch the reactions 1 time per mount. Using a blank [] dependency list on the useEffect would work, assuming we have all the variables that we need on mount.
  • However, after talking to Tom, we think it is highly-likely that popular creators will have lots of comment notifications. So, fetching it at the Notification level will create lots of reaction.List calls (1 for each Notification). It will be more efficient to do it at NotificationsPage, since we have the full list comments to fetch for already. But we leave this up to you -- we can also make the change to NotificationsPage at a later time when we see huge spikes in reaction.List calls.
- [ ] This ends up in an infinite loop of `reaction.List` calls (see Network Tab in Dev Tools). The backend team will scold us again, lol. Suggestions: - We only need to fetch the reactions 1 time per mount. Using a blank `[]` dependency list on the `useEffect` would work, assuming we have all the variables that we need on mount. - However, after talking to Tom, we think it is highly-likely that popular creators will have lots of comment notifications. So, fetching it at the `Notification` level will create lots of `reaction.List` calls (1 for each `Notification`). It will be more efficient to do it at `NotificationsPage`, since we have the full list comments to fetch for already. But we leave this up to you -- we can also make the change to `NotificationsPage` at a later time when we see huge spikes in `reaction.List` calls.
@ -100,0 +103,4 @@
let channelName = channelUrl && '@' + channelUrl.split('@')[1].split('#')[0];
const notificationTitle = notification_parameters.device.title;
infinite-persistence (Migrated from github.com) commented 2021-08-03 06:07:57 +02:00

Feels like can be improved, but will pass for now so as not to stall the PR further.

With a little more work, I think we can avoid the unnecessary loop and also enable localization at the same time using something like the following (incomplete example). It'll also prevent the need to put a blanket LbcMessage for notifications that don't need it. We can also customize the phrase like adding quotes to the title for readability.

function generateTitle(rule, params) {
    switch (rule) {
      case RULE.COMMENT:
        return (
          <I18nMessage
            tokens={{
              commenter: <UriIndicator uri={notification_parameters.dynamic.comment_author} link />,
              title: notification_parameters.dynamic.claim_title,
            }}
          >
            %commenter% commented on "%title%"
          </I18nMessage>
        );

      case RULE.CREATOR_SUBSCRIBER:
        // TODO
        break;
      case RULE.CREATOR_COMMENT:
        // TODO
        break;
      case RULE.COMMENT_REPLY:
        // TODO
        break;
      case RULE.NEW_CONTENT:
      case RULE.NEW_LIVESTREAM:
      case RULE.DAILY_WATCH_AVAILABLE:
      case RULE.DAILY_WATCH_REMIND:
      case RULE.MISSED_OUT:
      case RULE.REWARDS_APPROVAL_PROMPT:
      case RULE.FIAT_TIP:
      default:
        // Use Commentron default
        return params.device.title;
    }
  }

  const title = generateTitle(notification_rule, notification_parameters);

Feels like can be improved, but will pass for now so as not to stall the PR further. With a little more work, I think we can avoid the unnecessary loop and also enable localization at the same time using something like the following (incomplete example). It'll also prevent the need to put a blanket `LbcMessage` for notifications that don't need it. We can also customize the phrase like adding quotes to the title for readability. ``` function generateTitle(rule, params) { switch (rule) { case RULE.COMMENT: return ( <I18nMessage tokens={{ commenter: <UriIndicator uri={notification_parameters.dynamic.comment_author} link />, title: notification_parameters.dynamic.claim_title, }} > %commenter% commented on "%title%" </I18nMessage> ); case RULE.CREATOR_SUBSCRIBER: // TODO break; case RULE.CREATOR_COMMENT: // TODO break; case RULE.COMMENT_REPLY: // TODO break; case RULE.NEW_CONTENT: case RULE.NEW_LIVESTREAM: case RULE.DAILY_WATCH_AVAILABLE: case RULE.DAILY_WATCH_REMIND: case RULE.MISSED_OUT: case RULE.REWARDS_APPROVAL_PROMPT: case RULE.FIAT_TIP: default: // Use Commentron default return params.device.title; } } const title = generateTitle(notification_rule, notification_parameters); ```
kauffj commented 2021-08-09 17:08:39 +02:00 (Migrated from github.com)

@saltrafael if you've adjusted a PR in response to feedback, please click the icon to re-request a review (I just did this, so you won't see it)

@saltrafael if you've adjusted a PR in response to feedback, please click the icon to re-request a review (I just did this, so you won't see it)
infinite-persistence (Migrated from github.com) requested changes 2021-08-10 06:08:57 +02:00
infinite-persistence (Migrated from github.com) commented 2021-08-10 06:06:01 +02:00

When a "comment notification" is clicked, it navigates to the claim page but also reloads the site, causing the cache to be cleared and re-authenticated. Should avoid a reload if possible.

When a "comment notification" is clicked, it navigates to the claim page but also reloads the site, causing the cache to be cleared and re-authenticated. Should avoid a reload if possible.
infinite-persistence (Migrated from github.com) commented 2021-08-10 06:08:26 +02:00

After leaving a comment reply directly from the notification component, the reply is not immediately visible. This will be confusing, and I think a toast wouldn't cut it either. I understand it is troublesome to place the reply component there with current code.

After leaving a comment reply directly from the notification component, the reply is not immediately visible. This will be confusing, and I think a toast wouldn't cut it either. I understand it is troublesome to place the reply component there with current code.
saltrafael (Migrated from github.com) reviewed 2021-08-10 15:55:50 +02:00
saltrafael (Migrated from github.com) commented 2021-08-10 15:55:50 +02:00

image.png

like this?

[![image.png](https://i.postimg.cc/7LfNhJVJ/image.png)](https://postimg.cc/FfXSnRwh) like this?
infinite-persistence (Migrated from github.com) requested changes 2021-08-12 06:03:59 +02:00
infinite-persistence (Migrated from github.com) left a comment

Only did some minor testing -- there are still issues. Also, as noted in the comments, I wonder if there's a better solution than to place "stop propagation" all over the place, and tweaking form-field needs more testing to ensure it doesn't break all clients.

Handling the comment direct-reply and reaction seems tricky. Also, with an upcoming push "min-tips" push, we'll have to take more things into account.

  • Suggestion: perhaps we can limit this PR to just the "channel link/allow navigation", and move the "comment"-related parts into a new PR. It'll be easier to test/track/revert (not lumping multiple items).
Only did some minor testing -- there are still issues. Also, as noted in the comments, I wonder if there's a better solution than to place "stop propagation" all over the place, and tweaking `form-field` needs more testing to ensure it doesn't break all clients. Handling the comment direct-reply and reaction seems tricky. Also, with an upcoming push "min-tips" push, we'll have to take more things into account. - **Suggestion**: perhaps we can limit this PR to just the "channel link/allow navigation", and move the "comment"-related parts into a new PR. It'll be easier to test/track/revert (not lumping multiple items).
infinite-persistence (Migrated from github.com) commented 2021-08-12 05:42:30 +02:00

When I click on a "XX commented on YY" notification, it now takes 2 Back clicks to return to the notification page. Somewhere, it is double-pushing to the history.

When I click on a "XX commented on YY" notification, it now takes 2 `Back` clicks to return to the notification page. Somewhere, it is double-pushing to the history.
infinite-persistence (Migrated from github.com) commented 2021-08-12 05:48:07 +02:00

Separator lines are now missing

Separator lines are now missing <img src="https://user-images.githubusercontent.com/64950861/129135460-3a351b91-813b-4be2-aa7c-7aa28f336c5e.png" width="400">
infinite-persistence (Migrated from github.com) commented 2021-08-12 05:56:39 +02:00

Yeah, something like that.

  • But it doesn't work completely. If you click on HyperChat and try to enter a amount, it navigates to the to the post.
  • A bit nervous looking at the "stop propagation" being placed everywhere, especially on form-field itself (will there be components that are expecting the event to be bubbled up?)
    • Maybe worth talking to Jessop to see if there's a better way to handle this.
Yeah, something like that. - But it doesn't work completely. If you click on HyperChat and try to enter a amount, it navigates to the to the post. - A bit nervous looking at the "stop propagation" being placed everywhere, especially on form-field itself (will there be components that are expecting the event to be bubbled up?) - Maybe worth talking to Jessop to see if there's a better way to handle this.
saltrafael commented 2021-08-12 18:34:30 +02:00 (Migrated from github.com)

Only did some minor testing -- there are still issues. Also, as noted in the comments, I wonder if there's a better solution than to place "stop propagation" all over the place, and tweaking form-field needs more testing to ensure it doesn't break all clients.

✔️ Ended "stop propagation" hell

Handling the comment direct-reply and reaction seems tricky. Also, with an upcoming push "min-tips" push, we'll have to take more things into account.

  • Suggestion: perhaps we can limit this PR to just the "channel link/allow navigation", and move the "comment"-related parts into a new PR. It'll be easier to test/track/revert (not lumping multiple items).

I hid the support option from direct-reply which was causing the most issues, (also looked confusing, since replying to a comment sends a HyperChat to the content and not the reply). See if it's still needed to take it out

> Only did some minor testing -- there are still issues. Also, as noted in the comments, I wonder if there's a better solution than to place "stop propagation" all over the place, and tweaking `form-field` needs more testing to ensure it doesn't break all clients. ✔️ Ended "stop propagation" hell > Handling the comment direct-reply and reaction seems tricky. Also, with an upcoming push "min-tips" push, we'll have to take more things into account. > * **Suggestion**: perhaps we can limit this PR to just the "channel link/allow navigation", and move the "comment"-related parts into a new PR. It'll be easier to test/track/revert (not lumping multiple items). I hid the support option from direct-reply which was causing the most issues, (also looked confusing, since replying to a comment sends a HyperChat to the content and not the reply). See if it's still needed to take it out
tzarebczan commented 2021-08-13 17:34:26 +02:00 (Migrated from github.com)

@saltrafael can you rebase and fix the conflict and we'll take another look soon.

@saltrafael can you rebase and fix the conflict and we'll take another look soon.
infinite-persistence (Migrated from github.com) requested changes 2021-08-16 14:28:45 +02:00
infinite-persistence (Migrated from github.com) left a comment

Few more issues unfix/uncovered.

I'm still in favor of splitting out #5062 React/reply to comments from notifications into another PR so that we can ship your navigation link changes first.

The comment-replies doesn't seem straightforward to implement. YT does it by moving into a virtual "sub-page" that is basically a CommentsList -- I think that totally avoids all the issues and hacks that we've been trying to do in embedding the Comment component within Notification. But the sub-page is not trivial either.

Few more issues unfix/uncovered. I'm still in favor of splitting out [#5062 React/reply to comments from notifications ](https://github.com/lbryio/lbry-desktop/issues/5062) into another PR so that we can ship your navigation link changes first. The comment-replies doesn't seem straightforward to implement. YT does it by moving into a virtual "sub-page" that is basically a `CommentsList` -- I think that totally avoids all the issues and hacks that we've been trying to do in embedding the `Comment` component within `Notification`. But the sub-page is not trivial either.
infinite-persistence (Migrated from github.com) commented 2021-08-16 13:43:17 +02:00

When I delete a comment in a regular content page, I now get this in the console:

image

When I delete a comment in a regular content page, I now get this in the console: ![image](https://user-images.githubusercontent.com/64950861/129558359-07f44b12-7db0-4785-be01-4bdebe0fe8fa.png)
infinite-persistence (Migrated from github.com) commented 2021-08-16 13:49:59 +02:00

This was previously reported, and is still happening. It auto jumps back.

revert

This was previously reported, and is still happening. It auto jumps back. ![revert](https://user-images.githubusercontent.com/64950861/129559165-74fd763d-2b98-4905-8f59-dc74062128d5.gif)
infinite-persistence (Migrated from github.com) commented 2021-08-16 14:02:15 +02:00

When changing the active channel via "Set replying as", we'll need to re-fetch the reactions to get the right numbers (mine vs others). Currently, it resets to zero.

When changing the active channel via "Set replying as", we'll need to re-fetch the reactions to get the right numbers (mine vs others). Currently, it resets to zero.
infinite-persistence (Migrated from github.com) commented 2021-08-16 14:08:59 +02:00

Second level reply is a bit weird. The GUI remains stuck at the following, with SuperChat appearing. When I pressed Cancel, I noticed a ton of comment was sent.

image

Second level reply is a bit weird. The GUI remains stuck at the following, with SuperChat appearing. When I pressed Cancel, I noticed a ton of comment was sent. ![image](https://user-images.githubusercontent.com/64950861/129561235-cf3ee253-add8-4f82-b352-a036d9532f92.png)
infinite-persistence (Migrated from github.com) commented 2021-08-16 14:11:15 +02:00

When I press the Creator Like (Heart), a medium-sized avatar gets stuck in the screen.

image

When I press the Creator Like (Heart), a medium-sized avatar gets stuck in the screen. ![image](https://user-images.githubusercontent.com/64950861/129561687-22626129-7fb8-49ad-a705-ba4805a9ff4f.png)
infinite-persistence (Migrated from github.com) commented 2021-08-16 13:51:22 +02:00

Not a blocker, but just wanted to note that it seems to always call reaction.List twice.

Not a blocker, but just wanted to note that it seems to always call `reaction.List` twice.
tzarebczan (Migrated from github.com) reviewed 2021-08-18 22:36:00 +02:00
tzarebczan (Migrated from github.com) commented 2021-08-18 22:36:00 +02:00

Noticed this too, probably minor but should be fixed.

Noticed this too, probably minor but should be fixed.
tzarebczan (Migrated from github.com) reviewed 2021-08-18 22:37:16 +02:00
tzarebczan (Migrated from github.com) commented 2021-08-18 22:37:16 +02:00

I ran into this but wasn't sure what happened - but now this makes sense.

I ran into this but wasn't sure what happened - but now this makes sense.
tzarebczan (Migrated from github.com) reviewed 2021-08-18 22:38:00 +02:00
tzarebczan (Migrated from github.com) commented 2021-08-18 22:38:00 +02:00

That's a known bug on master - we should not be sending that notification to already approved users.

That's a known bug on master - we should not be sending that notification to already approved users.
saltrafael (Migrated from github.com) reviewed 2021-08-18 22:47:41 +02:00
saltrafael (Migrated from github.com) commented 2021-08-18 22:47:41 +02:00

That's a known bug on master - we should not be sending that notification to already approved users.

So that explains it 😅
Peek 2021-08-18 14-37

> That's a known bug on master - we should not be sending that notification to already approved users. So that explains it 😅 ![Peek 2021-08-18 14-37](https://user-images.githubusercontent.com/76502841/129969960-aef9f1f1-2e54-4037-bace-a79f76d43291.gif)
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#6711
No description provided.