feat: entry list in feed page

RSSNext · May 30, 2024 · 18b2f8d · 18b2f8d
1 parent 4fc1a98
commit 18b2f8d
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 15 deletions.
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,9 +6,9 @@ import type { UniversalItemProps } from "./types"
 
 export function SocialMediaItem({ entry }: UniversalItemProps) {
   return (
-    <div className="mb-5 flex px-2 py-3">
+    <div className="mb-5 flex px-2 py-3 w-full">
       <FeedIcon feed={entry.feeds} />
-      <div>
+      <div className="flex-1 min-w-0">
         <div className="-mt-0.5 line-clamp-5 flex-1 text-sm">
           <div className="space-x-1">
             <span className="font-medium">{entry.entries.author}</span>

diff --git a/src/renderer/src/pages/(external)/feed/index.tsx b/src/renderer/src/pages/(external)/feed/index.tsx
@@ -1,11 +1,20 @@
+import { ArticleItem } from "@renderer/components/entry-column/article-item"
+import { NotificationItem } from "@renderer/components/entry-column/notification-item"
+import { PictureItem } from "@renderer/components/entry-column/picture-item"
+import { SocialMediaItem } from "@renderer/components/entry-column/social-media-item"
+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 { useFeed } from "@renderer/queries/feed"
+import type { FC } from "react"
 import { useParams } from "react-router-dom"
 
 export function Component() {
   const { id } = useParams()
+  const view = Number.parseInt(new URLSearchParams(location.search).get("view") || "0")
+
   const feed = useFeed({
     id,
   })
@@ -14,22 +23,54 @@ export function Component() {
     level: levels.feed,
   })
 
+  let Item: FC<UniversalItemProps>
+  switch (view) {
+    case 0: {
+      Item = ArticleItem
+      break
+    }
+    case 1: {
+      Item = SocialMediaItem
+      break
+    }
+    case 2: {
+      Item = PictureItem
+      break
+    }
+    case 3: {
+      Item = VideoItem
+      break
+    }
+    case 5: {
+      Item = NotificationItem
+      break
+    }
+    default: {
+      Item = ArticleItem
+    }
+  }
+
   return (
     <>
       {feed.data?.feed && (
-        <div className="flex flex-col items-center">
-          <FeedIcon
-            feed={feed.data.feed}
-            className="mr-2 size-8 shrink-0"
-          />
-          <h1>{feed.data.feed.title}</h1>
-          {entries.data?.pages.map((page) =>
-            page.data?.map((entry) => (
-              <div key={entry.entries.id}>
-                <h2>{entry.entries.title}</h2>
-              </div>
-            )),
-          )}
+        <div className="flex flex-col items-center max-w-5xl mx-auto">
+          <div className="flex items-center text-2xl font-bold mt-10 mb-2">
+            <FeedIcon
+              feed={feed.data.feed}
+              className="size-8 shrink-0"
+            />
+            <h1>{feed.data.feed.title}</h1>
+          </div>
+          <div className="text-sm text-zinc-500 mb-10">{feed.data.feed.description}</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 entry={entry} />
+                </a>
+              )),
+            )}
+          </div>
         </div>
       )}
     </>