import { useEffect, useState } from 'react'
 
export const useUrl = (fn?: () => void) => {
    const [url] = useState(window.location.href)
 
    useEffect(() => {
        if (fn && typeof fn === 'function') {
            fn()
        }
    }, [url, fn])
 
    const getPort = () => {
        return window.location.port
    }
 
    const getRootPath = () => {
        const pathArray = window.location.pathname.split('/')
        return pathArray[1] || ''
    }
 
    const getQueryParams = () => {
        const searchParams = new URLSearchParams(window.location.search)
        const queryParams: { [key: string]: string } = {}
 
        for (const [key, value] of searchParams.entries()) {
            queryParams[key] = value
        }
 
        return queryParams
    }
 
    return {
        url,
        getRootPath,
        getQueryParams,
        getPort,
    }
}
 
 

 
import React, { useEffect, useState } from 'react';
import { useUrl } from './hooks/use-url';
 
function App() {
    const { url, getRootPath, getQueryParams, getPort } = useUrl();
 
    return (
        <div>
            <h1>URL Information</h1>
            <p>Current URL: {url}</p>
            <p>Root Path: {getRootPath()}</p>
            <p>Query Parameters: {JSON.stringify(getQueryParams())}</p>
            <p>Port: {getPort()}</p>
        </div>
    );
}
 
export default App;