Merge pull request #2116 from ever-co/feat/pagination

feat:  pagination of Tasks on Profile page

apps/web/app/hooks/features/usePublicOrganizationTeams.ts

@@ -86,13 +86,14 @@ export function usePublicOrganizationTeams() {
 				return res;
 			});
 		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 		[queryCall, setTeams, setAllTasks, setPublicTeam, teams, publicTeam]
 	);
 
 	const loadPublicTeamMiscData = useCallback(
 		(profileLink: string, teamId: string) => {
 			return queryCallMiscData(profileLink, teamId).then((res) => {
-				if (res.data.status === 404) {
+				if (res.data?.status === 404) {
 					setTeams([]);
 					return res;
 				}

apps/web/app/hooks/useInfinityFetch.ts

@@ -0,0 +1,37 @@
+'use client';
+
+import React from 'react';
+
+export const getPartData = ({ offset = 0, limit = 10, arr = [] }: { offset?: number; limit?: number; arr: any[] }) =>
+	arr.slice(0, offset * limit + limit);
+
+export const useInfinityScrolling = (arr: any) => {
+	const [offset, setOffset] = React.useState(0);
+	const [data, setData] = React.useState<any[]>(arr);
+
+	const getSomeTasks = React.useCallback(
+		(offset: number) => {
+			setData(getPartData({ arr, limit: 10, offset }));
+		},
+		[arr]
+	);
+
+	const nextOffset = React.useCallback(() => {
+		setOffset((prev) => prev + 1);
+		setData((prev) => getPartData({ arr: prev, limit: 10, offset }));
+	}, [offset]);
+
+	React.useEffect(() => {
+		console.log({ offset });
+		getSomeTasks(offset);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [offset]);
+
+	return {
+		offset,
+		setOffset,
+		getSomeTasks,
+		nextOffset,
+		data
+	};
+};

apps/web/app/utils/scroll-to-element.ts

@@ -3,4 +3,4 @@ export function scrollToElement(rect: DOMRect, diff = 150) {
 		top: rect.y > 0 ? rect.y + window.scrollY - diff : window.scrollY - Math.abs(rect.y) - diff,
 		behavior: 'smooth'
 	});
-}
+}

apps/web/components/shared/Observer/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+
+export const ObserverComponent = ({ isLast, getNextData }: { isLast: boolean; getNextData: () => any }) => {
+	const cardRef = React.useRef<HTMLDivElement>();
+
+	React.useEffect(() => {
+		if (!cardRef?.current) return;
+
+		const observer = new IntersectionObserver(([entry]) => {
+			if (isLast && entry.isIntersecting) {
+				// fetch with new Entry
+				console.log('IN OBSERVER');
+				getNextData();
+				observer.unobserve(entry.target);
+			}
+		});
+
+		observer.observe(cardRef.current);
+	}, [isLast, getNextData]);
+	// @ts-expect-error
+	return <div ref={cardRef} className="-z-10 h-2 bg-transparent  " />;
+};

apps/web/lib/features/user-profile-tasks.tsx

@@ -3,6 +3,8 @@ import { Divider, Text } from 'lib/components';
 import { TaskCard } from './task/task-card';
 import { I_TaskFilter } from './task/task-filters';
 import { useTranslations } from 'next-intl';
+import { ObserverComponent } from '@components/shared/Observer';
+import { useInfinityScrolling } from '@app/hooks/useInfinityFetch';
 
 type Props = {
 	tabFiltered: I_TaskFilter;
@@ -28,6 +30,9 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 	const otherTasks = tasks.filter((t) =>
 		profile.member?.running == true ? t.id !== profile.activeUserTeamTask?.id : t
 	);
+	const { nextOffset, data } = useInfinityScrolling(otherTasks);
+	// const { total, onPageChange, itemsPerPage, itemOffset, endOffset, setItemsPerPage, currentItems } =
+	// 	usePagination(otherTasks);
 
 	return (
 		<div className="mt-10">
@@ -79,9 +84,10 @@ export function UserProfileTask({ profile, tabFiltered }: Props) {
 			)}
 
 			<ul className="flex flex-col gap-6">
-				{otherTasks.map((task) => {
+				{data.map((task, index) => {
 					return (
 						<li key={task.id}>
+							<ObserverComponent isLast={index === data.length - 1} getNextData={nextOffset} />
 							<TaskCard
 								task={task}
 								isAuthUser={profile.isAuthUser}

apps/web/lib/settings/member-table.tsx

@@ -52,7 +52,7 @@ export const MemberTable = ({ members }: { members: OT_Member[] }) => {
 			updateAvatar({
 				firstName: editMember?.employee?.user?.firstName || '',
 				lastName: editMember?.employee?.user?.lastName || '',
-				id: editMember.employee.userId
+				id: editMember?.employee?.userId
 			}).then(() => {
 				const teamIndex = organizationTeams.findIndex((team) => team.id === activeTeamId);
 				const tempOrganizationTeams = cloneDeep(organizationTeams);