From 4ab363305e0425141211d1cb7da74892e0158fda Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Wed, 22 May 2024 10:56:20 +0800
Subject: [PATCH] feat: use entry details api

---
 .../src/components/entry-column/index.tsx     |  1 -
 .../components/entry-column/item-wrapper.tsx  |  4 +-
 .../src/components/entry-content/index.tsx    | 26 ++++++----
 .../src/components/entry-content/share.tsx    |  4 +-
 src/renderer/src/hooks/useEntryActions.tsx    | 51 +++++++++++++++++--
 src/renderer/src/lib/queries/entries.ts       | 21 +++++++-
 src/renderer/src/lib/types.ts                 |  7 ++-
 src/renderer/src/pages/(main)/index.tsx       |  2 +-
 8 files changed, 93 insertions(+), 23 deletions(-)

diff --git a/src/renderer/src/components/entry-column/index.tsx b/src/renderer/src/components/entry-column/index.tsx
index b40f641054..79d255098a 100644
--- a/src/renderer/src/components/entry-column/index.tsx
+++ b/src/renderer/src/components/entry-column/index.tsx
@@ -7,7 +7,6 @@ import { SocialMediaItem } from "./social-media-item"
 import { PictureItem } from "./picture-item"
 import { VideoItem } from "./video-item"
 import { NotificationItem } from "./notification-item"
-import { showNativeMenu } from "@renderer/lib/native-menu"
 import { EntryItemWrapper } from "./item-wrapper"
 
 const gridMode = [2, 3]
diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
index 73d193771f..fce98b3bca 100644
--- a/src/renderer/src/components/entry-column/item-wrapper.tsx
+++ b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -28,11 +28,11 @@ export function EntryItemWrapper({
       key={entry.id}
       className={cn(
         "rounded-md transition-colors",
-        activedEntry?.id === entry.id && "bg-[#DEDDDC]",
+        activedEntry === entry.id && "bg-[#DEDDDC]",
       )}
       onClick={(e) => {
         e.stopPropagation()
-        setActivedEntry(entry)
+        setActivedEntry(entry.id)
       }}
       onContextMenu={(e) => {
         e.preventDefault()
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
index 9e7c574135..a30699ba38 100644
--- a/src/renderer/src/components/entry-content/index.tsx
+++ b/src/renderer/src/components/entry-content/index.tsx
@@ -3,44 +3,50 @@ import { ActivedEntry } from "@renderer/lib/types"
 import { useEffect, useState } from "react"
 import { m } from "framer-motion"
 import { EntryShare } from "./share"
+import { useEntry } from "@renderer/lib/queries/entries"
+
+export function EntryContent({ entryId }: { entryId: ActivedEntry }) {
+  const entry = useEntry({
+    id: entryId,
+  })
 
-export function EntryContent({ entry }: { entry: ActivedEntry }) {
   const [content, setContent] = useState<JSX.Element>()
 
   useEffect(() => {
-    if (entry?.content) {
-      parseHtml(entry?.content).then((parsed) => {
+    if (entry.data?.content) {
+      parseHtml(entry.data?.content).then((parsed) => {
         setContent(parsed.content)
       })
     } else {
       setContent(undefined)
     }
-  }, [entry?.content])
+  }, [entry.data?.content])
 
   return (
     <>
-      <EntryShare entry={entry} view={0} />
+      <EntryShare entry={entry.data} view={0} />
       <m.div
         className="px-5 py-5 overflow-y-auto h-full"
         initial={{ opacity: 0.01, y: 100 }}
         animate={{ opacity: 1, y: 0 }}
         exit={{ opacity: 0.01, y: -100 }}
-        key={entry?.id}
+        key={entry.data?.id}
       >
         <div>
           <a
-            href={entry?.url}
+            href={entry.data?.url}
             target="_blank"
             className="block hover:bg-zinc-100 max-w-[598px] mx-auto p-6 rounded-md transition-colors"
           >
             <div className="text-3xl font-bold select-text break-words">
-              {entry?.title}
+              {entry.data?.title}
             </div>
             <div className="mt-2 text-[13px] text-zinc-500 font-medium">
-              {entry?.feeds?.title}
+              {entry.data?.feeds?.title}
             </div>
             <div className="text-[13px] text-zinc-500">
-              {entry?.publishedAt && new Date(entry?.publishedAt).toUTCString()}
+              {entry.data?.publishedAt &&
+                new Date(entry.data?.publishedAt).toUTCString()}
             </div>
           </a>
           <div className="max-w-[550px] mx-auto mt-10 mb-32 prose text-[15px] prose-zinc select-text cursor-auto">
diff --git a/src/renderer/src/components/entry-content/share.tsx b/src/renderer/src/components/entry-content/share.tsx
index 76553bf5d1..d6c80aa06f 100644
--- a/src/renderer/src/components/entry-content/share.tsx
+++ b/src/renderer/src/components/entry-content/share.tsx
@@ -5,7 +5,7 @@ import {
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
 import { useEntryActions } from "@renderer/hooks/useEntryActions"
-import { ActivedEntry } from "@renderer/lib/types"
+import { EntriesResponse } from "@renderer/lib/types"
 import { Button } from "@renderer/components/ui/button"
 
 export function EntryShare({
@@ -13,7 +13,7 @@ export function EntryShare({
   entry,
 }: {
   view: number
-  entry: ActivedEntry
+  entry?: EntriesResponse[number]
 }) {
   if (!entry?.url) return null
 
diff --git a/src/renderer/src/hooks/useEntryActions.tsx b/src/renderer/src/hooks/useEntryActions.tsx
index 7c46497f1b..3f214f547d 100644
--- a/src/renderer/src/hooks/useEntryActions.tsx
+++ b/src/renderer/src/hooks/useEntryActions.tsx
@@ -1,9 +1,9 @@
 import { useToast } from "@renderer/components/ui/use-toast"
-import { useCallback } from "react"
 import { ofetch } from "ofetch"
-import { useQuery } from "@tanstack/react-query"
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import { client } from "@renderer/lib/client"
 import { EntriesResponse } from "@renderer/lib/types"
+import { apiFetch } from "@renderer/lib/queries/api-fetch"
 
 export const useEntryActions = ({
   view,
@@ -24,6 +24,45 @@ export const useEntryActions = ({
     },
   })
 
+  const queryClient = useQueryClient()
+
+  const collect = useMutation({
+    mutationFn: async () =>
+      apiFetch("/collections", {
+        method: "POST",
+        body: {
+          entryId: entry.id,
+        },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["entries"],
+      })
+      toast({
+        duration: 1000,
+        description: "Collected.",
+      })
+    },
+  })
+  const uncollect = useMutation({
+    mutationFn: async () =>
+      apiFetch("/collections", {
+        method: "DELETE",
+        body: {
+          entryId: entry.id,
+        },
+      }),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ["entries"],
+      })
+      toast({
+        duration: 1000,
+        description: "Uncollected.",
+      })
+    },
+  })
+
   const { toast } = useToast()
 
   const items = [
@@ -33,14 +72,18 @@ export const useEntryActions = ({
         className: "i-mingcute-star-line",
         action: "collect",
         disabled: !!entry.collections,
-        onClick: () => {},
+        onClick: () => {
+          collect.mutate()
+        },
       },
       {
         name: "Uncollect",
         className: "i-mingcute-star-fill",
         action: "uncollect",
         disabled: !entry.collections,
-        onClick: () => {},
+        onClick: () => {
+          uncollect.mutate()
+        },
       },
       {
         name: "Copy Link",
diff --git a/src/renderer/src/lib/queries/entries.ts b/src/renderer/src/lib/queries/entries.ts
index b0d8922705..a7c15bd87d 100644
--- a/src/renderer/src/lib/queries/entries.ts
+++ b/src/renderer/src/lib/queries/entries.ts
@@ -1,6 +1,6 @@
-import { useInfiniteQuery } from "@tanstack/react-query"
+import { useInfiniteQuery, useQuery } from "@tanstack/react-query"
 import { levels } from "@renderer/lib/constants"
-import { EntriesResponse, ListResponse } from "../types"
+import { EntriesResponse, ListResponse, DataResponse } from "../types"
 import { apiFetch } from "@renderer/lib/queries/api-fetch"
 
 export const useEntries = ({
@@ -40,3 +40,20 @@ export const useEntries = ({
       lastPageParam + (lastPage.data?.length || 0),
     initialPageParam: 0,
   })
+
+export const useEntry = ({ id }: { id?: string | null }) =>
+  useQuery({
+    queryKey: ["entry", id],
+    enabled: !!id,
+    queryFn: async () => {
+      const data = await apiFetch<DataResponse<EntriesResponse[number]>>(
+        "/entries",
+        {
+          query: {
+            id,
+          },
+        },
+      )
+      return data.data
+    },
+  })
diff --git a/src/renderer/src/lib/types.ts b/src/renderer/src/lib/types.ts
index e3c613490c..d944d46148 100644
--- a/src/renderer/src/lib/types.ts
+++ b/src/renderer/src/lib/types.ts
@@ -67,4 +67,9 @@ export type ListResponse<T> = {
   message?: string
 }
 
-export type ActivedEntry = EntriesResponse[number] | null
+export type DataResponse<T> = {
+  code: number
+  data?: T
+}
+
+export type ActivedEntry = string | null
diff --git a/src/renderer/src/pages/(main)/index.tsx b/src/renderer/src/pages/(main)/index.tsx
index 3b4ec80155..54c6785b03 100644
--- a/src/renderer/src/pages/(main)/index.tsx
+++ b/src/renderer/src/pages/(main)/index.tsx
@@ -39,7 +39,7 @@ export function Component() {
         {!(activedList && wideMode.includes(activedList.view)) &&
           activedEntry && (
             <div className="flex-1">
-              <EntryContent entry={activedEntry} />
+              <EntryContent entryId={activedEntry} />
             </div>
           )}
       </AnimatePresence>