Merge branch 'members-page' into ssopage-cleanup

Author: SagarRajput-7

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -89,40 +89,64 @@ function EditMemberDrawer({
 		[formatTimezoneAdjustedTimestamp],
 	);
 
+	const saveInvitedMember = useCallback(async (): Promise<void> => {
+		if (!member || !inviteId) {
+			return;
+		}
+		await cancelInvite({ id: inviteId });
+		try {
+			await sendInvite({
+				email: member.email,
+				name: displayName,
+				role: selectedRole,
+				frontendBaseUrl: window.location.origin,
+			});
+			toast.success('Invite updated successfully', { richColors: true });
+			onComplete();
+			onClose();
+		} catch {
+			onRefetch?.();
+			onClose();
+			toast.error(
+				'Failed to send the updated invite. Please re-invite this member.',
+				{ richColors: true },
+			);
+		}
+	}, [
+		member,
+		inviteId,
+		displayName,
+		selectedRole,
+		onComplete,
+		onClose,
+		onRefetch,
+	]);
+
+	const saveActiveMember = useCallback(async (): Promise<void> => {
+		if (!member) {
+			return;
+		}
+		await update({
+			userId: member.id,
+			displayName,
+			role: selectedRole,
+		});
+		toast.success('Member details updated successfully', { richColors: true });
+		onComplete();
+		onClose();
+	}, [member, displayName, selectedRole, onComplete, onClose]);
+
 	const handleSave = useCallback(async (): Promise<void> => {
 		if (!member || !isDirty) {
 			return;
 		}
 		setIsSaving(true);
 		try {
 			if (isInvited && inviteId) {
-				await cancelInvite({ id: inviteId });
-				try {
-					await sendInvite({
-						email: member.email,
-						name: displayName,
-						role: selectedRole,
-						frontendBaseUrl: window.location.origin,
-					});
-					toast.success('Invite updated successfully', { richColors: true });
-				} catch {
-					onRefetch?.();
-					onClose();
-					toast.error(
-						'Failed to send the updated invite. Please re-invite this member.',
-						{ richColors: true },
-					);
-				}
+				await saveInvitedMember();
 			} else {
-				await update({
-					userId: member.id,
-					displayName,
-					role: selectedRole,
-				});
-				toast.success('Member details updated successfully', { richColors: true });
+				await saveActiveMember();
 			}
-			onComplete();
-			onClose();
 		} catch {
 			toast.error(
 				isInvited ? 'Failed to update invite' : 'Failed to update member details',
@@ -136,11 +160,8 @@ function EditMemberDrawer({
 		isDirty,
 		isInvited,
 		inviteId,
-		displayName,
-		selectedRole,
-		onComplete,
-		onClose,
-		onRefetch,
+		saveInvitedMember,
+		saveActiveMember,
 	]);
 
 	const handleDelete = useCallback(async (): Promise<void> => {

frontend/src/container/MembersSettings/MembersSettings.tsx

@@ -28,6 +28,7 @@ function MembersSettings(): JSX.Element {
 	const pageParam = parseInt(urlQuery.get('page') ?? '1', 10);
 	const currentPage = Number.isNaN(pageParam) || pageParam < 1 ? 1 : pageParam;
 
+	// TODO(nuqs): Replace with nuqs once the nuqs setup and integration is done - for search
 	const [searchQuery, setSearchQuery] = useState('');
 	const [filterMode, setFilterMode] = useState<FilterMode>(FilterMode.All);
 	const [isInviteModalOpen, setIsInviteModalOpen] = useState(false);
@@ -104,6 +105,7 @@ function MembersSettings(): JSX.Element {
 		return filteredMembers.slice(start, start + PAGE_SIZE);
 	}, [filteredMembers, currentPage]);
 
+	// TODO(nuqs): Replace with nuqs once the nuqs setup and integration is done
 	const setPage = useCallback(
 		(page: number): void => {
 			urlQuery.set('page', String(page));