woocommerce/plugins/woocommerce-admin/client/launch-your-store/hub/common.ts

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 );
}
};