[C-4288] Migrate to new cards in profile, search, and library #8300

dylanjeffers · 2024-05-01T22:44:04Z

Description

Migrates the first tranche of cards to the new system
Adds new 'xs' variant for mobile cards that dynamically sizes
Tons of code removed with this simplified design!

TODO: lots more cards to go, but some of them require lots of changes that i want to do separately

changeset-bot · 2024-05-01T22:44:08Z

⚠️ No Changeset found

Latest commit: f4c15eb

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

amendelsohn

WOHOO! Take the 🪓 to it

amendelsohn · 2024-05-01T22:46:55Z

packages/web/src/components/card/Card.tsx

  s: 200,
  m: 224,
  l: 320
 }

+const xsSize = { minWidth: 140, maxWidth: 190 }


interesting. This one is meant to vary to fit its container?

yeah exactly, cause for small devices, we want the cards to resize down to 140 so two can be side-by-side. otherwise iphone SE it's one card per line. And if we went with 140 to fix that, then larger iphones have cards with lots of space in between.

amendelsohn · 2024-05-01T22:48:16Z

packages/web/src/components/user-card/UserCard.tsx

+      <Avatar
+        userId={id}
+        aria-hidden
+        p='l'
+        pb='s'
+        imageSize={avatarSizeMap[size]}
+      />


Why doesn't this belong inside CardContent?

yeah it's a bit awkward... the images have very different padding and resize considerations. I could have a CardImage wrapper to make that more explicit?

or maybe change the name from CardContent to CardText or something like that to make it more clear?

amendelsohn · 2024-05-01T22:49:14Z

packages/web/src/pages/profile-page/components/desktop/ProfilePage.tsx

+    const albumCards = albums.map((album) => (
+      <CollectionCard key={album.playlist_id} id={album.playlist_id} size='m' />


It's so beautiful 🥲

amendelsohn · 2024-05-01T22:49:48Z

packages/web/src/pages/saved-page/components/desktop/PlaylistsTabPage.tsx

-      ...collections?.map(({ playlist_id: id }, i) => {
-        return <CollectionCard index={i} key={id} albumId={id} />
+      ...collections?.map(({ playlist_id: id }) => {
+        return <CollectionCard key={id} id={id} size='m' />


ah nice improvement with the key

amendelsohn · 2024-05-01T22:50:30Z

packages/web/src/pages/search-page/components/desktop/SearchPageContent.jsx

is this one simple enough now that we can easily jsx -> tsx it while we're here?

amendelsohn · 2024-05-01T22:52:35Z

packages/web/src/pages/search-page/components/desktop/SearchPageContent.module.css

haven't looked too closely, but it might not be too hard to get rid of all the css here

so just talked with julian, and we are going to be updating search page a lot soon, so lets wait to get rid of all this then.

audius-infra · 2024-05-01T22:56:09Z

Preview this change https://demo.audius.co/dj-c-4288-migrate-cards

…cher * origin/main: (47 commits) [PAY-2728] Implement edit app flow (#8256) Audius Protocol v0.6.94 [C-4288] Migrate to new cards in profile, search, and library (#8300) Upgrade dapp-store to 0.8.1 (#8311) [PAY-2794] Use UserLink for purchases/sales tables (#8306) [PAY-2810] Purchase/Sale email fix text for albums (#8310) [PAY-2764] Implement DeveloperApp Update entity manager action (#8254) [PAY-2772] Fix collection description text size (#8309) [PAY-2822] Convert LockedContentDetailsTile to Harmony (#8308) [PAY-2781] Poll for track access on album purchase (#8296) Convert swagger.json to OAS 3.0 before generating SDK types (#8274) Retrigger logic for android notification permissions post-manifest fix (#8305) [PAY-2815] Show unlocked icon if dm content is purchased (#8303) [PAY-2779] Fix validation for albumTrackPrice (#8302) Fix EditCollection playwright test (#8304) [PAY-2823] Edit Album access control fixes (#8298) [QA-971] Fix smart collections (#8299) [PAY-2791] Show only own albums in artist dashboard (#8297) [Web] [Harmony] Add accounts managing you modal [C-4295] [C-4292] (#8258) [C-4238, C-4318] Add ssr small bundle flow for mobile track page (#8293) ...

[9f44712] Reapply "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) (#8344) Marcus Pasell [2ea74f3] Fix issues with text-link variant (#8343) Dylan Jeffers [f005b25] [PAY-2860] SDK Services Config - Configure SDK using environment (#8329) Marcus Pasell [11a0813] Disable add to playlist for prem tracks if not purchased (#8336) Reed [33b1916] [C-4335] Migrate all user and collection cards (#8338) Dylan Jeffers [dafaa21] [QA-1241] Fix hidden track add to playlist allowing non hidden items (#8340) JD Francis [4c95031] [QA-956] Add deleted tile for tracks/albums/playlists (#8333) JD Francis [b8f5990] Add error message to upload flow (#8334) JD Francis [22894e8] [QA-957] Fix android overflowing text on access & sale modal (#8313) JD Francis [86f6447] [PAY-2812] Change spend to earn challenge copy (#8332) Reed [d4c4264] Close modal on done (#8331) Saliou Diallo [ded4933] [PAY-2861] CollectionCard fixes (#8330) Dylan Jeffers [36277cd] Revert "Convert swagger.json to OAS 3.0 before generating SDK types (#8274)" (#8324) Marcus Pasell [146b2e0] [QA-1212] Fix chromecast (#8323) Raymond Jacobson [0b33e68] [PAY-2738] Public album with prem track always shows buy button (#8321) Reed [d897a98] [C-4333] Migrate follow-users to new sign-up flow (#8312) Dylan Jeffers [3129a3a] [PAY-2799] Show preview button for collections (#8271) Reed [8c58601] Modify /etc/hosts on CI machines before api test (#8319) Danny [3586f41] [PAY-2859] Fix bugs in edit app flow (#8320) Raymond Jacobson [1bf3e97] [PAY-2801] Purchased selectable filter in library albums (#8318) Reed [6db35c6] [C-4285] Add claim all rewards button functionality (#8292) Saliou Diallo [a20d85a] [PAY-2728] Implement edit app flow (#8256) Raymond Jacobson [714a3d1] [C-4288] Migrate to new cards in profile, search, and library (#8300) Dylan Jeffers [4dceb61] Upgrade dapp-store to 0.8.1 (#8311) Dylan Jeffers [4d37233] [PAY-2794] Use UserLink for purchases/sales tables (#8306) Reed [fc2aef3] [PAY-2772] Fix collection description text size (#8309) Reed [c35bfe1] [PAY-2822] Convert LockedContentDetailsTile to Harmony (#8308) Reed [f7a921e] [PAY-2781] Poll for track access on album purchase (#8296) Reed [621c3ee] Convert swagger.json to OAS 3.0 before generating SDK types (#8274) Marcus Pasell [09789c1] Retrigger logic for android notification permissions post-manifest fix (#8305) JD Francis [b9c042a] [PAY-2815] Show unlocked icon if dm content is purchased (#8303) Andrew Mendelsohn [722e933] [PAY-2779] Fix validation for albumTrackPrice (#8302) Andrew Mendelsohn [963bec4] Fix EditCollection playwright test (#8304) Andrew Mendelsohn [7e0aa7e] [PAY-2823] Edit Album access control fixes (#8298) Andrew Mendelsohn [b42b6fd] [QA-971] Fix smart collections (#8299) Raymond Jacobson [eceb876] [PAY-2791] Show only own albums in artist dashboard (#8297) Reed [87ce027] [Web] [Harmony] Add accounts managing you modal [C-4295] [C-4292] (#8258) nicoback2 [7a3567c] [C-4238, C-4318] Add ssr small bundle flow for mobile track page (#8293) Kyle Shanks [c7c3752] [PAY-2800] Fix mobile navigate to album on purchase success (#8295) Reed [f113a91] [PAY-2802] Auto-favorite tracks in purchased album (#8294) Reed [d32934f] [C-4284] Fix rewards in mobile web (#8291) Saliou Diallo [45c4bc6] [PAY-2775] Remove suggested tracks for albums (#8288) Andrew Mendelsohn [22280c6] [C-4080] Mobile cooldown and claim all (#8263) Isaac Solo [80cca19] Jail broken test (#8289) Raymond Jacobson [d7c8e34] [PAY-2766] Analytics events for premium albums (#8262) JD Francis [c3ee4a8] [PAY-2817] Web collections show reposts, remove artist column (#8272) Reed [6f8bab6] Fix lint items (#8285) Raymond Jacobson [e8debc0] [PAY-2703] Redesign mobile collection and track screen tiles (#8255) Andrew Mendelsohn [a3964a8] Bump android build number for release-client-v1.5.78 (#8286) Raymond Jacobson [8481f8d] [C-4327] Fix track ordering within playlist/album (#8284) Raymond Jacobson [5165172] Bump android version for manifest changes (#8283) JD Francis [4e60f97] [C-4312] Add UserCard (#8276) Dylan Jeffers [35ed4ec] [ONC-82] Fix android notif permissions (#8279) JD Francis [82e1c67] [C-4323] Improve Avatar (#8273) Dylan Jeffers [909db7c] [C-4316, C-4317] SSR work to render webplayer and track page for web (#8268) Kyle Shanks [7417a40] Generate sdk after ursm code removal (#8275) Raymond Jacobson [62b5a08] Update Add Funds copy and loading state (#8266) Saliou Diallo [4503cc7] PROTO-1328: always default to discovery relay (#8247) alecsavvy [f42c6cd] Fix text-input spacing (#8270) Dylan Jeffers [75fd847] [C-4270] Fix text-link transition (#8260) Dylan Jeffers [df0349a] [PAY-2761] Add managed users endpoints (#8238) Randy Schott [5b4c998] [ONC-84] Add try/catch (#8264) Raymond Jacobson [2b5f89c] Fix clipped text in TracksTable name column (#8265) Reed [c3256fa] [C-4275] Add google-inspectiontool to crawler regex (#8261) Sebastian Klingler [5750045] [C-4033] Prevent useTabs from redirecting on page load (#8259) Sebastian Klingler [b17ff70] [PAY-2758] Allow gated tracks to be added to playlists (#8227) Reed

dylanjeffers added 3 commits May 1, 2024 01:24

[C-4288] Migrate collection and user cards

83ce631

Add image sizes

36d41d3

Fixes

f4c15eb

pull-request-size bot added the size/XL label May 1, 2024

dylanjeffers requested review from amendelsohn and dharit-tan May 1, 2024 22:44

amendelsohn approved these changes May 1, 2024

View reviewed changes

dylanjeffers merged commit 714a3d1 into main May 2, 2024
18 of 22 checks passed

dylanjeffers deleted the dj-c-4288-migrate-cards branch May 2, 2024 06:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-4288] Migrate to new cards in profile, search, and library #8300

[C-4288] Migrate to new cards in profile, search, and library #8300

dylanjeffers commented May 1, 2024 •

edited

changeset-bot bot commented May 1, 2024

amendelsohn left a comment

amendelsohn May 1, 2024

dylanjeffers May 2, 2024

amendelsohn May 1, 2024

dylanjeffers May 2, 2024

dylanjeffers May 2, 2024

amendelsohn May 1, 2024

amendelsohn May 1, 2024

amendelsohn May 1, 2024

amendelsohn May 1, 2024

dylanjeffers May 2, 2024

amendelsohn May 1, 2024

dylanjeffers May 2, 2024

audius-infra commented May 1, 2024

		const albumCards = albums.map((album) => (
		<CollectionCard key={album.playlist_id} id={album.playlist_id} size='m' />

[C-4288] Migrate to new cards in profile, search, and library #8300

[C-4288] Migrate to new cards in profile, search, and library #8300

Conversation

dylanjeffers commented May 1, 2024 • edited

Description

changeset-bot bot commented May 1, 2024

⚠️ No Changeset found

amendelsohn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented May 1, 2024

dylanjeffers commented May 1, 2024 •

edited