External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(home): preserve popular threads during navigation

Browse Source
This commit is contained in:
Tommaso Casaburi
2026-04-19 14:24:35 +07:00
parent f2ab25bd08
commit 508fffe5d6
2 changed files with 69 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/hooks/__tests__/use-popular-posts.test.tsx
+33 -3
View File
@@ -2,7 +2,7 @@ import * as React from 'react';
import { createElement } from 'react';
import { createRoot, type Root } from 'react-dom/client';
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
import usePopularPosts from '../use-popular-posts';
import usePopularPosts, { clearPopularPostsCacheForTest } from '../use-popular-posts';
(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
const act = (React as { act?: (cb: () => void | Promise<void>) => void | Promise<void> }).act as (cb: () => void | Promise<void>) => void | Promise<void>;
@@ -90,6 +90,7 @@ describe('usePopularPosts', () => {
testState.currentTime = 1_704_067_200;
testState.loadingTimestamps = [];
testState.requestedAddresses = undefined;
clearPopularPostsCacheForTest();
latestValue = {
error: null,
@@ -185,7 +186,7 @@ describe('usePopularPosts', () => {
expect(latestValue.popularPosts).toEqual([]);
});
it('reshuffles the selected boards on each mount while keeping one top thread per board', async () => {
it('keeps selected boards across remounts while the page module stays loaded', async () => {
const addresses = Array.from({ length: 10 }, (_, index) => `board-${index}.eth`);
const communities = addresses.map((address, index) => createCommunity(address, [createPost(address, 'top', 30 - index), createPost(address, 'backup', 10 - index)]));
const keepOrderRandom = mockRandomSequence(Array.from({ length: addresses.length - 1 }, () => 0.999_999));
@@ -203,8 +204,37 @@ describe('usePopularPosts', () => {
await renderHook(addresses, communities);
expect(latestValue.isLoading).toBe(false);
expect(latestValue.popularPosts.map((post) => post.communityAddress)).toEqual(addresses.slice(1, 9));
expect(latestValue.popularPosts.map((post) => post.communityAddress)).toEqual(addresses.slice(0, 8));
expect(latestValue.popularPosts.every((post) => post.cid.endsWith('-top'))).toBe(true);
expect(rotateOrderRandom).not.toHaveBeenCalled();
rotateOrderRandom.mockRestore();
});
it('recalculates popular posts after the page cache is cleared like a browser reload', async () => {
const addresses = Array.from({ length: 10 }, (_, index) => `board-${index}.eth`);
const initialCommunities = addresses.map((address, index) =>
createCommunity(address, [createPost(address, 'top', 30 - index), createPost(address, 'backup', 10 - index)]),
);
const keepOrderRandom = mockRandomSequence(Array.from({ length: addresses.length - 1 }, () => 0.999_999));
await renderHook(addresses, initialCommunities);
expect(latestValue.isLoading).toBe(false);
expect(latestValue.popularPosts.map((post) => post.communityAddress)).toEqual(addresses.slice(0, 8));
expect(latestValue.popularPosts.every((post) => post.cid.endsWith('-top'))).toBe(true);
keepOrderRandom.mockRestore();
clearPopularPostsCacheForTest();
resetHookRoot();
const refreshedCommunities = addresses.map((address, index) => createCommunity(address, [createPost(address, 'top', 1), createPost(address, 'reload', 100 - index)]));
const rotateOrderRandom = mockRandomSequence(Array.from({ length: addresses.length - 1 }, () => 0));
await renderHook(addresses, refreshedCommunities);
expect(latestValue.isLoading).toBe(false);
expect(latestValue.popularPosts.map((post) => post.communityAddress)).toEqual(addresses.slice(1, 9));
expect(latestValue.popularPosts.map((post) => post.cid)).toEqual(addresses.slice(1, 9).map((address) => `${address}-reload`));
rotateOrderRandom.mockRestore();
});
src/hooks/use-popular-posts.ts
+36 -28
View File
@@ -1,4 +1,4 @@
import { useMemo, useRef } from 'react';
import { useMemo } from 'react';
import { Comment, type Community } from '@bitsocialnet/bitsocial-react-hooks';
import { getCommentMediaInfo, getHasThumbnail } from '../lib/utils/media-utils';
import useCommunitiesLoadingStartTimestamps from '../stores/use-communities-loading-start-timestamps-store';
@@ -15,11 +15,14 @@ type PopularPostCandidate = {
post: Comment;
};
type CommittedPopularPosts = {
type PopularPostsCacheEntry = {
randomizedBoardAddresses: string[];
posts: Comment[];
revealed: boolean;
};
const popularPostsCacheByInputKey = new Map<string, PopularPostsCacheEntry>();
/**
* Time-decayed popularity: replyCount divided by age of latest
* activity so a stale post with many old replies loses to a newer
@@ -55,38 +58,43 @@ function shuffleBoardAddresses(boardAddresses: string[]): string[] {
return shuffledBoardAddresses;
}
function getPopularPostsCacheEntry(inputKey: string, communityAddresses: string[]): PopularPostsCacheEntry {
const cachedEntry = popularPostsCacheByInputKey.get(inputKey);
if (cachedEntry) {
return cachedEntry;
}
const cacheEntry = {
randomizedBoardAddresses: shuffleBoardAddresses(communityAddresses),
posts: [],
revealed: false,
};
popularPostsCacheByInputKey.set(inputKey, cacheEntry);
return cacheEntry;
}
export function clearPopularPostsCacheForTest() {
popularPostsCacheByInputKey.clear();
}
/**
* Each board contributes at most one time-decayed popular thread, but the
* board order is shuffled on mount so repeat visits surface different boards.
* board order is shuffled once per page load so repeat navigation keeps the
* same threads until a real browser refresh creates a fresh module instance.
*
* The first revealed set is frozen until the user refreshes or changes
* the board filter, so threads never disappear during background loads.
*/
const usePopularPosts = (communities: Array<Community | undefined>, communityAddresses: string[]) => {
const inputKey = [...communityAddresses].sort().join(',');
const committedRef = useRef<CommittedPopularPosts>({
posts: [],
revealed: false,
});
const prevInputKeyRef = useRef('');
const randomizedBoardAddressesRef = useRef<string[]>([]);
const cacheEntry = getPopularPostsCacheEntry(inputKey, communityAddresses);
// Reset committed and reshuffle when the requested board set changes (e.g. NSFW filter toggle).
if (prevInputKeyRef.current !== inputKey) {
prevInputKeyRef.current = inputKey;
randomizedBoardAddressesRef.current = shuffleBoardAddresses(communityAddresses);
committedRef.current = {
posts: [],
revealed: false,
};
}
const currentTime = useCurrentTime(committedRef.current.revealed ? 300 : 5);
const currentTime = useCurrentTime(cacheEntry.revealed ? 300 : 5);
const nowSeconds = Math.floor(currentTime);
const loadingStartTimestamps = useCommunitiesLoadingStartTimestamps(communityAddresses);
const candidates = useMemo<PopularPostCandidate[]>(() => {
if (committedRef.current.revealed || committedRef.current.posts.length >= MAX_POSTS) {
if (cacheEntry.revealed || cacheEntry.posts.length >= MAX_POSTS) {
return [];
}
@@ -95,7 +103,7 @@ const usePopularPosts = (communities: Array<Community | undefined>, communityAdd
const allPosts: PopularPostCandidate[] = [];
const communitiesByAddress = new Map(communityAddresses.map((boardAddress, index) => [boardAddress, communities[index]]));
randomizedBoardAddressesRef.current.forEach((boardAddress) => {
cacheEntry.randomizedBoardAddresses.forEach((boardAddress) => {
const community = communitiesByAddress.get(boardAddress);
if (!boardAddress || !community?.posts?.pages?.hot?.comments) {
return;
@@ -131,18 +139,18 @@ const usePopularPosts = (communities: Array<Community | undefined>, communityAdd
console.error('Error in usePopularPosts:', err);
return [];
}
}, [nowSeconds, communities, communityAddresses]);
}, [nowSeconds, communities, communityAddresses, cacheEntry]);
const hasPendingBoards = communityAddresses.some((_, index) => isBoardStillLoading(communities[index], loadingStartTimestamps[index], nowSeconds));
if (!committedRef.current.revealed && (candidates.length >= MAX_POSTS || (!hasPendingBoards && candidates.length > 0))) {
committedRef.current.posts = candidates.slice(0, MAX_POSTS).map(({ post }) => post);
committedRef.current.revealed = true;
if (!cacheEntry.revealed && (candidates.length >= MAX_POSTS || (!hasPendingBoards && candidates.length > 0))) {
cacheEntry.posts = candidates.slice(0, MAX_POSTS).map(({ post }) => post);
cacheEntry.revealed = true;
}
const isLoading = !committedRef.current.revealed;
const isLoading = !cacheEntry.revealed;
return { popularPosts: committedRef.current.revealed ? committedRef.current.posts : [], isLoading, error: null as string | null };
return { popularPosts: cacheEntry.revealed ? cacheEntry.posts : [], isLoading, error: null as string | null };
};
export default usePopularPosts;