[DMs] Unread separator, scrolling, and other bugfixes #2867

rickyrombo · 2023-02-15T20:15:05Z

Description

Ensures the separator sticks around even after marking a chat as read. After switching chats or sending a new message, the indicator goes away. Also goes away if receiving a new message and the previous messages were read.

Fixes the separator disappearing on viewing a chat by using a ref
Fixes the scrolling to default to last unread messages
Fetch all unread messages on first load
Show spinner on initial message load
Fix markAsRead not firing when receiving new messages from a user while sticky to bottom
Fix DMs being unloadable on initial load if not enough messages
Redirect to existing chat if found when creating chats
Basic linkify

Dragons

Is there anything the reviewer should be on the lookout for? Are there any dangerous changes?

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

How will this change be monitored?

For features that are critical or could fail silently please describe the monitoring/alerting being added.

Feature Flags

Are all new features properly feature flagged? Describe added feature flags.

packages/web/src/pages/chat-page/components/ChatMessageList.tsx

…ppropriately via scrollIntoView

… when chat is actively engaged

audius-infra · 2023-02-16T06:29:45Z

Preview this change https://demo.audius.co/mjp-dms-unread-indicator

audius-infra · 2023-02-16T11:30:24Z

Preview this change https://demo.audius.co/mjp-dms-unread-indicator

audius-infra · 2023-02-16T18:23:38Z

Preview this change https://demo.audius.co/mjp-dms-unread-indicator

packages/web/src/pages/chat-page/components/ChatMessageList.tsx

packages/common/src/store/pages/chat/sagas.ts

piazzatron

Sweet!!!

packages/web/src/pages/chat-page/components/ChatMessageList.tsx

piazzatron · 2023-02-16T19:02:45Z

packages/web/src/pages/chat-page/components/ChatMessageList.tsx

+
+    const ref = useRef<HTMLDivElement>(null)
+
+    // A ref so that the unread separator doesn't disappear immediately when the chat is marked as read


This seems like a behavior that will be implemented in mobile as well - is there any way we could encode the behavior around when to show the unread indicator in the slice layer so we don't have to re-implement tricks with refs on both platforms?

Hmmm. I kinda like keeping this state localized to the component. I don't think this needs to bubble up to a global state. That could have real perf costs etc. and i think would be less intuitive.

packages/web/src/pages/chat-page/components/ChatMessageList.tsx

packages/common/src/store/pages/chat/sagas.ts

piazzatron · 2023-02-16T19:25:39Z

packages/common/src/store/pages/chat/sagas.ts

+      yield* put(goToChat({ chatId: existingChat.chat_id }))
+    } else {
+      // Create new chat and navigate to it
+      yield* call([sdk.chats, sdk.chats.create], {


def don't have to implement but would be nice if this post returned the chat!

mutate is pretty agnostic, might be tricky to do? cc: @stereosteve / @michellebrier

[d476e0d] [C-2155 C-2127] Fix duplicate feed fetch (#2889) Dylan Jeffers [f29bb84] [C-2166] Fix drawer flicker (#2886) Dylan Jeffers [2ed066d] Fix user collections check (#2887) Raymond Jacobson [2d281cc] [C-2167] Deduplicate explore playlists (#2885) Raymond Jacobson [8d0bd75] [PAY-936] Search users to chat screen (#2882) Reed [9771bcc] Show Ready to Claim Pill on needsDisbursement (#2716) Reed [8b2964d] [C-2179] Show solana-phone wallet connect option on saga (#2883) Dylan Jeffers [428793f] [PAY-888][PAY-909][PAY-869] Premium content features and fixes (#2841) Saliou Diallo [70a99f5] [C-1301] TikTok native auth (#2879) Sebastian Klingler [c5d8be7] Update audio player class in mobile to match the type and make small update to playback rate saga (#2880) Kyle Shanks [c081f63] Migrate search-users saga + deps to common (#2877) Reed [07c24e0] Fix saga reachability (#2878) Dylan Jeffers [aee1bd0] Use u64 on buy-audio/sagas to fix typecheck (#2875) Marcus Pasell [ba476cd] [DMs] Unread separator, scrolling, and other bugfixes (#2867) Marcus Pasell [d6b3057] [C-1923] Implement fast profile images (#2677) Dylan Jeffers [9c30348] [C-1895] Add playbackRate control for podcasts behind a feature flag (#2874) Kyle Shanks [3bb45b5] Catch image errors in caching logic (#2876) Sebastian Klingler [dacbe0d] [C-1883] Use lazy tabs to improve perf (#2672) Dylan Jeffers [4148ec4] [C-1887 C-1888] Improve profile and explore screen performance (#2679) Dylan Jeffers [7b043e5] [DMs][PAY-832] Fix compose modal mutuals default (#2873) Marcus Pasell [4cc759c] Rename feature flag OFFLINE_MODE_ENABLED -> OFFLINE_MODE_RELEASE (#2872) Andrew Mendelsohn [a197c39] Improve premium content saga perf (#2870) Dylan Jeffers [909122d] [PAY-893] UserBadge in chat screen header (#2869) Reed [0a58181] Fix SDK bootstrap for mobile (#2868) Marcus Pasell [71a3c92] Show package version on AboutScreen (#2871) Sebastian Klingler [649810f] [C-1890] Improve artist-recommendations fetching/loading (#2678) Dylan Jeffers [1756916] lint fix for broken web build (#2866) Andrew Mendelsohn [3d13a49] Update handle spec (#2864) Raymond Jacobson [75721e2] [PAY-848] Fix UploadChip spacing (#2729) Michael Piazza [bcc35d0] Fix share to X video colors C-2146 (#2865) nicoback2 [9e4b90f] [C-2141] Fix missing lineup when coming back online (#2863) Dylan Jeffers [88f5958] [C-2143] Show download progress for collections (#2861) Dylan Jeffers [d2f1e7f] Allow errored tracks to be re-enqueued (#2862) Andrew Mendelsohn [5165323] [DMs] Websockets middleware for Chats (#2796) Marcus Pasell [e32924a] [C-2139] Fix now playing (#2860) Dylan Jeffers [748acfa] [C-2138] Fix unfavorite collection (#2859) Dylan Jeffers [4af4799] [C-2112] Rename various offline state elements (#2858) Dylan Jeffers [f8a633d] [C-2136] Fix smart collection loading (#2857) Sebastian Klingler [428eddf] Missed merge broke import (#2856) Andrew Mendelsohn [88db5eb] Ensure queue always starts back up (#2855) Andrew Mendelsohn [ebdfd0d] [C-2134 C-2030] Fix queueStatus on reachability, theme (#2854) Dylan Jeffers [df33b1f] Fix useThrottledCallback trailing config (#2851) Dylan Jeffers [6ed2431] use DocumentDir for offline file storage (#2853) Andrew Mendelsohn [5395583] [C-2132] unlink is safe on ios but not android (#2852) Andrew Mendelsohn [0631a5a] [C-2126] Fix empty collections on first session (#2849) Dylan Jeffers [092c3e8] [C-2051] Fix images in AddToPlaylistDrawer (#2846) Sebastian Klingler [bf71c13] [C-1678] Add metrics for offline mode in the workers (#2844) Kyle Shanks [43adc79] [C-2123] Fix collection lineup when coming online (#2840) Sebastian Klingler [afce072] C-2119 Show downloaded collections only (#2842) nicoback2 [0f06a0d] [PAY-779][PAY-781] Add premium track page and tile on mobile - Part 1 (#2820) Saliou Diallo [79562d7] [C-2125] match uids from queue to preserve smooth playback (#2839) Andrew Mendelsohn [9204fc9] [C-2111] Fix lineuptrack uid generation for offline collections (#2838) Andrew Mendelsohn [c9554fd] [C-2089] Distinguish between errored and abandoned (#2836) Dylan Jeffers [52df798] [C-2095] Improve download cancel (#2833) Dylan Jeffers [9198447] [C-2117] Fix favorites loading when starting from an offline session (#2837) Sebastian Klingler [30d0a21] [C-2113 C-2114] Add useThrottledCallback, fix indicators (#2835) Dylan Jeffers [1a48846] C-2052 Fix duplicate tracks are all marked as "playing" if you play one of them (#2792) nicoback2 [953bd12] [C-2104] Fix favorites pagination when coming online (#2831) Sebastian Klingler [0f7e352] Bump SDK to v2.0.1 (#2832) Marcus Pasell [78b6373] remove duplicate selector (#2834) Andrew Mendelsohn [4b8a631] [C-2109] Fix favorited collection not downloading (#2830) Dylan Jeffers [38ed100] [C-2102] Improve online/offline transitions (#2827) Dylan Jeffers [9b67c54] [C-2108] Improve local image fetch (#2826) Dylan Jeffers [1655e3d] Set offline mode flag default true (#2829) Andrew Mendelsohn [fd0881b] [PAY-882] Individual Chat Screen (#2809) Reed [405814b] [C-2101] Improve initial download ui performance (#2825) Dylan Jeffers [96d3d11] [C-2107] Add local saves to offline queue (#2824) Dylan Jeffers [90198e7] [C-2087] Add stale track queue worker (#2822) Dylan Jeffers

[DMs] Fix unread separator disappearing

f2afe12

rickyrombo requested review from dharit-tan and piazzatron February 15, 2023 20:15

rickyrombo assigned piazzatron Feb 15, 2023

pull-request-size bot added the size/M label Feb 15, 2023

dharit-tan approved these changes Feb 15, 2023

View reviewed changes

packages/web/src/pages/chat-page/components/ChatMessageList.tsx Show resolved Hide resolved

packages/web/src/pages/chat-page/components/ChatMessageList.tsx Outdated Show resolved Hide resolved

rickyrombo added 10 commits February 15, 2023 20:41

Chat fetching success means save the chat dingus

2f00f2a

Set the scroll margin/padding to allow the unread indicator to show a…

131f722

…ppropriately via scrollIntoView

rename to chatFrozenRef, more better

5c16cf1

Scroll the unread indicator into view when the ref gets set

d9f7d47

Keep the unread indicator even if new messages come in

ac59d71

Keep fetching until we get all unread messages

fb12542

chain some setStates to ensure the scroll happens before painting

cd36792

show spinner on initial load

d641895

Fix fetching messages

89736f5

Dedup markAsRead using the dates, since the unread count won't change…

4c145e8

… when chat is actively engaged

pull-request-size bot added size/L and removed size/M labels Feb 16, 2023

rickyrombo added 4 commits February 16, 2023 00:32

[DMs] Fix for when the screen is bigger than the initial message load

42f6af5

Linkify

5dea7f8

Merge remote-tracking branch 'origin/main' into mjp-dms-unread-indicator

d076487

Poll chat creation, check for existing, use deterministic chat ids

85befa4

rickyrombo added 2 commits February 16, 2023 10:01

Remove polling for chat since the mutation will wait now :D

3a45ed2

remove unused

fef7947

rickyrombo assigned dylanjeffers and sddioulde Feb 16, 2023

rickyrombo changed the title ~~[DMs] Fix unread separator disappearing~~ [DMs] Unread separator, scrolling, and other bugfixes Feb 16, 2023

Bump SDK to v2.0.2-alpha.2

700ed2b

dharit-tan reviewed Feb 16, 2023

View reviewed changes

packages/web/src/pages/chat-page/components/ChatMessageList.tsx Outdated Show resolved Hide resolved

dharit-tan reviewed Feb 16, 2023

View reviewed changes

packages/web/src/pages/chat-page/components/ChatMessageList.tsx Show resolved Hide resolved

dharit-tan reviewed Feb 16, 2023

View reviewed changes

packages/common/src/store/pages/chat/sagas.ts Outdated Show resolved Hide resolved

dharit-tan reviewed Feb 16, 2023

View reviewed changes

packages/common/src/store/pages/chat/sagas.ts Show resolved Hide resolved

dharit-tan approved these changes Feb 16, 2023

View reviewed changes

rickyrombo added 3 commits February 16, 2023 11:21

Math is hard

d3164fb

Explicitly check for _all_ messages being unread

b5b7ecc

Style links

a2a006f

piazzatron approved these changes Feb 16, 2023

View reviewed changes

rickyrombo added 3 commits February 16, 2023 11:29

use dayjs for comparator

a1a381c

Object args

fe03433

remove unused

147fb36

rickyrombo merged commit ba476cd into main Feb 16, 2023

rickyrombo deleted the mjp-dms-unread-indicator branch February 16, 2023 21:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DMs] Unread separator, scrolling, and other bugfixes #2867

[DMs] Unread separator, scrolling, and other bugfixes #2867

rickyrombo commented Feb 15, 2023 •

edited

Loading

audius-infra commented Feb 16, 2023

audius-infra commented Feb 16, 2023

audius-infra commented Feb 16, 2023

piazzatron left a comment

piazzatron Feb 16, 2023

rickyrombo Feb 16, 2023

piazzatron Feb 16, 2023

rickyrombo Feb 16, 2023


		const ref = useRef<HTMLDivElement>(null)

		// A ref so that the unread separator doesn't disappear immediately when the chat is marked as read

[DMs] Unread separator, scrolling, and other bugfixes #2867

[DMs] Unread separator, scrolling, and other bugfixes #2867

Conversation

rickyrombo commented Feb 15, 2023 • edited Loading

Description

Dragons

How Has This Been Tested?

How will this change be monitored?

Feature Flags

audius-infra commented Feb 16, 2023

audius-infra commented Feb 16, 2023

audius-infra commented Feb 16, 2023

piazzatron left a comment

Choose a reason for hiding this comment

piazzatron Feb 16, 2023

Choose a reason for hiding this comment

rickyrombo Feb 16, 2023

Choose a reason for hiding this comment

piazzatron Feb 16, 2023

Choose a reason for hiding this comment

rickyrombo Feb 16, 2023

Choose a reason for hiding this comment

rickyrombo commented Feb 15, 2023 •

edited

Loading