Some after work from last commit

leaky-ships/pages/start.tsx

@@ -1,25 +1,17 @@
 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"
 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, 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) {
   return /^\d+$/.test(input)
 }
@@ -51,16 +43,21 @@ const handleConfirmation = () => {
   )
 }
 
-export default function Start({ q, session: initSession }: Props) {
+export default function Start() {
   const [otp, setOtp] = useState("")
-  const { gameProps, setGameProps } = useGameState()
+  const { session, setGameProps } = useGameState()
   const router = useRouter()
-  const { session: sessionUsed } = useGameState()
 
-  const session = useMemo(
-    () => (sessionUsed ? sessionUsed : initSession),
-    [sessionUsed, initSession]
-  )
+  const query = useMemo((): { join?: boolean; watch?: boolean } => {
+    switch (router.query.q) {
+      case "join":
+        return { join: true }
+      case "watch":
+        return { watch: true }
+      default:
+        return {}
+    }
+  }, [router])
 
   const gameFetch = useCallback(
     async (pin?: string) => {
@@ -71,25 +68,29 @@ export default function Start({ q, session: initSession }: Props) {
         .then(isAuthenticated)
         .then((game) => GamePropsSchema.parse(game))
 
+      const toastId = !pin ? "erstellt" : "angefragt"
       const res = await toast.promise(gamePromise, {
         pending: {
-          render: "Raum wird " + (!pin ? "erstellt" : "angefragt"),
+          render: "Raum wird " + toastId,
+          toastId,
         },
         success: {
           render: "Raum " + (!pin ? "erstellt" : "angefragt") + " 👌",
           type: "info",
           theme: "colored",
+          toastId,
         },
         error: {
           render: "Es ist ein Fehler aufgetreten 🤯",
           type: "error",
           theme: "colored",
+          toastId,
         },
       })
 
       setGameProps(res)
 
-      await toast.promise(router.push("/lobby/" + res.payload.game?.id), {
+      await toast.promise(router.push("/lobby"), {
         pending: {
           render: "Raum wird beigetreten",
         },
@@ -150,7 +151,7 @@ export default function Start({ q, session: initSession }: Props) {
               icon={faUserPlus}
               disabled={!session}
             >
-              {q === "join" && session?.user ? (
+              {query.join && session?.user ? (
                 <OtpInput
                   shouldAutoFocus
                   containerStyle={{ color: "initial" }}
@@ -166,7 +167,7 @@ export default function Start({ q, session: initSession }: Props) {
               )}
             </OptionButton>
             <OptionButton icon={faEye}>
-              {q === "watch" && session?.user ? (
+              {query.watch && session?.user ? (
                 <OtpInput
                   shouldAutoFocus
                   containerStyle={{ color: "initial" }}
@@ -187,12 +188,3 @@ export default function Start({ q, session: initSession }: Props) {
     </div>
   )
 }
-
-export const getServerSideProps: GetServerSideProps<Props> = async (
-  context
-) => {
-  const session = await getServerSession(context.req, context.res, authOptions)
-  const { q } = context.query
-
-  return { props: { q, session } }
-}