generated from Blazity/next-enterprise
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
b026ad5
commit a859160
Showing
3 changed files
with
186 additions
and
98 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,108 +1,147 @@ | ||
| import { onAuthStateChanged, User } from "firebase/auth" | ||
| import Head from "next/head" | ||
| import { useRouter } from "next/router" | ||
| import React, { useEffect, useState } from "react" | ||
| import { useWebSocket } from "context/WebSocketContext" | ||
| import { auth } from "../../firebase" | ||
|
|
||
| import Head from "next/head"; | ||
| import { useRouter } from "next/router"; | ||
| import { useEffect, useState } from "react"; | ||
| import { useWebSocket } from "context/WebSocketContext"; | ||
| import { auth } from "../../firebase"; | ||
| import { User } from "firebase/auth"; | ||
|
|
||
| interface Data { | ||
| teamAScore: number; | ||
| teamBScore: number; | ||
| teamAFouls: number; | ||
| teamBFouls: number; | ||
| currentPeriod: number; | ||
| teamAName: string; | ||
| teamBName: string; | ||
| } | ||
| const Public = () => { | ||
| const { messages, sendMessage } = useWebSocket() | ||
| const [userAccount, setUserAccount] = useState<User | null>(null) | ||
| const router = useRouter() | ||
| const { messages, sendMessage, connectionStatus } = useWebSocket(); | ||
| const router = useRouter(); | ||
|
|
||
| const [teamAScore, setTeamAScore] = useState(0) | ||
| const [teamBScore, setTeamBScore] = useState(0) | ||
| const [teamAFouls, setTeamAFouls] = useState(0) | ||
| const [teamBFouls, setTeamBFouls] = useState(0) | ||
| const [currentPeriod, setCurrentPeriod] = useState(1) | ||
| const [teamAScore, setTeamAScore] = useState(0); | ||
| const [teamBScore, setTeamBScore] = useState(0); | ||
| const [teamAFouls, setTeamAFouls] = useState(0); | ||
| const [teamBFouls, setTeamBFouls] = useState(0); | ||
| const [currentPeriod, setCurrentPeriod] = useState(1); | ||
| const [teamAName, setTeamAName] = useState("Team A"); | ||
| const [teamBName, setTeamBName] = useState("Team B"); | ||
|
|
||
| const [teamAName, setTeamAName] = useState("Team A") | ||
| const [teamBName, setTeamBName] = useState("Team B") | ||
| const [userAccount, setUserAccount] = useState<User | null>(null) | ||
|
|
||
| const [ignore, setIgnore] = useState(false); | ||
|
|
||
| const [countFix, setCountFix] = useState(0); | ||
|
|
||
| useEffect(() => { | ||
| onAuthStateChanged(auth, (user) => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| if (user) { | ||
| setUserAccount(user) | ||
| } else { | ||
| setUserAccount(null) | ||
| } | ||
| }) | ||
| }, []) | ||
| }); | ||
|
|
||
| return () => { | ||
| unsubscribe(); | ||
| }; | ||
| }, []); | ||
|
|
||
| // Get initial data | ||
| useEffect(() => { | ||
|
|
||
| if (ignore) return; | ||
|
|
||
| if (connectionStatus !== "Connected") return; | ||
|
|
||
| if (!userAccount) return; | ||
|
|
||
| console.log("Sending get message") | ||
|
|
||
| const message = { | ||
| action: "get", | ||
| boardId: userAccount?.uid, | ||
| } | ||
| sendMessage(JSON.stringify(message)) | ||
| setIgnore(true) | ||
| }, [ignore, connectionStatus, userAccount, sendMessage]); | ||
|
|
||
|
|
||
| useEffect(() => { | ||
| messages.forEach((message) => { | ||
| const messageJson = JSON.parse(message) as { boardId: string; boardData: string } | ||
|
|
||
| console.log(messageJson) | ||
|
|
||
| if (messageJson.boardId === userAccount?.uid) { | ||
| const data = JSON.parse(messageJson.boardData) as { | ||
| teamAScore: number | ||
| teamBScore: number | ||
| teamAFouls: number | ||
| teamBFouls: number | ||
| currentPeriod: number | ||
| teamAName: string | ||
| teamBName: string | ||
| } | ||
|
|
||
| setTeamAScore(data.teamAScore) | ||
| setTeamBScore(data.teamBScore) | ||
| setTeamAFouls(data.teamAFouls) | ||
| setTeamBFouls(data.teamBFouls) | ||
| setCurrentPeriod(data.currentPeriod) | ||
| setTeamAName(data.teamAName) | ||
| setTeamBName(data.teamBName) | ||
|
|
||
| const messageJson = JSON.parse(message) as { | ||
| boardId?: string; | ||
| boardData?: string; | ||
| }; | ||
|
|
||
| console.log(messageJson) | ||
|
|
||
| if (messageJson.boardId && messageJson.boardData) { | ||
| const data = JSON.parse(messageJson.boardData) as Data; | ||
|
|
||
| setTeamAScore(data.teamAScore); | ||
| setTeamBScore(data.teamBScore); | ||
| setTeamAFouls(data.teamAFouls); | ||
| setTeamBFouls(data.teamBFouls); | ||
| setCurrentPeriod(data.currentPeriod); | ||
| setTeamAName(data.teamAName); | ||
| setTeamBName(data.teamBName); | ||
| } | ||
| }) | ||
|
|
||
| }); | ||
|
|
||
| onAuthStateChanged(auth, (user) => { | ||
| const unsubscribe = auth.onAuthStateChanged((user) => { | ||
| if (!user) { | ||
| router.push("/login") | ||
| router.push("/login"); | ||
| } | ||
| }) | ||
| }, [router, sendMessage, messages, userAccount?.uid]) | ||
| }); | ||
|
|
||
| return () => { | ||
| unsubscribe(); | ||
| }; | ||
| }, [router, messages]); | ||
|
|
||
| return ( | ||
| <> | ||
| <Head> | ||
| <title>ScoreConnect Public Page</title> | ||
| </Head> | ||
|
|
||
| <body | ||
| className="flex flex-col items-center justify-center h-screen bg-gray-100" | ||
| > | ||
|
|
||
| <h1 className="text-4xl font-bold">ScoreConnect</h1> | ||
| <div className="flex flex-col items-center justify-center"> | ||
| <div className="flex flex-row items-center justify-center"> | ||
| <h2 className="text-2xl font-bold">{teamAName}</h2> | ||
|
|
||
| <hr className="w-1/4 mx-4" /> | ||
|
|
||
| <h2 className="text-2xl font-bold">{teamAScore}</h2> | ||
| <hr className="w-1/4 mx-4" /> | ||
|
|
||
| <h2 className="text-2xl font-bold">{teamAFouls}</h2> | ||
| </div> | ||
| <div className="flex flex-row items-center justify-center"> | ||
| <h2 className="text-2xl font-bold">{teamBName}</h2> | ||
|
|
||
| <hr className="w-1/4 mx-4" /> | ||
| <h2 className="text-2xl font-bold">{teamBScore}</h2> | ||
| <hr className="w-1/4 mx-4" /> | ||
| <h2 className="text-2xl font-bold">{teamBFouls}</h2> | ||
| </div> | ||
| <div className="flex flex-row items-center justify-center"> | ||
| <h2 className="text-2xl font-bold">{currentPeriod}</h2> | ||
| <div className="flex flex-col items-center justify-center h-screen bg-gray-100 z-10"> | ||
| <div className="container mx-auto"> | ||
| <div className="grid grid-cols-3 gap-4"> | ||
| <div className="col-span-1"> | ||
| <div className="bg-gray-900 text-white rounded-lg p-4"> | ||
| <div className="text-center mb-4"> | ||
| <h2 className="text-lg font-semibold">{teamAName}</h2> | ||
| <p className="text-xs">Score</p> | ||
| <p className="text-3xl font-bold">{teamAScore}</p> | ||
| </div> | ||
| <div className="text-center"> | ||
| <p className="text-xs">Fouls</p> | ||
| <p className="text-3xl font-bold">{teamAFouls}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className="col-span-1 flex justify-center items-center"> | ||
| <div className="text-center"> | ||
| <p className="text-6xl font-bold">:</p> | ||
| <p className="text-2xl">Period {currentPeriod}</p> | ||
| </div> | ||
| </div> | ||
| <div className="col-span-1"> | ||
| <div className="bg-gray-900 text-white rounded-lg p-4"> | ||
| <div className="text-center mb-4"> | ||
| <h2 className="text-lg font-semibold">{teamBName}</h2> | ||
| <p className="text-xs">Score</p> | ||
| <p className="text-3xl font-bold">{teamBScore}</p> | ||
| </div> | ||
| <div className="text-center"> | ||
| <p className="text-xs">Fouls</p> | ||
| <p className="text-3xl font-bold">{teamBFouls}</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </div> | ||
| </> | ||
| ) | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| export default Public | ||
| export default Public; |