Rahoot/packages/web/src/components/game/join/Username.tsx

"use client"

import { STATUS } from "@rahoot/common/types/game/status"
import Button from "@rahoot/web/components/Button"
import Form from "@rahoot/web/components/Form"
import Input from "@rahoot/web/components/Input"
import BrandShell from "@rahoot/web/components/game/join/BrandShell"
import { useEvent, useSocket } from "@rahoot/web/contexts/socketProvider"
import { usePlayerStore } from "@rahoot/web/stores/player"

import { useRouter } from "next/navigation"
import { KeyboardEvent, useState } from "react"

const Username = () => {
  const { socket } = useSocket()
  const { gameId, login, setStatus } = usePlayerStore()
  const router = useRouter()
  const [username, setUsername] = useState("")

  const handleLogin = () => {
    if (!gameId) {
      return
    }

    socket?.emit("player:login", { gameId, data: { username } })
  }

  const handleKeyDown = (event: KeyboardEvent) => {
    if (event.key === "Enter") {
      handleLogin()
    }
  }

  useEvent("game:successJoin", (gameId) => {
    setStatus(STATUS.WAIT, { text: "Waiting for the players" })
    login(username)
    try {
      localStorage.setItem("last_game_id", gameId)
      localStorage.setItem("last_username", username)
    } catch {}

    router.replace(`/game/${gameId}`)
  })

  return (
    <BrandShell>
      <Form>
        <Input
          onChange={(e) => setUsername(e.target.value)}
          onKeyDown={handleKeyDown}
          placeholder="Username here"
        />
        <Button onClick={handleLogin}>Submit</Button>
      </Form>
    </BrandShell>
  )
}

export default Username