Fixed types

leaky-ships/pages/api/game/running.ts

@@ -23,7 +23,20 @@ export const gameIncludes = {
   },
 }
 
-export const getAnyRunningGame = (id: string) => {
+export const getAnyGame = (gameId: string) => {
+  const game = prisma.game.findFirst({
+    where: {
+      NOT: {
+        state: "ended",
+      },
+      id: gameId,
+    },
+    ...gameIncludes,
+  })
+  return game
+}
+
+export const getAnyRunningGame = (userId: string) => {
   const game = prisma.game.findFirst({
     where: {
       NOT: {
@@ -31,7 +44,7 @@ export const getAnyRunningGame = (id: string) => {
       },
       users: {
         some: {
-          userId: id,
+          userId,
         },
       },
     },

leaky-ships/pages/lobby/[gameId].tsx

@@ -2,16 +2,17 @@ import BurgerMenu from "../../components/BurgerMenu"
 import LobbyFrame from "../../components/Lobby/LobbyFrame"
 import Settings from "../../components/Lobby/SettingsFrame/Settings"
 import Logo from "../../components/Logo"
-import { Data, composeBody, getAnyRunningGame } from "../api/game/running"
+import { composeBody, getAnyGame } from "../api/game/running"
 import useGameState from "@lib/hooks/useGameState"
+import { GamePropsSchema } from "@lib/zodSchemas"
 import classNames from "classnames"
 import { GetServerSideProps } from "next"
 import Head from "next/head"
 import { useState } from "react"
 
-export default function Home(props: Data) {
+export default function Home(props: GamePropsSchema) {
+  useGameState(props)
   const [settings, setSettings] = useState(false)
-  const { gameProps, setGameProps } = useGameState(props)
 
   return (
     <div className="h-full bg-theme">
@@ -36,11 +37,13 @@ export default function Home(props: Data) {
   )
 }
 
-export const getServerSideProps: GetServerSideProps<Data> = async (context) => {
+export const getServerSideProps: GetServerSideProps<GamePropsSchema> = async (
+  context
+) => {
   const { gameId } = context.query
 
   const gameIdString = Array.isArray(gameId) ? gameId[0] : gameId
-  const game = await getAnyRunningGame(gameIdString ?? "")
+  const game = await getAnyGame(gameIdString ?? "")
   if (!game)
     return {
       redirect: {

leaky-ships/pages/start.tsx

@@ -1,6 +1,7 @@
 import BurgerMenu from "../components/BurgerMenu"
 import Logo from "../components/Logo"
 import OptionButton from "../components/OptionButton"
+import { authOptions } from "./api/auth/[...nextauth]"
 import { faEye, faLeftLong } from "@fortawesome/pro-regular-svg-icons"
 import { faPlus, faUserPlus } from "@fortawesome/pro-solid-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
@@ -8,13 +9,15 @@ import useGameState from "@lib/hooks/useGameState"
 import { GamePropsSchema } from "@lib/zodSchemas"
 import status from "http-status"
 import { GetServerSideProps } from "next"
+import { Session, getServerSession } from "next-auth"
 import { useRouter } from "next/router"
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useEffect, useMemo, useState } from "react"
 import OtpInput from "react-otp-input"
 import { toast } from "react-toastify"
 
 interface Props {
   q: string | string[] | undefined
+  session: Session | null
 }
 
 function isInputOnlyNumbers(input: string) {
@@ -48,11 +51,16 @@ const handleConfirmation = () => {
   )
 }
 
-export default function Start({ q }: Props) {
+export default function Start({ q, session: initSession }: Props) {
   const [otp, setOtp] = useState("")
   const { gameProps, setGameProps } = useGameState()
   const router = useRouter()
-  const { session } = useGameState()
+  const { session: sessionUsed } = useGameState()
+
+  const session = useMemo(
+    () => (sessionUsed ? sessionUsed : initSession),
+    [sessionUsed, initSession]
+  )
 
   const gameFetch = useCallback(
     async (pin?: string) => {
@@ -81,7 +89,7 @@ export default function Start({ q }: Props) {
 
       setGameProps(res)
 
-      await toast.promise(router.push("/lobby"), {
+      await toast.promise(router.push("/lobby/" + res.payload.game?.id), {
         pending: {
           render: "Raum wird beigetreten",
         },
@@ -157,7 +165,22 @@ export default function Start({ q }: Props) {
                 "Raum beitreten"
               )}
             </OptionButton>
-            <OptionButton icon={faEye}>Zuschauen</OptionButton>
+            <OptionButton icon={faEye}>
+              {q === "watch" && session?.user ? (
+                <OtpInput
+                  shouldAutoFocus
+                  containerStyle={{ color: "initial" }}
+                  value={otp}
+                  onChange={setOtp}
+                  numInputs={4}
+                  placeholder="0000"
+                  renderSeparator={<span>-</span>}
+                  renderInput={(props) => <input {...props} />}
+                />
+              ) : (
+                "Zuschauen"
+              )}
+            </OptionButton>
           </div>
         </div>
       </div>
@@ -168,7 +191,8 @@ export default function Start({ q }: Props) {
 export const getServerSideProps: GetServerSideProps<Props> = async (
   context
 ) => {
+  const session = await getServerSession(context.req, context.res, authOptions)
   const { q } = context.query
 
-  return { props: { q } }
+  return { props: { q, session } }
 }