Direct reacting from notifications #6935

Merged
saltrafael merged 4 commits from notifications_reacts into master 2021-08-28 14:52:56 +02:00
saltrafael commented 2021-08-23 17:10:39 +02:00 (Migrated from github.com)

Fixes

Issue Number: #5062, and closes #6906

(Previously https://github.com/lbryio/lbry-desktop/pull/6711, now with issues addressed)

What is the new behavior?

Peek 2021-08-23 11-57

PR Type & Checklist

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:
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
## Fixes Issue Number: #5062, and closes #6906 (Previously https://github.com/lbryio/lbry-desktop/pull/6711, now with issues addressed) <!-- Tip: - Add keywords to directly close the Issue when the PR is merged. - Skip the keyword if the Issue contains multiple items. - https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword --> ## What is the new behavior? ![Peek 2021-08-23 11-57](https://user-images.githubusercontent.com/76502841/130470997-241ed45a-7542-4c62-8c94-8d9ed7fbbbb0.gif) ## PR Type & Checklist <details><summary>PR Type...</summary> What kind of change does this PR introduce? - [X] Bugfix - [X] Feature - [ ] Code style update (formatting) - [ ] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: </details> <!----------------------------------------------------------------------------> <details><summary>PR Checklist...</summary> <!-- 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) - [X] I added a line describing my change to CHANGELOG.md - [X] 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 </details>
infinite-persistence (Migrated from github.com) reviewed 2021-08-23 17:10:39 +02:00
infinite-persistence (Migrated from github.com) requested changes 2021-08-24 09:16:37 +02:00
infinite-persistence (Migrated from github.com) left a comment

Good approach in general, touching minimal files as possible.

A few issues found; mainly concerned with the lag. Not sure if it's due to the excessive API calls (mentioned below), or perhaps unintended re-renders.

Good approach in general, touching minimal files as possible. A few issues found; mainly concerned with the lag. Not sure if it's due to the excessive API calls (mentioned below), or perhaps unintended re-renders.
@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Add confirmation on comment removal _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
- Show on content page if a file is part of a playlist already _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
- Add filtering to playlists ([#6905](https://github.com/lbryio/lbry-desktop/pull/6905))
- Added direct replying to notifications _community pr!_ ([#6935](https://github.com/lbryio/lbry-desktop/pull/6935))
infinite-persistence (Migrated from github.com) commented 2021-08-24 08:57:59 +02:00

File thumbnail flickers a lot

Probably a non-blocker, but a bit annoying. Was present in the past, but now super obvious.

It flickers when:

  • you refresh the Notifications Page (or initial load)
  • On a comment notification, click "Reply" to expand the text box (notice other notifications with file thumbnails will flicker).
  • On a comment notification, click "Cancel" to close the text box (notice other notifications with file thumbnails will flicker).
## File thumbnail flickers a lot <sub>Probably a non-blocker, but a bit annoying. Was present in the past, but now super obvious.</sub> It flickers when: - you refresh the Notifications Page (or initial load) - On a comment notification, click "Reply" to expand the text box (notice other notifications with file thumbnails will flicker). - On a comment notification, click "Cancel" to close the text box (notice other notifications with file thumbnails will flicker).
infinite-persistence (Migrated from github.com) commented 2021-08-24 09:06:52 +02:00

[Non-blocker] Unknown error

Not sure how to reproduce this. Happens only on a few notifications when replying.

## [Non-blocker] Unknown error Not sure how to reproduce this. Happens only on a few notifications when replying. <img src="https://user-images.githubusercontent.com/64950861/130572293-9bd39920-00ac-47b2-9af3-77448d5fa340.png" width="300">
infinite-persistence (Migrated from github.com) commented 2021-08-24 09:08:47 +02:00

Ah, it happens when the actual comment has been deleted. Not sure how to handle this gracefully. Probably can ignore for now, unless you have some ideas.

Ah, it happens when the actual comment has been deleted. Not sure how to handle this gracefully. Probably can ignore for now, unless you have some ideas.
infinite-persistence (Migrated from github.com) commented 2021-08-24 08:46:32 +02:00

Lag when clicking "Reply"

There is a slight delay when clicking "Reply" in Notifications Page, compared to regular comments sections.

Turns out, it was resolving every time you click "Reply", and every time you "Cancel", which doesn't make sense.

## Lag when clicking "Reply" There is a slight delay when clicking "Reply" in Notifications Page, compared to regular comments sections. Turns out, it was resolving every time you click "Reply", and every time you "Cancel", which doesn't make sense.
@ -254,0 +277,4 @@
{isReplying && (
<CommentCreate
isReply
uri={notificationTarget}
infinite-persistence (Migrated from github.com) commented 2021-08-24 08:02:51 +02:00

Lots of console errors

## Lots of console errors <img src="https://user-images.githubusercontent.com/64950861/130564018-2a162341-1af1-4563-bac9-6ae9f8bc8bd6.png" width="300">
@ -254,0 +281,4 @@
parentId={notification_parameters.dynamic.hash}
onDoneReplying={() => setReplying(false)}
onCancelReplying={() => setReplying(false)}
setQuickReply={setQuickReply}
infinite-persistence (Migrated from github.com) commented 2021-08-24 07:57:09 +02:00

2nd-level reply doesn't appear, with warning.

If you reply to your own reply, that comment doesn't appear, and we get a warning as well
image

But it does go through. If you tried to reply from the top again (clicking the notifications's "Reply"), then all comments appear correctly with the "Show/hide replies" button.

## 2nd-level reply doesn't appear, with warning. If you reply to your own reply, that comment doesn't appear, and we get a warning as well ![image](https://user-images.githubusercontent.com/64950861/130563743-c4ca5f63-3667-4302-924c-d62dd932fe84.png) But it does go through. If you tried to reply from the top again (clicking the notifications's "Reply"), then all comments appear correctly with the "Show/hide replies" button.
@ -43,0 +63,4 @@
if (commentId) {
idsForReactionFetch.push(commentId);
}
infinite-persistence (Migrated from github.com) commented 2021-08-24 07:30:06 +02:00

GUI hangs (maybe to excessive reaction-fetch, but doesn't make sense since it's background call)

Anyway, regarding reaction fetch:
scenarios where it should not be fetching:

  • When clicking "Reply" to open CommentCreate in a Hyperchat notification
  • When clicking "Cancel" to close CommentCreate in a Hyperchat notification
  • Few others (I'm seeing 4-5 fetches, not sure from where)

Should only fetch in the following:

  • On initial mount, one time (using current active channel)
  • When switching channels in "Replying as", one time per channel.

Without looking deeper, my current guess is that it should be looking at "is fetching reacts" instead of "is fetching notifications".

One example scenario: select "Comments", let it render, then open the combo-box again (I think this coincides with the fetch. The entire browser freezes:
image

## GUI hangs (maybe to excessive reaction-fetch, but doesn't make sense since it's background call) Anyway, regarding reaction fetch: ❌ scenarios where it should not be fetching: - When clicking "Reply" to open `CommentCreate` in a Hyperchat notification - When clicking "Cancel" to close `CommentCreate` in a Hyperchat notification - Few others (I'm seeing 4-5 fetches, not sure from where) Should only fetch in the following: - On initial mount, one time (using current active channel) - When switching channels in "Replying as", one time per channel. _Without looking deeper, my current guess is that it should be looking at "is fetching reacts" instead of "is fetching notifications"._ One example scenario: select "Comments", let it render, then open the combo-box again (I think this coincides with the fetch. The entire browser freezes: ![image](https://user-images.githubusercontent.com/64950861/130560760-ef0ad2d8-6935-4619-8dbf-dfe465c8a790.png)
infinite-persistence (Migrated from github.com) commented 2021-08-24 07:47:28 +02:00

[Non-blocker] Inconsistent spacing for different notifications

I think the avatar should just anchor to the top, so that the alignment of text will be consistent for all types of notifications, and also look better in mobile.

### [Non-blocker] Inconsistent spacing for different notifications I think the avatar should just anchor to the top, so that the alignment of text will be consistent for all types of notifications, and also look better in mobile. <img src="https://user-images.githubusercontent.com/64950861/130562613-86ac15c5-7fb8-4d0f-81d7-9335ecfd9d2a.png" width="300">
infinite-persistence (Migrated from github.com) commented 2021-08-24 06:12:49 +02:00

Creator-like icon is huge. The avatar was a gif in this case.

image

Creator-like icon is huge. The avatar was a gif in this case. ![image](https://user-images.githubusercontent.com/64950861/130554247-ef67cabf-4d38-47f7-b6aa-9f39d50bdd3f.png)
infinite-persistence (Migrated from github.com) commented 2021-08-24 09:13:04 +02:00

[Enhancement] Padding to align with avatar

It would be nice if we can pad the left side of the reactions area to align with the other text (i.e. right edge of avatar).

## [Enhancement] Padding to align with avatar It would be nice if we can pad the left side of the reactions area to align with the other text (i.e. right edge of avatar). <img src="https://user-images.githubusercontent.com/64950861/130573059-cb39fdd1-2942-4f2c-bce1-a2590bf1b0ae.png" width="300"> <img src="https://user-images.githubusercontent.com/64950861/130574493-b3d52ca0-1820-4166-87ba-5ec139123816.png" width="300">
saltrafael (Migrated from github.com) reviewed 2021-08-27 13:53:26 +02:00
@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Add confirmation on comment removal _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
- Show on content page if a file is part of a playlist already _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
- Add filtering to playlists ([#6905](https://github.com/lbryio/lbry-desktop/pull/6905))
- Added direct replying to notifications _community pr!_ ([#6935](https://github.com/lbryio/lbry-desktop/pull/6935))
saltrafael (Migrated from github.com) commented 2021-08-27 13:53:26 +02:00

challenge accepted

Peek 2021-08-27 09-11

challenge accepted ![Peek 2021-08-27 09-11](https://user-images.githubusercontent.com/76502841/131125445-36435d22-5619-4633-9dff-5095efce21f6.gif)
kauffj (Migrated from github.com) reviewed 2021-08-27 18:06:09 +02:00
@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
- Add confirmation on comment removal _community pr!_ ([#6563](https://github.com/lbryio/lbry-desktop/pull/6563))
- Show on content page if a file is part of a playlist already _community pr!_([#6393](https://github.com/lbryio/lbry-desktop/pull/6393))
- Add filtering to playlists ([#6905](https://github.com/lbryio/lbry-desktop/pull/6905))
- Added direct replying to notifications _community pr!_ ([#6935](https://github.com/lbryio/lbry-desktop/pull/6935))
kauffj (Migrated from github.com) commented 2021-08-27 18:06:09 +02:00

@infinite-persistence if this looks good on another review, please merge

@infinite-persistence if this looks good on another review, please merge
infinite-persistence (Migrated from github.com) reviewed 2021-08-28 14:43:04 +02:00
@ -254,0 +277,4 @@
{isReplying && (
<CommentCreate
isReply
uri={notificationTarget}
infinite-persistence (Migrated from github.com) commented 2021-08-28 14:43:03 +02:00

This one still exists. Can ship, although we should stop introducing console errors to a already-long list (e.g. Modal dismissal, Reach, videojs)

This one still exists. Can ship, although we should stop introducing console errors to a already-long list (e.g. Modal dismissal, Reach, videojs)
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#6935
No description provided.