open-schnick
7d17cfa28c
All checks were successful
continuous-integration/drone/push Build is passing
61 lines
2.3 KiB
TypeScript
61 lines
2.3 KiB
TypeScript
import SidebarHeader from './SidebarHeader'
|
|
import useSidebarVisibility from './useSidebarVisibility'
|
|
import './Sidebar.css'
|
|
import { UsersData } from '../../background/types/roomData'
|
|
import useMeetingStarted from '../../hooks/useMeetingStarted'
|
|
import { useRoomName } from '../../hooks/useRoomName'
|
|
import Chat from '../chat/Chat'
|
|
|
|
interface Props {
|
|
usersData: UsersData
|
|
sendMessage: Function
|
|
}
|
|
|
|
function Sidebar(props: Props) {
|
|
const { sidebarVisibility, toggleSidebarVisibility, sidebarToggleText } = useSidebarVisibility()
|
|
const [_, setMeetingStarted] = useMeetingStarted()
|
|
const { updateAndSubmitRoomName: updateAndSubmitRoomName } = useRoomName()
|
|
|
|
return (
|
|
<div className={`sidebar sidebar-${sidebarVisibility}`}>
|
|
<SidebarHeader sidebarVisibility={sidebarVisibility} />
|
|
<div className="sidebar-body">
|
|
{props.usersData.roomsData.map((roomData) => {
|
|
return (
|
|
<>
|
|
<h3>
|
|
<a
|
|
href="#"
|
|
onClick={() => {
|
|
updateAndSubmitRoomName(roomData.roomName)
|
|
setMeetingStarted(true)
|
|
}}
|
|
>
|
|
{roomData.roomName}
|
|
</a>
|
|
</h3>
|
|
{roomData.participants.map((participant) => (
|
|
<div key={participant.jid}> {participant.displayName} </div>
|
|
))}
|
|
</>
|
|
)
|
|
})}
|
|
</div>
|
|
<div>
|
|
<h3> No room</h3>
|
|
{props.usersData.usersWithOutRoom.map((user) => (
|
|
<div key={user.uuid}>{user.name}</div>
|
|
))}
|
|
</div>
|
|
<div className="sidebar-footer">
|
|
{sidebarVisibility === 'full' && <Chat sendMessage={props.sendMessage} />}
|
|
<button className="sidebar-toggle" onClick={toggleSidebarVisibility}>
|
|
{sidebarToggleText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Sidebar
|