From b531a21ddeea111ab28d2a83b07181d5ca3bc852 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Fri, 13 Sep 2024 03:11:49 +0800
Subject: [PATCH] feat: subscribe to other user

---
 .../src/modules/discover/user-form.tsx        | 41 +++++++++++++++++++
 .../entry-column/Items/notification-item.tsx  |  4 +-
 .../templates/list-item-template.tsx          | 36 ++++++++++++++++
 .../(layer)/(subview)/discover/index.tsx      |  6 +++
 4 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/src/modules/discover/user-form.tsx

diff --git a/src/renderer/src/modules/discover/user-form.tsx b/src/renderer/src/modules/discover/user-form.tsx
new file mode 100644
index 0000000000..36716f601a
--- /dev/null
+++ b/src/renderer/src/modules/discover/user-form.tsx
@@ -0,0 +1,41 @@
+import { LoadingCircle } from "@renderer/components/ui/loading"
+import { useAuthQuery } from "@renderer/hooks/common"
+import { Queries } from "@renderer/queries"
+
+import { DiscoverFeedForm } from "./DiscoverFeedForm"
+
+export function DiscoverUser() {
+  const { data, isLoading } = useAuthQuery(
+    Queries.discover.rsshubNamespace({
+      namespace: "follow",
+    }),
+    {
+      meta: {
+        persist: true,
+      },
+    },
+  )
+
+  if (isLoading) {
+    return (
+      <div className="center mt-12 flex w-full flex-col gap-8">
+        <LoadingCircle size="large" />
+      </div>
+    )
+  }
+
+  return (
+    <>
+      {data?.follow.routes && (
+        <div className="w-[512px]">
+          <DiscoverFeedForm
+            routePrefix="follow"
+            route={data.follow.routes[Object.keys(data.follow.routes)[0]]}
+            noDescription
+            submitButtonClassName="justify-center"
+          />
+        </div>
+      )}
+    </>
+  )
+}
diff --git a/src/renderer/src/modules/entry-column/Items/notification-item.tsx b/src/renderer/src/modules/entry-column/Items/notification-item.tsx
index b2de946f45..b9e5ccb846 100644
--- a/src/renderer/src/modules/entry-column/Items/notification-item.tsx
+++ b/src/renderer/src/modules/entry-column/Items/notification-item.tsx
@@ -4,7 +4,9 @@ import { ListItem } from "@renderer/modules/entry-column/templates/list-item-tem
 import type { UniversalItemProps } from "../types"
 
 export function NotificationItem({ entryId, entryPreview, translation }: UniversalItemProps) {
-  return <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} />
+  return (
+    <ListItem entryId={entryId} entryPreview={entryPreview} translation={translation} withFollow />
+  )
 }
 
 export const NotificationItemSkeleton = (
diff --git a/src/renderer/src/modules/entry-column/templates/list-item-template.tsx b/src/renderer/src/modules/entry-column/templates/list-item-template.tsx
index bee8051a0f..8255785f9c 100644
--- a/src/renderer/src/modules/entry-column/templates/list-item-template.tsx
+++ b/src/renderer/src/modules/entry-column/templates/list-item-template.tsx
@@ -1,15 +1,21 @@
+import { env } from "@env"
 import { AudioPlayer, useAudioPlayerAtomSelector } from "@renderer/atoms/player"
 import { FeedIcon } from "@renderer/components/feed-icon"
+import { FollowIcon } from "@renderer/components/icons/follow"
+import { Button } from "@renderer/components/ui/button"
 import { RelativeTime } from "@renderer/components/ui/datetime"
 import { Media } from "@renderer/components/ui/media"
+import { useModalStack } from "@renderer/components/ui/modal"
 import { FEED_COLLECTION_LIST } from "@renderer/constants"
 import { useAsRead } from "@renderer/hooks/biz/useAsRead"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import { cn, isSafari } from "@renderer/lib/utils"
+import { FeedForm } from "@renderer/modules/discover/feed-form"
 import { EntryTranslation } from "@renderer/modules/entry-column/translation"
 import { Queries } from "@renderer/queries"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { getPreferredTitle, useFeedById } from "@renderer/store/feed"
+import { useSubscriptionStore } from "@renderer/store/subscription"
 import { useDebounceCallback } from "usehooks-ts"
 
 import { ReactVirtuosoItemPlaceholder } from "../../../components/ui/placeholder"
@@ -22,9 +28,11 @@ export function ListItem({
   translation,
   withDetails,
   withAudio,
+  withFollow,
 }: UniversalItemProps & {
   withDetails?: boolean
   withAudio?: boolean
+  withFollow?: boolean
 }) {
   const entry = useEntry(entryId) || entryPreview
 
@@ -42,6 +50,13 @@ export function ListItem({
     { leading: false },
   )
 
+  const isSubscription = withFollow && entry?.entries.url?.startsWith(`${env.VITE_WEB_URL}/feed/`)
+  const feedId = isSubscription
+    ? entry?.entries.url?.replace(`${env.VITE_WEB_URL}/feed/`, "")
+    : undefined
+  const isFollowed = !!useSubscriptionStore((state) => feedId && state.data[feedId])
+  const { present } = useModalStack()
+
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry || !feed) return <ReactVirtuosoItemPlaceholder />
 
@@ -122,6 +137,27 @@ export function ListItem({
         )}
       </div>
 
+      {feedId && !isFollowed && (
+        <Button
+          onClick={(e) => {
+            e.stopPropagation()
+            e.preventDefault()
+            present({
+              title: `${APP_NAME}`,
+              clickOutsideToDismiss: true,
+              content: ({ dismiss }) => <FeedForm asWidget id={feedId} onSuccess={dismiss} />,
+            })
+          }}
+          variant="outline"
+          className="h-8"
+        >
+          <>
+            <FollowIcon className="mr-1 size-3" />
+            {APP_NAME}
+          </>
+        </Button>
+      )}
+
       {withAudio && entry.entries?.attachments?.[0].url && (
         <AudioCover
           entryId={entryId}
diff --git a/src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx b/src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
index 1e2b9da92f..43b58efe4e 100644
--- a/src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
+++ b/src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx
@@ -3,6 +3,7 @@ import { DiscoverForm } from "@renderer/modules/discover/form"
 import { DiscoverImport } from "@renderer/modules/discover/import"
 import { Recommendations } from "@renderer/modules/discover/recommendations"
 import { DiscoverRSS3 } from "@renderer/modules/discover/rss3-form"
+import { DiscoverUser } from "@renderer/modules/discover/user-form"
 import { createElement } from "react"
 import { useTranslation } from "react-i18next"
 import { useSearchParams } from "react-router-dom"
@@ -26,6 +27,10 @@ const tabs = [
     name: "RSS3",
     value: "rss3",
   },
+  {
+    name: "User",
+    value: "user",
+  },
   {
     name: "Email",
     value: "email",
@@ -79,4 +84,5 @@ export function Component() {
 const TabComponent = {
   import: DiscoverImport,
   rss3: DiscoverRSS3,
+  user: DiscoverUser,
 }