Commit 14a6953b authored by Moody Salem's avatar Moody Salem

fix: useCallback is not necessary

parent d866d795
import React, { HTMLProps, useCallback } from 'react' import React, { HTMLProps } from 'react'
import ReactGA from 'react-ga' import ReactGA from 'react-ga'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import styled, { keyframes } from 'styled-components' import styled, { keyframes } from 'styled-components'
...@@ -222,25 +222,23 @@ function anonymizeLink(href: string): string { ...@@ -222,25 +222,23 @@ function anonymizeLink(href: string): string {
} }
} }
function useHandleClickLinkCallback() { function handleClickExternalLink(event: React.MouseEvent<HTMLAnchorElement>) {
return useCallback((event: React.MouseEvent<HTMLAnchorElement>) => { const { target, href } = event.currentTarget
const { target, href } = event.currentTarget
const anonymizedHref = anonymizeLink(href)
const anonymizedHref = anonymizeLink(href)
// don't prevent default, don't redirect if it's a new tab
// don't prevent default, don't redirect if it's a new tab if (target === '_blank' || event.ctrlKey || event.metaKey) {
if (target === '_blank' || event.ctrlKey || event.metaKey) { ReactGA.outboundLink({ label: anonymizedHref }, () => {
ReactGA.outboundLink({ label: anonymizedHref }, () => { console.debug('Fired outbound link event', anonymizedHref)
console.debug('Fired outbound link event', anonymizedHref) })
}) } else {
} else { event.preventDefault()
event.preventDefault() // send a ReactGA event and then trigger a location change
// send a ReactGA event and then trigger a location change ReactGA.outboundLink({ label: anonymizedHref }, () => {
ReactGA.outboundLink({ label: anonymizedHref }, () => { window.location.href = anonymizedHref
window.location.href = anonymizedHref })
}) }
}
}, [])
} }
/** /**
...@@ -252,7 +250,7 @@ export function ExternalLink({ ...@@ -252,7 +250,7 @@ export function ExternalLink({
rel = 'noopener noreferrer', rel = 'noopener noreferrer',
...rest ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) { }: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
return <StyledLink target={target} rel={rel} href={href} onClick={useHandleClickLinkCallback()} {...rest} /> return <StyledLink target={target} rel={rel} href={href} onClick={handleClickExternalLink} {...rest} />
} }
export function ExternalLinkIcon({ export function ExternalLinkIcon({
...@@ -262,7 +260,7 @@ export function ExternalLinkIcon({ ...@@ -262,7 +260,7 @@ export function ExternalLinkIcon({
...rest ...rest
}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) { }: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
return ( return (
<LinkIconWrapper target={target} rel={rel} href={href} onClick={useHandleClickLinkCallback()} {...rest}> <LinkIconWrapper target={target} rel={rel} href={href} onClick={handleClickExternalLink} {...rest}>
<LinkIcon /> <LinkIcon />
</LinkIconWrapper> </LinkIconWrapper>
) )
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment