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