feat: get feed list

2024-04-12 17:35:53 +08:00 · 2024-04-12 17:35:53 +08:00 · 5335643f61
parent 2f315953f7
commit 5335643f61
9 changed files with 87 additions and 52 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,4 @@ dist
 out
 .DS_Store
 *.log*
+.env
--- a/package.json
+++ b/package.json
@ -25,6 +25,7 @@
    "@electron-toolkit/utils": "^3.0.0",
    "@radix-ui/react-tabs": "1.0.4",
    "@radix-ui/react-tooltip": "1.0.7",
+    "@tanstack/react-query": "5.29.2",
    "@use-gesture/react": "10.3.1",
    "class-variance-authority": "0.7.0",
    "clsx": "2.1.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -17,6 +17,9 @@ dependencies:
  '@radix-ui/react-tooltip':
    specifier: 1.0.7
    version: 1.0.7(@types/react-dom@18.2.24)(@types/react@18.2.75)(react-dom@18.2.0)(react@18.2.0)
+  '@tanstack/react-query':
+    specifier: 5.29.2
+    version: 5.29.2(react@18.2.0)
  '@use-gesture/react':
    specifier: 10.3.1
    version: 10.3.1(react@18.2.0)
@ -1704,6 +1707,19 @@ packages:
    dependencies:
      defer-to-connect: 2.0.1

+  /@tanstack/query-core@5.29.0:
+    resolution: {integrity: sha512-WgPTRs58hm9CMzEr5jpISe8HXa3qKQ8CxewdYZeVnA54JrPY9B1CZiwsCoLpLkf0dGRZq+LcX5OiJb0bEsOFww==}
+    dev: false
+
+  /@tanstack/react-query@5.29.2(react@18.2.0):
+    resolution: {integrity: sha512-nyuWILR4u7H5moLGSiifLh8kIqQDLNOHGuSz0rcp+J75fNc8aQLyr5+I2JCHU3n+nJrTTW1ssgAD8HiKD7IFBQ==}
+    peerDependencies:
+      react: ^18.0.0
+    dependencies:
+      '@tanstack/query-core': 5.29.0
+      react: 18.2.0
+    dev: false
+
  /@tootallnate/once@2.0.0:
    resolution: {integrity: sha512-XCuKFP5PS55gnMVu3dty8KPatLqUoy/ZYzDzAGCQ8JNFCkLXzmI7vNHCR+XpbZaMWQK/vQubr7PkYq8g470J/A==}
    engines: {node: '>= 10'}
--- a/src/renderer/index.html
+++ b/src/renderer/index.html
@ -2,14 +2,8 @@
 <html>
  <head>
    <meta charset="UTF-8" />
-    <title>Electron</title>
-    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <meta
-      http-equiv="Content-Security-Policy"
-      content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:"
-    />
+    <title>Rere</title>
  </head>
-
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
--- a/src/renderer/src/components/feed-list.tsx
+++ b/src/renderer/src/components/feed-list.tsx
@ -0,0 +1,12 @@
+import { useFeeds } from '@renderer/lib/feeds'
+
+export function FeedList({ type }: { type: string }) {
+  const feeds = useFeeds()
+  console.log('feeds', feeds.data)
+
+  return (
+    <div className="w-80 px-4">
+      <div>{type}</div>
+    </div>
+  )
+}
--- a/src/renderer/src/components/type-tab.tsx
+++ b/src/renderer/src/components/type-tab.tsx
@ -9,51 +9,44 @@ import { useWheel } from '@use-gesture/react'
 import { Lethargy } from 'lethargy'
 import { cn, clamp } from '@renderer/lib/utils'
 import { m, useSpring } from "framer-motion"
-
-function Content({ type }: { type: string }) {
-  return (
-    <div className="w-80">
-      <div>{type}</div>
-    </div>
-  )
-}
+import { FeedList } from './feed-list'

 const lethargy = new Lethargy()

-export function TypeTab() {
-  const items = [
-    {
-      name: 'Articles',
-      icon: <i className="i-mingcute-news-fill" />,
-      className: 'text-indigo-600'
-    },
-    {
-      name: 'Social Media',
-      icon: <i className="i-mingcute-twitter-fill" />,
-      className: 'text-sky-600'
-    },
-    {
-      name: 'Pictures',
-      icon: <i className="i-mingcute-pic-fill" />,
-      className: 'text-green-600'
-    },
-    {
-      name: 'Videos',
-      icon: <i className="i-mingcute-youtube-fill" />,
-      className: 'text-red-600'
-    },
-    {
-      name: 'Audios',
-      icon: <i className="i-mingcute-headphone-fill" />,
-      className: 'text-purple-600'
-    },
-    {
-      name: 'Notifications',
-      icon: <i className="i-mingcute-notification-fill" />,
-      className: 'text-yellow-600'
-    }
-  ]
+const items = [
+  {
+    name: 'Articles',
+    icon: <i className="i-mingcute-news-fill" />,
+    className: 'text-indigo-600'
+  },
+  {
+    name: 'Social Media',
+    icon: <i className="i-mingcute-twitter-fill" />,
+    className: 'text-sky-600'
+  },
+  {
+    name: 'Pictures',
+    icon: <i className="i-mingcute-pic-fill" />,
+    className: 'text-green-600'
+  },
+  {
+    name: 'Videos',
+    icon: <i className="i-mingcute-youtube-fill" />,
+    className: 'text-red-600'
+  },
+  {
+    name: 'Audios',
+    icon: <i className="i-mingcute-headphone-fill" />,
+    className: 'text-purple-600'
+  },
+  {
+    name: 'Notifications',
+    icon: <i className="i-mingcute-notification-fill" />,
+    className: 'text-yellow-600'
+  }
+]

+export function TypeTab() {
  const carouselRef = useRef<HTMLDivElement>(null)

  const [active, setActive] = useState(0)
@ -92,7 +85,7 @@ export function TypeTab() {
        {items.map((item, index) => (
          <div
            key={item.name}
-            className={cn(item.className, active !== index && 'grayscale')}
+            className={cn(active === index && item.className)}
            onClick={() => {
              setActive(index)
            }}
@ -108,7 +101,7 @@ export function TypeTab() {
        <m.div className="h-full flex" style={{ x: spring }}>
            {items.map((item) => (
              <section key={item.name} className="snap-center shrink-0">
-                <Content type={item.name} />
+                <FeedList type={item.name} />
              </section>
            ))}
        </m.div>
--- a/src/renderer/src/lib/feeds.ts
+++ b/src/renderer/src/lib/feeds.ts
@ -0,0 +1,13 @@
+import { useQuery } from '@tanstack/react-query'
+
+export const useFeeds = () =>
+  useQuery({
+    queryKey: ['feeds'],
+    queryFn: async () => {
+      return (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/feeds`, {
+        headers: {
+          'X-Auth-Token': import.meta.env.VITE_MINIFLUX_TOKEN
+        }
+      })).json()
+    }
+  })
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@ -5,6 +5,7 @@ import ReactDOM from 'react-dom/client'
 import App from './App'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import { LazyMotion, MotionConfig } from "framer-motion"
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query'

 const router = createBrowserRouter([
  {
@ -26,6 +27,8 @@ const router = createBrowserRouter([
 const loadFeatures = () =>
  import("./framer-lazy-feature").then((res) => res.default)

+const queryClient = new QueryClient()
+
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
    <LazyMotion features={loadFeatures} strict key="framer">
@ -35,7 +38,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
          duration: 0.3,
        }}
      >
-        <RouterProvider router={router} />
+        <QueryClientProvider client={queryClient}>
+          <RouterProvider router={router} />
+        </QueryClientProvider>
      </MotionConfig>
    </LazyMotion>
  </React.StrictMode>
--- a/src/renderer/src/pages/index.tsx
+++ b/src/renderer/src/pages/index.tsx
@ -3,7 +3,7 @@ import { TypeTab } from '@renderer/components/type-tab'
 export function Component() {
  return (
    <div className="flex h-full">
-      <div className="w-80 pt-10 border-r shrink-0 flex flex-col">
+      <div className="w-80 pt-10 border-r shrink-0 flex flex-col bg-[#E1E1E1]">
        <TypeTab />
      </div>
      <div className="w-80 pt-10 px-5 border-r shrink-0">Two</div>