[C-4872, C-4993, QA-1538] Add ComposerInput component and update comments and DMs to user the input #9638

Kyle-Shanks · 2024-09-04T20:33:14Z

Description

Lots of changes. I'll run through the PR and make comments in weird spots, but for the most part this PR covers this stuff:

Improve match string regex to handle special characters
Improve match string sorting by length to improve detecting the match within the text area
Improve match string detection for restoring links
Improve match string highlighting functionality
- Detects what should be highlighted better
Improve backspace functionality
- Detects what should be deleted better
- Preserves caret position
Add artist autocomplete
Small updates to Popup to allow it to work better for the changing content size
Small UI updates to comments to add the new send button and stuff
Update text area grow function to use the display element to grow properly

How Has This Been Tested?

Lots of manual testing on local stack against staging and prod

…input

changeset-bot · 2024-09-04T20:33:18Z

⚠️ No Changeset found

Latest commit: f02d18b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

audius-infra · 2024-09-05T02:40:42Z

Preview this change https://demo.audius.co/kj-Update-chat-composer-for-comments

audius-infra · 2024-09-05T16:47:45Z

Preview this change https://demo.audius.co/kj-Update-chat-composer-for-comments

DejayJD · 2024-09-05T17:22:26Z

packages/common/src/hooks/chats/useAudiusLinkResolver.ts

+  return str.replace(specialChars, '\\$&')
+}
+
+export type LinkEntity =


This union type is nice! I dig the readability

DejayJD · 2024-09-05T17:24:54Z

packages/common/src/hooks/chats/useAudiusLinkResolver.ts

+export type LinkEntity =
+  | {
+      link: string
+      type: 'track'


nit: this could be an enum; could maybe use EntityType?

yea i was thinking of using Kind here, but seemed like overkill

I think we decided to stop using enums as much and prefer plain strings? down to debate again, but that pattern seems to be the standard

DejayJD · 2024-09-05T17:28:57Z

packages/common/src/hooks/chats/useAudiusLinkResolver.ts

-  const clearLinks = useCallback(() => {
-    setTrackId(null)
-    setCollectionId(null)
-  }, [setTrackId, setCollectionId])
-
-  /**
-   * Updates the track id and/or collection id state if found in matching text
-   */
-  useEffect(() => {
-    for (const [human, { data }] of Object.entries(humanToData)) {
-      if (value.includes(human)) {
-        if (instanceOfTrack(data)) {
-          setTrackId(decodeHashId(data.id))
-        } else if (instanceOfPlaylist(data)) {
-          setCollectionId(decodeHashId(data.id))
-        }
-        return
-      }
-    }
-    setTrackId(null)
-    setCollectionId(null)
-  }, [trackId, humanToData, value])


No context here; curious why these were removed?

the trackId and collectionId state was very specific to DMs so replaced it with a more general linkEntities state

packages/harmony/src/components/popup/types.ts

packages/mobile/src/screens/chat-screen/ChatTextInput.tsx

DejayJD · 2024-09-05T17:36:08Z

packages/web/src/components/comments/CommentForm.tsx

  isEdit?: boolean
 }

+// TODO: KJ - There is a bit of hacky-ness here with the input. It does not actually work with the form so the form can probably be taken out


🤔 thats annoying; I'd be curious why it doesnt work with a form but its not really much of an issue since we can easily work around it

the useField hook from formik passes some props to the textarea normally and controls the value of the input, but that doesn't work well with the current setup of the composer input. It could probably be updated to work better with the form, but I didn't want to spend too much time on it

Ah yeah that makes sense. No I agree that its totally fine to ignore; the only real reason I included a form here was for accessibility and out of the box enter->submit keyboard behavior. Easy to make sure we solve for those without a form tho

DejayJD · 2024-09-05T17:37:16Z

packages/web/src/components/comments/CommentForm.tsx

  )

  const handleSubmit = ({ commentMessage }: CommentFormValues) => {
+    if (!commentMessage) return


unrelated note (mainly for myself); if a reply comment input is an empty message we should probably trigger it to close

DejayJD · 2024-09-05T17:41:27Z

packages/web/src/components/composer-input/ComposerInput.tsx

@@ -0,0 +1,363 @@
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'


Are there any big changes in here to highlight from the composer component from before?

Mostly the bullet points in the PR description. Lots of small updates to how the link detections are handled and things like that. It's basically an updated version of what was in the ChatComposer component previously

DejayJD · 2024-09-05T17:49:28Z

packages/web/src/components/composer-input/components/AutocompleteText.tsx

+  }
+
+  const { data, status } = useGetSearchResults(params, {
+    debounce: 500,


500 seems like a lot tbh but also maybe thats just right? Looking forward to playing around with it and seeing how it feels!

This was from Ray's testing, but yea it doesn't feel that long when typing unless you're trying really quick

my 500ms was to make it feel like something was happening when things were already cached in the link unfurl. not sure if we need any debounce here. iiuc, this just searches as you're typing? Or was this value lifted from search autocomplete?

packages/web/src/components/composer-input/ComposerInput.tsx

DejayJD

Lets brainstorm on the status Popup issue some more but I think otherwise this is looking good!
Definitely want to wait for @raymondjacobson to take a look before merging tho

raymondjacobson

JD's feedback is more valuable than mine! but nothing jumps out to me as blocking except for 1 q. looking forward to playing around w/ this

packages/web/src/components/composer-input/ComposerInput.tsx

raymondjacobson · 2024-09-05T19:05:05Z

packages/common/src/hooks/chats/useAudiusLinkResolver.ts

+export type LinkEntity =
+  | {
+      link: string
+      type: 'track'


I think we decided to stop using enums as much and prefer plain strings? down to debate again, but that pattern seems to be the standard

packages/common/src/hooks/chats/useAudiusLinkResolver.ts

packages/harmony/src/components/popup/types.ts

raymondjacobson · 2024-09-05T19:11:43Z

packages/mobile/src/screens/chat-screen/ChatTextInput.tsx

+  const trackId = useMemo(() => {
+    const track = linkEntities.find((e) => e.type === 'track')
+    return track ? decodeHashId(track.data.id) : null
+  }, [linkEntities])


nit newline

packages/web/src/components/composer-input/ComposerInput.tsx

raymondjacobson · 2024-09-05T19:15:43Z

packages/web/src/components/composer-input/components/AutocompleteText.tsx

+  }
+
+  const { data, status } = useGetSearchResults(params, {
+    debounce: 500,


my 500ms was to make it feel like something was happening when things were already cached in the link unfurl. not sure if we need any debounce here. iiuc, this just searches as you're typing? Or was this value lifted from search autocomplete?

audius-infra · 2024-09-05T19:42:37Z

Preview this change https://demo.audius.co/kj-Update-chat-composer-for-comments

audius-infra · 2024-09-05T21:09:28Z

Preview this change https://demo.audius.co/kj-Update-chat-composer-for-comments

[34d5a5a] [PAY-3213] ChatListBlastItem mobile UI (#9656) Reed [518f4d8] fix typecheck on main (#9669) Andrew Mendelsohn [f183d96] fix type for spl_usdc_payout_wallet on user adapter (#9667) Randy Schott [dab6070] [QA-1528] Move audius-query force ref tracking to useState (#9661) Andrew Mendelsohn [d9022cb] fix typecheck in ChatBlastSelectAudienceFields (#9668) Andrew Mendelsohn [cdb428a] [QA-1529] Add guard for -1 ids to audius-query api hooks (#9647) Andrew Mendelsohn [ec1dd85] [QA-1542] Fix mobile top supporters crashing profile page (#9646) Andrew Mendelsohn [7f49a62] [PAY-3416] Adds v1 account endpoint (#9651) Randy Schott [807d569] [C-5009] Add debug theme (#9611) Dylan Jeffers [9f75690] [C-5005] Add comment counts (#9630) Dylan Jeffers [dc74998] [C-4872, C-4993, QA-1538] Add ComposerInput component and update comments and DMs to user the input (#9638) Kyle Shanks [2bec1f2] [PAY-3420] Update styles on checkout UI (#9649) Raymond Jacobson [d90eeac] [QA-1545] Fix cover art size on album search results (#9654) Raymond Jacobson [842a762] Set audienceContentType=track for remix chat blasts (#9655) Reed [0e6b44e] [C-4975] Comments pagination (#9633) JD Francis [85fe0e7] Display audience counts in chat blast items (#9640) Reed [8236a47] [PAY-3401] Consolidate pay with anything tx (#9645) Raymond Jacobson [f897d8f] [PAY-3411] Enable monetization for everyone when network cut is enabled (#9644) Marcus Pasell [0902048] Add stems api for v1 (#9513) Raymond Jacobson [d04bf16] [C-4956] Add mobile comments sort ui (#9637) Sebastian Klingler [b915249] Fix purchasers count in chat blast modal (#9639) Reed [adf2207] [PAY-3370] Always use encoded content IDs in chats (#9636) Reed [53fe54e] [PAY-3388] Migrate feed to SDK (#9593) Randy Schott [59435ae] Show content title in chat blast item (#9627) Reed [824fc47] [C-4752] Reduce border width for small Avatar (#9612) Dylan Jeffers [fa9b498] [C-4952] Mobile comment overflow action confirmations (#9622) Sebastian Klingler [065e8b8] [PAY-3408][PAY-3409][PAY-3408][PAY-3405][PAY-3413] Update Sales/Purchase Modal (#9624) Marcus Pasell [04f810a] [PAY-3404] Fix floor() for negative numbers that are already floored (#9623) Marcus Pasell [fdc7cf3] Fix purchasing without network split (#9629) Marcus Pasell [682e7d4] [PAY-3410][PAY-3406] Update Sales Table help link and "Value" => "Total" (#9625) Marcus Pasell [2e621bb] [QA-1439] Don't block gated tracks from being remixes (#9620) Andrew Mendelsohn [cb753b3] [C-5008] Add single and multi lineHeight options to Text (#9610) Dylan Jeffers [11911da] [PAY-3378] Disable blast audiences radios with no recipients (#9619) Reed [826d3ae] Only add blasts to store for sender (#9617) Reed [661cca7] [PAY-3206] Populate content targeting dropdowns for blast modal (web) (#9601) Andrew Mendelsohn [f365f01] Add support for expand rounding mode to FixedDecimal (#9606) Marcus Pasell [d6344cb] Fix web external-text-link style propagation (#9609) Dylan Jeffers [90b3b41] [PAY-3324] Add copy notice around network take rate (#9608) Marcus Pasell [d876547] Release mobile apps to 113 (#9614) Dylan Jeffers [e9091d8] [C-5001] Add comment disabling for tracks (#9594) Dylan Jeffers [66b1e99] Fix broken common tests (#9605) Marcus Pasell

Add ComposerInput component and update comments and DMs to user this …

dcfb8f5

…input

Kyle-Shanks requested review from DejayJD, dylanjeffers and raymondjacobson September 4, 2024 20:33

pull-request-size bot added the size/XXL label Sep 4, 2024

Kyle-Shanks changed the title ~~Add ComposerInput component and update comments and DMs to user the input~~ [C-4872] Add ComposerInput component and update comments and DMs to user the input Sep 4, 2024

Kyle-Shanks changed the title ~~[C-4872] Add ComposerInput component and update comments and DMs to user the input~~ [C-4872, QA-1538] Add ComposerInput component and update comments and DMs to user the input Sep 4, 2024

fix lint

74fd195

Fix height scaling for textarea with display element

cf53433

Kyle-Shanks changed the title ~~[C-4872, QA-1538] Add ComposerInput component and update comments and DMs to user the input~~ [C-4872, C-4993, QA-1538] Add ComposerInput component and update comments and DMs to user the input Sep 5, 2024