import React from 'react' ; import countAPI from 'countapi-js' ; import { useRouter } from 'next/router' ; export function formatPageViewsParams ( path ) { const key = path . slice ( '/posts/20' . length , 64 ) . replace ( /\//g , '_' ) ; const host = process . env . NEXT_PUBLIC_DEPLOYMENT_URL ?. replace ( 'https://' , '' ) ?? window . location . hostname ; const namespace = `views.${ host }` ; return { namespace , key } ; } export function usePageParams ( path ? ) { const router = useRouter ( ) ; const pathname = path || router . pathname ; return formatPageViewsParams ( pathname ) ; } export interface CountAPIResult { value : number | null ; } export function usePageViews ( path ? ) { const [ views , setViews ] = React . useState < number | undefined > ( 0 ) ; const { namespace , key } = usePageParams ( path ) ; React . useEffect ( ( ) => { if ( path ?. startsWith ( '/posts/drafts' ) ) { return ; } countAPI . get ( namespace , key ) . then ( ( result ) => setViews ( result . value ?? undefined ) ) ; } , [ namespace , key ] ) ; return views ; } export function useCountPageView ( path ? ) { const [ views , setViews ] = React . useState < number | undefined > ( 0 ) ; const { namespace , key } = usePageParams ( path ) ; React . useEffect ( ( ) => { if ( path ?. startsWith ( '/posts/drafts' ) ) { return ; } const method = process . env . NODE_ENV === 'production' ? countAPI . hit : countAPI . get ; method . call ( countAPI , namespace , key ) . then ( ( result ) => setViews ( result . value ?? undefined ) ) ; } , [ namespace , key ] ) ; return views ; }