group selector dialog: loading indicator, tracking

This commit is contained in:
mantikoros 2022-09-17 14:58:42 -05:00
parent f35799c129
commit d2471e2a02

View File

@ -10,6 +10,8 @@ import { Modal } from 'web/components/layout/modal'
import { PillButton } from 'web/components/buttons/pill-button'
import { Button } from 'web/components/button'
import { Group } from 'common/group'
import { LoadingIndicator } from '../loading-indicator'
import { withTracking } from 'web/lib/service/analytics'
export default function GroupSelectorDialog(props: {
open: boolean
@ -65,20 +67,26 @@ export default function GroupSelectorDialog(props: {
</p>
<div className="scrollbar-hide items-start gap-2 overflow-x-auto">
{user &&
{!user || displayedGroups.length === 0 ? (
<LoadingIndicator spinnerClassName="h-12 w-12" />
) : (
displayedGroups.map((group) => (
<PillButton
selected={memberGroupIds.includes(group.id)}
onSelect={() =>
memberGroupIds.includes(group.id)
? leaveGroup(group, user.id)
: joinGroup(group, user.id)
}
onSelect={withTracking(
() =>
memberGroupIds.includes(group.id)
? leaveGroup(group, user.id)
: joinGroup(group, user.id),
'toggle group pill',
{ group: group.slug }
)}
className="mr-1 mb-2 max-w-[12rem] truncate"
>
{group.name}
</PillButton>
))}
))
)}
</div>
</Col>
<Col>