Use server actions instead of client-side API calls

apps/link/app/(main)/_components/SearchBox.tsx

@@ -1,8 +1,7 @@
 import { FC, useState, useEffect } from "react";
 import { usePathname, useRouter } from "next/navigation";
-import useSWR from "swr";
 import { Grid, Box, TextField, Autocomplete } from "@mui/material";
-import { searchQuery } from "@/app/_graphql/searchQuery";
+import { searchAllAction } from "@/app/_actions/search";
 import { colors } from "@link-stack/ui";
 
 type SearchResultProps = {
@@ -42,8 +41,6 @@ const SearchInput = (params: any) => (
 );
 
 const SearchResult: FC<SearchResultProps> = ({ props, option }) => {
-  console.log({ option });
-
   const { lightGrey, mediumGray, black, white } = colors;
 
   return (
@@ -95,22 +92,20 @@ const SearchResult: FC<SearchResultProps> = ({ props, option }) => {
 
 export const SearchBox: FC = () => {
   const [open, setOpen] = useState(false);
+  const [searchResults, setSearchResults] = useState([]);
   const [selectedValue, setSelectedValue] = useState(null);
   const [searchTerms, setSearchTerms] = useState("");
   const pathname = usePathname();
   const router = useRouter();
-  const { data, error }: any = useSWR({
-    document: searchQuery,
-    variables: {
-      search: searchTerms ?? "",
-      limit: 50,
-    },
-    refreshInterval: 10000,
-  });
 
   useEffect(() => {
-    setOpen(false);
-  }, [pathname]);
+    const fetchSearchResults = async () => {
+      const results = await searchAllAction(searchTerms ?? "", 50);
+      setSearchResults(results);
+    };
+
+    fetchSearchResults();
+  }, [searchTerms]);
 
   return (
     <Autocomplete
@@ -132,7 +127,7 @@ export const SearchBox: FC = () => {
       open={open}
       onOpen={() => setOpen(true)}
       noOptionsText="No results"
-      options={data?.search ?? []}
+      options={searchResults ?? []}
       getOptionLabel={(option: any) => {
         if (option) {
           return option.title;