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

perf(catalog): optimize filtered feed

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-09-08 14:47:52 +02:00
parent c1910c9788
commit 6e472b2b17
1 changed files with 30 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/catalog/catalog.tsx
+30 -38
View File
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useRef } from 'react';
import { useEffect, useMemo, useRef, useCallback } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment, useAccount, useFeed, useSubplebbit, useBlock } from '@plebbit/plebbit-react-hooks';
@@ -21,25 +21,6 @@ import styles from './catalog.module.css';
const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
const threadsWithImagesFilter = (comment: Comment) => {
const commentMediaInfo = getCommentMediaInfo(comment);
const hasThumbnail = getHasThumbnail(commentMediaInfo, comment?.link);
return hasThumbnail;
};
const textFilter = (comment: Comment, filterItems: any[]) => {
if (!filterItems) return true;
if (filterItems.length === 0) return true;
const titleLower = comment?.title?.toLowerCase() || '';
const contentLower = comment?.content?.toLowerCase() || '';
return filterItems.every((item) => {
if (!item.enabled) return true;
const pattern = item.text.toLowerCase();
return !(titleLower.includes(pattern) || contentLower.includes(pattern));
});
};
const Catalog = () => {
const { t } = useTranslation();
const location = useLocation();
@@ -47,7 +28,7 @@ const Catalog = () => {
const isInAllView = isAllView(location.pathname, useParams());
const defaultSubplebbits = useDefaultSubplebbits();
const { showAdultBoards, showGoreBoards, showTextOnlyThreads, filterItems } = useCatalogFiltersStore();
const { showAdultBoards, showGoreBoards } = useCatalogFiltersStore();
const account = useAccount();
const subscriptions = account?.subscriptions;
@@ -76,31 +57,42 @@ const Catalog = () => {
return [subplebbitAddress];
}, [isInAllView, isInSubscriptionsView, subplebbitAddress, defaultSubplebbits, subscriptions, showAdultBoards, showGoreBoards]);
const { showTextOnlyThreads, filterItems } = useCatalogFiltersStore();
const filter = useCallback(
(comment: Comment) => {
if (!showTextOnlyThreads && !getHasThumbnail(getCommentMediaInfo(comment), comment?.link)) {
return false;
}
const title = comment?.title?.toLowerCase() || '';
const content = comment?.content?.toLowerCase() || '';
return !filterItems
.filter((item) => item.enabled)
.some((item) => {
const text = item.text.toLowerCase();
return title.includes(text) || content.includes(text);
});
},
[filterItems, showTextOnlyThreads],
);
const { imageSize } = useCatalogStyleStore();
const columnWidth = imageSize === 'Large' ? 270 : 180;
const columnCount = Math.floor(useWindowWidth() / columnWidth);
// postPerPage based on columnCount for optimized feed, dont change value after first render
// eslint-disable-next-line
const postsPerPage = useMemo(() => (columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25), []);
const postsPerPage = columnCount <= 2 ? 10 : columnCount === 3 ? 15 : columnCount === 4 ? 20 : 25;
const { timeFilterSeconds } = useTimeFilter();
const { sortType } = useSortingStore();
const feedOptions: any = useMemo(
() => ({
subplebbitAddresses,
sortType,
postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
filter: (comment: Comment) => {
if (!showTextOnlyThreads && !threadsWithImagesFilter(comment)) {
return false;
}
return textFilter(comment, filterItems);
},
}),
[subplebbitAddresses, sortType, isInAllView, isInSubscriptionsView, postsPerPage, showTextOnlyThreads, filterItems],
);
const feedOptions: any = {
subplebbitAddresses,
sortType,
postsPerPage: isInAllView || isInSubscriptionsView ? 10 : postsPerPage,
filter,
};
if (isInAllView || isInSubscriptionsView) {
feedOptions.newerThan = timeFilterSeconds;