[C-4953] Mobile comments editing + replying #9584

sliptype · 2024-08-29T21:54:08Z

Description

Wire up editing & replying
- I added some state to context specifically for mobile to avoid prop drilling. Open to other approaches here though
Address first round of QA fixes and styling issues
Improve bottom-sheet scrolling behavior. Most of this was possible by providing custom gesture and scroll handlers but to adjust the height of the sheet content I needed a patch. This is still not 100% but getting close

How Has This Been Tested?

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

changeset-bot · 2024-08-29T21:54:12Z

⚠️ No Changeset found

Latest commit: df304de

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

gitguardian · 2024-08-29T21:54:13Z

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	GitGuardian status	Secret	Commit	Filename
9349019	Triggered	Generic High Entropy Secret	`3be87b4`	dev-tools/config.json	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secret safely. Learn here the best practices.
Revoke and rotate this secret.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.}

audius-infra · 2024-08-29T22:02:25Z

Preview this change https://demo.audius.co/sk-c-4949-comments-styling-loading

audius-infra · 2024-08-30T15:40:48Z

Preview this change https://demo.audius.co/sk-c-4949-comments-styling-loading

audius-infra · 2024-08-30T18:21:51Z

Preview this change https://demo.audius.co/sk-c-4949-comments-styling-loading

audius-infra · 2024-08-30T20:13:20Z

Preview this change https://demo.audius.co/sk-c-4949-comments-styling-loading

DejayJD · 2024-08-30T21:11:24Z

packages/common/src/context/commentsContext.tsx

+  // These are optional because they are only used on mobile
+  // and provided for the components in CommentDrawer
+  replyingToComment?: Comment
+  setReplyingToComment?: (comment: Comment) => void
+  editingComment?: Comment
+  setEditingComment?: (comment: Comment) => void
+}


I think optionals is the most practical way to go but the TS purist part of me wonders if a union type + type narrowing would be good too? Probably not a practical type to use tho haha

Oh I kinda like that, could have a separate useCurrentCommentSection on mobile that does the type narrowing 🤔

let me think on this a bit

DejayJD · 2024-08-30T21:42:12Z

packages/mobile/src/components/comments/CommentDrawer.tsx

-        </Flex>
-      </Flex>
+      <>
+        <CommentSkeleton />


@dylanjeffers I like this; I feel like we should do this pattern on web as well

DejayJD · 2024-08-30T21:43:21Z

packages/mobile/src/components/comments/CommentDrawer.tsx

        onDismiss={handleClose}
      >
-        <CommentSectionProvider entityId={entityId}>
+        <CommentSectionProvider


so many providers 😵

Yeah I really wish I could just wrap the whole drawer but unfortunately the content and footer end up in separate places in the hierarchy

DejayJD · 2024-08-30T21:45:24Z

packages/mobile/src/components/comments/CommentDrawerForm.tsx

+  const isLoading =
+    (editingComment ? editCommentStatus : postCommentStatus) === Status.LOADING


Not sure if this looks different on mobile, but I intentionally didnt use the edit status on desktop so that it's just an instant optimistic update

Oh yeah good call, I'll change this

DejayJD · 2024-08-30T21:48:42Z

packages/mobile/src/components/comments/CommentThread.tsx

+
  const { handleLoadMoreReplies } = useCurrentCommentSection()
+
  // TODO: this feels sub-optimal? Maybe fine


can just remove this comment

Suggested change

// TODO: this feels sub-optimal? Maybe fine

DejayJD · 2024-08-30T21:49:11Z

packages/mobile/src/components/fields/HarmonyTextField.tsx

-  const { value } = field
-  const { validateField } = useFormikContext()
-  const error = errorProp ?? errorField
+export const HarmonyTextField = forwardRef(


💯
surprised we hadn't already forwarded the ref

DejayJD · 2024-08-30T21:49:47Z

packages/mobile/src/screens/track-screen/TrackScreenDetailsTile.tsx

  const renderBottomContent = () => {
-    return hasDownloadableAssets ? <DownloadSection trackId={trackId} /> : null
+    return hasDownloadableAssets ? (
+      <>
+        <Divider />
+        <DownloadSection trackId={trackId} />
+      </>
+    ) : null
  }


Whats this? Feels unrelated?

This is a fun one. In a previous PR, I removed the overflow: hidden from the TrackDetailsTile because it was hiding the shadow, which was very noticeable next to the shadow of the comment section. However, there was a divider that was always being rendered, regardless of whether the download section was shown. This divider was also being hidden by the overflow: hidden. So, this change conditionally renders the divider only when needed

DejayJD

Looking good!

audius-infra · 2024-08-30T22:25:08Z

Preview this change https://demo.audius.co/sk-c-4949-comments-styling-loading

[58bdb34] [PAY-3324] Purchase/Sales details w/ take rate (#9602) Marcus Pasell [ebf9040] Support negative fractional numbers in FixedDecimal, default USDC formatting (#9600) Marcus Pasell [fa2ac4c] [C-4953] Mobile comments editing + replying (#9584) Sebastian Klingler [ed697c2] New audius-query hook for paginated queries (#9592) JD Francis [847c075] [PAY-3319][PAY-3399] Update Discovery to support new purchase transaction details (#9586) Marcus Pasell [760bfee] Center long track/collection titles on mobile (#9598) Reed [c18d431] [C-4799] Add mobile-web comments (#9578) Dylan Jeffers [74ab87e] [PAY-3388] Add user feed V1 endpoint (#9583) Randy Schott [f9ae82a] [QA-1510] Simplify hover gradient styles coming from harmony (#9590) Raymond Jacobson [86343d1] Fix search filters (#9595) Sebastian Klingler [398190f] [QA-1498] Reland fix to QA-1498 (#9582) Raymond Jacobson [0b92de2] Revert "Enabling blocking users from commenting (#9469)" (#9552) Isaac Solo [27b6332] [QA-1531][QA-1535] Fix mobile track page issues (#9589) Raymond Jacobson [7649131] Remove quality toggle for mobile downloads (#9587) Reed [92737e3] [PAY-3372] Add sales aggregate endpoint (#9585) Andrew Mendelsohn [ef67166] [QA-1536] Remove download all buttons (#9581) Reed [83bb4bb] Set default comment entity_type in indexing (#9580) Dylan Jeffers [331111e] Update dapp-store build artifacts audius-infra [d08cce0] Fix mobile composer input newlines and unfurl overflow (#9575) Raymond Jacobson [7eb83d7] Fix broken offline mode (#9571) Raymond Jacobson [906f90a] [PAY-3377] Migrate remaining apiClient endpoints to SDK (#9559) Randy Schott [c908aef] Fix mobile comment overflow menu lint (#9577) Dylan Jeffers [0188a6a] [QA-875][QA-850] Fix lineup pagination when dupes are present (#9572) Raymond Jacobson [c83ca67] [PAY-3394] Maintain chat list sort order on blast (#9568) Reed [7470a55] [PAY-3397] Fix mobile layout with UserGeneratedText in DMs (#9570) Raymond Jacobson [2c39178] [PAY-3374] Fix selection colors for composer (#9565) Raymond Jacobson [78a028e] Update comment-section-api (#9551) Dylan Jeffers [fedd220] [PAY-3384] Implement web pay with anything (#9279) Raymond Jacobson [51e911f] [C-4981] Comments desktop tweaks (designer QA) (#9548) JD Francis [fa43c8d] [PAY-3152] Fix Accounts You Manage modal showing after switching accounts (#9558) Randy Schott [39c7764] [PAY-3371] Add endpoint to get tracks by user that have been remixed (#9554) Andrew Mendelsohn [39a1ec1] [QA-1526] Hotfix pagination issues (#9557) JD Francis [cb1446c] Fix types on harmony virtualized (#9553) Raymond Jacobson [c4965de] [C-4955] Comment action drawer (#9534) Sebastian Klingler [713712e] [PAY-2919] Migrate playlists endpoints from apiClient -> sdk (#9535) Randy Schott [f8c197f] [QA-1016] Fix playlist creation from track added time (#9529) Raymond Jacobson [ba1aaed] Fix trending reward notifs (#9532) Isaac Solo [303614d] Add virtualized filter button, Fix option select (#9543) Dylan Jeffers [97ac58e] Bump mobile apps to 1.1.112 Dylan Jeffers [c10b064] [PAY-3348] Remove dead withdrawals code (#9542) Marcus Pasell

sliptype added 7 commits August 27, 2024 14:54

Styling fixes

233e860

Loading state

5f2b766

Allow scrolling at all snap points

cc2eeb6

Improve bottom sheet scrolling behavior

ce79df0

Replying

12a836f

Merge branch 'main' into sk-c-4949-comments-styling-loading

3be87b4

Editing

f2154fa

sliptype requested review from DejayJD and dylanjeffers August 29, 2024 21:54

pull-request-size bot added the size/XXL label Aug 29, 2024

Merge issue

b839c82

Lint fix

ce7508f

Improve height calculation

2c7afff

Merge branch 'main' into sk-c-4949-comments-styling-loading

0ee45a8

DejayJD reviewed Aug 30, 2024

View reviewed changes

Merge branch 'main' into sk-c-4949-comments-styling-loading

53d4d58

DejayJD approved these changes Aug 30, 2024

View reviewed changes

Address pr comments

df304de

sliptype enabled auto-merge (squash) August 30, 2024 22:11

sliptype merged commit fa2ac4c into main Aug 30, 2024

sliptype deleted the sk-c-4949-comments-styling-loading branch August 30, 2024 22:53

		const isLoading =
		(editingComment ? editCommentStatus : postCommentStatus) === Status.LOADING


		const { handleLoadMoreReplies } = useCurrentCommentSection()

		// TODO: this feels sub-optimal? Maybe fine

[C-4953] Mobile comments editing + replying #9584

[C-4953] Mobile comments editing + replying #9584

Uh oh!

Conversation

sliptype commented Aug 29, 2024

Description

How Has This Been Tested?

Uh oh!

changeset-bot bot commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

gitguardian bot commented Aug 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Uh oh!

audius-infra commented Aug 29, 2024

Uh oh!

audius-infra commented Aug 30, 2024

Uh oh!

audius-infra commented Aug 30, 2024

Uh oh!

audius-infra commented Aug 30, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DejayJD Aug 30, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

DejayJD left a comment

Choose a reason for hiding this comment

Uh oh!

audius-infra commented Aug 30, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Aug 29, 2024 •

edited

Loading

gitguardian bot commented Aug 29, 2024 •

edited

Loading

DejayJD Aug 30, 2024 •

edited

Loading