♻️ Make the URL cleanup more reusable

This commit is contained in:
Philipp Stracker 2025-02-26 12:11:45 +01:00
parent 0f0df468a2
commit c244f97eb0
No known key found for this signature in database
2 changed files with 44 additions and 21 deletions

View file

@ -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 />;
}

View file

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