From 32a55ece6440f80f837adc6d558029ea5fbd6982 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Fri, 20 Sep 2024 22:34:09 +0800
Subject: [PATCH] fix(discover): update follow status after add feed, closes
 #269, closes

Signed-off-by: Innei <i@innei.in>
---
 apps/renderer/src/modules/discover/form.tsx | 245 ++++++++++++--------
 1 file changed, 154 insertions(+), 91 deletions(-)

diff --git a/apps/renderer/src/modules/discover/form.tsx b/apps/renderer/src/modules/discover/form.tsx
index 06a519bb74..cc2d17db55 100644
--- 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,96 +198,13 @@ 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>
@@ -248,3 +212,102 @@ export function DiscoverForm({ type }: { type: string }) {
     </>
   )
 }
+
+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>
+  )
+})