feat: show default list
This commit is contained in:
parent
9dc8be4f84
commit
ea9fdaeeaf
|
|
@ -87,14 +87,27 @@ export function FeedColumn({
|
|||
})
|
||||
|
||||
return (
|
||||
<TooltipProvider delayDuration={300}>
|
||||
<div className='h-full flex flex-col' onClick={() => setActivedList({
|
||||
level: 'type',
|
||||
id: items[active].name,
|
||||
name: items[active].name,
|
||||
type: items[active].name,
|
||||
})}>
|
||||
<div className="flex text-zinc-500 w-full justify-between text-xl my-2 px-5">
|
||||
<TooltipProvider delayDuration={300}>
|
||||
{items.map((item, index) => (
|
||||
<div
|
||||
key={item.name}
|
||||
className={cn(active === index && "text-zinc-800")}
|
||||
onClick={() => {
|
||||
onClick={(e) => {
|
||||
setActive(index)
|
||||
setActivedList({
|
||||
level: 'type',
|
||||
id: items[index].name,
|
||||
name: items[index].name,
|
||||
type: items[index].name,
|
||||
})
|
||||
e.stopPropagation()
|
||||
}}
|
||||
>
|
||||
<Tooltip>
|
||||
|
|
@ -103,6 +116,7 @@ export function FeedColumn({
|
|||
</Tooltip>
|
||||
</div>
|
||||
))}
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
<div className="w-full h-full overflow-x-hidden" ref={carouselRef}>
|
||||
<m.div className="h-full flex" style={{ x: spring }}>
|
||||
|
|
@ -113,6 +127,6 @@ export function FeedColumn({
|
|||
))}
|
||||
</m.div>
|
||||
</div>
|
||||
</TooltipProvider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export function FeedList({
|
|||
return (
|
||||
<div className="w-64 px-3">
|
||||
<div
|
||||
className={cn('flex items-center justify-between mt-2 mb-3 px-2.5 py-1 rounded cursor-pointer', activedList?.level === levels.type && activedList.id === type && 'bg-[#C9C9C7]')}
|
||||
className={cn('flex items-center justify-between mt-2 mb-3 px-2.5 py-1 rounded cursor-pointer')}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setActivedList({
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
import { useInfiniteQuery } from '@tanstack/react-query'
|
||||
import { parseHtml } from './parse-html'
|
||||
import { typeMap } from './feeds'
|
||||
import { levels } from '@renderer/lib/constants'
|
||||
|
||||
export const useEntries = ({
|
||||
level,
|
||||
|
|
@ -12,15 +14,30 @@ export const useEntries = ({
|
|||
queryKey: ['entries', level, id],
|
||||
enabled: !!level && !!id,
|
||||
queryFn: async ({ pageParam }) => {
|
||||
const entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/categories/${id}/entries?` + new URLSearchParams({
|
||||
direction: 'desc',
|
||||
limit: '10',
|
||||
after_entry_id: pageParam,
|
||||
}), {
|
||||
headers: {
|
||||
'X-Auth-Token': import.meta.env.VITE_MINIFLUX_TOKEN
|
||||
}
|
||||
})).json()
|
||||
let entries
|
||||
if (level === levels.folder) {
|
||||
entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/entries?` + new URLSearchParams({
|
||||
direction: 'desc',
|
||||
limit: '10',
|
||||
after_entry_id: pageParam,
|
||||
category_id: id + '',
|
||||
}), {
|
||||
headers: {
|
||||
'X-Auth-Token': import.meta.env.VITE_MINIFLUX_TOKEN
|
||||
}
|
||||
})).json()
|
||||
} else if (level === levels.type) {
|
||||
entries = await (await fetch(`${import.meta.env.VITE_MINIFLUX_ENDPOINT}/v1/entries?` + new URLSearchParams({
|
||||
direction: 'desc',
|
||||
limit: '10',
|
||||
after_entry_id: pageParam,
|
||||
category_id: typeMap[id as string][0] + '',
|
||||
}), {
|
||||
headers: {
|
||||
'X-Auth-Token': import.meta.env.VITE_MINIFLUX_TOKEN
|
||||
}
|
||||
})).json()
|
||||
}
|
||||
entries.entries = await Promise.all(entries.entries.map(async (entry) => {
|
||||
entry.content = entry.content.replaceAll('https://pixiv.diygod.me/', 'https://i.pximg.net/');
|
||||
const parsed = await parseHtml(entry.content)
|
||||
|
|
|
|||
|
|
@ -1,12 +1,21 @@
|
|||
import { useQuery } from '@tanstack/react-query'
|
||||
|
||||
const typeMap = {
|
||||
'Articles': ['Forum', 'News', 'Game', 'Shopping', 'Blog', 'Knowledge'],
|
||||
'Social Media': ['Twitter', 'Weibo'],
|
||||
'Pictures': ['Picture'],
|
||||
'Videos': ['bilibili', 'YouTube', 'Video'],
|
||||
// const typeMap = {
|
||||
// 'Articles': ['Forum', 'News', 'Game', 'Shopping', 'Blog', 'Knowledge'],
|
||||
// 'Social Media': ['Twitter', 'Weibo'],
|
||||
// 'Pictures': ['Picture'],
|
||||
// 'Videos': ['bilibili', 'YouTube', 'Video'],
|
||||
// 'Audios': [],
|
||||
// 'Notifications': ['Software'],
|
||||
// }
|
||||
|
||||
export const typeMap = {
|
||||
'Articles': [5, 6, 11, 12, 10, 15],
|
||||
'Social Media': [2, 9],
|
||||
'Pictures': [7],
|
||||
'Videos': [3, 4, 8],
|
||||
'Audios': [],
|
||||
'Notifications': ['Software'],
|
||||
'Notifications': [13],
|
||||
}
|
||||
|
||||
export const useFeeds = (type: string) =>
|
||||
|
|
@ -29,7 +38,7 @@ export const useFeeds = (type: string) =>
|
|||
unread: 0,
|
||||
}
|
||||
feeds?.forEach((feed) => {
|
||||
if (typeMap[type].includes(feed.category.title)) {
|
||||
if (typeMap[type].includes(feed.category.id)) {
|
||||
if (!categories.list[feed.category.title]) {
|
||||
categories.list[feed.category.title] = {
|
||||
list: [],
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export function Component() {
|
|||
|
||||
return (
|
||||
<div className="flex h-full">
|
||||
<div className="w-64 pt-10 border-r shrink-0 flex flex-col bg-[#E1E0DF]" onClick={() => setActivedList(null)}>
|
||||
<div className="w-64 pt-10 border-r shrink-0 bg-[#E1E0DF]">
|
||||
<FeedColumn activedList={activedList} setActivedList={setActivedList} />
|
||||
</div>
|
||||
<div className={cn("pt-10 border-r shrink-0 h-full overflow-y-auto", activedList?.type === "Social Media" ? "flex-1 min-w-96" : "w-[340px]")}>
|
||||
|
|
|
|||
Loading…
Reference in New Issue