Page MenuHomePhabricator

[web] show unreads for each community in the community list
ClosedPublic

Authored by ginsu on Dec 18 2023, 2:43 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mar 6 2024, 10:47 PM
Unknown Object (File)
Mar 6 2024, 9:40 PM
Unknown Object (File)
Mar 6 2024, 9:26 PM
Unknown Object (File)
Mar 6 2024, 9:26 PM
Unknown Object (File)
Mar 6 2024, 9:24 PM
Unknown Object (File)
Mar 6 2024, 9:21 PM
Unknown Object (File)
Feb 14 2024, 5:07 AM
Unknown Object (File)
Feb 9 2024, 7:37 PM
Subscribers

Details

Summary

This diff introduces the unread badge to the community list in the navigation sidebar. Here we want to show the unreads broken down by each community

Linear task: https://linear.app/comm/issue/ENG-5951/introduce-a-new-unread-badge

Depends on D10435

Test Plan

Please see the screenshots/demo video

Screenshot 2023-12-18 at 6.10.59 PM.png (360×274 px, 25 KB)

Screenshot 2023-12-21 at 9.45.27 PM.png (558×332 px, 41 KB)

Screenshot 2023-12-18 at 6.11.27 PM.png (388×232 px, 27 KB)

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ginsu requested review of this revision.Dec 18 2023, 3:04 PM
atul requested changes to this revision.Dec 20 2023, 10:11 PM

Noticed that things look weird when the badge becomes wide (in 99+ scenario):

0bfd2c.png (444×548 px, 82 KB)

Looks like there's some mismatch in the radii or something.

Also, we should definitely make call to useSelector more precise to avoid unnecessarily re-rendering this component.

web/navigation-sidebar/community-list-item.react.js
23 ↗(On Diff #34821)

The useSelector here is pretty un-optimal.

This component (and children) will re-render anytime anything changes in any threadInfos in the threadStore.

We should instead create a selector function that more precisely calculates things and consume it like:

const unreadCountValue = useSelector(state => 
  computeUnreadCount(state.threadStore.threadInfos, threadID)
);

Implementation of computeUnreadCount (generated with ChatGPT) could look like:

const computeUnreadCount = (threadInfos, threadID) => {
  return Object.values(threadInfos).filter(
    communityInfo =>
      threadInHomeChatList(communityInfo) &&
      communityInfo.currentUser.unread &&
      (threadID === communityInfo.community || threadID === communityInfo.id)
  ).length;
};
This revision now requires changes to proceed.Dec 20 2023, 10:11 PM
ginsu added inline comments.
web/navigation-sidebar/community-list-item.react.js
23 ↗(On Diff #34821)

Noticed that things look weird when the badge becomes wide (in 99+ scenario):

Amended the test plan to show an updated screenshot

Screenshot 2023-12-21 at 9.45.27 PM.png (558×332 px, 41 KB)

Thanks for taking time to update and address both pieces of feedback!

This revision is now accepted and ready to land.Dec 26 2023, 5:14 PM
This revision was landed with ongoing or failed builds.Dec 27 2023, 12:31 PM
This revision was automatically updated to reflect the committed changes.