@elyx-code/editor-ui 0.0.2

package/src/components/online-users/LocalOnlineUsers.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useState } from 'react';
+import './online-users.css';
+import { getCurrentUserOrLogoutRedirect } from '../../auth';
+import '../user/user.css';
+import { IdentityProvider, IUser } from '@elyx-code/definitions';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface IOnlineUsersProps {
+	currentUser?: IUser;
+	onlineUsers?: IUser[];
+}
+
+const shortListOfFakeOnlineUsers: IUser[] = [
+	{
+		id: '7af16ca3-3da4-4c1a-b75f-6ab9d23e5d35',
+		picture: 'https://i.pravatar.cc/150?img=68',
+		name: 'John',
+		lastName: 'Doe',
+		email: 'john.doe@example.com',
+		identityProviderUserId: '7af16ca3-3da4-4c1a-b75f-6ab9d23e5d35',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: 'b5fe6434-d7e9-4c99-86c3-542800e65a64',
+		picture: undefined,
+		name: 'Carlos',
+		lastName: 'Osman',
+		email: 'carlos.osman@example.com',
+		identityProviderUserId: 'b5fe6434-d7e9-4c99-86c3-542800e65a64',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: 'e9fda7ad-0f05-4ed1-b746-5f1aa723825f',
+		picture: 'https://i.pravatar.cc/150?img=5',
+		name: 'Chloe',
+		lastName: 'Smith',
+		email: 'chloe.smith@example.com',
+		identityProviderUserId: 'e9fda7ad-0f05-4ed1-b746-5f1aa723825f',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: '25c378d5-8cf6-4915-8d58-3ecbb6b2d2ff',
+		picture: 'https://i.pravatar.cc/150?img=10',
+		name: 'Chloe',
+		lastName: 'Smith',
+		email: 'chloe.smith@example.com',
+		identityProviderUserId: '25c378d5-8cf6-4915-8d58-3ecbb6b2d2ff',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+];
+
+const longListOfFakeOnlineUsers: IUser[] = [
+	...shortListOfFakeOnlineUsers,
+	{
+		id: '99c6682f-bcf3-4131-a50e-003837d66db8',
+		picture: 'https://i.pravatar.cc/150?img=6',
+		name: 'Tina',
+		lastName: 'Turner',
+		email: 'tina.turner@example.com',
+		identityProviderUserId: '99c6682f-bcf3-4131-a50e-003837d66db8',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: 'e792aeca-bd81-454e-b5bc-7d36b011df6b',
+		picture: 'https://i.pravatar.cc/150?img=18',
+		name: 'Joseph',
+		lastName: 'Maxwell',
+		email: 'joseph.maxwell@example.com',
+		identityProviderUserId: 'e792aeca-bd81-454e-b5bc-7d36b011df6b',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: 'c870b487-6028-4159-9a8c-4d5c16cd0cb1',
+		picture: 'https://i.pravatar.cc/150?img=21',
+		name: 'Susan',
+		lastName: 'Harper',
+		email: 'susan.harper@example.com',
+		identityProviderUserId: 'c870b487-6028-4159-9a8c-4d5c16cd0cb1',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+	{
+		id: 'c4cb5a8c-7e04-4bbc-90e9-c9f660878ddc',
+		picture: 'https://i.pravatar.cc/150?img=50',
+		name: 'Annie',
+		lastName: 'Miracle',
+		email: 'annie.miracle@example.com',
+		identityProviderUserId: 'c4cb5a8c-7e04-4bbc-90e9-c9f660878ddc',
+		identityProvider: IdentityProvider.COGNITO,
+		createdAt: '2023-10-01T12:00:00Z',
+		updatedAt: '2023-10-01T12:00:00Z',
+	},
+];
+
+const maxAmountOfDisplayableUsers = 3;
+
+const LocalOnlineUsers: React.FC<IOnlineUsersProps> = ({
+	onlineUsers = [],
+}) => {
+	const [user, setUser] = useState<IUser | null>(null);
+
+	useEffect(() => {
+		const fetchCurrentUser = async () => {
+			try {
+				const currentUser = await getCurrentUserOrLogoutRedirect();
+				setUser(currentUser);
+			} catch (e) {
+				Logger.log('Error getting user profile', e);
+			}
+		};
+		fetchCurrentUser();
+	}, []);
+
+	const fullOnlineUsers = [...onlineUsers, ...longListOfFakeOnlineUsers];
+	const remainingOnlineUsers =
+		fullOnlineUsers.length - maxAmountOfDisplayableUsers;
+	const shortennedOnlineUsers = fullOnlineUsers.slice(
+		0,
+		maxAmountOfDisplayableUsers
+	);
+
+	return (
+		<div className='local-online-users'>
+			<div className='online-users__other-users'>
+				{remainingOnlineUsers > 0 && (
+					<div className='local-online-users__other-users-helper-text'>
+						<p>+ {remainingOnlineUsers}</p>
+					</div>
+				)}
+				{shortennedOnlineUsers.map((user, index) => {
+					const indexFromEnd = shortennedOnlineUsers.length - 1 - index;
+					return (
+						<div
+							key={user.id}
+							className={`small-user-avatar ${
+								// Random boolean to simulate online status
+								// @ts-ignore
+								Math.random() > 0.5 ? 'user-avatar-online' : ''
+							}`}
+							style={{ left: `${indexFromEnd * 10}px` }}
+						>
+							{user.picture ? (
+								<img
+									src={user.picture}
+									alt={`Profile picture of ${user.name} ${user.lastName}`}
+									title={`${user.name} ${user.lastName}`}
+								/>
+							) : (
+								<i
+									className='fa-solid fa-user'
+									title={`${user.name} ${user.lastName}`}
+								></i>
+							)}
+						</div>
+					);
+				})}
+			</div>
+		</div>
+	);
+};
+
+export default LocalOnlineUsers;

package/src/components/online-users/PageOnlineUsers.tsx

@@ -0,0 +1,297 @@
+import React, { useEffect, useState } from 'react';
+import './online-users.css';
+import { getCurrentUserOrLogoutRedirect } from '../../auth';
+import '../user/user.css';
+import { getUser } from '../../services/user';
+import { useParams } from 'react-router-dom';
+import CurrentUserAvatar from '../user/CurrentUserAvatar';
+import { EditorService, IChannelConnections } from '../../services/editor';
+import { Tooltip } from '@mui/material';
+import { IUser, IWSSessionChannelSubscription } from '@elyx-code/definitions';
+import { Logger } from '@elyx-code/common-ts-utils';
+
+interface IOnlineUsersProps {
+	currentUser?: IUser;
+	// onlineUsers?: IUser[];
+	project: EditorService;
+}
+
+// const shortListOfFakeOnlineUsers: IUser[] = [
+// 	{
+// 		id: '7af16ca3-3da4-4c1a-b75f-6ab9d23e5d35',
+// 		picture: 'https://i.pravatar.cc/150?img=68',
+// 		name: 'John',
+// 		lastName: 'Doe',
+// 		email: 'john.doe@example.com',
+// 		identityProviderUserId: '7af16ca3-3da4-4c1a-b75f-6ab9d23e5d35',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: 'b5fe6434-d7e9-4c99-86c3-542800e65a64',
+// 		picture: undefined,
+// 		name: 'Carlos',
+// 		lastName: 'Osman',
+// 		email: 'carlos.osman@example.com',
+// 		identityProviderUserId: 'b5fe6434-d7e9-4c99-86c3-542800e65a64',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: 'e9fda7ad-0f05-4ed1-b746-5f1aa723825f',
+// 		picture: 'https://i.pravatar.cc/150?img=5',
+// 		name: 'Chloe',
+// 		lastName: 'Smith',
+// 		email: 'chloe.smith@example.com',
+// 		identityProviderUserId: 'e9fda7ad-0f05-4ed1-b746-5f1aa723825f',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: '25c378d5-8cf6-4915-8d58-3ecbb6b2d2ff',
+// 		picture: 'https://i.pravatar.cc/150?img=10',
+// 		name: 'Chloe',
+// 		lastName: 'Smith',
+// 		email: 'chloe.smith@example.com',
+// 		identityProviderUserId: '25c378d5-8cf6-4915-8d58-3ecbb6b2d2ff',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// ];
+
+// const longListOfFakeOnlineUsers: IUser[] = [
+// 	...shortListOfFakeOnlineUsers,
+// 	{
+// 		id: '99c6682f-bcf3-4131-a50e-003837d66db8',
+// 		picture: 'https://i.pravatar.cc/150?img=6',
+// 		name: 'Tina',
+// 		lastName: 'Turner',
+// 		email: 'tina.turner@example.com',
+// 		identityProviderUserId: '99c6682f-bcf3-4131-a50e-003837d66db8',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: 'e792aeca-bd81-454e-b5bc-7d36b011df6b',
+// 		picture: 'https://i.pravatar.cc/150?img=18',
+// 		name: 'Joseph',
+// 		lastName: 'Maxwell',
+// 		email: 'joseph.maxwell@example.com',
+// 		identityProviderUserId: 'e792aeca-bd81-454e-b5bc-7d36b011df6b',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: 'c870b487-6028-4159-9a8c-4d5c16cd0cb1',
+// 		picture: 'https://i.pravatar.cc/150?img=21',
+// 		name: 'Susan',
+// 		lastName: 'Harper',
+// 		email: 'susan.harper@example.com',
+// 		identityProviderUserId: 'c870b487-6028-4159-9a8c-4d5c16cd0cb1',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// 	{
+// 		id: 'c4cb5a8c-7e04-4bbc-90e9-c9f660878ddc',
+// 		picture: 'https://i.pravatar.cc/150?img=50',
+// 		name: 'Annie',
+// 		lastName: 'Miracle',
+// 		email: 'annie.miracle@example.com',
+// 		identityProviderUserId: 'c4cb5a8c-7e04-4bbc-90e9-c9f660878ddc',
+// 		identityProvider: IdentityProvider.COGNITO,
+// 		createdAt: '2023-10-01T12:00:00Z',
+// 		updatedAt: '2023-10-01T12:00:00Z',
+// 	},
+// ];
+
+const maxAmountOfDisplayableUsers = 5;
+
+const PageOnlineUsers: React.FC<IOnlineUsersProps> = ({
+	// onlineUsers = [],
+	project,
+}) => {
+	const [currentUser, setCurrentUser] = useState<(IUser & { sessionId: string }) | null>(null);
+	const [onlineUsers, setOnlineUsers] = useState<(IUser & { sessionId: string })[]>([]);
+	const { id: projectId } = useParams<{ id: string }>();
+
+	const events = project?.events;
+
+	const initialProjectPeerConnectionsToUsers = async () => {
+		if (!project) {
+			return;
+		}
+
+		const peerConnections = project?.peerConnections;
+		const canvasChannel =
+			peerConnections[project?.PROJECT_NOTIFICATIONS_CHANNEL];
+
+		const updatedOnlineUsers: (IUser & { sessionId: string })[] = (
+			await Promise.all(
+				(canvasChannel?.connections || []).map(
+					async (user: Omit<IWSSessionChannelSubscription, "channel">) => {
+						// Fetch the user data from the server
+						const userData = await getUser({ id: user.userId });
+
+						if (userData) {
+							return {
+								...userData,
+								online: user.connectionId !== null,
+								sessionId: user.sessionId,
+							};
+						}
+
+						return null;
+					}
+				)
+			)
+		).filter((user: IUser | null): user is IUser & { sessionId: string } => user !== null);
+
+		Logger.log('updated initial online users', updatedOnlineUsers);
+
+		setOnlineUsers(updatedOnlineUsers);
+	};
+
+	useEffect(() => {
+		const fetchCurrentUser = async () => {
+			try {
+				const user = await getCurrentUserOrLogoutRedirect();
+				setCurrentUser(user);
+			} catch (e) {
+				Logger.log('Error getting user profile', e);
+			}
+		};
+
+		fetchCurrentUser();
+	}, []);
+
+	useEffect(() => {
+		Logger.log('Subscribing to peer connections updates');
+
+		initialProjectPeerConnectionsToUsers();
+
+		const handleMessage = async (
+			message: Record<string, IChannelConnections>
+		) => {
+			Logger.log('message recieved at online users', message);
+
+			const canvasChannel = message[project.PROJECT_NOTIFICATIONS_CHANNEL];
+
+			if (!canvasChannel) {
+				return;
+			}
+
+			const updatedOnlineUsers: (IUser & { sessionId: string })[] = (
+				await Promise.all(
+					canvasChannel.connections.map(
+						async (user: Omit<IWSSessionChannelSubscription, "channel">) => {
+							// Fetch the user data from the server
+							const userData = await getUser({ id: user.userId });
+
+							if (userData) {
+								return {
+									...userData,
+									online: user.connectionId !== null,
+									sessionId: user.sessionId,
+								};
+							}
+
+							return null;
+						},
+					),
+				)
+			).filter(
+				(user: IUser | null): user is IUser & { sessionId: string } =>
+					user !== null,
+			);
+
+			Logger.log('updated online users', updatedOnlineUsers);
+
+			setOnlineUsers(updatedOnlineUsers);
+		};
+
+		events?.on('peer-connections-updated', handleMessage);
+		return () => {
+			// unsubscribe the same callback
+			events?.off('peer-connections-updated', handleMessage);
+		};
+	}, [events, project?.PROJECT_NOTIFICATIONS_CHANNEL]);
+
+	// Filter out the active tab's session connection and deduplicate other active sessions by sessionId
+	const otherOnlineUsers = onlineUsers.filter((user) => user.sessionId !== project.sessionId);
+	const uniqueUsers: (IUser & { sessionId: string })[] = [];
+	const seenSessionIds = new Set<string>();
+	for (const user of otherOnlineUsers) {
+		const key = user.sessionId || user.id;
+		if (!seenSessionIds.has(key)) {
+			seenSessionIds.add(key);
+			uniqueUsers.push(user);
+		}
+	}
+
+	const remainingOnlineUsers =
+		uniqueUsers.length - maxAmountOfDisplayableUsers;
+	const shortenedOnlineUsers = uniqueUsers.slice(
+		0,
+		maxAmountOfDisplayableUsers
+	);
+
+	return (
+		<div className='online-users'>
+			<div className='online-users__other-users'>
+				{remainingOnlineUsers > 0 && (
+					<div className='online-users__other-users-helper-text'>
+						<p>+ {remainingOnlineUsers}</p>
+						{/* <p>{remainingOnlineUsers > 1 ? 'others' : 'other'}</p> */}
+					</div>
+				)}
+				{shortenedOnlineUsers.map((user, index) => {
+					return (
+						<Tooltip
+							key={user.id + '--' + user.sessionId}
+							title={`${user.name} ${user.lastName}`}
+							placement='bottom'
+							arrow
+						>
+							<div
+								key={user.id}
+								className={`user-avatar ${
+									// Random boolean to simulate online status
+									// @ts-ignore
+									user.online ? 'user-avatar-online' : ''
+								}`}
+							>
+								{user.picture ? (
+									<img
+										src={user.picture}
+										alt={`Profile picture of ${user.name} ${user.lastName}`}
+										title={`${user.name} ${user.lastName}`}
+									/>
+								) : (
+									<i
+										className='fa-solid fa-user'
+										title={`${user.name} ${user.lastName}`}
+										style={{ fontSize: '14px' }}
+									/>
+								)}
+							</div>
+						</Tooltip>
+					);
+				})}
+			</div>
+			<div className='online-users__current-user'>
+				<CurrentUserAvatar
+					profilePagePath={`${project?.editorBasePath}/profile/{id}`}
+				/>
+			</div>
+		</div>
+	);
+};
+
+export default PageOnlineUsers;

package/src/components/online-users/online-users.css

@@ -0,0 +1,72 @@
+.online-users {
+  position: fixed;
+  top: 20px;
+  right: 20px;
+  z-index: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.online-users__other-users .small-user-avatar {
+  position: relative;
+}
+
+.online-users__other-users .user-avatar {
+  position: relative;
+  margin-left: -8px;
+}
+
+.online-users__other-users .user-avatar:first-child {
+  margin-left: 0;
+}
+
+.online-users__other-users-helper-text {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  left: 30px;
+}
+
+.local-online-users__other-users-helper-text {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  left: 15px;
+}
+
+.online-users__other-users-helper-text:hover {
+  text-decoration: underline;
+}
+.local-online-users__other-users-helper-text:hover {
+  text-decoration: underline;
+}
+
+.online-users__other-users-helper-text p {
+  color: var(--color-main-grey);
+  padding: 0;
+  margin: 0;
+  font-size: 0.7em;
+  cursor: pointer;
+}
+.local-online-users__other-users-helper-text p {
+  color: var(--color-main-grey);
+  padding: 0;
+  margin: 0;
+  font-size: 0.7em;
+  cursor: pointer;
+}
+
+.online-users__other-users {
+  display: flex;
+  flex-direction: row;
+}
+
+.user-avatar-online {
+  border: 2px solid #2bd650;
+}

package/src/components/page-backdrop/PageBackdrop.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import './page-backdrop.css';
+
+const PageBackdrop: React.FC = () => {
+	return <div className='page-backdrop'></div>;
+};
+
+export default PageBackdrop;

package/src/components/page-backdrop/page-backdrop.css

@@ -0,0 +1,7 @@
+.page-backdrop {
+  background-color: #EFF2F5;
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  z-index: -1;
+}

package/src/components/project-configuration/DeleteProjectConfirmationDialog.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+import SmallDialog from '../../lib/dialog/SmallDialog';
+import Button from '../../lib/button/Button';
+import { getAccessToken } from '../../auth';
+import { useNavigate, useParams } from 'react-router-dom';
+import axios from 'axios';
+import { envConfig } from '../../config';
+import { useWorkspaceStore } from '../../store/workspace';
+
+interface IDeleteProjectConfirmationDialogProps {
+	onClose: () => void;
+}
+
+const DeleteProjectConfirmationDialog: React.FC<
+	IDeleteProjectConfirmationDialogProps
+> = ({ onClose }) => {
+	const [isDeletingProject, setIsDeletingProject] = useState(false);
+	const { id: projectId } = useParams<{ id: string }>();
+	const navigate = useNavigate();
+
+	const activeWorkspace = useWorkspaceStore((state) => state.activeWorkspace);
+
+	const deleteProject = async () => {
+		setIsDeletingProject(true);
+
+		await axios.delete(
+			`${envConfig.API_BASE_URL}/editor-service/v1/project/${projectId}`,
+			{
+				headers: {
+					Authorization: 'Bearer ' + (await getAccessToken()),
+				},
+			}
+		);
+
+		navigate(`/ws/${activeWorkspace?.slug}/gallery`);
+		setIsDeletingProject(false);
+	};
+
+	return (
+		<SmallDialog onClose={() => !isDeletingProject && onClose()}>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					height: '100%',
+					justifyContent: 'space-between',
+				}}
+			>
+				<div style={{ display: 'flex', flexDirection: 'column' }}>
+					<div
+						style={{
+							display: 'flex',
+							alignItems: 'center',
+							marginBottom: '10px',
+							gap: '16px',
+						}}
+					>
+						<button
+							className='dialog_back_button'
+							disabled={isDeletingProject}
+							onClick={() => !isDeletingProject && onClose()}
+						>
+							<i className='fa-solid fa-arrow-left' />
+						</button>
+						<h2 style={{ margin: '0px', fontWeight: 500 }}>Delete project</h2>
+					</div>
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							gap: '10px',
+							alignItems: 'center',
+							marginBottom: '16px',
+						}}
+					>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							Are you sure you want to delete the project?
+						</p>
+						<p
+							style={{
+								margin: '0px',
+								marginTop: '6px',
+								color: 'rgba(0,0,0,0.54)',
+							}}
+						>
+							This action is irreversible and will delete all its logic and data
+							associated with it.
+							<br />
+							It will also unpublish the project.
+						</p>
+					</div>
+				</div>
+				<div
+					style={{
+						display: 'flex',
+						justifyContent: 'center',
+						flexDirection: 'column',
+						gap: '10px',
+						alignItems: 'center',
+					}}
+				>
+					<p
+						style={{
+							margin: '0px',
+							fontSize: '10px',
+							color: 'rgba(0,0,0,0.54)',
+							textAlign: 'center',
+						}}
+					>
+						It might take a few seconds.
+						<br />
+						Please wait.
+					</p>
+					<Button
+						color='error'
+						size='medium'
+						loading={isDeletingProject}
+						onClick={deleteProject}
+					>
+						Delete project
+					</Button>
+				</div>
+			</div>
+		</SmallDialog>
+	);
+};
+
+export default DeleteProjectConfirmationDialog;