From e8ff3c4e80cd37af4c754e19753afc8eceb2eced Mon Sep 17 00:00:00 2001
From: Tong Chen <chentong@microsoft.com>
Date: Wed, 23 Oct 2024 11:23:28 -0700
Subject: [PATCH] format

---
 .../src/components/UserProfilePhoto.tsx       | 128 +++++++++---------
 1 file changed, 64 insertions(+), 64 deletions(-)

diff --git a/examples/apps/ai-collab/src/components/UserProfilePhoto.tsx b/examples/apps/ai-collab/src/components/UserProfilePhoto.tsx
index 9b318cc94a32..a2f6fb07fd89 100644
--- a/examples/apps/ai-collab/src/components/UserProfilePhoto.tsx
+++ b/examples/apps/ai-collab/src/components/UserProfilePhoto.tsx
@@ -13,80 +13,80 @@ import { v4 as uuid } from "uuid";
 import type { UserPresence } from "@/app/presence";
 
 interface UserProfilePhotoProps {
-    onlineUsers: UserPresence;
+	onlineUsers: UserPresence;
 }
 
 const UserProfilePhoto: React.FC<UserProfilePhotoProps> = ({ onlineUsers }) => {
-    const [photos, setPhotos] = useState<string[]>([]);
-    const [isPhotoFetched, setIsPhotoFetched] = useState<boolean>(false);
+	const [photos, setPhotos] = useState<string[]>([]);
+	const [isPhotoFetched, setIsPhotoFetched] = useState<boolean>(false);
 
-    useEffect(() => {
-        const allPhotos: string[] = [];
-        for (const element of Array.from(onlineUsers.onlineUsers.clientValues())) {
-            for (const user of Array.from(element.items.values())) {
-                allPhotos.push(user.value.value.photo);
-            }
-        }
-        setPhotos(allPhotos);
-    }, [onlineUsers]);
+	useEffect(() => {
+		const allPhotos: string[] = [];
+		for (const element of Array.from(onlineUsers.onlineUsers.clientValues())) {
+			for (const user of Array.from(element.items.values())) {
+				allPhotos.push(user.value.value.photo);
+			}
+		}
+		setPhotos(allPhotos);
+	}, [onlineUsers]);
 
-    useEffect(() => {
-        const fetchPhoto = async () => {
-            const clientId = process.env.NEXT_PUBLIC_SPE_CLIENT_ID;
-            const tenantId = process.env.NEXT_PUBLIC_SPE_ENTRA_TENANT_ID;
-            if (tenantId === undefined || clientId === undefined) {
-                return;
-            }
+	useEffect(() => {
+		const fetchPhoto = async () => {
+			const clientId = process.env.NEXT_PUBLIC_SPE_CLIENT_ID;
+			const tenantId = process.env.NEXT_PUBLIC_SPE_ENTRA_TENANT_ID;
+			if (tenantId === undefined || clientId === undefined) {
+				return;
+			}
 
-            const credential = new InteractiveBrowserCredential({
-                clientId,
-                tenantId,
-            });
+			const credential = new InteractiveBrowserCredential({
+				clientId,
+				tenantId,
+			});
 
-            const authProvider = new TokenCredentialAuthenticationProvider(credential, {
-                scopes: ["User.Read"],
-            });
+			const authProvider = new TokenCredentialAuthenticationProvider(credential, {
+				scopes: ["User.Read"],
+			});
 
-            const client = Client.initWithMiddleware({ authProvider });
-            try {
-                const photoBlob = await client.api("/me/photo/$value").get();
-                const photoUrl = URL.createObjectURL(photoBlob);
-                setPhotos((prevPhotos) => {
-                    if (!prevPhotos.includes(photoUrl)) {
-                        return [...prevPhotos, photoUrl];
-                    }
-                    return prevPhotos;
-                });
-                onlineUsers.onlineUsers.local.set(`id-${uuid()}`, { value: { photo: photoUrl } });
-                setIsPhotoFetched(true);
-            } catch (error) {
-                console.error(error);
-            }
-        };
+			const client = Client.initWithMiddleware({ authProvider });
+			try {
+				const photoBlob = await client.api("/me/photo/$value").get();
+				const photoUrl = URL.createObjectURL(photoBlob);
+				setPhotos((prevPhotos) => {
+					if (!prevPhotos.includes(photoUrl)) {
+						return [...prevPhotos, photoUrl];
+					}
+					return prevPhotos;
+				});
+				onlineUsers.onlineUsers.local.set(`id-${uuid()}`, { value: { photo: photoUrl } });
+				setIsPhotoFetched(true);
+			} catch (error) {
+				console.error(error);
+			}
+		};
 
-        if (!isPhotoFetched) {
-            fetchPhoto();
-        }
-    }, [isPhotoFetched, onlineUsers]);
+		if (!isPhotoFetched) {
+			fetchPhoto();
+		}
+	}, [isPhotoFetched, onlineUsers]);
 
-    return (
-        <div>
-            {photos.length === 0 ? (
-                <Avatar alt="User Photo" sx={{ width: 56, height: 56 }} />
-            ) : (
-                photos.map((photo, index) => (
-                    <Badge
-                        key={index}
-                        overlap="circular"
-                        anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
-                        variant="dot"
-                    >
-                        <Avatar alt="User Photo" src={photo} sx={{ width: 56, height: 56 }} />
-                    </Badge>
-                ))
-            )}
-        </div>
-    );
+	return (
+		<div>
+			{photos.length === 0 ? (
+				<Avatar alt="User Photo" sx={{ width: 56, height: 56 }} />
+			) : (
+				photos.map((photo, index) => (
+					<Badge
+						key={index}
+						overlap="circular"
+						anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+						variant="dot"
+					>
+						<Avatar alt="User Photo" src={photo} sx={{ width: 56, height: 56 }} />
+					</Badge>
+				))
+			)}
+		</div>
+	);
 };
 
 export default UserProfilePhoto;