feat: subscribe forms and recommendations

RSSNext · Apr 30, 2024 · 108d4a5 · 108d4a5
1 parent a9f62fb
commit 108d4a5
Show file tree

Hide file tree

Showing 6 changed files with 185 additions and 8 deletions.
diff --git a/src/renderer/src/components/subscribe/general-form.tsx b/src/renderer/src/components/subscribe/general-form.tsx
@@ -5,7 +5,6 @@ import { Button } from "@renderer/components/ui/button"
 import {
   Form,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
@@ -40,14 +39,11 @@ export function GeneralForm() {
               <FormControl>
                 <Input {...field} />
               </FormControl>
-              <FormDescription>
-                This is your public display name.
-              </FormDescription>
               <FormMessage />
             </FormItem>
           )}
         />
-        <Button type="submit">Submit</Button>
+        <Button type="submit">Search</Button>
       </form>
     </Form>
   )

diff --git a/src/renderer/src/components/subscribe/readok-user-form.tsx b/src/renderer/src/components/subscribe/readok-user-form.tsx
@@ -0,0 +1,50 @@
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@renderer/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@renderer/components/ui/form"
+import { Input } from "@renderer/components/ui/input"
+
+const formSchema = z.object({
+  url: z.string().min(1),
+})
+
+export function ReadOKUserForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      url: "",
+    },
+  })
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>User Email</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Search</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/src/renderer/src/components/subscribe/recommendations.tsx b/src/renderer/src/components/subscribe/recommendations.tsx
@@ -0,0 +1,11 @@
+export function Recommendations({ type }: { type: string }) {
+  return (
+    <div className="mt-8">
+      <div className="font-medium text-lg">Suggested</div>
+      <ul className="mt-2">
+        <li>Suggestions1</li>
+        <li>Suggestions2</li>
+      </ul>
+    </div>
+  )
+}
diff --git a/src/renderer/src/components/subscribe/rss-form.tsx b/src/renderer/src/components/subscribe/rss-form.tsx
@@ -0,0 +1,50 @@
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@renderer/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@renderer/components/ui/form"
+import { Input } from "@renderer/components/ui/input"
+
+const formSchema = z.object({
+  url: z.string().min(1),
+})
+
+export function RSSForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      url: "",
+    },
+  })
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>URL or Keyword</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Search</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/src/renderer/src/components/subscribe/rsshub-form.tsx b/src/renderer/src/components/subscribe/rsshub-form.tsx
@@ -0,0 +1,60 @@
+import { z } from "zod"
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useForm } from "react-hook-form"
+import { Button } from "@renderer/components/ui/button"
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@renderer/components/ui/form"
+import { Input } from "@renderer/components/ui/input"
+import { useEffect } from "react"
+
+const formSchema = z.object({
+  url: z.string().min(1),
+})
+
+export function RSSHubForm() {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      url: "rsshub://",
+    },
+  })
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    console.log(values)
+  }
+
+  const url = form.watch("url")
+  useEffect(() => {
+    if (!url.startsWith("rsshub://")) {
+      form.setValue("url", "rsshub://")
+    } else if (url.startsWith("rsshub://rsshub://")) {
+      form.setValue("url", url.slice(9))
+    }
+  }, [url])
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
+        <FormField
+          control={form.control}
+          name="url"
+          render={({ field }) => (
+            <FormItem>
+              <FormLabel>URL or Keyword</FormLabel>
+              <FormControl>
+                <Input {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Search</Button>
+      </form>
+    </Form>
+  )
+}
diff --git a/src/renderer/src/pages/(main)/subscribe/index.tsx b/src/renderer/src/pages/(main)/subscribe/index.tsx
@@ -4,7 +4,11 @@ import {
   TabsList,
   TabsTrigger,
 } from "@renderer/components/ui/tabs"
+import { Recommendations } from "@renderer/components/subscribe/recommendations"
 import { GeneralForm } from "@renderer/components/subscribe/general-form"
+import { RSSForm } from "@renderer/components/subscribe/rss-form"
+import { RSSHubForm } from "@renderer/components/subscribe/rsshub-form"
+import { ReadOKUserForm } from "@renderer/components/subscribe/readok-user-form"
 
 export function Component() {
   const tabs = [
@@ -14,15 +18,18 @@ export function Component() {
     },
     {
       name: "RSS",
+      content: <RSSForm />,
     },
     {
       name: "RSSHub",
+      content: <RSSHubForm />,
     },
     {
       name: "RSS3",
     },
     {
       name: "ReadOK User",
+      content: <ReadOKUserForm />,
     },
     {
       name: "Email",
@@ -35,12 +42,15 @@ export function Component() {
       <Tabs defaultValue="General">
         <TabsList>
           {tabs.map((tab) => (
-            <TabsTrigger value={tab.name}>{tab.name}</TabsTrigger>
+            <TabsTrigger key={tab.name} value={tab.name}>
+              {tab.name}
+            </TabsTrigger>
           ))}
         </TabsList>
         {tabs.map((tab) => (
-          <TabsContent value={tab.name} className="h-96">
-            {tab.content}
+          <TabsContent key={tab.name} value={tab.name} className="h-96 mt-8">
+            {tab.content || <span className="text-zinc-500">Comming Soon</span>}
+            {tab.content && <Recommendations type={tab.name} />}
           </TabsContent>
         ))}
       </Tabs>