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

track feeds cache states for skeleton

Browse Source
This commit is contained in:
plebeius.eth
2023-07-14 20:57:47 +02:00
parent e08c7a6b13
commit a7035ae78c
4 changed files with 51 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/views/All.jsx
+15 -7
View File
@@ -48,6 +48,8 @@ const All = () => {
const {
defaultSubplebbits,
editedComment,
feedCacheStates,
setFeedCacheState,
isSettingsOpen, setIsSettingsOpen,
setModeratingCommentCid,
selectedAddress,
@@ -108,20 +110,26 @@ const All = () => {
const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
const setSelectedThreadCid = (cid) => {
selectedThreadCidRef.current = cid;
}
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
const isFeedCached = feedCacheStates['all'];
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
const addresses = defaultSubplebbits.map(subplebbit => subplebbit.address);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
const { feed, loadMore } = useFeed({subplebbitAddresses: addresses, sortType: 'active'});
const {subplebbits} = useSubplebbits({subplebbitAddresses: addresses, sortType: 'active'});
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const stateString = useFeedStateString(subplebbits);
useEffect(() => {
if (feed.length) {
setFeedCacheState('all', true);
}
}, [feed.length, setFeedCacheState]);
const handleThumbnailClick = (index, isMobile=false) => {
if (isMobile) {
setIsMobileThumbnailClicked(prevState => ({
@@ -489,7 +497,7 @@ const All = () => {
useEffect(() => {
const setLastVirtuosoState = () => {
virtuosoRef.current?.getState((snapshot) => {
if (snapshot?.ranges?.length) {
if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
lastVirtuosoStates['all'] = snapshot;
}
});
@@ -2225,8 +2233,8 @@ const All = () => {
initialScrollTop={lastVirtuosoState?.scrollTop}
endReached={tryLoadMore}
useWindowScroll={true}
components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
/>
components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
/>
) : (
<PostLoader />
)}
src/components/views/Board.jsx
+15 -4
View File
@@ -52,6 +52,8 @@ const Board = () => {
setChallengesArray,
defaultSubplebbits,
editedComment,
feedCacheStates,
setFeedCacheState,
setIsAuthorDelete,
setIsAuthorEdit,
setIsCaptchaOpen,
@@ -106,7 +108,7 @@ const Board = () => {
const selectedThreadCidRef = useRef(null);
const virtuosoRef = useRef();
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const { feed, loadMore } = useFeed({subplebbitAddresses: [`${selectedAddress}`], sortType: 'active'});
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
const { subscribed, subscribe, unsubscribe } = useSubscribe({subplebbitAddress: selectedAddress});
const stateString = useStateString(subplebbit);
@@ -134,11 +136,19 @@ const Board = () => {
const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid;}
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
const isFeedCached = feedCacheStates[selectedAddress];
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
useEffect(() => {
if (feed.length) {
setFeedCacheState(selectedAddress, true);
}
}, [selectedAddress, setFeedCacheState, feed.length]);
useEffect(() => {
if (subplebbit.roles !== undefined) {
const role = subplebbit.roles[account?.author.address]?.role;
@@ -653,7 +663,7 @@ const Board = () => {
useEffect(() => {
const setLastVirtuosoState = () => {
virtuosoRef.current?.getState((snapshot) => {
if (snapshot?.ranges?.length) {
if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
lastVirtuosoStates[selectedAddress] = snapshot;
}
});
@@ -662,6 +672,7 @@ const Board = () => {
return () => window.removeEventListener('scroll', setLastVirtuosoState);
}, [selectedAddress]);
const lastVirtuosoState = lastVirtuosoStates[selectedAddress];
@@ -2846,7 +2857,7 @@ const Board = () => {
initialScrollTop={lastVirtuosoState?.scrollTop}
endReached={tryLoadMore}
useWindowScroll={true}
components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
/>
</>
) : (<PostLoader />)
src/components/views/Subscriptions.jsx
+13 -6
View File
@@ -48,6 +48,8 @@ const Subscriptions = () => {
const {
defaultSubplebbits,
editedComment,
feedCacheStates,
setFeedCacheState,
isSettingsOpen, setIsSettingsOpen,
setModeratingCommentCid,
selectedAddress,
@@ -108,19 +110,24 @@ const Subscriptions = () => {
const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
const setSelectedThreadCid = (cid) => {
selectedThreadCidRef.current = cid;
}
const setSelectedThreadCid = (cid) => { selectedThreadCidRef.current = cid };
const isFeedCached = feedCacheStates['subscriptions'];
useAnonModeRef(selectedThreadCidRef, anonymousMode && executeAnonMode);
const { feed, hasMore, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
const { feed, loadMore } = useFeed({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
const [selectedFeed, setSelectedFeed] = useState(feed.sort((a, b) => b.timestamp - a.timestamp));
const {subplebbits} = useSubplebbits({subplebbitAddresses: account?.subscriptions, sortType: 'active'});
const stateString = useFeedStateString(subplebbits);
useEffect(() => {
if (feed.length) {
setFeedCacheState('subscriptions', true);
}
}, [feed.length, setFeedCacheState]);
const handleThumbnailClick = (index, isMobile=false) => {
if (isMobile) {
setIsMobileThumbnailClicked(prevState => ({
@@ -492,7 +499,7 @@ const Subscriptions = () => {
useEffect(() => {
const setLastVirtuosoState = () => {
virtuosoRef.current?.getState((snapshot) => {
if (snapshot?.ranges?.length) {
if (snapshot?.scrollTop === 0 || snapshot?.ranges?.length) {
lastVirtuosoStates['subscriptions'] = snapshot;
}
});
@@ -2236,7 +2243,7 @@ const Subscriptions = () => {
initialScrollTop={lastVirtuosoState?.scrollTop}
endReached={tryLoadMore}
useWindowScroll={true}
components={{ Footer: hasMore && feed.length > 0 ? () => <PostLoader /> : null }}
components={{Footer: () => {return isFeedCached ? null : <PostLoader />}}}
/>
)}
</div>
src/hooks/stores/useGeneralStore.js
+8
View File
@@ -23,6 +23,14 @@ const useGeneralStore = create((set) => ({
editedComment: '',
setEditedComment: (comment) => set({ editedComment: comment }),
feedCacheStates: {},
setFeedCacheState: (address, isCached) => set((prev) => ({
feedCacheStates: {
...prev.feedCacheStates,
[address]: isCached,
}
})),
isAuthorDelete: false,
setIsAuthorDelete: (isAuthorDelete) => set({ isAuthorDelete }),