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