Me: Make the back button point to the previous page (#89075)

* Me: Make the back button point to the previous page

* Fix the back button doesn't work if the url contains the search keyword

client/layout/global-sidebar/main.jsx

@@ -8,6 +8,8 @@ import { GlobalSidebarHeader } from 'calypso/layout/global-sidebar/header';
 import useSiteMenuItems from 'calypso/my-sites/sidebar/use-site-menu-items';
 import { getIsRequestingAdminMenu } from 'calypso/state/admin-menu/selectors';
 import { getCurrentUser } from 'calypso/state/current-user/selectors';
+import getPreviousRoute from 'calypso/state/selectors/get-previous-route';
+import { getSection } from 'calypso/state/ui/selectors';
 import Sidebar from '../sidebar';
 import { GLOBAL_SIDEBAR_EVENTS } from './events';
 import { GlobalSidebarFooter } from './footer';
@@ -27,6 +29,9 @@ const GlobalSidebar = ( {
 	const translate = useTranslate();
 	const currentUser = useSelector( getCurrentUser );
 	const isDesktop = useBreakpoint( '>=782px' );
+	const previousRoute = useSelector( getPreviousRoute );
+	const section = useSelector( getSection );
+	const previousLink = useRef( previousRoute );
 
 	const handleWheel = useCallback( ( event ) => {
 		const bodyEl = bodyRef.current;
@@ -47,6 +52,13 @@ const GlobalSidebar = ( {
 		};
 	}, [ handleWheel ] );
 
+	useEffect( () => {
+		// Update the previous link only when the group is changed.
+		if ( previousRoute && ! previousRoute.startsWith( `/${ section.group }` ) ) {
+			previousLink.current = previousRoute;
+		}
+	}, [ previousRoute, section.group ] );
+
 	/**
 	 * If there are no menu items and we are currently requesting some,
 	 * then show a spinner. The check for menuItems is necessary because
@@ -57,8 +69,9 @@ const GlobalSidebar = ( {
 		return <Spinner className="sidebar__menu-loading" />;
 	}
 
-	const { requireBackLink, backLinkText, ...sidebarProps } = props;
+	const { requireBackLink, backLinkText, backLinkHref, ...sidebarProps } = props;
 	const sidebarBackLinkText = backLinkText ?? translate( 'Back' );
+	const sidebarBackLinkHref = backLinkHref || previousLink.current || '/sites';
 
 	return (
 		<div className="global-sidebar" ref={ wrapperRef }>
@@ -67,7 +80,7 @@ const GlobalSidebar = ( {
 				<Sidebar className={ className } { ...sidebarProps } onClick={ onClick }>
 					{ requireBackLink && (
 						<div className="sidebar__back-link">
-							<a href="/sites" onClick={ handleBackLinkClick }>
+							<a href={ sidebarBackLinkHref } onClick={ handleBackLinkClick }>
 								<Gridicon icon="chevron-left" size={ 24 } />
 								<span className="sidebar__back-link-text">{ sidebarBackLinkText }</span>
 							</a>

client/reader/sidebar/index.jsx

@@ -296,6 +296,7 @@ export class ReaderSidebar extends Component {
 			onClick: this.handleClick,
 			requireBackLink: true,
 			backLinkText: i18n.translate( 'All sites' ),
+			backLinkHref: '/sites',
 		};
 		return (
 			<GlobalSidebar { ...props }>

client/sites-dashboard/components/sites-content-controls.tsx

@@ -6,6 +6,8 @@ import styled from '@emotion/styled';
 import { sprintf } from '@wordpress/i18n';
 import { useI18n } from '@wordpress/react-i18n';
 import { ComponentPropsWithoutRef, useEffect, useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { getSection } from 'calypso/state/ui/selectors';
 import { MEDIA_QUERIES } from '../utils';
 import { SitesSearch } from './sites-search';
 import { SitesSortingDropdown } from './sites-sorting-dropdown';
@@ -121,6 +123,19 @@ export const SitesContentControls = ( {
 }: SitesContentControlsProps ) => {
 	const { __ } = useI18n();
 	const searchRef = useRef< SearchImperativeHandle >( null );
+	const section = useSelector( getSection );
+	const handleSearch = ( term: string ) => {
+		const queryParams = { search: term?.trim(), page: undefined };
+
+		// There is a chance that the URL is not up to date when it mounts, so delay
+		// the onQueryParamChange call to avoid it getting the incorrect URL and then
+		// redirecting back to the previous path.
+		if ( window.location.pathname.startsWith( `/${ section?.group }` ) ) {
+			onQueryParamChange( queryParams );
+		} else {
+			window.setTimeout( () => onQueryParamChange( queryParams ) );
+		}
+	};
 
 	useSearchShortcut( () => {
 		searchRef.current?.focus();
@@ -130,7 +145,7 @@ export const SitesContentControls = ( {
 		<FilterBar>
 			<SitesSearch
 				searchIcon={ <SearchIcon /> }
-				onSearch={ ( term ) => onQueryParamChange( { search: term?.trim(), page: undefined } ) }
+				onSearch={ handleSearch }
 				isReskinned
 				placeholder={ __( 'Search by name or domain…' ) }
 				disableAutocorrect={ true }

client/state/ui/selectors/get-section.js

@@ -1,9 +1,15 @@
 import 'calypso/state/ui/init';
 
 /**
+ * @typedef {Object} Section
+ * @property {string} name - The name of the section
+ * @property {string[]} paths - The URL paths of the section
+ * @property {string} module - The module path of the section
+ * @property {string} group - The group of the section
+ *
  * Returns the current section.
  * @param  {Object}  state Global state tree
- * @returns {Object}        Current section
+ * @returns {Section}        Current section
  */
 export default function getSection( state ) {
 	return state.ui.section || false;