[FixBug] Infinite loop: assignTask + log functions firing repeatedly when Assign Task popup is open (Profile Page | Unassigned Tab) (#3998)

* fix infinite re-render / fix multiple member assignement

* add spinner when updating / disable update button

* add ai bot suggestions

Author: CREDO23

apps/web/core/components/common/image-overlapper.tsx

@@ -1,11 +1,11 @@
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Popover, PopoverContent, PopoverTrigger } from '@/core/components/common/popover';
 import Image from 'next/image';
 import Link from 'next/link';
 import Skeleton from 'react-loading-skeleton';
 import { ScrollArea } from '@/core/components/common/scroll-bar';
-import { useModal } from '@/core/hooks';
-import { Modal, Divider } from '@/core/components';
+import { useModal, useTeamTasks } from '@/core/hooks';
+import { Modal, Divider, SpinnerLoader } from '@/core/components';
 import { useTranslations } from 'next-intl';
 import { TaskAssignButton } from '@/core/components/tasks/task-assign-button';
 import { clsxm } from '@/core/lib/utils';
@@ -19,6 +19,7 @@ import { ITimerStatus } from '@/core/types/interfaces/timer/timer-status';
 import { TEmployee, TTask } from '@/core/types/schemas/task/task.schema';
 import { useAtomValue } from 'jotai';
 import { activeTeamState } from '@/core/stores';
+import { TOrganizationTeamEmployee } from '@/core/types/schemas';
 
 export interface ImageOverlapperProps {
 	id: string;
@@ -67,26 +68,29 @@ export default function ImageOverlapper({
 	const { isOpen, openModal, closeModal } = useModal();
 
 	const activeTeam = useAtomValue(activeTeamState);
-	const allMembers = activeTeam?.members || [];
+	const allMembers = useMemo(() => activeTeam?.members || [], [activeTeam]);
 	const [assignedMembers, setAssignedMembers] = useState<TEmployee[]>([...(item?.members || [])]);
 	const [unassignedMembers, setUnassignedMembers] = useState<TEmployee[]>([]);
-	const [validate, setValidate] = useState<boolean>(false);
 	const [showInfo, setShowInfo] = useState<boolean>(false);
+	const { updateTask, updateLoading } = useTeamTasks();
 
 	const t = useTranslations();
 
-	const onCheckMember = (member: any) => {
-		const checkUser = assignedMembers.some((el: TEmployee) => el.id === member.id);
-		if (checkUser) {
-			const updatedMembers = assignedMembers.filter((el: TEmployee) => el.id != member.id);
-			setAssignedMembers(updatedMembers);
-			setUnassignedMembers([...unassignedMembers, member]);
-		} else {
-			setAssignedMembers([...assignedMembers, member]);
-			const updatedUnassign = unassignedMembers.filter((el: TEmployee) => el.id != member.id);
-			setUnassignedMembers(updatedUnassign);
-		}
-	};
+	const handleMemberClick = useCallback(
+		(member: TEmployee) => {
+			const checkUser = assignedMembers.some((el: TEmployee) => el.id === member.id);
+			if (checkUser) {
+				const updatedMembers = assignedMembers.filter((el: TEmployee) => el.id !== member.id);
+				setAssignedMembers(updatedMembers);
+				setUnassignedMembers([...unassignedMembers, member]);
+			} else {
+				setAssignedMembers([...assignedMembers, member]);
+				const updatedUnassign = unassignedMembers.filter((el: TEmployee) => el.id !== member.id);
+				setUnassignedMembers(updatedUnassign);
+			}
+		},
+		[assignedMembers, unassignedMembers]
+	);
 
 	const onRedirect = useCallback(
 		(image: ImageOverlapperProps): Url => {
@@ -109,15 +113,23 @@ export default function ImageOverlapper({
 		[activeTeam?.members, onAvatarClickRedirectTo]
 	);
 
-	const onCLickValidate = () => {
-		setValidate(!validate);
-		closeModal();
-	};
+	const onConfirm = useCallback(async () => {
+		if (updateLoading) return;
+		try {
+			await updateTask({
+				...item,
+				members: assignedMembers
+			});
+
+			closeModal();
+		} catch (error) {
+			console.error('Error updating task members:', error);
+		}
+	}, [closeModal, updateTask, item, assignedMembers, updateLoading]);
 
 	const hasMembers = item?.members?.length > 0;
-	const membersList = { assignedMembers, unassignedMembers };
 
-	if (imageLength == undefined) {
+	if (imageLength === undefined) {
 		return <Skeleton height={40} width={40} borderRadius={100} className="rounded-full dark:bg-[#353741]" />;
 	}
 
@@ -185,18 +197,16 @@ export default function ImageOverlapper({
 					>
 						<Divider className="mt-4" />
 						<ul className="overflow-auto p-5 py-6">
-							{allMembers?.map((member: any) => {
+							{allMembers?.map((member: TOrganizationTeamEmployee) => {
 								return (
 									<li
-										key={member.employee}
+										key={member.id}
 										className="rounded-lg border border-transparent cursor-pointer w-100 hover:border-blue-500 hover:border-opacity-50"
 									>
 										<TeamMember
 											member={member}
-											item={item}
-											onCheckMember={onCheckMember}
-											membersList={membersList}
-											validate={validate}
+											onClick={handleMemberClick}
+											assigned={assignedMembers.some((el) => el.id === member.employee?.id)}
 										/>
 									</li>
 								);
@@ -209,12 +219,13 @@ export default function ImageOverlapper({
 								<TaskAvatars task={{ members: assignedMembers }} limit={3} />
 								<div className="flex px-4 h-fit">
 									<button
-										className="flex flex-row gap-1 justify-center items-center px-4 py-2 w-28 min-w-0 h-12 text-sm text-white rounded-xl bg-primary dark:bg-primary-light disabled:bg-primary-light disabled:opacity-40"
+										className="flex flex-row gap-3 justify-center items-center px-2 py-2 w-28 min-w-0 h-12 text-sm text-white rounded-xl bg-primary dark:bg-primary-light disabled:bg-primary-light disabled:opacity-40"
+										disabled={updateLoading}
 										onClick={() => {
-											onCLickValidate();
+											onConfirm();
 										}}
 									>
-										<IconsCheck fill="#ffffff" />
+										{updateLoading ? <SpinnerLoader size={20} /> : <IconsCheck fill="#ffffff" />}
 										{t('common.CONFIRM')}
 									</button>
 								</div>

apps/web/core/components/teams/team-member.tsx

@@ -1,50 +1,33 @@
 import { useTeamMemberCard } from '@/core/hooks';
-import { useEffect } from 'react';
-import { IEmployee } from '@/core/types/interfaces/organization/employee';
+import { useCallback } from 'react';
 import { IconsCheck } from '@/core/components/icons';
 import { UserInfo } from '../pages/teams/team/team-members-views/user-team-card/user-info';
+import { TEmployee, TOrganizationTeamEmployee } from '@/core/types/schemas';
 
 export default function TeamMember({
 	member,
-	item,
-	onCheckMember,
-	membersList,
-	validate
+	onClick,
+	assigned
 }: {
-	member: any;
-	item: any;
-	onCheckMember: any;
-	membersList: any;
-	validate: any;
+	member: TOrganizationTeamEmployee;
+	onClick: (member: TEmployee) => void;
+	assigned: boolean;
 }) {
 	const memberInfo = useTeamMemberCard(member);
-	const { assignTask } = useTeamMemberCard(member);
-	const checkAssign = membersList.assignedMembers.some((el: IEmployee) => el.id === member.employeeId);
-	const checkUnassign = membersList.unassignedMembers.some((el: IEmployee) => el.id === member.employeeId);
 
-	useEffect(() => {
-		if (validate) {
-			if (checkAssign) {
-				assignTask(item);
-			} else if (checkUnassign) {
-				memberInfo.unassignTask(item);
-			}
-		}
-	}, [validate, checkAssign, checkUnassign, item, assignTask, memberInfo]);
-
-	const assignMember = () => {
-		onCheckMember(member.employee);
-	};
+	const toggleMember = useCallback(() => {
+		onClick(member.employee);
+	}, [onClick, member]);
 
 	return (
 		<div
 			onClick={() => {
-				assignMember();
+				toggleMember();
 			}}
 			className="w-100 cursor-pointer flex items-center"
 		>
 			<UserInfo memberInfo={memberInfo} className="2xl:w-[20.625rem] w-100 pointer-events-none" />
-			{checkAssign ? <IconsCheck fill="#3826a6" /> : <></>}
+			{assigned ? <IconsCheck fill="#3826a6" /> : <></>}
 		</div>
 	);
 }

apps/web/core/hooks/organizations/teams/use-team-member-card.ts

@@ -199,7 +199,7 @@ export function useTeamMemberCard(member: TOrganizationTeamEmployee | undefined)
 			setAssignTaskLoading(true);
 			return updateTask({
 				...task,
-				members: [...(task.members || []), (member ? member.employee : {}) as any]
+				members: [...(task.members || []), (member ? member : {}) as any]
 			}).then(() => {
 				if (isAuthUser && !activeTeamTask) {
 					setActiveTask(task);

apps/web/core/types/schemas/organization/employee.schema.ts

@@ -83,7 +83,7 @@ export const employeeSchema = z
 				id: uuIdSchema,
 				fullName: z.string(),
 				email: z.string(),
-				phone: z.string(),
+				phone: z.string().nullable().optional(),
 				avatar: z.string().nullable().optional()
 			})
 			.passthrough()