Use Xstate actions when clicking info box serachable links

Since we are running in "SPA mode" after the initial load of the
application we need to trigger an action in the actor whenever we want
it to change its context.

components/shared/infoBox/InfoBox.tsx

@@ -1,17 +1,16 @@
 "use client"
 
 import { motion } from "framer-motion"
-import Link from "next/link"
 import React from "react"
 
 import InfoBoxItem from "@/components/shared/infoBox/InfoBoxItem"
 import {
   ManifestationWorkPageFragment,
   WorkFullWorkPageFragment,
 } from "@/lib/graphql/generated/fbi/graphql"
-import { resolveUrl } from "@/lib/helpers/helper.routes"
 
 import { Button } from "../button/Button"
+import InfoBoxSearchLink from "./InfoBoxSearchLink"
 
 type InfoBoxProps = {
   work: WorkFullWorkPageFragment
@@ -51,14 +50,11 @@ const InfoBox = ({ work, selectedManifestation }: InfoBoxProps) => {
                     return (
                       <div key={index}>
                         {series.numberInSeries && <span>{`${series.numberInSeries} i`} </span>}
-                        <Link
+                        <InfoBoxSearchLink
                           className="animate-text-underline"
-                          href={resolveUrl({
-                            routeParams: { search: "search" },
-                            queryParams: { q: series.title },
-                          })}>
-                          {series.title}
-                        </Link>
+                          q={series.title}
+                          title={series.title}
+                        />
                       </div>
                     )
                   })
@@ -68,13 +64,7 @@ const InfoBox = ({ work, selectedManifestation }: InfoBoxProps) => {
               {uniqueSubjects.length
                 ? uniqueSubjects.map((subject, index) => (
                     <Button key={index} asChild size={"sm"} className="px-3">
-                      <Link
-                        href={resolveUrl({
-                          routeParams: { search: "search" },
-                          queryParams: { q: subject },
-                        })}>
-                        {subject}
-                      </Link>
+                      <InfoBoxSearchLink q={subject} title={subject} />
                     </Button>
                   ))
                 : "-"}

components/shared/infoBox/InfoBoxSearchLink.tsx

@@ -0,0 +1,51 @@
+"use client"
+
+import Link from "next/link"
+import { useRouter } from "next/navigation"
+import React, { MouseEvent } from "react"
+
+import { resolveUrl } from "@/lib/helpers/helper.routes"
+import useSearchMachineActor from "@/lib/machines/search/useSearchMachineActor"
+
+const InfoBoxSearchLink = ({
+  q,
+  title,
+  className,
+}: {
+  q: string
+  title: string
+  className?: string
+}) => {
+  const router = useRouter()
+  const actor = useSearchMachineActor()
+
+  const searchAndNavigate = (query: string) => {
+    const url = resolveUrl({
+      routeParams: { search: "search" },
+      queryParams: { q: query },
+    })
+
+    actor.send({ type: "TYPING", q: query })
+    actor.send({ type: "SEARCH" })
+    router.push(url)
+  }
+
+  const searchOnClick = (query: string) => (e: MouseEvent<HTMLAnchorElement>) => {
+    e.preventDefault()
+    searchAndNavigate(query)
+  }
+
+  return (
+    <Link
+      className={className}
+      onClick={searchOnClick(title)}
+      href={resolveUrl({
+        routeParams: { search: "search" },
+        queryParams: { q },
+      })}>
+      {title}
+    </Link>
+  )
+}
+
+export default InfoBoxSearchLink