fix: get search results working

app/components/SimplifiedSearchBar.tsx

@@ -9,6 +9,7 @@ import {
 } from "./ui/select";
 import { SitesCombobox } from "./SitesCombobox";
 import { FILTER_TIMES } from "@/utils";
+import { SiteList } from "@/types.js";
 
 type Props = {
   value: string;
@@ -17,6 +18,7 @@ type Props = {
   filters?: {
     sites: { value: string; label: string }[];
   };
+  sites: SiteList;
 };
 
 const SimplifiedSearchBar = ({
@@ -24,6 +26,7 @@ const SimplifiedSearchBar = ({
   placeholder,
   filters,
   className,
+  sites,
 }: Props) => {
   let navigate = useNavigate();
   let location = useLocation();
@@ -69,7 +72,7 @@ const SimplifiedSearchBar = ({
       </div>
       <div className="w-56 flex gap-2">
         {/* Dropdown component should be here */}
-        <SitesCombobox />
+        <SitesCombobox siteList={sites} />
         {/* Dropdown component should be here */}
         <Select defaultValue={"0"}>
           <SelectTrigger className="hover:bg-muted w-auto">

app/components/SitesCombobox.tsx

@@ -15,7 +15,6 @@ import {
   PopoverTrigger,
 } from "@/components/ui/popover";
 import { ChevronDownIcon } from "@heroicons/react/24/solid";
-import { getAvailableSites } from "@/utils";
 import { SelectOptions, SiteList } from "@/types.js";
 import slugify from "slugify";
 

app/routes/search.tsx

@@ -1,14 +1,30 @@
 import React from "react";
 import { ArrowLeftIcon } from "@heroicons/react/24/outline";
-import { formatDate, getResults } from "@/utils";
+import { formatDate, getAvailableSites, getResults } from "@/utils";
 import SimplifiedSearchBar from "@/components/SimplifiedSearchBar";
-import { Link, useSearchParams } from "@remix-run/react";
+import { Link, useLoaderData, useSearchParams } from "@remix-run/react";
+import { json, LoaderFunction } from "@remix-run/node";
+import type { SearchResult, SiteList } from "@/types.js";
 
-const Page = async () => {
+type LoaderData = {
-  const [searchParams] = useSearchParams();
+  sites: SiteList;
-  const query = searchParams.get("q") ?? "";
+  results: SearchResult[];
+  query: string;
+};
+
+export let loader: LoaderFunction = async ({ request }) => {
+  const sites = getAvailableSites();
+  const search = new URL(request.url).searchParams;
+  const query = search.get("q") ?? "";
   const results = await getResults({ query: query });
 
+  // Return the fetched data as JSON
+  return json({ sites, results, query });
+};
+
+const Page = () => {
+  const { sites, results, query } = useLoaderData<LoaderData>();
+
   return (
     <div className="w-full items-center text-lg">
       <SimplifiedSearchBar
@@ -16,6 +32,7 @@ const Page = async () => {
         placeholder={
           query ? undefined : "Search for web3 news from the community"
         }
+        sites={sites}
       />
 
       <Link to="/">

remix.config.js

@@ -5,4 +5,5 @@ export default {
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",
   // serverBuildPath: "build/index.js",
+  browserNodeBuiltinsPolyfill: { modules: { fs: true } },
 };