feat(search): add package search functionality (#1009)

* chore: snippet_id -> package_id

* Update SearchComponent.tsx

* feat(search): add package search functionality

Introduce a new endpoint `/packages/search` to search for packages by name, description, or content. Update the SearchComponent to use this endpoint and display package search results instead of snippets. This change aligns the search functionality with the package-centric model of the application.

* refactor(api): change search endpoint from GET to POST

The search endpoint was updated from GET to POST to better handle the search query in the request body. This change aligns with RESTful practices for complex queries and improves security by avoiding query parameters in URLs. The response now includes an `ok` field to indicate success.

Author: ArnavK-09

fake-snippets-api/lib/db/db-client.ts

@@ -945,6 +945,50 @@ const initializer = combine(databaseSchema.parse({}), (set, get) => ({
       })
       .filter((snippet): snippet is Snippet => snippet !== null)
   },
+  searchPackages: (query: string): Package[] => {
+    const state = get()
+    const lowercaseQuery = query.toLowerCase()
+
+    // Get all packages that are public
+    const packages = state.packages.filter((pkg) => pkg.is_public === true)
+
+    // Find packages that match by name or description
+    const matchingPackagesByMetadata = packages.filter(
+      (pkg) =>
+        pkg.name.toLowerCase().includes(lowercaseQuery) ||
+        pkg.description?.toLowerCase().includes(lowercaseQuery),
+    )
+
+    // Find packages that match by code content in any file
+    const matchingFilesByContent = state.packageFiles.filter(
+      (file) =>
+        file.content_text?.toLowerCase().includes(lowercaseQuery) ?? false,
+    )
+
+    // Get the packages for matching files
+    const matchingPackagesByContent = matchingFilesByContent
+      .map((file) => {
+        // Find the package release for this file
+        const packageRelease = state.packageReleases.find(
+          (pr) => pr.package_release_id === file.package_release_id,
+        )
+        if (!packageRelease) return null
+
+        // Find the package for this release
+        return packages.find(
+          (pkg) =>
+            pkg.latest_package_release_id === packageRelease.package_release_id,
+        )
+      })
+      .filter((pkg): pkg is NonNullable<typeof pkg> => pkg !== null)
+
+    // Combine both sets of matching packages and remove duplicates
+    const matchingPackages = [
+      ...new Set([...matchingPackagesByMetadata, ...matchingPackagesByContent]),
+    ]
+
+    return matchingPackages
+  },
   deleteSnippet: (snippetId: string): boolean => {
     let deleted = false
     set((state) => {

fake-snippets-api/routes/api/packages/search.ts

@@ -0,0 +1,19 @@
+import { withRouteSpec } from "fake-snippets-api/lib/middleware/with-winter-spec"
+import { z } from "zod"
+import { packageSchema } from "fake-snippets-api/lib/db/schema"
+
+export default withRouteSpec({
+  methods: ["POST"],
+  auth: "none",
+  jsonBody: z.object({
+    query: z.string(),
+  }),
+  jsonResponse: z.object({
+    ok: z.boolean(),
+    packages: z.array(packageSchema),
+  }),
+})(async (req, ctx) => {
+  const { query } = req.jsonBody
+  const packages = ctx.db.searchPackages(query)
+  return ctx.json({ packages, ok: true })
+})

src/components/SearchComponent.tsx

@@ -8,7 +8,7 @@ import { useSnippetsBaseApiUrl } from "@/hooks/use-snippets-base-api-url"
 import { PrefetchPageLink } from "./PrefetchPageLink"
 
 interface SearchComponentProps {
-  onResultsFetched?: (results: any[]) => void // optional
+  onResultsFetched?: (results: any[]) => void
   autofocus?: boolean
 }
 
@@ -52,19 +52,19 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
   const resultsRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
   const [location] = useLocation()
-  const { snippetsBaseApiUrl } = useSnippetsBaseApiUrl()
+  const snippetsBaseApiUrl = useSnippetsBaseApiUrl()
 
   const { data: searchResults, isLoading } = useQuery(
-    ["snippetSearch", searchQuery],
+    ["packageSearch", searchQuery],
     async () => {
       if (!searchQuery) return []
-      const { data } = await axios.get("/snippets/search", {
-        params: { q: searchQuery },
+      const { data } = await axios.post("/packages/search", {
+        query: searchQuery,
       })
       if (onResultsFetched) {
-        onResultsFetched(data.snippets)
+        onResultsFetched(data.packages)
       }
-      return data.snippets
+      return data.packages
     },
     { enabled: Boolean(searchQuery) },
   )
@@ -128,31 +128,31 @@ const SearchComponent: React.FC<SearchComponentProps> = ({
         >
           {searchResults.length > 0 ? (
             <ul className="divide-y divide-gray-200">
-              {searchResults.map((snippet: any) => (
-                <li key={snippet.snippet_id} className="p-2 hover:bg-gray-50">
+              {searchResults.map((pkg: any) => (
+                <li key={pkg.package_id} className="p-2 hover:bg-gray-50">
                   <LinkWithNewTabHandling
                     href={
                       shouldOpenInEditor
-                        ? `/editor?snippet_id=${snippet.snippet_id}`
-                        : `/${snippet.owner_name}/${snippet.unscoped_name}`
+                        ? `/editor?package_id=${pkg.package_id}`
+                        : `/${pkg.name}`
                     }
                     shouldOpenInNewTab={shouldOpenInNewTab}
                     className="flex"
                   >
                     <div className="w-12 h-12 overflow-hidden mr-2 flex-shrink-0 rounded-sm">
                       <img
-                        src={`${useSnippetsBaseApiUrl()}/snippets/images/${snippet.owner_name}/${snippet.unscoped_name}/pcb.svg`}
-                        alt={`PCB preview for ${snippet.name}`}
+                        src={`${snippetsBaseApiUrl}/snippets/images/${pkg.name}/pcb.svg`}
+                        alt={`PCB preview for ${pkg.name}`}
                         className="w-12 h-12 object-contain p-1 scale-[4] rotate-45"
                       />
                     </div>
                     <div className="flex-grow">
                       <div className="font-medium text-blue-600 break-words text-xs">
-                        {snippet.name}
+                        {pkg.name}
                       </div>
-                      {snippet.description && (
+                      {pkg.description && (
                         <div className="text-xs text-gray-500 break-words h-8 overflow-hidden">
-                          {snippet.description}
+                          {pkg.description}
                         </div>
                       )}
                     </div>