Fixed types

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 } }
 }