-
{activeList?.name}
+
{activeList?.name}
- {entries.data?.pages?.[0].total}
+ {entries.data?.pages?.[0].total || 0}
{" "}
{unreadOnly ? "Unread" : ""}
{" "}
@@ -221,13 +220,11 @@ const ListHeader: FC = () => {
onClick={() => setUnreadOnly(!unreadOnly)}
active={unreadOnly}
>
- {unreadOnly ?
- (
-
- ) :
- (
-
- )}
+ {unreadOnly ? (
+
+ ) : (
+
+ )}
diff --git a/src/renderer/src/components/entry-column/item-wrapper.tsx b/src/renderer/src/components/entry-column/item-wrapper.tsx
index 3f78b54d5..627c663ad 100644
--- a/src/renderer/src/components/entry-column/item-wrapper.tsx
+++ b/src/renderer/src/components/entry-column/item-wrapper.tsx
@@ -34,9 +34,7 @@ export function EntryItemWrapper({
},
}),
onMutate: () => {
- entryActions.optimisticUpdate(entry.entries.id, {
- read: true,
- })
+ entryActions.markRead(entry.feeds.id, entry.entries.id, true)
},
// TODO fallback
})
diff --git a/src/renderer/src/components/entry-column/types.ts b/src/renderer/src/components/entry-column/types.ts
index f918ceba3..2a19a362e 100644
--- a/src/renderer/src/components/entry-column/types.ts
+++ b/src/renderer/src/components/entry-column/types.ts
@@ -1,4 +1,4 @@
-import type { EntryModel, FeedModel } from "@renderer/lib/types"
+import type { EntryModel, FeedModel } from "@renderer/models"
export type UniversalItemProps = {
entryId: string
diff --git a/src/renderer/src/components/entry-content/index.tsx b/src/renderer/src/components/entry-content/index.tsx
index b3c1c156d..19638f20b 100644
--- a/src/renderer/src/components/entry-content/index.tsx
+++ b/src/renderer/src/components/entry-content/index.tsx
@@ -1,6 +1,6 @@
import { useBizQuery } from "@renderer/hooks/useBizQuery"
import { parseHtml } from "@renderer/lib/parse-html"
-import type { ActiveEntry } from "@renderer/lib/types"
+import type { ActiveEntry } from "@renderer/models"
import { Queries } from "@renderer/queries"
import { useFeedStore } from "@renderer/store"
import { m } from "framer-motion"
@@ -9,7 +9,9 @@ import { useEffect, useState } from "react"
import { EntryShare } from "./share"
export function EntryContent({ entryId }: { entryId: ActiveEntry }) {
- const entry = useBizQuery(Queries.entries.byId(entryId))
+ const entry = useBizQuery(Queries.entries.byId(entryId), {
+ enabled: !!entryId,
+ })
const activeList = useFeedStore((state) => state.activeList)
const [content, setContent] = useState()
diff --git a/src/renderer/src/components/feed-column/category.tsx b/src/renderer/src/components/feed-column/category.tsx
index 39792c8db..0af56ce91 100644
--- a/src/renderer/src/components/feed-column/category.tsx
+++ b/src/renderer/src/components/feed-column/category.tsx
@@ -7,10 +7,14 @@ import { client } from "@renderer/lib/client"
import { levels } from "@renderer/lib/constants"
import { showNativeMenu } from "@renderer/lib/native-menu"
import { cn } from "@renderer/lib/utils"
+import type { FeedListModel } from "@renderer/models"
import { Queries } from "@renderer/queries"
import { apiFetch } from "@renderer/queries/api-fetch"
-import type { Response as SubscriptionsResponse } from "@renderer/queries/subscriptions"
-import { feedActions, useFeedActiveList } from "@renderer/store"
+import {
+ feedActions,
+ useFeedActiveList,
+ useUnreadStore,
+} from "@renderer/store"
import { useMutation } from "@tanstack/react-query"
import { AnimatePresence, m } from "framer-motion"
import { useEffect, useState } from "react"
@@ -25,7 +29,7 @@ export function FeedCategory({
view,
expansion,
}: {
- data: SubscriptionsResponse["list"][number]
+ data: FeedListModel["list"][number]
view?: number
expansion: boolean
}) {
@@ -56,15 +60,21 @@ export function FeedCategory({
}, [expansion])
const setCategoryActive = () => {
- view !== undefined &&
- setActiveList?.({
- level: levels.folder,
- id: data.list.map((feed) => feed.feedId).join(","),
- name: data.name,
- view,
- })
+ if (view !== undefined) {
+ setActiveList({
+ level: levels.folder,
+ id: data.list.map((feed) => feed.feedId).join(","),
+ name: data.name,
+ view,
+ })
+ }
}
+ const unread = useUnreadStore((state) =>
+ data.list.reduce((acc, cur) => state.data[cur.feedId] + acc, 0),
+ )
+
+ const sortByUnreadFeedList = useUnreadStore((state) => data.list.sort((a, b) => (state.data[b.feedId] || 0) - (state.data[a.feedId] || 0)))
return (
{
- if (
- await client?.showConfirmDialog({
- title: `Delete category ${data.name}?`,
- message: `This operation will delete your category, but the feeds it contains will be retained and grouped by website.`,
- options: {
- buttons: ["Delete", "Cancel"],
- },
- })
- ) {
+ const result = await client?.showConfirmDialog({
+ title: `Delete category ${data.name}?`,
+ message: `This operation will delete your category, but the feeds it contains will be retained and grouped by website.`,
+ options: {
+ buttons: ["Delete", "Cancel"],
+ },
+ })
+ if (result) {
deleteMutation.mutate()
}
},
@@ -126,10 +136,10 @@ export function FeedCategory({
{data.name}
)}
- {setActiveList && {data.name}}
+ {!!setActiveList && {data.name}}
- {!!data.unread && (
-
{data.unread}
+ {!!unread && (
+
{unread}
)}
- {data.list.map((feed) => (
+ {sortByUnreadFeedList.map((feed) => (
- setActiveList?.({
+ setActiveList({
level: levels.view,
id: active,
name: views[active].name,
@@ -72,7 +72,7 @@ export function FeedColumn() {
className="flex items-center gap-1 text-xl font-bold"
onClick={(e) => {
e.stopPropagation()
- setActiveList?.({
+ setActiveList({
level: levels.view,
id: active,
name: views[active].name,
diff --git a/src/renderer/src/components/feed-column/item.tsx b/src/renderer/src/components/feed-column/item.tsx
index ba985a467..8ff4fd6f6 100644
--- a/src/renderer/src/components/feed-column/item.tsx
+++ b/src/renderer/src/components/feed-column/item.tsx
@@ -11,11 +11,15 @@ import { useToast } from "@renderer/components/ui/use-toast"
import { levels } from "@renderer/lib/constants"
import dayjs from "@renderer/lib/dayjs"
import { showNativeMenu } from "@renderer/lib/native-menu"
-import type { SubscriptionResponse } from "@renderer/lib/types"
import { cn } from "@renderer/lib/utils"
+import type { SubscriptionResponse } from "@renderer/models"
import { Queries } from "@renderer/queries"
import { apiFetch } from "@renderer/queries/api-fetch"
-import { feedActions, useFeedActiveList } from "@renderer/store"
+import {
+ feedActions,
+ useFeedActiveList,
+ useUnreadStore,
+} from "@renderer/store"
import { useMutation } from "@tanstack/react-query"
export function FeedItem({
@@ -31,8 +35,9 @@ export function FeedItem({
const { setActiveList } = feedActions
const setFeedActive = (feed: SubscriptionResponse[number]) => {
- view !== undefined &&
- setActiveList?.({
+ if (view === undefined) return
+
+ setActiveList({
level: levels.feed,
id: feed.feedId,
name: feed.feeds.title || "",
@@ -88,6 +93,7 @@ export function FeedItem({
},
})
+ const feedUnread = useUnreadStore((state) => state.data[feed.feedId] || 0)
return (
window.open(
- `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}?view=${view}`,
+ `${import.meta.env.VITE_WEB_URL}/feed/${
+ feed.feedId
+ }?view=${view}`,
"_blank",
),
},
@@ -136,8 +144,7 @@ export function FeedItem({
type: "text",
label: "Open Site in Browser",
click: () =>
- feed.feeds.siteUrl &&
- window.open(feed.feeds.siteUrl, "_blank"),
+ feed.feeds.siteUrl && window.open(feed.feeds.siteUrl, "_blank"),
},
],
e,
@@ -188,8 +195,8 @@ export function FeedItem({
)}
- {!!feed.unread && (
- {feed.unread}
+ {!!feedUnread && (
+ {feedUnread}
)}
)
diff --git a/src/renderer/src/components/feed-column/list.tsx b/src/renderer/src/components/feed-column/list.tsx
index 9a8e01901..4d5781c11 100644
--- a/src/renderer/src/components/feed-column/list.tsx
+++ b/src/renderer/src/components/feed-column/list.tsx
@@ -1,13 +1,83 @@
import { useBizQuery } from "@renderer/hooks/useBizQuery"
import { levels, views } from "@renderer/lib/constants"
+import type { FeedViewType } from "@renderer/lib/enum"
import { cn } from "@renderer/lib/utils"
+import type { FeedListModel, SubscriptionResponse } from "@renderer/models"
import { Queries } from "@renderer/queries"
-import { feedActions } from "@renderer/store"
-import { useState } from "react"
+import { feedActions, useUnreadStore } from "@renderer/store"
+import { useMemo, useState } from "react"
import { Link } from "react-router-dom"
+import { parse } from "tldts"
import { FeedCategory } from "./category"
+const useData = (view?: FeedViewType) => {
+ const subscriptions = useBizQuery(Queries.subscription.byView(view))
+
+ // TODO Refactor this into category store
+ return useMemo(() => {
+ if (!subscriptions.data) return null
+ const categories = {
+ list: {},
+ } as {
+ list: Record<
+ string,
+ {
+ list: SubscriptionResponse
+ }
+ >
+ }
+ const domains: Record
= {}
+ const data = structuredClone(subscriptions.data)
+
+ if (subscriptions) {
+ for (const subscription of data.subscriptions) {
+ if (!subscription.category && subscription.feeds.siteUrl) {
+ const { domain } = parse(subscription.feeds.siteUrl)
+ if (domain) {
+ if (!domains[domain]) {
+ domains[domain] = 0
+ }
+ domains[domain]++
+ }
+ }
+ }
+ }
+ if (subscriptions) {
+ for (const subscription of data.subscriptions) {
+ if (!subscription.category) {
+ if (subscription.feeds.siteUrl) {
+ const { domain } = parse(subscription.feeds.siteUrl)
+ if (domain && domains[domain] > 1) {
+ subscription.category =
+ domain.slice(0, 1).toUpperCase() + domain.slice(1)
+ }
+ }
+ if (!subscription.category) {
+ subscription.category = ""
+ }
+ }
+ if (!categories.list[subscription.category]) {
+ categories.list[subscription.category] = {
+ list: [],
+ }
+ }
+
+ const unread = data.unreads[subscription.feedId] || 0
+ subscription.unread = unread
+ categories.list[subscription.category].list.push(subscription)
+ }
+ }
+ const list = Object.entries(categories.list).map(([name, list]) => ({
+ name,
+ list: list.list,
+ }))
+
+ return {
+ list,
+ } as FeedListModel
+ }, [subscriptions])
+}
export function FeedList({
className,
view,
@@ -17,10 +87,29 @@ export function FeedList({
view?: number
hideTitle?: boolean
}) {
- const subscriptions = useBizQuery(Queries.subscription.byView(view))
const [expansion, setExpansion] = useState(false)
+ const data = useData(view)
+
+ const totalUnread = useUnreadStore((state) => {
+ let unread = 0
+ data?.list.forEach((a) => {
+ a.list.forEach((b) => {
+ unread += state.data[b.feedId] || 0
+ })
+ })
+ return unread
+ })
+
const { setActiveList } = feedActions
+ const sortedByUnread = useUnreadStore((state) =>
+ data?.list?.sort(
+ (a, b) =>
+ b.list.reduce((acc, cur) => (state.data[cur.feedId] || 0) + acc, 0) -
+ a.list.reduce((acc, cur) => (state.data[cur.feedId] || 0) + acc, 0),
+ ),
+ )
+
return (
{!hideTitle && (
@@ -31,52 +120,54 @@ export function FeedList({
className="font-bold"
onClick={(e) => {
e.stopPropagation()
- view !== undefined &&
- setActiveList?.({
- level: levels.view,
- id: view,
- name: views[view].name,
- view,
- })
+ if (view !== undefined) {
+ setActiveList({
+ level: levels.view,
+ id: view,
+ name: views[view].name,
+ view,
+ })
+ }
}}
>
{view !== undefined && views[view].name}
- {expansion ?
- (
- setExpansion(false)}
- />
- ) :
- (
- setExpansion(true)}
- />
- )}
- {subscriptions.data?.unread}
+ {expansion ? (
+ setExpansion(false)}
+ />
+ ) : (
+ setExpansion(true)}
+ />
+ )}
+ {totalUnread}
)}
- {subscriptions.data?.list?.length ?
- subscriptions.data?.list.map((category) => (
+ {data?.list?.length ? (
+ sortedByUnread?.map((category) => (