File size: 1,558 Bytes
d092f57 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import { FC, useEffect, useRef, useState } from "react"
import { RoomState, UserState } from "../../lib/types"
import { Socket } from "socket.io-client"
import { ClientToServerEvents, ServerToClientEvents } from "../../lib/socket"
import UserItem from "./UserItem"
interface Props {
socket: Socket<ServerToClientEvents, ClientToServerEvents>
}
const UserList: FC<Props> = ({ socket }) => {
const [users, _setUsers] = useState<UserState[]>([])
const userRef = useRef(users)
const setUsers = (newUsers: UserState[]) => {
userRef.current = newUsers
_setUsers(newUsers)
}
const [owner, _setOwner] = useState("")
const ownerRef = useRef(owner)
const setOwner = (newOwner: string) => {
ownerRef.current = newOwner
_setOwner(newOwner)
}
useEffect(() => {
socket.on("update", (room: RoomState) => {
if (ownerRef.current !== room.ownerId) {
setOwner(room.ownerId)
}
setUsers(room.users)
})
socket.emit("fetch")
}, [socket])
return (
<div
className={
"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-1"
}
>
{users.map((user) => (
<UserItem
user={user}
socketId={socket.id}
ownerId={owner}
key={user.uid}
updateName={(name) => {
const newUser = JSON.parse(JSON.stringify(user))
newUser.name = name
socket.emit("updateUser", newUser)
}}
/>
))}
</div>
)
}
export default UserList
|