1
Fork 0
mirror of https://github.com/Steffo99/sophon.git synced 2024-12-23 23:34:21 +00:00
sophon/frontend/src/components/group/GroupMembersBox.tsx

54 lines
1.6 KiB
TypeScript
Raw Normal View History

2021-10-13 03:21:38 +00:00
import {faUsersCog} from "@fortawesome/free-solid-svg-icons"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"
import {Box, Heading, Idiomatic, ListUnordered, UAnnotation} from "@steffo/bluelib-react"
2021-10-12 02:40:48 +00:00
import * as React from "react"
2021-10-13 03:21:38 +00:00
import {useAuthorizationContext} from "../../contexts/authorization"
2021-10-12 02:40:48 +00:00
import {useCacheContext} from "../../contexts/cache"
import {useGroupContext} from "../../contexts/group"
2021-10-12 02:40:48 +00:00
export function GroupMembersBox(): JSX.Element | null {
2021-10-13 03:21:38 +00:00
const authorization = useAuthorizationContext()
2021-10-12 02:40:48 +00:00
const cache = useCacheContext()
const group = useGroupContext()
2021-10-12 02:40:48 +00:00
if(!cache) {
return null
}
if(!cache.users) {
return null
}
if(!group) {
return null
}
2021-10-12 02:40:48 +00:00
const trueMembers = [...new Set([group.value.owner, ...group.value.members])]
2021-10-12 02:40:48 +00:00
const users = trueMembers.map((id, index) => {
const user = cache.getUserById(id)
if(!user) {
return null
}
2021-10-13 03:21:38 +00:00
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}>
2021-10-13 03:21:38 +00:00
{username}
</ListUnordered.Item>
)
})
2021-10-12 02:40:48 +00:00
return (
<Box>
<Heading level={3}>
<FontAwesomeIcon icon={faUsersCog}/> Members of <Idiomatic>{group.value.name}</Idiomatic>
2021-10-12 02:40:48 +00:00
</Heading>
<ListUnordered>
{users}
2021-10-12 02:40:48 +00:00
</ListUnordered>
</Box>
)
}