checkin

common/common.ts

@@ -1,4 +1,5 @@
 import Tracker from "@openreplay/tracker";
+import { createContext } from "react";
 
 const NODE_ENV = process.env.VITE_NODE_ENV;
 const BACKEND_URL = process.env.BACKEND_URL || "null";
@@ -8,8 +9,15 @@ export const SERVER_URL =
 
 export const roomName = window.location.href.split("/")[3] || "default";
 
+export const adminPasswordEnv = process.env.ADMIN_PASSWORD;
+
 export const OPENREPLAY_KEY = process.env.OPENREPLAY_KEY || "null";
 
 export const tracker = new Tracker({
 	projectKey: OPENREPLAY_KEY,
 });
+
+export const AdminContext = createContext(
+	adminPasswordEnv === localStorage.getItem("adminPassword") &&
+		adminPasswordEnv !== null
+);

common/types/types.ts

@@ -19,4 +19,5 @@ export interface ITimerRooms {
 	numUsers: number;
 	userList: string[];
 	room: string;
+	isPublic: boolean;
 }

src/Pages/StatRoom/PublicRoom.tsx

@@ -2,23 +2,29 @@ import { useContext, useEffect, useState } from "react";
 import { ThemeContext } from "styled-components";
 import socket from "../../components/Socket/socket";
 import { ITimerRooms } from "../../../common/types/types";
-import RoomList from "../../components/RoomList/RoomList";
-import { Centered, StyledTitle } from "./StatRoom.styled";
+import { Centered } from "./StatRoom.styled";
 import Header from "../../components/Header/Header";
 import { GlobalStyle } from "../Room/Room.styled";
 import { theme } from "../../../common/theme";
 import Footer from "../../components/Footer/Footer";
 import ConnectionState from "../../components/ConnectionState/ConnectionState";
 
+import PublicRoomRouter from "./PublicRoomRouter";
+import { AdminContext } from "../../../common/common";
+
 export interface IPublicRoom {
 	isBreak: boolean;
 	globalUsersConnected: number;
 	isConnected: boolean;
+	roomName: string;
 }
 
 export const PublicRoom = (props: IPublicRoom): JSX.Element => {
-	const { isBreak, globalUsersConnected, isConnected } = props;
+	const { isBreak, globalUsersConnected, isConnected, roomName } = props;
 	const [timerRooms, setTimerRooms] = useState<ITimerRooms[]>([]);
+
+	const isAdminMode = useContext<boolean>(AdminContext);
+
 	const onPublicTimers = ({
 		roomStats,
 	}: {
@@ -29,7 +35,7 @@ export const PublicRoom = (props: IPublicRoom): JSX.Element => {
 
 	const { themeGroup } = useContext(ThemeContext);
 
-	const { workBackground, breakBackground, workGrey } =
+	const { workBackground, breakBackground } =
 		theme[themeGroup as keyof typeof theme];
 
 	useEffect(() => {
@@ -47,8 +53,14 @@ export const PublicRoom = (props: IPublicRoom): JSX.Element => {
 				backColor={!isBreak ? workBackground : breakBackground}
 			/>
 			<Centered>
-				<StyledTitle color={workGrey}>Public Timers</StyledTitle>
-				<RoomList rooms={timerRooms} isBreak={isBreak} />
+				<PublicRoomRouter
+					isBreak={isBreak}
+					globalUsersConnected={globalUsersConnected}
+					isConnected={isConnected}
+					roomName={roomName}
+					isAdminMode={isAdminMode}
+					timerRooms={timerRooms}
+				/>
 			</Centered>
 			<Footer
 				numUsers={globalUsersConnected}

src/Pages/StatRoom/PublicRoomRouter.tsx

@@ -0,0 +1,68 @@
+import { ThemeContext } from "styled-components";
+import { useContext } from "react";
+import DefaultRoom from "../DefaultRoom/DefaultRoom";
+import { IPublicRoom } from "./PublicRoom";
+import { theme } from "../../../common/theme";
+import { StyledTitle } from "./StatRoom.styled";
+import RoomList from "../../components/RoomList/RoomList";
+import { ITimerRooms } from "../../../common/types/types";
+
+interface IPublicRoomRouter extends IPublicRoom {
+	isAdminMode: boolean;
+	timerRooms: ITimerRooms[];
+}
+
+const PublicRoomRouter = (props: IPublicRoomRouter): JSX.Element => {
+	const {
+		isBreak,
+		globalUsersConnected,
+		isConnected,
+		roomName,
+		isAdminMode,
+		timerRooms,
+	} = props;
+
+	const { themeGroup } = useContext(ThemeContext);
+
+	const { workGrey } = theme[themeGroup as keyof typeof theme];
+
+	if (roomName === "public-timers") {
+		return (
+			<>
+				<StyledTitle color={workGrey}>Public Timers</StyledTitle>
+				<RoomList
+					rooms={timerRooms}
+					isBreak={isBreak}
+					isAdminMode={isAdminMode}
+					roomName={roomName}
+				/>
+			</>
+		);
+	}
+
+	if (roomName === "admin") {
+		if (isAdminMode) {
+			return (
+				<>
+					<StyledTitle color={workGrey}>Admin</StyledTitle>
+					<RoomList
+						rooms={timerRooms}
+						isBreak={isBreak}
+						isAdminMode={isAdminMode}
+						roomName={roomName}
+					/>
+				</>
+			);
+		}
+	}
+
+	return (
+		<DefaultRoom
+			globalUsersConnected={globalUsersConnected}
+			isBreak={isBreak}
+			isConnected={isConnected}
+		/>
+	);
+};
+
+export default PublicRoomRouter;

src/Pages/StatRoom/StatRoomRouter.tsx

@@ -45,6 +45,7 @@ const StatRoomRouter = (props: IStatRoomRouterProps): JSX.Element => {
 			isBreak={isBreak}
 			globalUsersConnected={globalUsersConnected}
 			isConnected={isConnected}
+			roomName={roomName}
 		/>
 	);
 };

src/components/RoomList/RoomList.styled.tsx

@@ -65,3 +65,10 @@ export const TableContainer = styled.div`
 	border: 3px solid white;
 	border-radius: 50px;
 `;
+
+export const UserListDiv = styled.div`
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 5px;
+`;

src/components/RoomList/RoomList.tsx

@@ -9,32 +9,78 @@ import {
 	RoomListTableRow,
 	RoomListTableRowCell,
 	TableContainer,
+	UserListDiv,
 } from "./RoomList.styled";
 import { theme } from "../../../common/theme";
+import UserBubble from "../UserBubbles/UserBubble";
+import MultiUserBubble from "../UserBubbles/MultiUserBubble";
 
 interface IRoom {
 	room: string;
 	numUsers: number;
+	isPublic: boolean;
+	userList: string[];
 }
 
 interface IRoomList {
 	rooms: IRoom[];
 	isBreak: boolean;
+	isAdminMode: boolean;
+	roomName: string;
 }
 
 const ListRow = (props: {
 	room: IRoom;
 	textColor: string;
 	accentColor: string;
+	isAdminMode: boolean;
+	roomName: string;
 }): JSX.Element => {
-	const { room, textColor, accentColor } = props;
+	const { room, textColor, accentColor, isAdminMode, roomName } = props;
 	return (
 		<RoomListTableRow>
 			<RoomListTableRowCell color={textColor}>
 				{room.room}
 			</RoomListTableRowCell>
 			<RoomListTableRowCell color={textColor}>
-				{room.numUsers}
+				<UserListDiv>
+					{room.numUsers}
+
+					{room.userList.length > 0 &&
+						(room.userList.length < 5 ? (
+							room.userList.map((user: string) => (
+								<UserBubble
+									user={user}
+									key={
+										crypto.getRandomValues(
+											new Uint32Array(1)
+										)[0]
+									}
+									size={20}
+								/>
+							))
+						) : (
+							<>
+								{room.userList
+									.slice(0, 4)
+									.map((user: string) => (
+										<UserBubble
+											user={user}
+											key={
+												crypto.getRandomValues(
+													new Uint32Array(1)
+												)[0]
+											}
+											size={20}
+										/>
+									))}
+								<MultiUserBubble
+									users={room.userList.slice(4)}
+									size={20}
+								/>
+							</>
+						))}
+				</UserListDiv>
 			</RoomListTableRowCell>
 
 			<RoomListTableRowCell color={textColor}>
@@ -47,12 +93,18 @@ const ListRow = (props: {
 					Join
 				</RoomListTableButton>
 			</RoomListTableRowCell>
+
+			{isAdminMode && roomName === "admin" && (
+				<RoomListTableRowCell color={textColor}>
+					{room.isPublic ? "Public" : "Private"}
+				</RoomListTableRowCell>
+			)}
 		</RoomListTableRow>
 	);
 };
 
 const RoomList = (props: IRoomList): JSX.Element => {
-	const { rooms, isBreak } = props;
+	const { rooms, isBreak, isAdminMode, roomName } = props;
 
 	const { themeGroup } = useContext(ThemeContext);
 
@@ -73,6 +125,12 @@ const RoomList = (props: IRoomList): JSX.Element => {
 						<RoomListTableHeaderCell color={workGrey}>
 							Join
 						</RoomListTableHeaderCell>
+
+						{isAdminMode && roomName === "admin" && (
+							<RoomListTableHeaderCell color={workGrey}>
+								Public
+							</RoomListTableHeaderCell>
+						)}
 					</tr>
 				</RoomListTableHeader>
 				<RoomListTableBody>
@@ -90,6 +148,8 @@ const RoomList = (props: IRoomList): JSX.Element => {
 								key={room.room}
 								textColor={workGrey}
 								accentColor={isBreak ? breakAccent : workAccent}
+								isAdminMode={isAdminMode}
+								roomName={roomName}
 							/>
 						);
 					})}

src/components/UserBubbles/MultiUserBubble.tsx

@@ -1,14 +1,18 @@
 import { TooltipContainer, UserBubbleStyled } from "./UserBubble.styled";
 
-const MultiUserBubble = (props: { users: string[] }): JSX.Element => {
-	const { users } = props;
+const MultiUserBubble = (props: {
+	users: string[];
+	size: number;
+}): JSX.Element => {
+	const { users, size } = props;
 	return (
 		<TooltipContainer>
 			<UserBubbleStyled
 				$borderColor="brown"
 				data-tooltip-id="my-tooltip"
 				data-tooltip-html={users.join("<br />")}
 				data-tooltip-place="top"
+				$size={size}
 			>
 				{`${users.length}+`}
 			</UserBubbleStyled>

src/components/UserBubbles/UserBubbles.tsx

@@ -24,7 +24,10 @@ const UserBubbles = (props: { userListInRoom: string[] }): JSX.Element => {
 							size={30}
 						/>
 					))}
-					<MultiUserBubble users={userListInRoom.slice(6)} />
+					<MultiUserBubble
+						users={userListInRoom.slice(6)}
+						size={30}
+					/>
 				</>
 			)}
 		</UserBubblesContainer>