diff --git a/web/components/groups/group-selector.tsx b/web/components/groups/group-selector.tsx index a75a0a34..54fc0764 100644 --- a/web/components/groups/group-selector.tsx +++ b/web/components/groups/group-selector.tsx @@ -5,6 +5,7 @@ import { CheckIcon, PlusCircleIcon, SelectorIcon, + UserIcon, } from '@heroicons/react/outline' import clsx from 'clsx' import { CreateGroupButton } from 'web/components/groups/create-group-button' @@ -12,6 +13,7 @@ import { useState } from 'react' import { useMemberGroups, useOpenGroups } from 'web/hooks/use-group' import { User } from 'common/user' import { searchInAny } from 'common/util/parse' +import { Row } from 'web/components/layout/row' export function GroupSelector(props: { selectedGroup: Group | undefined @@ -28,13 +30,26 @@ export function GroupSelector(props: { const { showSelector, showLabel, ignoreGroupIds } = options const [query, setQuery] = useState('') const openGroups = useOpenGroups() + const memberGroups = useMemberGroups(creator?.id) + const memberGroupIds = memberGroups?.map((g) => g.id) ?? [] const availableGroups = openGroups .concat( - (useMemberGroups(creator?.id) ?? []).filter( + (memberGroups ?? []).filter( (g) => !openGroups.map((og) => og.id).includes(g.id) ) ) .filter((group) => !ignoreGroupIds?.includes(group.id)) + .sort((a, b) => b.totalContracts - a.totalContracts) + // put the groups the user is a member of first + .sort((a, b) => { + if (memberGroupIds.includes(a.id)) { + return -1 + } + if (memberGroupIds.includes(b.id)) { + return 1 + } + return 0 + }) const filteredGroups = availableGroups.filter((group) => searchInAny(query, group.name) @@ -97,7 +112,7 @@ export function GroupSelector(props: { value={group} className={({ active }) => clsx( - 'relative h-12 cursor-pointer select-none py-2 pl-4 pr-6', + 'relative h-12 cursor-pointer select-none py-2 pr-6', active ? 'bg-indigo-500 text-white' : 'text-gray-900' ) } @@ -120,7 +135,14 @@ export function GroupSelector(props: { selected && 'font-semibold' )} > - {group.name} + + {memberGroupIds.includes(group.id) && ( + + )} + {group.name} + { return { props: { auth: await getUserAndPrivateUser(creds.uid) } } @@ -406,13 +408,19 @@ export function NewContract(props: { - - + + + {showGroupSelector && selectedGroup && ( + + + + )} +