From 339fb773a1ddcc03ed8243a481b51f342a988a6b Mon Sep 17 00:00:00 2001 From: Zak Nesler Date: Sat, 18 May 2024 09:28:46 -0400 Subject: [PATCH] add local entries state (#24) * maintain local state of entries * rm log --- package.json | 4 +-- pnpm-lock.yaml | 34 +++++++++++++------------- ui/src/components/entry/entry-list.tsx | 34 ++++++++++++++++++++++++-- 3 files changed, 51 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index b6349068..de42bf22 100644 --- a/package.json +++ b/package.json @@ -19,8 +19,8 @@ "@solid-primitives/resize-observer": "^2.0.25", "@solid-primitives/scroll": "^2.0.23", "@solidjs/router": "^0.13.3", - "@tanstack/solid-query": "^5.36.1", - "@tanstack/solid-query-devtools": "^5.36.1", + "@tanstack/solid-query": "^5.37.1", + "@tanstack/solid-query-devtools": "^5.37.1", "class-variance-authority": "^0.7.0", "partysocket": "^1.0.1", "solid-icons": "^1.1.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b9217463..66bd8af8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -30,11 +30,11 @@ importers: specifier: ^0.13.3 version: 0.13.3(solid-js@1.8.17) '@tanstack/solid-query': - specifier: ^5.36.1 - version: 5.36.1(solid-js@1.8.17) + specifier: ^5.37.1 + version: 5.37.1(solid-js@1.8.17) '@tanstack/solid-query-devtools': - specifier: ^5.36.1 - version: 5.36.1(@tanstack/solid-query@5.36.1(solid-js@1.8.17))(solid-js@1.8.17) + specifier: ^5.37.1 + version: 5.37.1(@tanstack/solid-query@5.37.1(solid-js@1.8.17))(solid-js@1.8.17) class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -699,17 +699,17 @@ packages: '@tanstack/query-core@5.36.1': resolution: {integrity: sha1-rkb5NcR1KBKlbGgVMFBho9qC57g=} - '@tanstack/query-devtools@5.32.1': - resolution: {integrity: sha1-LAPy++kWK2UOaXxGnIYYx6BdWT8=} + '@tanstack/query-devtools@5.37.1': + resolution: {integrity: sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg==} - '@tanstack/solid-query-devtools@5.36.1': - resolution: {integrity: sha1-HNq/4pzssaaUAE2yptPWlz2uw0g=} + '@tanstack/solid-query-devtools@5.37.1': + resolution: {integrity: sha512-3qe/hjFp3Liu+fcNZnse0Zunnf/pUBPPYfSuSkL7pXzDHBnuWwLian/W4mwdlxdWjIxAvxdwIEPVtknvdYdB5A==} peerDependencies: - '@tanstack/solid-query': ^5.36.1 - solid-js: ^1.8.14 + '@tanstack/solid-query': ^5.37.1 + solid-js: ^1.6.0 - '@tanstack/solid-query@5.36.1': - resolution: {integrity: sha1-Ja9PqxfuaagsLubRHSCp59uoeg0=} + '@tanstack/solid-query@5.37.1': + resolution: {integrity: sha512-XLIwvIFaFNhSl+ldeT+CxHYBjLnXcevzQmnjae/6KD8qX8CfEuSCnYxmDDtfW+diDtavi7G9ZROMwoc/IyAlEQ==} peerDependencies: solid-js: ^1.6.0 @@ -2472,15 +2472,15 @@ snapshots: '@tanstack/query-core@5.36.1': {} - '@tanstack/query-devtools@5.32.1': {} + '@tanstack/query-devtools@5.37.1': {} - '@tanstack/solid-query-devtools@5.36.1(@tanstack/solid-query@5.36.1(solid-js@1.8.17))(solid-js@1.8.17)': + '@tanstack/solid-query-devtools@5.37.1(@tanstack/solid-query@5.37.1(solid-js@1.8.17))(solid-js@1.8.17)': dependencies: - '@tanstack/query-devtools': 5.32.1 - '@tanstack/solid-query': 5.36.1(solid-js@1.8.17) + '@tanstack/query-devtools': 5.37.1 + '@tanstack/solid-query': 5.37.1(solid-js@1.8.17) solid-js: 1.8.17 - '@tanstack/solid-query@5.36.1(solid-js@1.8.17)': + '@tanstack/solid-query@5.37.1(solid-js@1.8.17)': dependencies: '@tanstack/query-core': 5.36.1 solid-js: 1.8.17 diff --git a/ui/src/components/entry/entry-list.tsx b/ui/src/components/entry/entry-list.tsx index 1c94ad39..2d4014dc 100644 --- a/ui/src/components/entry/entry-list.tsx +++ b/ui/src/components/entry/entry-list.tsx @@ -5,18 +5,27 @@ import { type NullableBounds, createElementBounds } from '@solid-primitives/boun import { EntryItem } from './entry-item'; import { useFeeds } from '~/hooks/queries/use-feeds'; import { Empty } from '../ui/empty'; +import { useFilterParams } from '~/hooks/use-filter-params'; type EntryListProps = { containerBounds?: Readonly; }; export const EntryList: Component = props => { + const filter = useFilterParams(); + const [bottomOfList, setBottomOfList] = createSignal(); const listBounds = createElementBounds(bottomOfList); const { feeds } = useFeeds(); const entries = useInfiniteEntries(); + // Maintain local state of entries to prevent entries just marked as read from being removed + const [localEntries, setLocalEntries] = createSignal(entries.getAllEntries()); + + // Associate the local entries with the feed we're viewing, so we know when to reset the data + const [localFeedKey, setLocalFeedKey] = createSignal(filter.getFeedUrl()); + createEffect(() => { const bottomOfListVisible = props.containerBounds?.bottom && listBounds.bottom && listBounds.bottom <= props.containerBounds?.bottom; @@ -25,6 +34,27 @@ export const EntryList: Component = props => { entries.query.fetchNextPage(); }); + createEffect(() => { + const currentUuids = localEntries().map(entry => entry.uuid); + const newEntries = entries.getAllEntries().filter(entry => !currentUuids.includes(entry.uuid)); + + // Don't bother updating local state if we've got nothing to add + if (!newEntries.length) return; + + setLocalEntries([...localEntries(), ...newEntries]); + }); + + createEffect(() => { + const feedKey = filter.getFeedUrl(); + + // Only reset the local cache if we look at a new feed + if (localFeedKey() === feedKey) return; + + // Reset the local cache + setLocalFeedKey(feedKey); + setLocalEntries(entries.getAllEntries()); + }); + // useListNav(() => ({ // entries: entries.data || [], // current_entry_uuid: props.current_entry_uuid, @@ -46,9 +76,9 @@ export const EntryList: Component = props => { - {entries.getAllEntries().length ? ( + {localEntries().length ? (
- {entry => } + {entry => }