History: add getLocationWithParams method

WordPress · May 21, 2024 · 41eeb26 · 41eeb26
1 parent 9ea4204
commit 41eeb26
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 49 deletions.
diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js
@@ -26,14 +26,13 @@ import {
 	TEMPLATE_PART_POST_TYPE,
 } from '../../utils/constants';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModal, useAddPatternCategory } = unlock(
 	editPatternsPrivateApis
 );
 
 export default function AddNewPattern() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
@@ -136,16 +135,17 @@ export default function AddNewPattern() {
 						return;
 					}
 					try {
+						const {
+							params: { categoryType, categoryId },
+						} = history.getLocationWithParams();
 						let currentCategoryId;
 						// When we're not handling template parts, we should
 						// add or create the proper pattern category.
-						if ( params.categoryType !== TEMPLATE_PART_POST_TYPE ) {
+						if ( categoryType !== TEMPLATE_PART_POST_TYPE ) {
 							const currentCategory = categoryMap
 								.values()
-								.find(
-									( term ) => term.name === params.categoryId
-								);
-							if ( !! currentCategory ) {
+								.find( ( term ) => term.name === categoryId );
+							if ( currentCategory ) {
 								currentCategoryId =
 									currentCategory.id ||
 									( await findOrCreateTerm(
@@ -165,7 +165,7 @@ export default function AddNewPattern() {
 						// category.
 						if (
 							! currentCategoryId &&
-							params.categoryId !== 'my-patterns'
+							categoryId !== 'my-patterns'
 						) {
 							history.push( {
 								path: `/patterns`,

diff --git a/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js b/packages/edit-site/src/components/page-patterns/dataviews-pattern-actions.js
@@ -19,7 +19,7 @@ import {
 } from '../../utils/constants';
 import { CreateTemplatePartModalContents } from '../create-template-part-modal';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { CreatePatternModalContents, useDuplicatePatternProps } =
 	unlock( patternsPrivateApis );
 
@@ -30,12 +30,12 @@ export const duplicatePatternAction = {
 	modalHeader: _x( 'Duplicate pattern', 'action label' ),
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
-		const {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
 		const isThemePattern = item.type === PATTERN_TYPES.theme;
 		const history = useHistory();
 		function onPatternSuccess( { pattern } ) {
+			const {
+				params: { categoryId = PATTERN_DEFAULT_CATEGORY },
+			} = history.getLocationWithParams();
 			history.push( {
 				categoryType: PATTERN_TYPES.theme,
 				categoryId,
@@ -66,9 +66,6 @@ export const duplicateTemplatePartAction = {
 	RenderModal: ( { items, closeModal } ) => {
 		const [ item ] = items;
 		const { createSuccessNotice } = useDispatch( noticesStore );
-		const {
-			params: { categoryId = PATTERN_DEFAULT_CATEGORY },
-		} = useLocation();
 		const history = useHistory();
 		function onTemplatePartSuccess( templatePart ) {
 			createSuccessNotice(
@@ -79,6 +76,9 @@ export const duplicateTemplatePartAction = {
 				),
 				{ type: 'snackbar', id: 'edit-site-patterns-success' }
 			);
+			const {
+				params: { categoryId = PATTERN_DEFAULT_CATEGORY },
+			} = history.getLocationWithParams();
 			history.push( {
 				postType: TEMPLATE_PART_POST_TYPE,
 				postId: templatePart?.id,

diff --git a/packages/edit-site/src/components/pattern-modal/duplicate.js b/packages/edit-site/src/components/pattern-modal/duplicate.js
@@ -15,14 +15,11 @@ import { unlock } from '../../lock-unlock';
 import useEditedEntityRecord from '../use-edited-entity-record';
 
 const { DuplicatePatternModal } = unlock( patternsPrivateApis );
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 const { interfaceStore } = unlock( editorPrivateApis );
 
 export default function PatternDuplicateModal() {
 	const { record } = useEditedEntityRecord();
-	const {
-		params: { categoryType, categoryId },
-	} = useLocation();
 	const { closeModal } = useDispatch( interfaceStore );
 	const history = useHistory();
 
@@ -35,6 +32,9 @@ export default function PatternDuplicateModal() {
 	}
 
 	function onSuccess( { pattern: newPattern } ) {
+		const {
+			params: { categoryType, categoryId },
+		} = history.getLocationWithParams();
 		history.push( {
 			categoryType,
 			categoryId,

diff --git a/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js b/packages/edit-site/src/components/sidebar-dataviews/custom-dataviews-list.js
@@ -27,7 +27,7 @@ import DataViewItem from './dataview-item';
 import AddNewItem from './add-new-view';
 import { unlock } from '../../lock-unlock';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 const EMPTY_ARRAY = [];
 
@@ -81,9 +81,6 @@ function RenameItemModalContent( { dataviewId, currentTitle, setIsRenaming } ) {
 }
 
 function CustomDataViewItem( { dataviewId, isActive } ) {
-	const {
-		params: { path },
-	} = useLocation();
 	const history = useHistory();
 	const { dataview } = useSelect(
 		( select ) => {
@@ -145,9 +142,10 @@ function CustomDataViewItem( { dataviewId, isActive } ) {
 											}
 										);
 										if ( isActive ) {
-											history.replace( {
-												path,
-											} );
+											const {
+												params: { path },
+											} = history.getLocationWithParams();
+											history.replace( { path } );
 										}
 										onClose();
 									} }

diff --git a/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js b/...ges/edit-site/src/components/sidebar-navigation-screen-navigation-menus/leaf-more-menu.js
@@ -20,10 +20,9 @@ const POPOVER_PROPS = {
  */
 import { unlock } from '../../lock-unlock';
 
-const { useLocation, useHistory } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 export default function LeafMoreMenu( props ) {
-	const { params } = useLocation();
 	const history = useHistory();
 	const { block } = props;
 	const { clientId } = block;
@@ -60,6 +59,7 @@ export default function LeafMoreMenu( props ) {
 				attributes.type &&
 				history
 			) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: attributes.type,
@@ -71,6 +71,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 			if ( name === 'core/page-list-item' && attributes.id && history ) {
+				const { params } = history.getLocationWithParams();
 				history.push(
 					{
 						postType: 'page',
@@ -82,7 +83,7 @@ export default function LeafMoreMenu( props ) {
 				);
 			}
 		},
-		[ history, params ]
+		[ history ]
 	);
 
 	return (

diff --git a/packages/edit-site/src/utils/use-activate-theme.js b/packages/edit-site/src/utils/use-activate-theme.js
@@ -14,7 +14,7 @@ import {
 	currentlyPreviewingTheme,
 } from './is-previewing-theme';
 
-const { useHistory, useLocation } = unlock( routerPrivateApis );
+const { useHistory } = unlock( routerPrivateApis );
 
 /**
  * This should be refactored to use the REST API, once the REST API can activate themes.
@@ -23,7 +23,6 @@ const { useHistory, useLocation } = unlock( routerPrivateApis );
  */
 export function useActivateTheme() {
 	const history = useHistory();
-	const { params } = useLocation();
 	const { startResolution, finishResolution } = useDispatch( coreStore );
 
 	return async () => {
@@ -38,6 +37,7 @@ export function useActivateTheme() {
 			finishResolution( 'activateTheme' );
 			// Remove the wp_theme_preview query param: we've finished activating
 			// the queue and are switching to normal Site Editor.
+			const { params } = history.getLocationWithParams();
 			history.replace( { ...params, wp_theme_preview: undefined } );
 		}
 	};

diff --git a/packages/router/src/history.js b/packages/router/src/history.js
@@ -38,7 +38,24 @@ function replace( params, state ) {
 	return originalHistoryReplace.call( history, { search }, state );
 }
 
+const locationMemo = new WeakMap();
+function getLocationWithParams() {
+	const location = history.location;
+	let locationWithParams = locationMemo.get( location );
+	if ( ! locationWithParams ) {
+		locationWithParams = {
+			...location,
+			params: Object.fromEntries(
+				new URLSearchParams( location.search )
+			),
+		};
+		locationMemo.set( location, locationWithParams );
+	}
+	return locationWithParams;
+}
+
 history.push = push;
 history.replace = replace;
+history.getLocationWithParams = getLocationWithParams;
 
 export default history;
diff --git a/packages/router/src/router.js b/packages/router/src/router.js
@@ -3,9 +3,8 @@
  */
 import {
 	createContext,
-	useState,
-	useEffect,
 	useContext,
+	useSyncExternalStore,
 } from '@wordpress/element';
 
 /**
@@ -24,25 +23,13 @@ export function useHistory() {
 	return useContext( HistoryContext );
 }
 
-function getLocationWithParams( location ) {
-	const searchParams = new URLSearchParams( location.search );
-	return {
-		...location,
-		params: Object.fromEntries( searchParams.entries() ),
-	};
-}
-
 export function RouterProvider( { children } ) {
-	const [ location, setLocation ] = useState( () =>
-		getLocationWithParams( history.location )
+	const location = useSyncExternalStore(
+		history.listen,
+		history.getLocationWithParams,
+		history.getLocationWithParams
 	);
 
-	useEffect( () => {
-		return history.listen( ( { location: updatedLocation } ) => {
-			setLocation( getLocationWithParams( updatedLocation ) );
-		} );
-	}, [] );
-
 	return (
 		<HistoryContext.Provider value={ history }>
 			<RoutesContext.Provider value={ location }>