feat: entry preview api

RSSNext · May 30, 2024 · 28b6cce · 28b6cce
1 parent 3c6103f
commit 28b6cce
Show file tree

Hide file tree

Showing 9 changed files with 96 additions and 27 deletions.
diff --git a/src/renderer/src/components/entry-column/article-item.tsx b/src/renderer/src/components/entry-column/article-item.tsx
@@ -7,8 +7,8 @@ import { useEntry } from "@renderer/store/entry"
 import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function ArticleItem({ entryId }: UniversalItemProps) {
-  const entry = useEntry(entryId)
+export function ArticleItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
 
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry) return <ReactVirtuosoItemPlaceholder />

diff --git a/src/renderer/src/components/entry-column/notification-item.tsx b/src/renderer/src/components/entry-column/notification-item.tsx
@@ -5,8 +5,8 @@ import { useEntry } from "@renderer/store/entry"
 import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function NotificationItem({ entryId }: UniversalItemProps) {
-  const entry = useEntry(entryId)
+export function NotificationItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div className="mb-5 flex px-2 py-3">

diff --git a/src/renderer/src/components/entry-column/picture-item.tsx b/src/renderer/src/components/entry-column/picture-item.tsx
@@ -6,8 +6,8 @@ import { useEntry } from "@renderer/store/entry"
 import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function PictureItem({ entryId }: UniversalItemProps) {
-  const entry = useEntry(entryId)
+export function PictureItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div>

diff --git a/src/renderer/src/components/entry-column/social-media-item.tsx b/src/renderer/src/components/entry-column/social-media-item.tsx
@@ -6,8 +6,8 @@ import { useEntry } from "@renderer/store/entry"
 import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function SocialMediaItem({ entryId }: UniversalItemProps) {
-  const entry = useEntry(entryId)
+export function SocialMediaItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
 
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry) return <ReactVirtuosoItemPlaceholder />

diff --git a/src/renderer/src/components/entry-column/types.ts b/src/renderer/src/components/entry-column/types.ts
@@ -1,5 +1,8 @@
-export interface UniversalItemProps {
+import type { EntryModel } from "@renderer/lib/types"
+
+export type UniversalItemProps = {
   entryId: string
+  entryPreview?: EntryModel
 }
 
 export type FilterTab = "all" | "unread"
diff --git a/src/renderer/src/components/entry-column/video-item.tsx b/src/renderer/src/components/entry-column/video-item.tsx
@@ -6,8 +6,8 @@ import { useEntry } from "@renderer/store/entry"
 import { ReactVirtuosoItemPlaceholder } from "../ui/placeholder"
 import type { UniversalItemProps } from "./types"
 
-export function VideoItem({ entryId }: UniversalItemProps) {
-  const entry = useEntry(entryId)
+export function VideoItem({ entryId, entryPreview }: UniversalItemProps) {
+  const entry = useEntry(entryId) || entryPreview
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
     <div className="flex">

diff --git a/src/renderer/src/hono.ts b/src/renderer/src/hono.ts
@@ -293,9 +293,6 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                         images: string[] | null;
                         categories: string[] | null;
                     };
-                    collections: {
-                        createdAt: string;
-                    };
                     feeds: {
                         description: string | null;
                         title: string | null;
@@ -312,6 +309,9 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
                         errorAt: string | null;
                     };
                     read: boolean | null;
+                    collections?: {
+                        createdAt: string;
+                    } | undefined;
                 }[] | undefined;
             };
             outputFormat: "json";
@@ -364,6 +364,34 @@ declare const routes: hono_hono_base.HonoBase<hono.Env, {
             status: 200;
         };
     };
+    "/entries/preview": {
+        $get: {
+            input: {
+                query: {
+                    id: string;
+                };
+            };
+            output: {
+                code: 0;
+                data: {
+                    description: string | null;
+                    title: string | null;
+                    content: string | null;
+                    id: string;
+                    url: string | null;
+                    feedId: string;
+                    guid: string;
+                    author: string | null;
+                    changedAt: string;
+                    publishedAt: string;
+                    images: string[] | null;
+                    categories: string[] | null;
+                }[];
+            };
+            outputFormat: "json";
+            status: 200;
+        };
+    };
 } & {
     "/subscriptions": {
         $get: {

diff --git a/src/renderer/src/pages/(external)/feed/index.tsx b/src/renderer/src/pages/(external)/feed/index.tsx
@@ -5,8 +5,7 @@ import { SocialMediaItem } from "@renderer/components/entry-column/social-media-
 import type { UniversalItemProps } from "@renderer/components/entry-column/types"
 import { VideoItem } from "@renderer/components/entry-column/video-item"
 import { FeedIcon } from "@renderer/components/feed-icon"
-import { levels } from "@renderer/lib/constants"
-import { useEntries } from "@renderer/queries/entries"
+import { useEntriesPreview } from "@renderer/queries/entries"
 import { useFeed } from "@renderer/queries/feed"
 import type { FC } from "react"
 import { useParams } from "react-router-dom"
@@ -18,9 +17,8 @@ export function Component() {
   const feed = useFeed({
     id,
   })
-  const entries = useEntries({
+  const entries = useEntriesPreview({
     id,
-    level: levels.feed,
   })
 
   let Item: FC<UniversalItemProps>
@@ -61,14 +59,29 @@ export function Component() {
             />
             <h1>{feed.data.feed.title}</h1>
           </div>
-          <div className="mb-10 text-sm text-zinc-500">{feed.data.feed.description}</div>
+          <div className="mb-2 text-sm text-zinc-500">{feed.data.feed.description}</div>
+          <div className="mb-10 text-sm">
+            <strong>{feed.data.readCount}</strong>
+            {" "}
+            reads and
+            {" "}
+            <strong>{feed.data.subscriptionCount}</strong>
+            {" "}
+            subscriptions on Follow
+          </div>
           <div className="w-full">
-            {entries.data?.pages.map((page) =>
-              page.data?.map((entry) => (
-                <a href={entry.entries.url || void 0} target="_blank" key={entry.entries.id}>
-                  <Item entryId={entry.entries.id} />
-                </a>
-              )),
+            {entries.data?.map((entry) => (
+              <a href={entry.url || void 0} target="_blank" key={entry.id}>
+                <Item
+                  entryId=""
+                  entryPreview={{
+                    entries: entry,
+                    feeds: feed.data.feed,
+                    read: false,
+                  }}
+                />
+              </a>
+            ),
             )}
           </div>
         </div>

diff --git a/src/renderer/src/queries/entries.ts b/src/renderer/src/queries/entries.ts
@@ -1,5 +1,5 @@
 import { UnprocessableEntityError } from "@renderer/biz/error"
-import { useBizInfiniteQuery } from "@renderer/hooks/useBizQuery"
+import { useBizInfiniteQuery, useBizQuery } from "@renderer/hooks/useBizQuery"
 import { defineQuery } from "@renderer/lib/defineQuery"
 import { apiClient } from "@renderer/queries/api-fetch"
 import { entryActions } from "@renderer/store/entry"
@@ -19,7 +19,6 @@ export const entries = {
     defineQuery(
       ["entries", level, id, view, read],
       async ({ pageParam }) =>
-
         entryActions.fetchEntries({
           level,
           id,
@@ -51,6 +50,23 @@ export const entries = {
         rootKey: ["entries"],
       },
     ),
+  preview: (id: string) =>
+    defineQuery(
+      ["entries-preview", id],
+      async () => {
+        const res = await apiClient.entries.preview.$get({
+          query: {
+            id,
+          },
+        })
+        const json = await res.json()
+
+        return json.data
+      },
+      {
+        rootKey: ["entries-preview"],
+      },
+    ),
 }
 
 export const useEntries = ({
@@ -74,3 +90,12 @@ export const useEntries = ({
     },
     initialPageParam: undefined,
   })
+
+export const useEntriesPreview = ({
+  id,
+}: {
+  id?: string
+}) =>
+  useBizQuery(entries.preview(id!), {
+    enabled: !!id,
+  })