From 369996ff2cf9886973215d775a3000552a1c8e79 Mon Sep 17 00:00:00 2001
From: Derrick Hammer <derrick@derrickhammer.com>
Date: Fri, 22 Dec 2023 04:42:21 -0500
Subject: [PATCH] fix: get search results working

---
 app/components/SimplifiedSearchBar.tsx |  5 ++++-
 app/components/SitesCombobox.tsx       |  1 -
 app/routes/search.tsx                  | 27 +++++++++++++++++++++-----
 remix.config.js                        |  1 +
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/app/components/SimplifiedSearchBar.tsx b/app/components/SimplifiedSearchBar.tsx
index f4c3b4e..bfd9888 100644
--- a/app/components/SimplifiedSearchBar.tsx
+++ b/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">
diff --git a/app/components/SitesCombobox.tsx b/app/components/SitesCombobox.tsx
index 649ad2f..ace7a49 100644
--- a/app/components/SitesCombobox.tsx
+++ b/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";
 
diff --git a/app/routes/search.tsx b/app/routes/search.tsx
index 2504ae7..ff69827 100644
--- a/app/routes/search.tsx
+++ b/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 () => {
-  const [searchParams] = useSearchParams();
-  const query = searchParams.get("q") ?? "";
+type LoaderData = {
+  sites: SiteList;
+  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="/">
diff --git a/remix.config.js b/remix.config.js
index 7fac2d3..8eb27bc 100644
--- a/remix.config.js
+++ b/remix.config.js
@@ -5,4 +5,5 @@ export default {
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",
   // serverBuildPath: "build/index.js",
+  browserNodeBuiltinsPolyfill: { modules: { fs: true } },
 };