feat: discover api and discover result list

src/renderer/src/components/subscribe/form.tsx

@@ -12,6 +12,9 @@ import {
 } from "@renderer/components/ui/form"
 import { Input } from "@renderer/components/ui/input"
 import { useEffect } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { getCsrfToken } from "@hono/auth-js/react"
+import { SiteIcon } from "@renderer/components/site-icon"
 
 const formSchema = z.object({
   keyword: z.string().min(1),
@@ -47,8 +50,39 @@ export function SubscribeForm({ type }: { type: string }) {
       keyword: prefix,
     },
   })
+  const mutation = useMutation({
+    mutationFn: async (keyword: string) => {
+      return (
+        await (
+          await fetch(
+            `${import.meta.env.VITE_ELECTRON_REMOTE_API_URL}/discover`,
+            {
+              method: "POST",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              credentials: "include",
+              body: JSON.stringify({
+                csrfToken: await getCsrfToken(),
+                keyword,
+              }),
+            },
+          )
+        ).json()
+      ).data as {
+        title?: string
+        description?: string
+        siteUrl?: string
+        image?: string
+        url?: string
+        docs?: string
+      }[]
+    },
+  })
+  console.log(mutation.data)
+
   function onSubmit(values: z.infer<typeof formSchema>) {
-    console.log(values)
+    mutation.mutate(values.keyword)
   }
 
   const keyword = form.watch("keyword")
@@ -63,23 +97,55 @@ export function SubscribeForm({ type }: { type: string }) {
   }, [keyword])
 
   return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
-        <FormField
-          control={form.control}
-          name="keyword"
-          render={({ field }) => (
-            <FormItem>
-              <FormLabel>{info[type]?.label}</FormLabel>
-              <FormControl>
-                <Input {...field} />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          )}
-        />
-        <Button type="submit">Search</Button>
-      </form>
-    </Form>
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+          <FormField
+            control={form.control}
+            name="keyword"
+            render={({ field }) => (
+              <FormItem>
+                <FormLabel>{info[type]?.label}</FormLabel>
+                <FormControl>
+                  <Input {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+          <Button type="submit">Search</Button>
+        </form>
+      </Form>
+      {mutation.data && (
+        <div className="max-w-lg mt-8">
+          <div className="text-zinc-500 text-sm mb-2">
+            Found {mutation.data.length} results
+          </div>
+          <div className="space-y-4 text-sm">
+            {mutation.data.map((item) => (
+              <div className="flex flex-col gap-1">
+                <div className="flex items-center">
+                  {item.siteUrl && (
+                    <SiteIcon url={item.siteUrl} className="w-6 h-6" />
+                  )}
+                  {item.docs && (
+                    <SiteIcon url="https://rsshub.app" className="w-6 h-6" />
+                  )}
+                  <div className="leading-tight">
+                    <div className="font-medium">{item.title}</div>
+                    <div className="text-zinc-500">{item.url || item.docs}</div>
+                  </div>
+                </div>
+                <div className="flex items-center">
+                  <div className="line-clamp-2 text-xs text-zinc-500">
+                    {item.description}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </>
   )
 }