Groups search shares query, sorted by contract & members

web/components/groups/group-selector.tsx

@@ -9,7 +9,7 @@ import {
 import clsx from 'clsx'
 import { CreateGroupButton } from 'web/components/groups/create-group-button'
 import { useState } from 'react'
-import { useMemberGroups } from 'web/hooks/use-group'
+import { useMemberGroups, useOpenGroups } from 'web/hooks/use-group'
 import { User } from 'common/user'
 import { searchInAny } from 'common/util/parse'
 
@@ -27,9 +27,15 @@ export function GroupSelector(props: {
   const [isCreatingNewGroup, setIsCreatingNewGroup] = useState(false)
   const { showSelector, showLabel, ignoreGroupIds } = options
   const [query, setQuery] = useState('')
-  const availableGroups = (useMemberGroups(creator?.id) ?? []).filter(
-    (group) => !ignoreGroupIds?.includes(group.id)
-  )
+  const openGroups = useOpenGroups()
+  const availableGroups = openGroups
+    .concat(
+      (useMemberGroups(creator?.id) ?? []).filter(
+        (g) => !openGroups.map((og) => og.id).includes(g.id)
+      )
+    )
+    .filter((group) => !ignoreGroupIds?.includes(group.id))
+
   const filteredGroups = availableGroups.filter((group) =>
     searchInAny(query, group.name)
   )

web/pages/groups.tsx

@@ -65,20 +65,9 @@ export default function Groups(props: {
 
   const [query, setQuery] = useState('')
 
-  // List groups with the highest question count, then highest member count
-  // TODO use find-active-contracts to sort by?
-  const matches = sortBy(groups, []).filter((g) =>
-    searchInAny(
-      query,
-      g.name,
-      g.about || '',
-      creatorsDict[g.creatorId].username
-    )
-  )
-
-  const matchesOrderedByRecentActivity = sortBy(groups, [
-    (group) =>
-      -1 * (group.mostRecentContractAddedTime ?? group.mostRecentActivityTime),
+  const matchesOrderedByMostContractAndMembers = sortBy(groups, [
+    (group) => -1 * group.totalContracts,
+    (group) => -1 * group.totalMembers,
   ]).filter((g) =>
     searchInAny(
       query,
@@ -120,13 +109,14 @@ export default function Groups(props: {
                         <Col>
                           <input
                             type="text"
+                            value={query}
                             onChange={(e) => debouncedQuery(e.target.value)}
                             placeholder="Search your groups"
                             className="input input-bordered mb-4 w-full"
                           />
 
                           <div className="flex flex-wrap justify-center gap-4">
-                            {matchesOrderedByRecentActivity
+                            {matchesOrderedByMostContractAndMembers
                               .filter((match) =>
                                 memberGroupIds.includes(match.id)
                               )
@@ -153,11 +143,12 @@ export default function Groups(props: {
                       type="text"
                       onChange={(e) => debouncedQuery(e.target.value)}
                       placeholder="Search groups"
+                      value={query}
                       className="input input-bordered mb-4 w-full"
                     />
 
                     <div className="flex flex-wrap justify-center gap-4">
-                      {matches.map((group) => (
+                      {matchesOrderedByMostContractAndMembers.map((group) => (
                         <GroupCard
                           key={group.id}
                           group={group}