diff --git a/common/common.ts b/common/common.ts index 134ecae..6e0f816 100644 --- a/common/common.ts +++ b/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 +); diff --git a/common/types/types.ts b/common/types/types.ts index 5dd2d25..57fa776 100644 --- a/common/types/types.ts +++ b/common/types/types.ts @@ -19,4 +19,5 @@ export interface ITimerRooms { numUsers: number; userList: string[]; room: string; + isPublic: boolean; } diff --git a/src/Pages/StatRoom/PublicRoom.tsx b/src/Pages/StatRoom/PublicRoom.tsx index b1e2d78..8ddf257 100644 --- a/src/Pages/StatRoom/PublicRoom.tsx +++ b/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([]); + + const isAdminMode = useContext(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} /> - Public Timers - +