Merge pull request #6458 from nguyentrannhan/fix-typo

updated fetch threads

Author: nguyentrannhan

apps/mobile/src/app/navigation/Authentication/index.tsx

@@ -11,8 +11,11 @@ import moment from 'moment';
 import { Dimensions, NativeModules, Platform } from 'react-native';
 import BottomSheetRootListener from '../../components/BottomSheetRootListener';
 import CallingModalWrapper from '../../components/CallingModalWrapper';
+import ModalRootListener from '../../components/ModalRootListener';
 import useTabletLandscape from '../../hooks/useTabletLandscape';
 import HomeScreenTablet from '../../screens/home/HomeScreenTablet';
+import ChannelMessageListener from '../../screens/home/homedrawer/ChannelMessageListener';
+import ChannelMessageReactionListener from '../../screens/home/homedrawer/ChannelMessageReactionListener';
 import HomeDefaultWrapper from '../../screens/home/homedrawer/HomeDefaultWrapper';
 import ChannelVoicePopup from '../../screens/home/homedrawer/components/ChannelVoicePopup';
 import { RenderVideoDetail } from '../../screens/home/homedrawer/components/RenderVideoDetail';
@@ -28,9 +31,6 @@ import { MessagesStacks } from './stacks/MessagesStacks';
 import { NotificationStacks } from './stacks/NotificationStacks';
 import { ServersStacks } from './stacks/ServersStacks';
 import { SettingStacks } from './stacks/SettingStacks';
-import ChannelMessageListener from "../../screens/home/homedrawer/ChannelMessageListener";
-import ChannelMessageReactionListener from "../../screens/home/homedrawer/ChannelMessageReactionListener";
-import ModalRootListener from "../../components/ModalRootListener";
 const RootStack = createStackNavigator();
 const { SharedPreferences } = NativeModules;
 

apps/mobile/src/app/screens/home/homedrawer/BackNativeListener.tsx

@@ -1,9 +1,8 @@
-import { ActionEmitEvent } from '@mezon/mobile-components';
 import { selectDmGroupCurrentId, selectHiddenBottomTabMobile } from '@mezon/store';
 import { useDrawerStatus } from '@react-navigation/drawer';
 import { DrawerActions, useNavigation, useNavigationState } from '@react-navigation/native';
-import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, BackHandler, DeviceEventEmitter, View } from 'react-native';
+import React, { useEffect, useMemo } from 'react';
+import { Alert, BackHandler, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { APP_SCREEN } from '../../../navigation/ScreenTypes';
 

apps/mobile/src/app/screens/home/homedrawer/components/ClanMenu/ClanMenu/index.tsx

@@ -1,7 +1,7 @@
 import { useBottomSheetModal } from '@gorhom/bottom-sheet';
 import { useMarkAsRead, usePermissionChecker } from '@mezon/core';
 import { ActionEmitEvent, Icons } from '@mezon/mobile-components';
-import { baseColor, useTheme } from '@mezon/mobile-ui';
+import { useTheme } from '@mezon/mobile-ui';
 import { appActions, categoriesActions, selectCurrentClan, selectIsShowEmptyCategory, useAppDispatch } from '@mezon/store-mobile';
 import { EPermission } from '@mezon/utils';
 import { useNavigation } from '@react-navigation/native';
@@ -10,7 +10,7 @@ import { useTranslation } from 'react-i18next';
 import { DeviceEventEmitter, Text, View } from 'react-native';
 import { ScrollView } from 'react-native-gesture-handler';
 import { useSelector } from 'react-redux';
-import { IMezonMenuItemProps, IMezonMenuSectionProps, MezonClanAvatar, MezonMenu, MezonSwitch, reserve } from '../../../../../../componentUI';
+import { IMezonMenuItemProps, IMezonMenuSectionProps, MezonClanAvatar, MezonMenu, MezonSwitch } from '../../../../../../componentUI';
 import MezonButtonIcon from '../../../../../../componentUI/MezonButtonIcon';
 import DeleteClanModal from '../../../../../../components/DeleteClanModal';
 import { APP_SCREEN, AppStackScreenProps } from '../../../../../../navigation/ScreenTypes';

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);