Function ClientSideRedirectExceptions

components/ClientSideRedirectExceptions.tsx:16–68

()

// /rest/reference/repos#statuses to
// /rest/reference/commits#commit-statuses)
export default function ClientSideRedirectExceptions() {
  const router = useRouter()
  useEffect(() => {
    // Because we have an async call to fetch, it's possible that this
    // component unmounts before we perform the redirect, however, React
    // will still try to perform the redirect even after the component
    // is unmounted. To prevent this, we can use the AbortController signal
    // to abort the Web request when the component unmounts.
    const controller = new AbortController()
    const signal = controller.signal

    const { hash, pathname } = window.location
    // path without a version or language
    const barePath = pathname
      .replace(`/${router.locale}`, '')
      .replace(`/${router.query.versionId || ''}`, '')

    async function getRedirect() {
      try {
        const sp = new URLSearchParams()
        sp.set('path', barePath)
        sp.set('hash', hash.replace(/^#/, ''))

        // call the anchor-redirect endpoint to get the redirect url
        const response = await fetch(`/anchor-redirect?${sp.toString()}`, {
          signal,
        })

        // the response status will always be 200 unless there
        // was a problem with the fetch request. When the
        // redirect doesn't exist the json response will be empty
        if (response.ok) {
          const { to } = await response.json()
          if (to) {
            // we want to redirect with the language and version in tact
            // so we'll replace the full url's path and hash
            const fromUrl = pathname + hash
            const bareUrl = barePath + hash
            const toUrl = fromUrl.replace(bareUrl, to)
            router.replace(toUrl)
          }
        }
      } catch (error) {
        console.warn('Unable to fetch client-side redirect:', error)
      }
    }
    getRedirect()

    return () => controller.abort()
  }, [])

  return null
}