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 && (
+
+
+
+ )}
+