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