feat: entry list

RSSNext · Apr 15, 2024 · 1c9a9cc · 1c9a9cc
1 parent b4265a7
commit 1c9a9cc
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -30,6 +30,7 @@
     "@use-gesture/react": "10.3.1",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.0",
+    "dayjs": "1.11.10",
     "electron-updater": "^6.1.7",
     "framer-motion": "11.0.27",
     "lethargy": "1.0.9",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/renderer/src/components/entry-column.tsx b/src/renderer/src/components/entry-column.tsx
@@ -1,13 +1,40 @@
+import { useEntries } from '@renderer/lib/entries'
 import { ActivedList } from '@renderer/lib/types'
+import dayjs from '@renderer/lib/dayjs'
+
+export function EntryColumn({ activedList }: { activedList: ActivedList }) {
+  const entries = useEntries({
+    type: activedList?.level,
+    id: activedList?.id
+  })
 
-export function EntryColumn({
-  activedList,
-}: {
-  activedList: ActivedList,
-}) {
   return (
     <div>
-      {JSON.stringify(activedList)}
+      <div className='ml-7'>
+        <div className="font-bold text-lg">{activedList?.name}</div>
+        <div className="text-xs font-medium text-zinc-400">
+          {entries.data?.pages?.[0].total} Items
+        </div>
+      </div>
+      {entries.data?.pages?.map((page) =>
+        page.entries.map((entry) => (
+          <div key={entry.id} className="mt-4 flex">
+            <img
+              src={`https://icons.duckduckgo.com/ip3/${new URL(entry.feed.site_url).host}.ico`}
+              className="w-5 h-5 mr-2 rounded-sm mt-1"
+            />
+            <div className='line-clamp-5 text-sm'>
+              <div className='text-zinc-500'>
+                {dayjs
+                  .duration(dayjs(entry.published_at).diff(dayjs(), 'minute'), 'minute')
+                  .humanize()} ago
+              </div>
+              <div className='font-medium'>{entry.title}</div>
+              <div className='text-zinc-500'>{entry.content}</div>
+            </div>
+          </div>
+        ))
+      )}
     </div>
   )
 }
diff --git a/src/renderer/src/lib/dayjs.ts b/src/renderer/src/lib/dayjs.ts
@@ -0,0 +1,9 @@
+import dayjs from "dayjs"
+
+import duration from "dayjs/plugin/duration"
+import relativeTime from "dayjs/plugin/relativeTime"
+
+dayjs.extend(duration)
+dayjs.extend(relativeTime)
+
+export default dayjs
diff --git a/src/renderer/src/lib/entries.ts b/src/renderer/src/lib/entries.ts
@@ -0,0 +1,28 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+
+export const useEntries = ({
+  type,
+  id,
+}: {
+  type?: string
+  id?: number | string
+}) =>
+  useInfiniteQuery({
+    queryKey: ['entries', type, id],
+    enabled: !!type && !!id,
+    queryFn: async ({ pageParam }) => {
+      const entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/categories/${id}/entries?` + new URLSearchParams({
+        direction: 'desc',
+        limit: '20',
+        after_entry_id: pageParam,
+      }), {
+        headers: {
+          'X-Auth-Token': import.meta.env.VITE_MINIFLUX_TOKEN
+        }
+      })).json()
+
+      return entries;
+    },
+    getNextPageParam: (lastPage) => lastPage?.entries?.length ? lastPage.entries[lastPage.entries.length - 1].id : '',
+    initialPageParam: '',
+  })
diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx
@@ -11,7 +11,7 @@ export function Component() {
       <div className="w-64 pt-10 border-r shrink-0 flex flex-col bg-[#E1E0DF]" onClick={() => setActivedList(null)}>
         <FeedColumn activedList={activedList} setActivedList={setActivedList} />
       </div>
-      <div className="w-80 pt-10 px-5 border-r shrink-0">
+      <div className="w-80 pt-10 px-5 border-r shrink-0 h-full overflow-y-auto">
         <EntryColumn activedList={activedList} />
       </div>
       <div className="flex-1 pt-10 px-5">Three</div>