mirror of
https://github.com/Steffo99/sophon.git
synced 2024-12-24 15:54:21 +00:00
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
import {faUsersCog} from "@fortawesome/free-solid-svg-icons"
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
|
|
import {Box, Heading, Idiomatic, ListUnordered, UAnnotation} from "@steffo/bluelib-react"
|
|
import * as React from "react"
|
|
import {useAuthorizationContext} from "../../contexts/authorization"
|
|
import {useCacheContext} from "../../contexts/cache"
|
|
import {useGroupContext} from "../../contexts/group"
|
|
|
|
|
|
export function GroupMembersBox(): JSX.Element | null {
|
|
const authorization = useAuthorizationContext()
|
|
const cache = useCacheContext()
|
|
const group = useGroupContext()
|
|
|
|
if(!cache) {
|
|
return null
|
|
}
|
|
if(!cache.users) {
|
|
return null
|
|
}
|
|
if(!group) {
|
|
return null
|
|
}
|
|
|
|
const trueMembers = [...new Set([group.value.owner, ...group.value.members])]
|
|
|
|
const users = trueMembers.map((id, index) => {
|
|
const user = cache.getUserById(id)
|
|
|
|
if(!user) {
|
|
return null
|
|
}
|
|
|
|
const username = id === authorization?.state.user?.id ? <UAnnotation>{user.value.username}</UAnnotation> : user.value.username
|
|
|
|
return (
|
|
<ListUnordered.Item bluelibClassNames={index === 0 ? "color-blue" : ""} key={id}>
|
|
{username}
|
|
</ListUnordered.Item>
|
|
)
|
|
})
|
|
|
|
return (
|
|
<Box>
|
|
<Heading level={3}>
|
|
<FontAwesomeIcon icon={faUsersCog}/> Members of <Idiomatic>{group.value.name}</Idiomatic>
|
|
</Heading>
|
|
<ListUnordered>
|
|
{users}
|
|
</ListUnordered>
|
|
</Box>
|
|
)
|
|
}
|