[🐴] Implement API for new group dialog (#10182)

src/analytics/metrics/types.ts

@@ -563,6 +563,9 @@ export type Events = {
       | 'ChatsList'
       | 'SendViaChatDialog'
   }
+  'groupchat:create': {
+    logContext: 'NewChatDialog'
+  }
   'starterPack:addUser': {
     starterPack?: string
   }

src/components/dms/dialogs/NewChatDialog.tsx

@@ -3,6 +3,7 @@ import {Trans, useLingui} from '@lingui/react/macro'
 
 import {useRequireEmailVerification} from '#/lib/hooks/useRequireEmailVerification'
 import {logger} from '#/logger'
+import {useCreateGroupChat} from '#/state/queries/messages/create-group-chat'
 import {useGetConvoForMembers} from '#/state/queries/messages/get-convo-for-members'
 import {FAB} from '#/view/com/util/fab/FAB'
 import {useTheme} from '#/alf'
@@ -38,12 +39,28 @@ export function NewChat({
     },
     onError: error => {
       logger.error('Failed to create chat', {safeMessage: error})
-      Toast.show(l`An issue occurred starting the chat`, {
+      Toast.show(l`An issue occurred starting the chat, please try again`, {
         type: 'error',
       })
     },
   })
 
+  const {mutate: createGroupChat} = useCreateGroupChat({
+    onSuccess: data => {
+      onNewChat(data.convo.id)
+      ax.metric('groupchat:create', {logContext: 'NewChatDialog'})
+    },
+    onError: error => {
+      logger.error('Failed to create groupchat', {safeMessage: error})
+      Toast.show(
+        l`An issue occurred creating the group chat, please try again`,
+        {
+          type: 'error',
+        },
+      )
+    },
+  })
+
   const onCreateChat = useCallback(
     (did: string) => {
       control.close(() => createChat([did]))
@@ -52,10 +69,12 @@ export function NewChat({
   )
 
   const onCreateGroupChat = useCallback(
-    (_dids: string[], _groupName: string) => {
-      control.close()
+    (members: string[], name: string) => {
+      control.close(() => {
+        createGroupChat({members, name})
+      })
     },
-    [control],
+    [control, createGroupChat],
   )
 
   const onPress = useCallback(() => {

src/state/queries/messages/create-group-chat.ts

@@ -0,0 +1,37 @@
+import {type ChatBskyGroupCreateGroup} from '@atproto/api'
+import {useMutation, useQueryClient} from '@tanstack/react-query'
+
+import {DM_SERVICE_HEADERS} from '#/lib/constants'
+import {logger} from '#/logger'
+import {useAgent} from '#/state/session'
+import {precacheConvoQuery} from './conversation'
+
+export function useCreateGroupChat({
+  onSuccess,
+  onError,
+}: {
+  onSuccess?: (data: ChatBskyGroupCreateGroup.OutputSchema) => void
+  onError?: (error: Error) => void
+}) {
+  const queryClient = useQueryClient()
+  const agent = useAgent()
+
+  return useMutation({
+    mutationFn: async ({name, members}: {name: string; members: string[]}) => {
+      const {data} = await agent.chat.bsky.group.createGroup(
+        {name, members},
+        {headers: DM_SERVICE_HEADERS},
+      )
+
+      return data
+    },
+    onSuccess: data => {
+      precacheConvoQuery(queryClient, data.convo)
+      onSuccess?.(data)
+    },
+    onError: error => {
+      logger.error(error)
+      onError?.(error)
+    },
+  })
+}