fix: pr changes and a search cache

packages/paste-website/src/components/site-search/SearchResultDocs.tsx

@@ -7,31 +7,31 @@ import * as React from "react";
 
 import { type DocSearchItem } from "./types";
 
-export const FakeHeading: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const SearchResultHeading: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Box fontWeight="fontWeightSemibold" fontSize="fontSize20" marginY="space10" textDecoration="underline">
       {children}
     </Box>
   );
 };
 
-export const FakeParagraph: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const SearchResultParagraph: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Box fontSize="fontSize20" marginY="space10">
       {children}
     </Box>
   );
 };
 
-export const FakeList: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const SearchResultList: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Box as="ul" fontSize="fontSize20" paddingLeft="space50" marginY="space10">
       {children}
     </Box>
   );
 };
 
-export const FakeListItem: React.FC<React.PropsWithChildren> = ({ children }) => {
+export const SearchResultListItem: React.FC<React.PropsWithChildren> = ({ children }) => {
   return (
     <Box as="li" fontSize="fontSize20" marginY="space10">
       {children}
@@ -42,7 +42,7 @@ export const FakeListItem: React.FC<React.PropsWithChildren> = ({ children }) =>
 export const SearchResultDocs: React.FC<{ searchItem: DocSearchItem }> = ({ searchItem }) => {
   return (
     <Box
-      // @ts-expect-error its fine
+      // @ts-expect-error in this instance we're overriding our own guards for rendering Box as another component, as we're hooking into the NextJs Link component for client side routing, but we want to style it using our styling  primitives and Design Tokens for system consistency.
       as={Link}
       display="block"
       textDecoration="none"
@@ -71,25 +71,25 @@ export const SearchResultDocs: React.FC<{ searchItem: DocSearchItem }> = ({ sear
               component: Anchor,
             },
             h1: {
-              component: FakeHeading,
+              component: SearchResultHeading,
             },
             h2: {
-              component: FakeHeading,
+              component: SearchResultHeading,
             },
             h3: {
-              component: FakeHeading,
+              component: SearchResultHeading,
             },
             h4: {
-              component: FakeHeading,
+              component: SearchResultHeading,
             },
             p: {
-              component: FakeParagraph,
+              component: SearchResultParagraph,
             },
             ul: {
-              component: FakeList,
+              component: SearchResultList,
             },
             li: {
-              component: FakeListItem,
+              component: SearchResultListItem,
             },
           },
         }}

packages/paste-website/src/components/site-search/SearchResults.tsx

@@ -1,6 +1,8 @@
+import { secureExternalLink } from "@twilio-paste/anchor";
 import { Box } from "@twilio-paste/box";
 import { Heading } from "@twilio-paste/heading";
 import { DocumentationIcon } from "@twilio-paste/icons/esm/DocumentationIcon";
+import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon";
 import Link from "next/link";
 import * as React from "react";
 
@@ -17,7 +19,7 @@ const DiscussionHeading: React.FC<{ title: string; path: string }> = ({ title, p
   return (
     <Heading as="h2" variant="heading40" marginBottom="space0">
       <Box
-        // @ts-expect-error its fine
+        // @ts-expect-error in this instance we're overriding our own guards for rendering Box as another component, as we're hooking into the NextJs Link component for client side routing, but we want to style it using our styling  primitives and Design Tokens for system consistency.
         as={Link}
         href={path}
         color="colorText"
@@ -27,12 +29,14 @@ const DiscussionHeading: React.FC<{ title: string; path: string }> = ({ title, p
         outline="none"
         display="block"
         padding="space20"
+        {...secureExternalLink(path)}
       >
         <Box as="span" display="flex" alignItems="center" columnGap="space40">
           <Box size="sizeIcon40" color="colorTextIcon">
             <GithubIcon decorative={true} />
           </Box>
           {title}
+          <LinkExternalIcon decorative={false} title="external page" />
         </Box>
       </Box>
     </Heading>
@@ -49,7 +53,7 @@ const DocumentationHeading: React.FC<{ title: string; slug: string }> = ({ title
             {sentenceCase(slug.split("/")[1])}
           </Box>
           <Box
-            // @ts-expect-error its fine
+            // @ts-expect-error in this instance we're overriding our own guards for rendering Box as another component, as we're hooking into the NextJs Link component for client side routing, but we want to style it using our styling  primitives and Design Tokens for system consistency.
             as={Link}
             href={slug}
             color="colorText"
@@ -134,7 +138,7 @@ const SearchResultsList: React.FC<SearchResultsProps> = ({ results }) => {
                           height: "100%",
                         }}
                         _last={{
-                          // @ts-expect-error we technically only allow design tokens
+                          // @ts-expect-error we technically only allow design tokens but we need access to override the after pseudo element
                           "&:after": {
                             display: "none",
                           },

packages/paste-website/src/components/site-search/index.tsx

@@ -25,31 +25,42 @@ const SiteSearch: React.FC<React.PropsWithChildren<SiteSearchProps>> = ({ isOpen
 
   const inputRef = React.useRef<HTMLInputElement>(null);
 
-  React.useEffect(() => {
+  const performSearch = React.useCallback(async (): Promise<void> => {
     if (searchQuery === "") {
-      // reset the search state when we empty the search query to start again
-      setSearchInitialState(true);
+      return;
     }
-  }, [searchQuery]);
 
-  const performSearch = async (): Promise<void> => {
-    setResults({});
     setLoading(true);
+
     try {
-      const response = await fetch("/api/docs-search", {
-        method: "POST",
-        body: JSON.stringify({ prompt: searchQuery }),
-      });
-      const json = (await response.json()) as SearchResults;
-      const groupedResults = groupResults(json.data);
-      setResults(groupedResults);
+      const cachedResults = sessionStorage.getItem(searchQuery);
+      if (cachedResults) {
+        setResults(JSON.parse(cachedResults));
+      } else {
+        const response = await fetch("/api/docs-search", {
+          method: "POST",
+          body: JSON.stringify({ prompt: searchQuery }),
+        });
+        const json = (await response.json()) as SearchResults;
+        const groupedResults = groupResults(json.data);
+        setResults(groupedResults);
+        sessionStorage.setItem(searchQuery, JSON.stringify(groupedResults));
+      }
     } catch (error) {
       // eslint-disable-next-line no-console
       console.error(error);
     }
+
     setSearchInitialState(false);
     setLoading(false);
-  };
+  }, [searchQuery]);
+
+  React.useEffect(() => {
+    if (searchQuery === "") {
+      // reset the search state when we empty the search query to start again
+      setSearchInitialState(true);
+    }
+  }, [searchQuery]);
 
   const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>): void => {
     setSearchQuery(event.target.value);