72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
|
/**
|
||
|
|
* External dependencies
|
||
|
|
*/
|
||
|
|
import {
|
||
|
|
getHistory,
|
||
|
|
getQuery,
|
||
|
|
updateQueryString,
|
||
|
|
} from '@woocommerce/navigation';
|
||
|
|
import { AnyEventObject } from 'xstate5';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* This seemingly complex piece of code is just a function that creates a listener that
|
||
|
|
* sends off the EXTERNAL_URL_UPDATE event when the specified query parameter
|
||
|
|
* changes.
|
||
|
|
*
|
||
|
|
* @param paramName The query parameter to listen for changes
|
||
|
|
*/
|
||
|
|
export const createQueryParamsListener = (
|
||
|
|
paramName: string,
|
||
|
|
sendBack: ( event: AnyEventObject ) => void
|
||
|
|
) => {
|
||
|
|
let previousLocation: ReturnType< typeof getHistory >[ 'location' ] =
|
||
|
|
getHistory().location;
|
||
|
|
const unlisten = getHistory().listen( ( { action, location } ) => {
|
||
|
|
if ( action === 'POP' ) {
|
||
|
|
const previousQuery = new URLSearchParams(
|
||
|
|
previousLocation.search
|
||
|
|
);
|
||
|
|
const currentQuery = new URLSearchParams( location.search );
|
||
|
|
if (
|
||
|
|
previousQuery.get( paramName ) !== currentQuery.get( paramName )
|
||
|
|
) {
|
||
|
|
previousLocation = location;
|
||
|
|
sendBack( { type: 'EXTERNAL_URL_UPDATE' } );
|
||
|
|
}
|
||
|
|
}
|
||
|
|
previousLocation = location;
|
||
|
|
} );
|
||
|
|
|
||
|
|
return () => {
|
||
|
|
unlisten();
|
||
|
|
};
|
||
|
|
};
|
||
|
|
|
||
|
|
type LaunchYourStoreQueryParams = {
|
||
|
|
sidebar?: string;
|
||
|
|
content?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export const updateQueryParams = (
|
||
|
|
params: Partial< LaunchYourStoreQueryParams >
|
||
|
|
) => {
|
||
|
|
const queryParams = getQuery() as LaunchYourStoreQueryParams;
|
||
|
|
const changes = Object.entries( params ).reduce(
|
||
|
|
( acc: Partial< LaunchYourStoreQueryParams >, [ key, value ] ) => {
|
||
|
|
// Check if the value is different from the current queryParams. Include if explicitly passed, even if it's undefined.
|
||
|
|
// This approach assumes that `params` can only have keys that are defined in LaunchYourStoreQueryParams.
|
||
|
|
if (
|
||
|
|
queryParams[ key as keyof LaunchYourStoreQueryParams ] !== value
|
||
|
|
) {
|
||
|
|
acc[ key as keyof LaunchYourStoreQueryParams ] = value;
|
||
|
|
}
|
||
|
|
return acc;
|
||
|
|
},
|
||
|
|
{}
|
||
|
|
);
|
||
|
|
|
||
|
|
if ( Object.keys( changes ).length > 0 ) {
|
||
|
|
updateQueryString( changes );
|
||
|
|
}
|
||
|
|
};
|