update fetch threads

Author: phong9xNcc

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/ThreadList.tsx

@@ -1,36 +1,57 @@
 import { useOnScreen } from '@mezon/core';
 import { ThreadsEntity } from '@mezon/store';
-import { MutableRefObject, useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import GroupThreads from './GroupThreads';
 import { getActiveThreads, getJoinedThreadsWithinLast30Days, getThreadsOlderThan30Days } from './hepler';
 
 type ThreadListProps = {
-	hasMore: boolean;
 	isLoading: boolean;
 	loadMore: () => void | undefined | null;
 	threads: ThreadsEntity[];
-	preventClosePannel: MutableRefObject<boolean>;
+	preventClosePannel: React.MutableRefObject<boolean>;
 };
 
-export default function ThreadList({ hasMore, isLoading, loadMore, threads, preventClosePannel }: ThreadListProps) {
+export default function ThreadList({ isLoading, threads, loadMore, preventClosePannel }: ThreadListProps) {
+	const ulRef = useRef<HTMLUListElement | null>(null);
 	const activeThreads = getActiveThreads(threads);
 	const joinedThreads = getJoinedThreadsWithinLast30Days(threads);
 	const oldThreads = getThreadsOlderThan30Days(threads);
 
-	const { measureRef, isIntersecting, observer } = useOnScreen();
+	const { measureRef, isIntersecting, observer } = useOnScreen({ root: ulRef.current });
+
+	const lastThread = threads[threads.length - 1];
+
+	const isLastInActive = activeThreads.includes(lastThread);
+	const isLastInJoined = joinedThreads.includes(lastThread);
+	const isLastInOld = oldThreads.includes(lastThread);
 
 	useEffect(() => {
-		if (isIntersecting && hasMore) {
+		if (isIntersecting) {
 			loadMore();
 			observer?.disconnect();
 		}
-	}, [isIntersecting, hasMore, loadMore]);
+	}, [isIntersecting, loadMore]);
 
 	return (
-		<ul className="pb-4 pr-4 pl-4">
-			<GroupThreads preventClosePannel={preventClosePannel} title="Active Threads" threads={activeThreads} />
-			<GroupThreads preventClosePannel={preventClosePannel} title="Joined Threads (Last 30 Days)" threads={joinedThreads} />
-			<GroupThreads preventClosePannel={preventClosePannel} title="Older Threads" threads={oldThreads} measureRef={measureRef} />
+		<ul ref={ulRef} className="pb-4 pr-4 pl-4  overflow-y-auto h-[500px]">
+			<GroupThreads
+				preventClosePannel={preventClosePannel}
+				title="Active Threads"
+				threads={activeThreads}
+				measureRef={isLastInActive ? measureRef : undefined}
+			/>
+			<GroupThreads
+				preventClosePannel={preventClosePannel}
+				title="Joined Threads (Last 30 Days)"
+				threads={joinedThreads}
+				measureRef={isLastInJoined ? measureRef : undefined}
+			/>
+			<GroupThreads
+				preventClosePannel={preventClosePannel}
+				title="Older Threads"
+				threads={oldThreads}
+				measureRef={isLastInOld ? measureRef : undefined}
+			/>
 			{isLoading && <li>Loading...</li>}
 		</ul>
 	);

libs/components/src/lib/components/ChannelTopbar/TopBarComponents/Threads/ThreadModal/index.tsx

@@ -84,34 +84,40 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => {
 	const [page, setPage] = useState(1);
 	const [hasMore, setHasMore] = useState(false);
 	const [isLoading, setIsLoading] = useState(false);
-
-	const fetchThreads = async () => {
+	const fetchThreads = async (pageNumber: number) => {
 		setIsLoading(true);
 		try {
 			const body = {
 				channelId: currentChannelId,
 				clanId: currentClanId ?? '',
-				page: page,
+				page: pageNumber,
 				noCache: true
 			};
 
 			const res = await dispatch(threadsActions.fetchThreads(body));
 			const newThreads = Array.isArray(res?.payload) ? res.payload : [];
-			const endResult = newThreads.length < LIMIT;
-			setHasMore(!endResult);
+			const isLastPage = newThreads.length < LIMIT;
+			setHasMore(!isLastPage);
 		} catch (error) {
 			console.error('Error fetching threads:', error);
 		}
 		setIsLoading(false);
 	};
+
 	useEffect(() => {
-		fetchThreads();
-	}, [page, currentChannelId]);
+		fetchThreads(1);
+	}, []);
 
 	const loadMore = useCallback(() => {
-		setPage((page) => page + 1);
-		setIsLoading(true);
-	}, []);
+		if (hasMore) {
+			setPage((prevPage) => {
+				const nextPage = prevPage + 1;
+				fetchThreads(nextPage);
+				return nextPage;
+			});
+		}
+	}, [hasMore]);
+
 	return (
 		<div
 			ref={modalRef}
@@ -146,14 +152,8 @@ const ThreadModal = ({ onClose, rootRef }: ThreadsProps) => {
 					</ul>
 				)}
 				{showThreadList && (
-					<div className="h-[500px] overflow-y-auto">
-						<ThreadList
-							preventClosePannel={preventClosePannel}
-							hasMore={hasMore}
-							isLoading={isLoading}
-							loadMore={loadMore}
-							threads={threadFetched}
-						/>
+					<div className="h-[500px] ">
+						<ThreadList preventClosePannel={preventClosePannel} isLoading={isLoading} loadMore={loadMore} threads={threadFetched} />
 					</div>
 				)}
 				{showEmpty && <EmptyThread onClick={handleCreateThread} />}

libs/core/src/lib/chat/hooks/useOnScreen.ts

@@ -1,6 +1,6 @@
 import { useCallback, useState } from 'react';
 
-export const useOnScreen = ({ root = null, rootMargin = '0px', threshold = 0 } = {}) => {
+export const useOnScreen = ({ root = null as HTMLElement | null, rootMargin = '0px', threshold = 0 } = {}) => {
 	const [observer, setObserver] = useState<IntersectionObserver | null>(null);
 	const [isIntersecting, setIntersecting] = useState(false);