import { SingletonRouter } from 'next/router' ; import * as qs from 'querystring' ; import theme from '../theme' ; interface LinkCallbackProps { href : string ; active : boolean ; onClick : ( e : any ) => any ; } interface UrlObject { pathname : string ; query ? : any ; } export type LinkProps < T > = T & { router ? : SingletonRouter ; children : ( linkProps : LinkCallbackProps ) => any ; } ; const createUrl = ( urlObject ) => { const querystring = qs . stringify ( urlObject . query || { } ) ; return `${ urlObject . pathname }${ querystring ? `?${ querystring }` : '' }` ; } ; const isUrlEqual = ( href , router ) => { const isPathnameEqual = href . pathname === router . pathname ; if ( Object . keys ( href . query ) . length ) { const isQueryEqual = Object . keys ( href . query ) . every ( ( param ) => String ( href . query [ param ] ) === String ( router . query [ param ] ) ) ; return isPathnameEqual && isQueryEqual ; } return isPathnameEqual ; } ; export default function linkCallbackProps ( router , href , as = href , resetScroll = true ) { return { href : createUrl ( as ) , active : isUrlEqual ( href , router ) , onClick : async ( e ) => { const isMobile = window . matchMedia ( theme . breakpoints . mobile . replace ( '@media ' , '' ) ) . matches ; if ( isMobile ) return ; e . preventDefault ( ) ; await router . push ( href , as ) ; if ( resetScroll ) { window . scrollTo ( 0 , 0 ) ; } } , } ; }