1import * as React from 'react';
2
3import { P } from '~/components/base/paragraph';
4import { CONTAINER_STYLE } from '~/components/plugins/VersionedRedirectNotification';
5
6const PossibleRedirectNotification: React.FC<React.PropsWithChildren<{ newUrl: string }>> = ({
7  newUrl,
8}) => {
9  const [targetId, setTargetId] = React.useState<string | null>(null);
10
11  // We could add a listener on `window.onhashchange` but
12  // I don't think this is actually needed.
13  React.useEffect(() => {
14    const hash = window.location.hash;
15    const id = hash ? hash.replace('#', '') : null;
16    if (hash && !document.getElementById(id as string)) {
17      setTargetId(id);
18    }
19  }, []);
20
21  if (targetId) {
22    return (
23      <div css={CONTAINER_STYLE}>
24        <P>
25          ⚠️ The information you are looking for (addressed by <em>"{targetId}"</em>) has moved.{' '}
26          <a href={`${newUrl}#${targetId}`}>Continue to the new location.</a>
27        </P>
28      </div>
29    );
30  } else {
31    return null;
32  }
33};
34
35export default PossibleRedirectNotification;
36