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

…98706)

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.

client/my-sites/checkout/modal/index.tsx

@@ -10,7 +10,7 @@ import { getRazorpayConfiguration, getStripeConfiguration } from 'calypso/lib/st
 import CalypsoShoppingCartProvider from 'calypso/my-sites/checkout/calypso-shopping-cart-provider';
 import CheckoutMain from 'calypso/my-sites/checkout/src/components/checkout-main';
 import { useSelector, useDispatch } from 'calypso/state';
-import getPreviousRoute from 'calypso/state/selectors/get-previous-route.js';
+import getPreviousRoute from 'calypso/state/selectors/get-previous-route';
 import isAtomicSite from 'calypso/state/selectors/is-site-automated-transfer';
 import { isJetpackSite } from 'calypso/state/sites/selectors';
 import { setSelectedSiteId } from 'calypso/state/ui/actions';

client/reader/list-stream/empty.tsx

@@ -0,0 +1,39 @@
+import { useTranslate } from 'i18n-calypso';
+import { useSelector } from 'react-redux';
+import EmptyContent from 'calypso/components/empty-content';
+import getPreviousRoute from 'calypso/state/selectors/get-previous-route';
+
+export default function ListEmptyContent(): JSX.Element {
+	const translate = useTranslate();
+	const previousRoute: string = useSelector( getPreviousRoute );
+
+	function previousRouteIsUserProfileLists(): boolean {
+		return /^\/read\/users\/[a-z0-9]+\/lists\??$/.test( previousRoute );
+	}
+
+	function getActionBtnLink(): string {
+		return previousRouteIsUserProfileLists() ? previousRoute : '/read';
+	}
+
+	function getActionBtnText(): string {
+		return previousRouteIsUserProfileLists()
+			? translate( 'Back to User Profile' )
+			: translate( 'Back to Following' );
+	}
+
+	const action = (
+		<a className="empty-content__action button is-primary" href={ getActionBtnLink() }>
+			{ getActionBtnText() }
+		</a>
+	);
+
+	return (
+		<EmptyContent
+			title={ translate( 'No recent posts' ) }
+			line={ translate( 'The sites in this list have not posted anything recently.' ) }
+			action={ action }
+			illustration="/calypso/images/illustrations/illustration-empty-results.svg"
+			illustrationWidth={ 400 }
+		/>
+	);
+}

client/state/selectors/get-previous-route.js → client/state/selectors/get-previous-route.ts

@@ -1,20 +1,21 @@
 import { stringify } from 'qs';
 import getPreviousPath from 'calypso/state/selectors/get-previous-path';
 import getPreviousQuery from 'calypso/state/selectors/get-previous-query';
+import { AppState } from 'calypso/types';
+
 /**
  * Gets the previous route set by a ROUTE_SET action
- * @param {Object} state - global redux state
+ * @param {AppState} state - global redux state
  * @returns {string} previous route value
  */
-
-export const getPreviousRoute = ( state ) => {
+export default function getPreviousRoute( state: AppState ): string {
 	const previousPath = getPreviousPath( state );
 	const previousQuery = getPreviousQuery( state );
 	let query = '';
+
 	if ( previousQuery ) {
 		query = '?' + stringify( previousQuery );
 	}
-	return previousPath + query;
-};
 
-export default getPreviousRoute;
+	return previousPath + query;
+}