diff --git a/.gitignore b/.gitignore index 42bd71b39..8a00eaf77 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,4 @@ dist out .DS_Store *.log* +.env diff --git a/package.json b/package.json index 8ac9999d3..c57ae132b 100644 --- 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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 25dbd6fbc..7976aeb8b 100644 --- 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'} diff --git a/src/renderer/index.html b/src/renderer/index.html index e198e05e4..e86f62fa4 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -2,14 +2,8 @@ - Electron - - + Rere -
diff --git a/src/renderer/src/components/feed-list.tsx b/src/renderer/src/components/feed-list.tsx new file mode 100644 index 000000000..2d1563d36 --- /dev/null +++ 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 ( +
+
{type}
+
+ ) +} diff --git a/src/renderer/src/components/type-tab.tsx b/src/renderer/src/components/type-tab.tsx index c08ccbf15..51bd23e8b 100644 --- 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 ( -
-
{type}
-
- ) -} +import { FeedList } from './feed-list' const lethargy = new Lethargy() -export function TypeTab() { - const items = [ - { - name: 'Articles', - icon: , - className: 'text-indigo-600' - }, - { - name: 'Social Media', - icon: , - className: 'text-sky-600' - }, - { - name: 'Pictures', - icon: , - className: 'text-green-600' - }, - { - name: 'Videos', - icon: , - className: 'text-red-600' - }, - { - name: 'Audios', - icon: , - className: 'text-purple-600' - }, - { - name: 'Notifications', - icon: , - className: 'text-yellow-600' - } - ] +const items = [ + { + name: 'Articles', + icon: , + className: 'text-indigo-600' + }, + { + name: 'Social Media', + icon: , + className: 'text-sky-600' + }, + { + name: 'Pictures', + icon: , + className: 'text-green-600' + }, + { + name: 'Videos', + icon: , + className: 'text-red-600' + }, + { + name: 'Audios', + icon: , + className: 'text-purple-600' + }, + { + name: 'Notifications', + icon: , + className: 'text-yellow-600' + } +] +export function TypeTab() { const carouselRef = useRef(null) const [active, setActive] = useState(0) @@ -92,7 +85,7 @@ export function TypeTab() { {items.map((item, index) => (
{ setActive(index) }} @@ -108,7 +101,7 @@ export function TypeTab() { {items.map((item) => (
- +
))} diff --git a/src/renderer/src/lib/feeds.ts b/src/renderer/src/lib/feeds.ts new file mode 100644 index 000000000..bc7890b86 --- /dev/null +++ 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() + } + }) diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx index be9c89922..a51f4b5b7 100644 --- 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( @@ -35,7 +38,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( duration: 0.3, }} > - + + + diff --git a/src/renderer/src/pages/index.tsx b/src/renderer/src/pages/index.tsx index ab8c5181b..be7bdb788 100644 --- 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 (
-
+
Two