(FE) Add Presence to Editor Header (#90)

* Add presence to header * Fix lint
yorkie-team · Jan 23, 2024 · 1b085a9 · 1b085a9
1 parent 7b8a387
commit 1b085a9
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git a/frontend/src/components/headers/EditorHeader.tsx b/frontend/src/components/headers/EditorHeader.tsx
@@ -1,5 +1,7 @@
 import {
 	AppBar,
+	Avatar,
+	AvatarGroup,
 	Paper,
 	Stack,
 	ToggleButton,
@@ -63,6 +65,17 @@ function EditorHeader() {
 						</Paper>
 					</Stack>
 					<Stack direction="row" alignItems="center" gap={1}>
+						<AvatarGroup max={4}>
+							{editorState.doc?.getPresences()?.map((presence) => (
+								<Avatar
+									key={presence.clientID}
+									alt={presence.presence.name}
+									sx={{ bgcolor: presence.presence.color }}
+								>
+									{presence.presence.name[0]}
+								</Avatar>
+							))}
+						</AvatarGroup>
 						{!editorState.shareRole && <ShareButton />}
 						<ThemeButton />
 					</Stack>

diff --git a/frontend/src/pages/document/Index.tsx b/frontend/src/pages/document/Index.tsx
@@ -16,10 +16,12 @@ import Preview from "../../components/editor/Preview";
 import { Navigate, useParams, useSearchParams } from "react-router-dom";
 import { useGetDocumentBySharingTokenQuery, useGetDocumentQuery } from "../../hooks/api/document";
 import { AuthContext } from "../../contexts/AuthContext";
+import { selectUser } from "../../store/userSlice";
 
 function EditorIndex() {
 	const dispatch = useDispatch();
 	const params = useParams();
+	const userStore = useSelector(selectUser);
 	const { isLoggedIn } = useContext(AuthContext);
 	const [searchParams] = useSearchParams();
 	const windowWidth = useWindowWidth();
@@ -34,8 +36,9 @@ function EditorIndex() {
 		let client: yorkie.Client;
 		let doc: yorkie.Document<YorkieCodeMirrorDocType, YorkieCodeMirrorPresenceType>;
 		const yorkieDocuentId = document?.yorkieDocumentId || sharedDocument?.yorkieDocumentId;
+		const name = searchParams.get("token") ? "Anonymous" : userStore.data?.nickname;
 
-		if (!yorkieDocuentId) return;
+		if (!yorkieDocuentId || !name) return;
 
 		const initializeYorkie = async () => {
 			client = new yorkie.Client(import.meta.env.VITE_YORKIE_API_ADDR, {
@@ -47,7 +50,7 @@ function EditorIndex() {
 
 			await client.attach(doc, {
 				initialPresence: {
-					name: "Yorkie",
+					name,
 					color: Color(randomColor()).fade(0.15).toString(),
 					selection: null,
 				},
@@ -66,7 +69,13 @@ function EditorIndex() {
 
 			cleanUp();
 		};
-	}, [dispatch, document?.yorkieDocumentId, sharedDocument?.yorkieDocumentId]);
+	}, [
+		dispatch,
+		document?.yorkieDocumentId,
+		sharedDocument?.yorkieDocumentId,
+		userStore.data?.nickname,
+		searchParams,
+	]);
 
 	useEffect(() => {
 		if (!sharedDocument) return;