commands
5 months ago
common
4 weeks ago
components
1 month ago
css
1 month ago
hooks
1 month ago
layout
4 weeks ago
notifications
5 months ago
partials
5 months ago
post-quick-edit
5 months ago
screen-ads
2 months ago
screen-dashboard
2 months ago
screen-groups
2 months ago
screen-licenses
4 weeks ago
screen-placements
2 months ago
screen-settings
5 months ago
screen-support
4 weeks ago
screen-tools
2 months ago
store
4 weeks ago
wp-dashboard
1 month ago
main.css
1 month ago
main.js
1 month ago
router.js
1 month ago
routes.js
1 month ago
utils.js
1 month ago
router.js
107 lines
| 1 | /** |
| 2 | * External Dependencies |
| 3 | */ |
| 4 | import { useMemo, useSyncExternalStore } from '@wordpress/element'; |
| 5 | |
| 6 | /** |
| 7 | * Internal Dependencies |
| 8 | */ |
| 9 | import { routes } from './routes'; |
| 10 | |
| 11 | function getSearch() { |
| 12 | return globalThis.location.search; |
| 13 | } |
| 14 | |
| 15 | function subscribe( callback ) { |
| 16 | globalThis.addEventListener( 'popstate', callback ); |
| 17 | return () => globalThis.removeEventListener( 'popstate', callback ); |
| 18 | } |
| 19 | |
| 20 | function useSearchParams() { |
| 21 | const search = useSyncExternalStore( subscribe, getSearch ); |
| 22 | return useMemo( () => new URLSearchParams( search ), [ search ] ); |
| 23 | } |
| 24 | |
| 25 | function useCurrentPath() { |
| 26 | const params = useSearchParams(); |
| 27 | return params.get( 'path' ) ?? '/'; |
| 28 | } |
| 29 | |
| 30 | function useCurrentRoute() { |
| 31 | const params = useSearchParams(); |
| 32 | const path = params.get( 'path' ) ?? '/'; |
| 33 | const query = useMemo( () => Object.fromEntries( params ), [ params ] ); |
| 34 | |
| 35 | const route = useMemo( |
| 36 | () => |
| 37 | routes.find( ( r ) => r.path === path ) ?? |
| 38 | routes.find( ( r ) => r.name === 'not-found' ), |
| 39 | [ path ] |
| 40 | ); |
| 41 | |
| 42 | return { route, query }; |
| 43 | } |
| 44 | |
| 45 | function useArea( area ) { |
| 46 | const { route, query } = useCurrentRoute(); |
| 47 | if ( ! area ) { |
| 48 | return { route, query }; |
| 49 | } |
| 50 | |
| 51 | if ( ! route?.areas?.[ area ] ) { |
| 52 | return null; |
| 53 | } |
| 54 | |
| 55 | return route.areas[ area ]( { query } ); |
| 56 | } |
| 57 | |
| 58 | function normalizeAdminAppPathname( pathname ) { |
| 59 | const marker = '/wp-admin/admin.php'; |
| 60 | const first = pathname.indexOf( marker ); |
| 61 | |
| 62 | if ( first === -1 ) { |
| 63 | return pathname; |
| 64 | } |
| 65 | |
| 66 | const duplicate = pathname.indexOf( marker, first + 1 ); |
| 67 | |
| 68 | if ( duplicate === -1 ) { |
| 69 | return pathname; |
| 70 | } |
| 71 | |
| 72 | return pathname.slice( 0, duplicate ); |
| 73 | } |
| 74 | |
| 75 | function buildUrl( path, query = {} ) { |
| 76 | const url = new URL( globalThis.location.href ); |
| 77 | url.pathname = normalizeAdminAppPathname( url.pathname ); |
| 78 | url.search = ''; |
| 79 | |
| 80 | const page = new URLSearchParams( globalThis.location.search ).get( |
| 81 | 'page' |
| 82 | ); |
| 83 | if ( page ) { |
| 84 | url.searchParams.set( 'page', page ); |
| 85 | } |
| 86 | if ( path && path !== '/' ) { |
| 87 | url.searchParams.set( 'path', path ); |
| 88 | } |
| 89 | |
| 90 | Object.entries( query ).forEach( ( [ k, v ] ) => { |
| 91 | if ( v !== null ) { |
| 92 | url.searchParams.set( k, String( v ) ); |
| 93 | } |
| 94 | } ); |
| 95 | |
| 96 | return url; |
| 97 | } |
| 98 | |
| 99 | function navigate( path, query = {} ) { |
| 100 | const url = buildUrl( path, query ); |
| 101 | |
| 102 | globalThis.history.pushState( {}, '', url ); |
| 103 | globalThis.dispatchEvent( new Event( 'popstate' ) ); |
| 104 | } |
| 105 | |
| 106 | export { buildUrl, useCurrentRoute, useCurrentPath, useArea, navigate }; |
| 107 |