Add warning after redirecting from invalid term

sipb · Jan 7, 2025 · f8c77a6 · f8c77a6
1 parent 6f60470
commit f8c77a6
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 3 deletions.
diff --git a/src/components/App.tsx b/src/components/App.tsx
@@ -86,8 +86,6 @@ function useHydrant(): {
         setLoading(false);
         window.hydrant = hydrantObj;
       } else {
-        // TODO: have a visual cue if the term in the url is invalid
-
         // Redirect to the indicated term, while storing the initially requested
         // term in the "ti" parameter (if necessary) so that the user can be
         // notified

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -1,4 +1,5 @@
-import { Flex, Image } from "@chakra-ui/react";
+import { Card, IconButton, Flex, Image, Text } from "@chakra-ui/react";
+import { LuX } from "react-icons/lu";
 
 import {
   DialogRoot,
@@ -128,6 +129,19 @@ export function Header(props: { state: State; preferences: Preferences }) {
   const { state, preferences } = props;
   const logoSrc = useColorModeValue(logo, logoDark);
 
+  const params = new URLSearchParams(document.location.search);
+  const urlNameOrig = params.get("ti");
+  const urlName = params.get("t") ?? state.latestUrlName;
+
+  const [show, setShow] = useState(urlNameOrig !== null);
+
+  const onClose = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("ti");
+    window.history.pushState({}, "", url);
+    setShow(false);
+  };
+
   return (
     <Flex align="center" gap={3} wrap="wrap">
       <Flex direction="column" gap={1}>
@@ -143,6 +157,25 @@ export function Header(props: { state: State; preferences: Preferences }) {
         </Flex>
       </Flex>
       <PreferencesDialog preferences={preferences} state={state} />
+      {show && (
+        <Card.Root size="sm" variant="subtle">
+          <Card.Body px={3} py={1}>
+            <Flex align="center" gap={1.5}>
+              <Text fontSize="sm">
+                Term {urlNameOrig} not found; loaded term {urlName} instead.
+              </Text>
+              <IconButton
+                variant="subtle"
+                size="xs"
+                aria-label="Close"
+                onClick={onClose}
+              >
+                <LuX />
+              </IconButton>
+            </Flex>
+          </Card.Body>
+        </Card.Root>
+      )}
     </Flex>
   );
 }