Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: subscription store and unread store, unread calcaulation logic #36

Merged
merged 5 commits into from
Jun 4, 2024
Merged

feat: subscription store and unread store, unread calcaulation logic #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9b4adc1
feat: persist
Innei Jun 4, 2024
42a8cc0
refactor: store
Innei Jun 4, 2024
78f73c1
feat: unread logic
Innei Jun 4, 2024
c0b4c52
chore: comment deprecated code
Innei Jun 4, 2024
14a4fba
chore: cleanup
Innei Jun 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export default defineConfig(
"no-console": "warn",
"unicorn/consistent-function-scoping": "warn",
"unicorn/prefer-module": "off",
"@typescript-eslint/no-floating-promises": "off",
},
},
{
Expand Down
1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@
"electron-updater": "^6.1.7",
"framer-motion": "11.2.9",
"hast-util-to-jsx-runtime": "2.3.0",
"idb-keyval": "6.2.1",
"immer": "10.1.1",
"jotai": "2.8.2",
"jotai-dark": "0.3.1",
Expand Down
8 changes: 8 additions & 0 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion src/renderer/src/components/discover/form.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
} from "@renderer/components/ui/form"
import { Image } from "@renderer/components/ui/image"
import { Input } from "@renderer/components/ui/input"
import type { DiscoverResponse } from "@renderer/lib/types"
import type { DiscoverResponse } from "@renderer/models"
import { apiFetch } from "@renderer/queries/api-fetch"
import { DEEPLINK_SCHEME } from "@shared/constants"
import { openElectronWindow } from "@shared/electron"
Expand Down Expand Up @@ -90,7 +90,7 @@
form.setValue("keyword", keyword.slice(prefix.length))
}
}
}, [keyword])

Check warning on line 93 in src/renderer/src/components/discover/form.tsx

View workflow job for this annotation

GitHub Actions / Lint and Typecheck (18.x) 

React Hook useEffect has missing dependencies: 'form' and 'prefix'. Either include them or remove the dependency array

return (
<>
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/discover/import.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
FormMessage,
} from "@renderer/components/ui/form"
import { Input } from "@renderer/components/ui/input"
import type { FeedResponse } from "@renderer/lib/types"
import { cn } from "@renderer/lib/utils"
import type { FeedResponse } from "@renderer/models"
import { Queries } from "@renderer/queries"
import { apiFetch } from "@renderer/queries/api-fetch"
import { useMutation } from "@tanstack/react-query"
Expand Down
47 changes: 22 additions & 25 deletions src/renderer/src/components/entry-column/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ import {
import { views } from "@renderer/lib/constants"
import { FeedViewType } from "@renderer/lib/enum"
import { buildStorageNS } from "@renderer/lib/ns"
import type { EntryModel } from "@renderer/lib/types"
import { cn, getEntriesParams } from "@renderer/lib/utils"
import type { EntryModel } from "@renderer/models"
import { apiClient } from "@renderer/queries/api-fetch"
import { useEntries } from "@renderer/queries/entries"
import { feedActions, useFeedStore } from "@renderer/store"
Expand Down Expand Up @@ -83,23 +83,24 @@ export function EntryColumn() {

if (!idSlice) return

const batchLikeIds = [] as string[]
const batchLikeIds = [] as [string, string][]
const entriesId2Map = entryActions.getFlattenMapEntries()
for (const id of idSlice) {
const entry = entriesId2Map[id]

if (!entry) continue
const isRead = entry.read
if (!isRead) {
batchLikeIds.push(id)
batchLikeIds.push([entry.feeds.id, id])
}
}

if (batchLikeIds.length > 0) {
await apiClient.reads.$post({ json: { entryIds: batchLikeIds } })
const entryIds = batchLikeIds.map(([, id]) => id)
await apiClient.reads.$post({ json: { entryIds } })

for (const id of batchLikeIds) {
entryActions.optimisticUpdate(id, { read: true })
for (const [feedId, id] of batchLikeIds) {
entryActions.markRead(feedId, id, true)
}
}
},
Expand Down Expand Up @@ -142,16 +143,14 @@ export function EntryColumn() {
onClick={() => setActiveEntry?.(null)}
>
<ListHeader />
{activeList?.view && views[activeList.view].gridMode ?
(
<VirtuosoGrid
listClassName="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 px-4"
{...virtuosoOptions}
/>
) :
(
<Virtuoso {...virtuosoOptions} />
)}
{activeList?.view && views[activeList.view].gridMode ? (
<VirtuosoGrid
listClassName="grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-4 px-4"
{...virtuosoOptions}
/>
) : (
<Virtuoso {...virtuosoOptions} />
)}
</div>
)
}
Expand Down Expand Up @@ -192,9 +191,9 @@ const ListHeader: FC = () => {
return (
<div className="mb-5 flex w-full items-center justify-between pl-9 pr-2">
<div className="mt-4">
<div className="text-lg font-bold">{activeList?.name}</div>
<div className="text-lg font-bold leading-none">{activeList?.name}</div>
<div className="text-xs font-medium text-zinc-400">
{entries.data?.pages?.[0].total}
{entries.data?.pages?.[0].total || 0}
{" "}
{unreadOnly ? "Unread" : ""}
{" "}
Expand All @@ -216,13 +215,11 @@ const ListHeader: FC = () => {
onClick={() => setUnreadOnly(!unreadOnly)}
active={unreadOnly}
>
{unreadOnly ?
(
<i className="i-mingcute-round-fill" />
) :
(
<i className="i-mingcute-round-line" />
)}
{unreadOnly ? (
<i className="i-mingcute-round-fill" />
) : (
<i className="i-mingcute-round-line" />
)}
</HeaderActionButton>
<Popover open={markPopoverOpen} onOpenChange={setMarkPopoverOpen}>
<PopoverTrigger>
Expand Down
4 changes: 1 addition & 3 deletions src/renderer/src/components/entry-column/item-wrapper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
})
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/src/components/entry-column/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { EntryModel, FeedModel } from "@renderer/lib/types"
import type { EntryModel, FeedModel } from "@renderer/models"

export type UniversalItemProps = {
entryId: string
Expand Down
6 changes: 4 additions & 2 deletions src/renderer/src/components/entry-content/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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<JSX.Element>()
Expand Down
56 changes: 33 additions & 23 deletions src/renderer/src/components/feed-column/category.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,14 @@
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"
Expand All @@ -25,7 +29,7 @@
view,
expansion,
}: {
data: SubscriptionsResponse["list"][number]
data: FeedListModel["list"][number]
view?: number
expansion: boolean
}) {
Expand Down Expand Up @@ -53,18 +57,24 @@
if (data.name) {
setOpen(expansion)
}
}, [expansion])

Check warning on line 60 in src/renderer/src/components/feed-column/category.tsx

View workflow job for this annotation

GitHub Actions / Lint and Typecheck (18.x) 

React Hook useEffect has a missing dependency: 'data.name'. Either include it or remove the dependency array

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 (
<Collapsible
open={open}
Expand Down Expand Up @@ -95,16 +105,16 @@
{
type: "text",
label: "Delete Category",

click: async () => {
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()
}
},
Expand All @@ -126,10 +136,10 @@
<span className="truncate">{data.name}</span>
)}
</CollapsibleTrigger>
{setActiveList && <span className="truncate">{data.name}</span>}
{!!setActiveList && <span className="truncate">{data.name}</span>}
</div>
{!!data.unread && (
<div className="ml-2 text-xs text-zinc-500">{data.unread}</div>
{!!unread && (
<div className="ml-2 text-xs text-zinc-500">{unread}</div>
)}
<CategoryRenameDialog
feedIdList={feedIdList}
Expand Down Expand Up @@ -157,7 +167,7 @@
opacity: 0.01,
}}
>
{data.list.map((feed) => (
{sortByUnreadFeedList.map((feed) => (
<FeedItem
key={feed.feedId}
feed={feed}
Expand Down
4 changes: 2 additions & 2 deletions src/renderer/src/components/feed-column/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export function FeedColumn() {
<div
className="flex h-full flex-col gap-3"
onClick={() =>
setActiveList?.({
setActiveList({
level: levels.view,
id: active,
name: views[active].name,
Expand All @@ -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,
Expand Down
25 changes: 16 additions & 9 deletions src/renderer/src/components/feed-column/item.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 || "",
Expand Down Expand Up @@ -88,6 +93,7 @@ export function FeedItem({
},
})

const feedUnread = useUnreadStore((state) => state.data[feed.feedId] || 0)
return (
<div
className={cn(
Expand Down Expand Up @@ -128,16 +134,17 @@ export function FeedItem({
label: "Open Feed in Browser",
click: () =>
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",
),
},
{
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,
Expand Down Expand Up @@ -188,8 +195,8 @@ export function FeedItem({
</TooltipProvider>
)}
</div>
{!!feed.unread && (
<div className="ml-2 text-xs text-zinc-500">{feed.unread}</div>
{!!feedUnread && (
<div className="ml-2 text-xs text-zinc-500">{feedUnread}</div>
)}
</div>
)
Expand Down
Loading
Loading