open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

group selector dialog: loading indicator, tracking

Browse Source
This commit is contained in:
mantikoros 2022-09-17 14:58:42 -05:00
parent f35799c129
commit d2471e2a02
1 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/components/onboarding/group-selector-dialog.tsx
View File

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