Reader: Update action button link of an empty list of a user profile

[mehmoodak]

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

Proposed Changes

The issue was that on an empty list page, the "Back to Following" button with link /read was being displayed even when navigating from a user profile. This PR fixes this by updating the implementation to display a "Back to User Profile" button with link /read/users/:id/lists instead, allowing users to easily navigate back to the user profile.

Other than this I have also refactored ListEmptyContent to functional component so for easier review each commit can be reviewed separately.

Before	After

Why are these changes being made?

To improve the navigation.

Testing Instructions

• Go to /read/list/artemiosans/a-third-list.
• Verify action button is showing "Back to Following" text with link /read.
• Go to the Lists tab of any user profile (example: /read/users/218803706/lists.
• Click on a list that have no posts yet (example: A Third List).
• Verify action button is showing "Back to User Profile" text with link /read/users/: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)?

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

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

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

name                                   parsed_size           gzip_size
async-load-calypso-reader-list-stream       -215 B  (-1.4%)      +66 B  (+1.4%)

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.

[matticbot]

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

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

• blaze-dashboard
• notifications
• odyssey-stats
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug loop-351/update-action-link-on-empty-user-profile-list on your sandbox.

[DustyReagan]

This part doesn't seem to be working for me on Calypso Live. I'm still seeing "Back to Follow" with a link to /read.

• Go to the Lists tab of any user profile (example: /read/users/218803706/lists.
• Click on a list that have no posts yet (example: A Third List).
• Verify action button is showing "Back to User Profile" text with link /read/users/:id/lists.

Could we always link to the list owner's "Lists" page now? Is there any reason we should link to /read now that we have a user profile page?

[mehmoodak]

This part doesn't seem to be working for me on Calypso Live.

It is fixed now.

Could we always link to the list owner's "Lists" page now? Is there any reason we should link to /read now that we have a user profile page

If I navigate to the list from User Profile then its better to show /users/:id/lists link and if I navigate from sidebar then its better to show /read link.

[Addison-Stavlo]

I can see the button content updating and the href changing, but it loads into a wsod for me currently.

Repro:

• visited /read/users/218803706/lists
• clicked on "A third list" and let the empty list load. (URL on third list /read/list/artemiosans/a-third-list?last_page=/read/users/218803706/lists)
• clicked on "Back to user profile". This is a WSOD as it loads /read/list/artemiosans/%2Fread%2Fusers%2F218803706%2Flists instead of /read/users/218803706/lists

Note - the above is on calypso live. When running the branch locally im seeing the query param added to the url, but the button content and href not changing (continues to go to following). 😕

Are you seeing either of these issues?

[mehmoodak]

I can see the button content updating and the href changing, but it loads into a wsod for me currently.

This should be fixed now (1249bb2).

[Addison-Stavlo]

Confirming this works as expected on calypso.live now.

Also left some more thoughts on the events and removing the param.

[Addison-Stavlo]

This part doesn't seem to be working for me on Calypso Live.

Note - the above is on calypso live. When running the branch locally im seeing the query param added to the url, but the button content and href not changing (continues to go to following). 😕

I was finding more inconsistent issues across calypso live and local just now, I think we might have a race condition. (edit - or not, another issue i noted in a more recent comment below). Essentially, the react app can start loading that route and component before the window href is updated. So this component can start loading before last_page is present in window.location.search. That could be why we sometimes see the "following" button when we wouldn't expect and param still in the window. We may need to look at route data in the app instead.

Secondary to this, another issue il note in comment.

[Addison-Stavlo]

Ok, lets take a step back from my race condition comment etc for now... i have seen similar before but that may not be the problem here.

What I am seeing @mehmoodak, is that sometimes when clicking to view an empty list (even the same empty list from your profile) different components may render:

• the <ListMissing> component
• the <ListEmptyContent> component (altered in this PR).

So when it loads the <ListMissing> component instead for whatever reason, the param stays in the url and button remains to point to follow. 😵 So I think the main inconsistency we have been seeing is related to which of those components gets rendered.

(edit: i wonder if #98766 may help resolve that inconsistency, but I imagine we may want to share this handling in both of the components to be thorough regardless).

[mehmoodak]

What I am seeing @mehmoodak, is that sometimes when clicking to view an empty list (even the same empty list from your profile) different components may render:

I have also noticed two components get rendered for different conditions.

1. ListMissing when list is not found
2. ListEmptyContent when there are no posts in list

While navigating to lists from User Profile we are sure that the list is already present and that's why I only changes ListEmptyContent

i wonder if #98766 may help resolve that inconsistency, but I imagine we may want to share this handling in both of the components to be thorough regardless

I also had same thoughts but still the main reason of not making changes is because we are sure that the list is already there.

[Addison-Stavlo]

navigating to lists from User Profile we are sure that the list is already present

We should be, but my testing (and Dusty's further above) both seem to show inconsistency with this. In testing this PR, going from the user profile into a list has shown both/either component for me at times... which has been the confusion around the inconsistency of this change working or not.

I assuming and hoping that other PR resolves this though, so maybe a rebase may make everything test consistent now.

[mehmoodak]

maybe a rebase may make everything test consistent now.

Done. Please have a look again.

[DustyReagan]

It's working consistently for me!

[Addison-Stavlo]

This tests much more consistently for me now! 🎉 Thanks for working on this.

For non-empty lists, navigating from a users profile lists page into a non-empty list we leave the query arg around in the window url as we use that stream and view posts back and forth:

We should probably remove it there as well, although happy to move that into a followup if preferred or help if needed. It would just be good to get done before we flag everything for production.

[Addison-Stavlo]

It looks like we could actually just use getPreviousRoute selector instead of the query param altogether, that could simplify this a bit.

related slack discussion - p1737737583590569/1737735616.726339-slack-C083J8DHLLD

[mehmoodak]

It looks like we could actually just use getPreviousRoute selector instead of the query param altogether, that could simplify this a bit.

• 5dab2ae - Replaced last_page query param with getPreviousRoute selector.
• b223ca4 - Use this opportunity to refactor getPreviousRoute to TypeScript.

[Addison-Stavlo]

I like it being much more simple now. 😄 I think we have to make some minor adjustments though.

[Addison-Stavlo]

This tests well for me now! And quite a simplicity from where we were before, Looks good!

[a8ci18n]

This Pull Request is now available for translation here: https://translate.wordpress.com/deliverables/17208885

Some locales (Hebrew, Japanese) have been temporarily machine-translated due to translator availability. All other translations are usually ready within a few days. Untranslated and machine-translated strings will be sent for translation next Monday and are expected to be completed by the following Friday.

Thank you @mehmoodak for including a screenshot in the description! This is really helpful for our translators.

[a8ci18n]

Translation for this Pull Request has now been finished.