Add public admin pages (#84)

* add page exceptions and move pages to pages folder

* move timerlist component

* add page exceptions and move pages to pages folder

* checkin

* Created RoomList component

* Center roomList component

* fix css and add more public page func (#82)

* remove css

* fix table

* checkin

* checkin

* checkin

* checkin

* checkin

* Update App.tsx

* Update RoomList.styled.tsx

* 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
+);

src/App.tsx

@@ -12,6 +12,7 @@ import UsernameContext from "./components/Username/UsernameContext";
 import ValidRoom from "./components/Room/ValidRoom";
 import DefaultRoom from "./components/DefaultRoom/DefaultRoom";
 import { tracker } from "../common/common";
+import StatRoomRouter from "./Pages/StatRoom/StatRoomRouter";
 
 const App = (): JSX.Element => {
 	const [globalUsersConnected, setGlobalUsersConnected] = useState<number>(0);
@@ -58,6 +59,12 @@ const App = (): JSX.Element => {
 		socket.on("connect", onConnect);
 		socket.on("disconnect", onDisconnect);
 
+		socket.on("require-admin-auth", (callback) => {
+			callback({
+				password: localStorage.getItem("adminPassword"),
+			});
+		});
+
 		return () => {
 			socket.off("globalUsers", onGlobalUsers);
 			socket.off("connect", onConnect);
@@ -114,6 +121,37 @@ const App = (): JSX.Element => {
 								}
 							/>
 
+							<Route
+								path="admin"
+								element={
+									<StatRoomRouter
+										roomName="admin"
+										userName={userName}
+										setIsConnected={setIsConnected}
+										isBreak={isBreak}
+										isConnected={isConnected}
+										globalUsersConnected={
+											globalUsersConnected
+										}
+									/>
+								}
+							/>
+							<Route
+								path="public-timers"
+								element={
+									<StatRoomRouter
+										roomName="public-timers"
+										userName={userName}
+										setIsConnected={setIsConnected}
+										isBreak={isBreak}
+										isConnected={isConnected}
+										globalUsersConnected={
+											globalUsersConnected
+										}
+									/>
+								}
+							/>
+
 							<Route
 								path="/:room"
 								element={

src/Pages/StatRoom/PublicRoom.tsx

@@ -0,0 +1,73 @@
+import { useContext, useEffect, useState } from "react";
+import { ThemeContext } from "styled-components";
+import socket from "../../components/Socket/socket";
+import { Centered } from "./StatRoom.styled";
+import Header from "../../components/Header/Header";
+
+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";
+import { ITimerRooms } from "../../components/RoomList/RoomList";
+import { GlobalStyle } from "../../components/Room/Room.styled";
+
+export interface IPublicRoom {
+	isBreak: boolean;
+	globalUsersConnected: number;
+	isConnected: boolean;
+	roomName: string;
+}
+
+export const PublicRoom = (props: IPublicRoom): JSX.Element => {
+	const { isBreak, globalUsersConnected, isConnected, roomName } = props;
+	const [timerRooms, setTimerRooms] = useState<ITimerRooms[]>([]);
+
+	const isAdminMode = useContext<boolean>(AdminContext);
+
+	const onPublicTimers = ({
+		roomStats,
+	}: {
+		roomStats: ITimerRooms[];
+	}): void => {
+		setTimerRooms(roomStats);
+	};
+
+	const { themeGroup } = useContext(ThemeContext);
+
+	const { workBackground, breakBackground } =
+		theme[themeGroup as keyof typeof theme];
+
+	useEffect(() => {
+		socket.on("publicTimers", onPublicTimers);
+
+		return () => {
+			socket.off("publicTimers", onPublicTimers);
+		};
+	}, []);
+
+	return (
+		<>
+			<Header isBreak={isBreak} />
+			<GlobalStyle
+				backColor={!isBreak ? workBackground : breakBackground}
+			/>
+			<Centered>
+				<PublicRoomRouter
+					isBreak={isBreak}
+					globalUsersConnected={globalUsersConnected}
+					isConnected={isConnected}
+					roomName={roomName}
+					isAdminMode={isAdminMode}
+					timerRooms={timerRooms}
+				/>
+			</Centered>
+			<Footer
+				numUsers={globalUsersConnected}
+				isBreak={isBreak}
+				connectionStatus={<ConnectionState isConnected={isConnected} />}
+			/>
+		</>
+	);
+};

src/Pages/StatRoom/PublicRoomRouter.tsx

@@ -0,0 +1,68 @@
+import { ThemeContext } from "styled-components";
+import { useContext } from "react";
+
+import { IPublicRoom } from "./PublicRoom";
+import { theme } from "../../../common/theme";
+import { StyledTitle } from "./StatRoom.styled";
+import RoomList, { ITimerRooms } from "../../components/RoomList/RoomList";
+import DefaultRoom from "../../components/DefaultRoom/DefaultRoom";
+
+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/StatRoom.styled.tsx

@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const Centered = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100vh;
+
+	flex-direction: column;
+`;
+
+export const StyledTitle = styled.h2<{ color: string }>`
+	color: ${({ color }): string => color};
+`;

src/Pages/StatRoom/StatRoomRouter.tsx

@@ -0,0 +1,53 @@
+import { useEffect } from "react";
+import socket from "../../components/Socket/socket";
+import { PublicRoom } from "./PublicRoom";
+
+interface IStatRoomRouterProps {
+	setIsConnected: (isConnected: boolean) => void;
+	roomName: string;
+	userName: string;
+	isBreak: boolean;
+	globalUsersConnected: number;
+	isConnected: boolean;
+}
+
+const StatRoomRouter = (props: IStatRoomRouterProps): JSX.Element => {
+	const {
+		setIsConnected,
+		roomName,
+		userName,
+		isBreak,
+		globalUsersConnected,
+		isConnected,
+	} = props;
+
+	const onConnect = (): void => {
+		socket.emit("join", { roomName, userName: userName || "defaultUser" });
+		setIsConnected(true);
+	};
+
+	const onDisconnect = (): void => {
+		setIsConnected(false);
+	};
+
+	useEffect(() => {
+		socket.on("connect", onConnect);
+		socket.on("disconnect", onDisconnect);
+
+		return () => {
+			socket.off("connect", onConnect);
+			socket.off("disconnect", onDisconnect);
+		};
+	}, []);
+
+	return (
+		<PublicRoom
+			isBreak={isBreak}
+			globalUsersConnected={globalUsersConnected}
+			isConnected={isConnected}
+			roomName={roomName}
+		/>
+	);
+};
+
+export default StatRoomRouter;

src/components/Controls/TimerControls.styled.tsx

@@ -1,6 +1,7 @@
 import { BiAlarmAdd } from "react-icons/bi";
 import { BsFillShareFill } from "react-icons/bs";
 import { RxOpenInNewWindow } from "react-icons/rx";
+import { IoSettingsSharp } from "react-icons/io5";
 import styled from "styled-components";
 
 export const StyledButtonRow = styled.div<{
@@ -24,6 +25,8 @@ export const StyledShareIcon = styled(BsFillShareFill)`
 	}
 `;
 
+export const StyledSettingsIcon = styled(IoSettingsSharp)``;
+
 export const StyledReopenIcon = styled(RxOpenInNewWindow)`
 	@media (max-width: 300px), (max-height: 500px) {
 		display: none;

src/components/Controls/TimerControls.tsx

@@ -6,6 +6,7 @@ import {
 	StyledAddTimerIcon,
 	StyledButtonRow,
 	StyledReopenIcon,
+	StyledSettingsIcon,
 	StyledShareIcon,
 } from "./TimerControls.styled";
 import WorkBreakButton from "../TimerButton/WorkBreakButton";
@@ -22,6 +23,7 @@ interface TimerControlProps {
 	setIsTimerAddModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 	showWorkButtonOnMobile: boolean;
 	iconColor: string;
+	setIsSettingsModalOpen: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
 const TimerControls = ({
@@ -36,6 +38,7 @@ const TimerControls = ({
 	isBreak,
 	showWorkButtonOnMobile,
 	iconColor,
+	setIsSettingsModalOpen,
 }: TimerControlProps): JSX.Element => {
 	return (
 		<StyledButtonRow show={isLoaded} iconColor={iconColor}>
@@ -123,6 +126,22 @@ const TimerControls = ({
 				data-tooltip-place="top"
 			/>
 
+			<StyledSettingsIcon
+				size="30px"
+				onClick={(): void => {
+					setIsSettingsModalOpen(true);
+
+					// react ga
+					ReactGA.event({
+						category: "Timer",
+						action: "Settings",
+					});
+				}}
+				data-tooltip-id="my-tooltip"
+				data-tooltip-content="Settings"
+				data-tooltip-place="top"
+			/>
+
 			{showWorkButtonOnMobile ? (
 				<WorkBreakButton
 					roomName={roomName}

src/components/LandingPage/LandingPage.styled.tsx

@@ -32,8 +32,7 @@ export const Center = styled.div`
 `;
 
 export const Button = styled(StyledButton)`
-	// push to the left
-	margin-right: 40px;
+	margin-right: 20px;
 `;
 
 export const StyledDivRow = styled.div`
@@ -52,6 +51,14 @@ export const StyledDivSpacer = styled.div`
 	gap: 20px;
 `;
 
+export const StyledJoinRow = styled.div`
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+`;
+
 export const StyledBottomText = styled.div`
 	position: absolute;
 	bottom: 60px;