User Profile: List component #98225

artemiomorales · 2025-01-10T16:30:38Z

Related to https://github.com/Automattic/loop/issues/271

Proposed Changes

This PR adds a component containing a user's public lists on the profile page.

Why are these changes being made?

Part of an overall project to create a user profile page.

Testing Instructions

Check out 169751-ghe-Automattic/wpcom in your sandbox (this contains the new /v1/read/lists/{user_slug} endpoint used in this PR)
Visit http://calypso.localhost:3000/read/users/218803706/lists — see that the lists component is being rendered.
Test other user pages too with the following URL format: /read/users/{user_id}/lists

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

matticbot · 2025-01-10T16:31:33Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129904

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129904&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-129904&env=a8c-for-agencies

matticbot · 2025-01-10T16:40:38Z

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~85 bytes added 📈 [gzipped])

name                             parsed_size           gzip_size
write-flow                            +291 B  (+0.0%)      +63 B  (+0.0%)
site-blocks                           +291 B  (+0.0%)      +63 B  (+0.0%)
reader                                +291 B  (+0.0%)      +63 B  (+0.0%)
plugins                               +291 B  (+0.0%)      +63 B  (+0.0%)
link-in-bio-tld-flow                  +291 B  (+0.0%)      +63 B  (+0.0%)
jetpack-cloud-plugin-management       +291 B  (+0.0%)      +63 B  (+0.0%)
home                                  +291 B  (+0.0%)      +63 B  (+0.0%)
build-flow                            +291 B  (+0.0%)      +63 B  (+0.0%)
comments                               +82 B  (+0.0%)      +22 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~1746 bytes added 📈 [gzipped])

name                                                     parsed_size             gzip_size
async-load-calypso-reader-user-stream                        +7618 B  (+182.9%)    +1638 B  (+100.6%)
async-load-design-blocks                                      +291 B    (+0.0%)      +63 B    (+0.0%)
async-load-calypso-components-web-preview-component           +291 B    (+0.1%)      +63 B    (+0.0%)
async-load-calypso-blocks-support-article-dialog-dialog       +291 B    (+0.3%)      +63 B    (+0.2%)
async-load-calypso-reader-sidebar                             +237 B    (+0.2%)      +45 B    (+0.2%)
async-load-calypso-reader-list-stream                         +237 B    (+1.6%)      +45 B    (+1.0%)
async-load-calypso-reader-list-manage                         +237 B    (+0.8%)      +45 B    (+0.6%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

artemiomorales · 2025-01-13T08:45:31Z

client/state/reader/lists/reducer.js

-			return Object.assign( {}, state, keyBy( action.lists, 'ID' ) );
-		case READER_LIST_REQUEST_SUCCESS:
-		case READER_LIST_UPDATE_SUCCESS:
-			return Object.assign( {}, state, keyBy( [ action.data.list ], 'ID' ) );
-		case READER_LIST_DELETE:
-			if ( ! ( action.listId in state ) ) {
-				return state;
-			}
-			return omit( state, action.listId );


Do we no longer need these cases?

Overall, I think there may be obsolete lists functionality in here confounding the situation.

This change isn't necessary for this PR and deals with existing functionality, so I reverted it.
As we continue working on the Lists feature, we can determine later whether it makes sense to refactor.

artemiomorales · 2025-01-13T18:13:47Z

I reused the post card for some basic styling for this list component. How does this look?

It'd be nice to have an icon for the list a la Blue Sky, but we don't have support for that.

I'd consider making the text smaller, and also put the description in a lighter color, though think it's also fine as is.

Do we have a design system or language we should follow? I figured it'd be good to get feedback before investing time into tweaking it.

artemiomorales · 2025-01-13T20:58:53Z

client/state/data-layer/wpcom/read/lists/index.js

+				userSlug: action.userSlug,
+				lists: apiResponse?.lists,
+			} ),
+			onError: () => noop,


Should we have an error state? 🤔

I think an error state could be handled as part of a separate PR.

matticbot · 2025-01-13T22:36:40Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

notifications

To test WordPress.com changes, run install-plugin.sh $pluginSlug try/user-profile-list-stream on your sandbox.

artemiomorales · 2025-01-14T00:45:16Z

client/reader/user-stream/style.scss

+	.user-profile__lists-body {
+		max-width: 768px;
+		margin: 0 auto;
+
+		.user-profile__lists .reader-post-card__title {
+			margin-top: 0;
+
+			.reader-post-card__title-link {
+				font-size: 1.25rem;
+			}
+		}
+	}


Just realized I can probably clean up these class names a bit. Will do that tomorrow.

DustyReagan · 2025-01-14T17:41:10Z

client/reader/user-stream/views/lists.tsx

-			/>
+			<div className="user-profile__lists-body">
+				{ lists.map( ( list: List ) => (
+					<div className="card reader-post-card is-compact is-clickable" key={ list.ID }>


Suggested change

<div className="card reader-post-card is-compact is-clickable" key={ list.ID }>

<div className="card reader-post-card is-compact" key={ list.ID }>

This is-clickable class makes the entire card look clickable with the cursor, but only the List title is actually a link. We should probably remove is-clickable here or make the whole card a link. What do you think?

I made the whole card a link! I think that experience is clearer.

DustyReagan

I left a comment about the clickable area. Also, we could probably improve the mobile view. But overall this is working and looks good to me. I think we can ship it and iterate on it.

artemiomorales commented Jan 13, 2025

View reviewed changes

Ricardo Artemio Morales and others added 10 commits January 13, 2025 17:04

Add first pass at list component

a0bb76a

Fix infinite API calls in UserLists by removing isLoading from useEffect

a4e9de6

Initial working commit

44203d3

Improve styles

f3b3d56

Revert unnecessary changes to user stream component and store

b1232ff

Remove unused action types

fc91227

Add clarifying comments

9e75aee

Revert changes to list items store

a3c753d

Fix typo

eb0f789

Fix type errors and simplify lists connect()

8888f2a

artemiomorales force-pushed the try/user-profile-list-stream branch from 1069ade to 8888f2a Compare January 13, 2025 22:28

artemiomorales marked this pull request as ready for review January 13, 2025 22:29

artemiomorales requested a review from a team as a code owner January 13, 2025 22:29

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 13, 2025

artemiomorales commented Jan 14, 2025

View reviewed changes

DustyReagan reviewed Jan 14, 2025

View reviewed changes

DustyReagan approved these changes Jan 14, 2025

View reviewed changes

Make the whole lists card a link; fix styles

c739fb9

davemart-in assigned artemiomorales Jan 16, 2025

artemiomorales merged commit ed3c9fc into trunk Jan 16, 2025
13 checks passed

artemiomorales deleted the try/user-profile-list-stream branch January 16, 2025 18:19

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 16, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

User Profile: List component #98225

User Profile: List component #98225

artemiomorales commented Jan 10, 2025 •

edited

Loading

matticbot commented Jan 10, 2025 •

edited

Loading

matticbot commented Jan 10, 2025 •

edited

Loading

artemiomorales Jan 13, 2025 •

edited

Loading

artemiomorales Jan 13, 2025 •

edited

Loading

artemiomorales Jan 13, 2025

artemiomorales commented Jan 13, 2025

artemiomorales Jan 13, 2025

artemiomorales Jan 13, 2025

matticbot commented Jan 13, 2025 •

edited

Loading

artemiomorales Jan 14, 2025

DustyReagan Jan 14, 2025

artemiomorales Jan 15, 2025

DustyReagan left a comment

	<div className="card reader-post-card is-compact is-clickable" key={ list.ID }>
	<div className="card reader-post-card is-compact" key={ list.ID }>

User Profile: List component #98225

User Profile: List component #98225

Conversation

artemiomorales commented Jan 10, 2025 • edited Loading

Proposed Changes

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

matticbot commented Jan 10, 2025 • edited Loading

matticbot commented Jan 10, 2025 • edited Loading

artemiomorales Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

artemiomorales Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

artemiomorales Jan 13, 2025

Choose a reason for hiding this comment

artemiomorales commented Jan 13, 2025

artemiomorales Jan 13, 2025

Choose a reason for hiding this comment

artemiomorales Jan 13, 2025

Choose a reason for hiding this comment

matticbot commented Jan 13, 2025 • edited Loading

artemiomorales Jan 14, 2025

Choose a reason for hiding this comment

DustyReagan Jan 14, 2025

Choose a reason for hiding this comment

artemiomorales Jan 15, 2025

Choose a reason for hiding this comment

DustyReagan left a comment

Choose a reason for hiding this comment

artemiomorales commented Jan 10, 2025 •

edited

Loading

matticbot commented Jan 10, 2025 •

edited

Loading

matticbot commented Jan 10, 2025 •

edited

Loading

artemiomorales Jan 13, 2025 •

edited

Loading

artemiomorales Jan 13, 2025 •

edited

Loading

matticbot commented Jan 13, 2025 •

edited

Loading