fix(discover): update follow status after add feed, closes #269, closes

Signed-off-by: Innei <i@innei.in>
RSSNext · Sep 20, 2024 · 32a55ec · 32a55ec
1 parent 5e34d36
commit 32a55ec
Showing 1 changed file with 154 additions and 91 deletions.
diff --git a/apps/renderer/src/modules/discover/form.tsx b/apps/renderer/src/modules/discover/form.tsx
@@ -1,6 +1,10 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useMutation } from "@tanstack/react-query"
-import { useEffect } from "react"
+import { useSingleton } from "foxact/use-singleton"
+import { produce } from "immer"
+import { atom, useAtomValue, useStore } from "jotai"
+import type { FC } from "react"
+import { memo, useCallback, useEffect } from "react"
 import { useForm } from "react-hook-form"
 import { useTranslation } from "react-i18next"
 import { z } from "zod"
@@ -55,6 +59,7 @@ const info: Record<
  },
 }
 
+type DiscoverSearchData = Awaited<ReturnType<typeof apiClient.discover.$post>>["data"]
 export function DiscoverForm({ type }: { type: string }) {
  const { prefix, default: defaultValue } = info[type]
  const form = useForm<z.infer<typeof formSchema>>({
@@ -64,6 +69,8 @@ export function DiscoverForm({ type }: { type: string }) {
  },
  })
  const { t } = useTranslation()
+
+ const jotaiStore = useStore()
  const mutation = useMutation({
  mutationFn: async (keyword: string) => {
  const { data } = await apiClient.discover.$post({
@@ -72,9 +79,14 @@ export function DiscoverForm({ type }: { type: string }) {
  },
  })
 
+ jotaiStore.set(discoverSearchDataAtom, data)
+
  return data
  },
  })
+ const discoverSearchDataAtom = useSingleton(() => atom<DiscoverSearchData>()).current
+
+ const discoverSearchData = useAtomValue(discoverSearchDataAtom)
 
  const { present, dismissAll } = useModalStack()
 
@@ -120,6 +132,41 @@ export function DiscoverForm({ type }: { type: string }) {
  form.setValue("keyword", trimmedKeyword)
  }, [form, keyword, prefix])
 
+ const handleSuccess = useCallback(
+ (item: DiscoverSearchData[number]) => {
+ const currentData = jotaiStore.get(discoverSearchDataAtom)
+ if (!currentData) return
+ jotaiStore.set(
+ discoverSearchDataAtom,
+ produce(currentData, (draft) => {
+ const sub = draft.find((i) => i.feed.id === item.feed.id)
+ if (!sub) return
+ sub.isSubscribed = true
+ sub.subscriptionCount = -~(sub.subscriptionCount as number)
+ }),
+ )
+ },
+ [discoverSearchDataAtom, jotaiStore],
+ )
+
+ const handleUnSubscribed = useCallback(
+ (item: DiscoverSearchData[number]) => {
+ const currentData = jotaiStore.get(discoverSearchDataAtom)
+ if (!currentData) return
+ jotaiStore.set(
+ discoverSearchDataAtom,
+ produce(currentData, (draft) => {
+ const sub = draft.find((i) => i.feed.id === item.feed.id)
+ if (!sub) return
+ sub.isSubscribed = false
+ sub.subscriptionCount = Number.isNaN(sub.subscriptionCount)
+ ? 0
+ : (sub.subscriptionCount as number) - 1
+ }),
+ )
+ },
+ [discoverSearchDataAtom, jotaiStore],
+ )
  return (
  <>
  <Form {...form}>
@@ -151,100 +198,116 @@ export function DiscoverForm({ type }: { type: string }) {
  {mutation.data?.length > 1 && "s"}
  </div>
  <div className="space-y-6 text-sm">
- {mutation.data.map((item) => (
- <Card
- data-feed-id={item.feed.id}
- key={item.feed.url || item.docs}
- className="select-text"
- >
- <CardHeader>
- <FollowSummary className="max-w-[462px]" feed={item.feed} docs={item.docs} />
- </CardHeader>
- {item.docs ? (
- <CardFooter>
- <a href={item.docs} target="_blank" rel="noreferrer">
- <Button>View Docs</Button>
- </a>
- </CardFooter>
- ) : (
- <>
- <CardContent>
- {!!item.entries?.length && (
- <div className="grid grid-cols-4 gap-4">
- {item.entries
- .filter((e) => !!e)
- .map((entry) => {
- const assertEntry = entry
- return (
- <a
- key={assertEntry.id}
- href={assertEntry.url || void 0}
- target="_blank"
- className="flex min-w-0 flex-1 flex-col items-center gap-1"
- rel="noreferrer"
- >
- {assertEntry.media?.[0] ? (
- <Media
- src={assertEntry.media?.[0].url}
- type={assertEntry.media?.[0].type}
- previewImageUrl={assertEntry.media?.[0].preview_image_url}
- className="aspect-square w-full"
- />
- ) : (
- <div className="flex aspect-square w-full overflow-hidden rounded bg-stone-100 p-2 text-xs leading-tight text-zinc-500">
- {assertEntry.title}
- </div>
- )}
- <div className="line-clamp-2 w-full text-xs leading-tight">
- {assertEntry.title}
- </div>
- </a>
- )
- })}
- </div>
- )}
- </CardContent>
- <CardFooter>
- {item.isSubscribed ? (
- <Button variant="outline" disabled>
- Followed
- </Button>
- ) : (
- <Button
- onClick={() => {
- present({
- title: "Add Feed",
- content: ({ dismiss }) => (
- <FeedForm
- asWidget
- url={item.feed.url}
- id={item.feed.id}
- defaultValues={{
- view: getSidebarActiveView().toString(),
- }}
- onSuccess={dismiss}
- />
- ),
- })
- }}
- >
- Follow
- </Button>
- )}
- <div className="ml-6 text-zinc-500">
- <span className="font-medium text-zinc-800 dark:text-zinc-200">
- {item.subscriptionCount}
- </span>{" "}
- Followers
- </div>
- </CardFooter>
- </>
- )}
- </Card>
+ {discoverSearchData?.map((item) => (
+ <SearchCard
+ key={item.feed.id}
+ item={item}
+ onSuccess={handleSuccess}
+ onUnSubscribed={handleUnSubscribed}
+ />
  ))}
  </div>
  </div>
  )}
  </>
  )
 }
+
+const SearchCard: FC<{
+ item: DiscoverSearchData[number]
+ onSuccess: (item: DiscoverSearchData[number]) => void
+ onUnSubscribed?: (item: DiscoverSearchData[number]) => void
+}> = memo(({ item, onSuccess }) => {
+ const { present } = useModalStack()
+
+ return (
+ <Card data-feed-id={item.feed.id} key={item.feed.url || item.docs} className="select-text">
+ <CardHeader>
+ <FollowSummary className="max-w-[462px]" feed={item.feed} docs={item.docs} />
+ </CardHeader>
+ {item.docs ? (
+ <CardFooter>
+ <a href={item.docs} target="_blank" rel="noreferrer">
+ <Button>View Docs</Button>
+ </a>
+ </CardFooter>
+ ) : (
+ <>
+ <CardContent>
+ {!!item.entries?.length && (
+ <div className="grid grid-cols-4 gap-4">
+ {item.entries
+ .filter((e) => !!e)
+ .map((entry) => {
+ const assertEntry = entry
+ return (
+ <a
+ key={assertEntry.id}
+ href={assertEntry.url || void 0}
+ target="_blank"
+ className="flex min-w-0 flex-1 flex-col items-center gap-1"
+ rel="noreferrer"
+ >
+ {assertEntry.media?.[0] ? (
+ <Media
+ src={assertEntry.media?.[0].url}
+ type={assertEntry.media?.[0].type}
+ previewImageUrl={assertEntry.media?.[0].preview_image_url}
+ className="aspect-square w-full"
+ />
+ ) : (
+ <div className="flex aspect-square w-full overflow-hidden rounded bg-stone-100 p-2 text-xs leading-tight text-zinc-500">
+ {assertEntry.title}
+ </div>
+ )}
+ <div className="line-clamp-2 w-full text-xs leading-tight">
+ {assertEntry.title}
+ </div>
+ </a>
+ )
+ })}
+ </div>
+ )}
+ </CardContent>
+ <CardFooter>
+ {item.isSubscribed ? (
+ <Button variant="outline" disabled>
+ Followed
+ </Button>
+ ) : (
+ <Button
+ onClick={() => {
+ present({
+ title: "Add Feed",
+ content: ({ dismiss }) => (
+ <FeedForm
+ asWidget
+ url={item.feed.url}
+ id={item.feed.id}
+ defaultValues={{
+ view: getSidebarActiveView().toString(),
+ }}
+ onSuccess={() => {
+ onSuccess(item)
+ dismiss()
+ }}
+ />
+ ),
+ })
+ }}
+ >
+ Follow
+ </Button>
+ )}
+ <div className="ml-6 text-zinc-500">
+ <span className="font-medium text-zinc-800 dark:text-zinc-200">
+ {item.subscriptionCount}
+ </span>{" "}
+ Followers
+ </div>
+ </CardFooter>
+ </>
+ )}
+ </Card>
+ )
+})