You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
74 lines
1.7 KiB
74 lines
1.7 KiB
import React, { useState, ChangeEvent } from 'react'
|
|
|
|
import faker from 'faker'
|
|
import debounce from 'lodash/debounce'
|
|
|
|
import { RoomWrapper, H4, Title, Button, Grid, Input } from './Elements'
|
|
|
|
import Client from './Client'
|
|
|
|
interface User {
|
|
id: string
|
|
name: string
|
|
}
|
|
|
|
interface RoomProps {
|
|
slug: string
|
|
removeRoom: () => void
|
|
}
|
|
|
|
const createUser = (): User => ({
|
|
id: faker.random.uuid(),
|
|
name: `${faker.name.firstName()} ${faker.name.lastName()}`
|
|
})
|
|
|
|
const Room: React.FC<RoomProps> = ({ slug, removeRoom }) => {
|
|
const [users, setUsers] = useState<User[]>([createUser(), createUser()])
|
|
const [roomSlug, setRoomSlug] = useState<string>(slug)
|
|
const [isRemounted, setRemountState] = useState(false)
|
|
|
|
const remount = debounce(() => {
|
|
setRemountState(true)
|
|
setTimeout(setRemountState, 50, false)
|
|
}, 300)
|
|
|
|
const changeSlug = (e: ChangeEvent<HTMLInputElement>) => {
|
|
setRoomSlug(e.target.value)
|
|
remount()
|
|
}
|
|
|
|
const addUser = () => setUsers(users => users.concat(createUser()))
|
|
|
|
const removeUser = (userId: string) =>
|
|
setUsers(users => users.filter((u: User) => u.id !== userId))
|
|
|
|
return (
|
|
<RoomWrapper>
|
|
<Title>
|
|
<H4>Document slug:</H4>
|
|
<Input type="text" value={roomSlug} onChange={changeSlug} />
|
|
<Button type="button" onClick={addUser}>
|
|
Add random user
|
|
</Button>
|
|
<Button type="button" onClick={removeRoom}>
|
|
Remove Room
|
|
</Button>
|
|
</Title>
|
|
<Grid>
|
|
{users.map((user: User) =>
|
|
isRemounted ? null : (
|
|
<Client
|
|
{...user}
|
|
slug={roomSlug}
|
|
key={user.id}
|
|
removeUser={removeUser}
|
|
/>
|
|
)
|
|
)}
|
|
</Grid>
|
|
</RoomWrapper>
|
|
)
|
|
}
|
|
|
|
export default Room
|