mirror of
https://github.com/woocommerce/woocommerce-paypal-payments.git
synced 2025-09-05 08:59:14 +08:00
♻️ Make the URL cleanup more reusable
This commit is contained in:
parent
0f0df468a2
commit
c244f97eb0
2 changed files with 44 additions and 21 deletions
|
@ -6,7 +6,7 @@ import SpinnerOverlay from './ReusableComponents/SpinnerOverlay';
|
|||
import SendOnlyMessage from './Screens/SendOnlyMessage';
|
||||
import OnboardingScreen from './Screens/Onboarding';
|
||||
import SettingsScreen from './Screens/Settings';
|
||||
import { getQuery, updateQueryString } from '../utils/navigation';
|
||||
import { cleanBrowserUrl, getQuery } from '../utils/navigation';
|
||||
|
||||
const SettingsApp = () => {
|
||||
const { isReady: onboardingIsReady, completed: onboardingCompleted } =
|
||||
|
@ -32,42 +32,27 @@ const SettingsApp = () => {
|
|||
loading: ! onboardingIsReady,
|
||||
} );
|
||||
|
||||
const cleanBrowserUrl = () => {
|
||||
const queryArgs = getQuery();
|
||||
const supportedArgs = [ 'page', 'tab', 'section' ];
|
||||
const [ activePanel, setActivePanel ] = useState( getQuery().panel );
|
||||
|
||||
const cleanedArgs = Object.keys( queryArgs ).reduce( ( acc, key ) => {
|
||||
if ( supportedArgs.includes( key ) ) {
|
||||
acc[ key ] = queryArgs[ key ];
|
||||
}
|
||||
return acc;
|
||||
}, {} );
|
||||
|
||||
const isUrlClean =
|
||||
Object.keys( cleanedArgs ).length ===
|
||||
Object.keys( queryArgs ).length;
|
||||
|
||||
if ( isUrlClean ) {
|
||||
const removeUnsupportedArgs = () => {
|
||||
if ( cleanBrowserUrl( [ 'page', 'tab', 'section' ] ) ) {
|
||||
return;
|
||||
}
|
||||
updateQueryString( cleanedArgs, true );
|
||||
setActivePanel( '' );
|
||||
};
|
||||
|
||||
const [ activePanel, setActivePanel ] = useState( getQuery().panel );
|
||||
|
||||
const Content = useMemo( () => {
|
||||
if ( ! onboardingIsReady || ! merchantIsReady ) {
|
||||
return <SpinnerOverlay asModal={ true } />;
|
||||
}
|
||||
|
||||
if ( isSendOnlyCountry ) {
|
||||
cleanBrowserUrl();
|
||||
removeUnsupportedArgs();
|
||||
return <SendOnlyMessage />;
|
||||
}
|
||||
|
||||
if ( ! onboardingCompleted ) {
|
||||
cleanBrowserUrl();
|
||||
removeUnsupportedArgs();
|
||||
return <OnboardingScreen />;
|
||||
}
|
||||
|
||||
|
|
|
@ -40,3 +40,41 @@ export const updateQueryString = ( query, replace = false ) => {
|
|||
*/
|
||||
export const getNewPath = ( query, basePath = getPath() ) =>
|
||||
addQueryArgs( basePath, query );
|
||||
|
||||
/**
|
||||
* Filter an object to only include specified keys.
|
||||
*
|
||||
* @param {Object} obj The object to filter.
|
||||
* @param {string[]} allowedKeys An array of allowed key names.
|
||||
* @return {Object} A new object with only the allowed keys.
|
||||
*/
|
||||
export const filterObjectKeys = ( obj, allowedKeys ) => {
|
||||
return Object.keys( obj ).reduce( ( acc, key ) => {
|
||||
if ( allowedKeys.includes( key ) ) {
|
||||
acc[ key ] = obj[ key ];
|
||||
}
|
||||
return acc;
|
||||
}, {} );
|
||||
};
|
||||
|
||||
/**
|
||||
* Clean the browser URL by removing unsupported query parameters.
|
||||
*
|
||||
* @param {string[]} supportedArgs An array of supported query parameter names.
|
||||
* @return {boolean} Returns true if the URL was already clean, false if it was cleaned.
|
||||
*/
|
||||
export const cleanBrowserUrl = ( supportedArgs ) => {
|
||||
const currentQuery = getQuery();
|
||||
const cleanedQuery = filterObjectKeys( currentQuery, supportedArgs );
|
||||
|
||||
const isUrlClean =
|
||||
Object.keys( cleanedQuery ).length ===
|
||||
Object.keys( currentQuery ).length;
|
||||
|
||||
if ( ! isUrlClean ) {
|
||||
updateQueryString( cleanedQuery, true );
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue