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