Modernise list create/edit dialog (#8223)

src/view/screens/Lists.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -10,11 +10,12 @@ import {
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModalControls} from '#/state/modals'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MyLists} from '#/view/com/lists/MyLists'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {CreateOrEditListDialog} from '#/components/dialogs/lists/CreateOrEditListDialog'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 
@@ -23,30 +24,18 @@ export function ListsScreen({}: Props) {
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const navigation = useNavigation<NavigationProp>()
-  const {openModal} = useModalControls()
   const requireEmailVerification = useRequireEmailVerification()
+  const createListDialogControl = useDialogControl()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPressNewList = React.useCallback(() => {
-    openModal({
-      name: 'create-or-edit-list',
-      purpose: 'app.bsky.graph.defs#curatelist',
-      onSave: (uri: string) => {
-        try {
-          const urip = new AtUri(uri)
-          navigation.navigate('ProfileList', {
-            name: urip.hostname,
-            rkey: urip.rkey,
-          })
-        } catch {}
-      },
-    })
-  }, [openModal, navigation])
+  const onPressNewList = useCallback(() => {
+    createListDialogControl.open()
+  }, [createListDialogControl])
 
   const wrappedOnPressNewList = requireEmailVerification(onPressNewList, {
     instructions: [
@@ -56,6 +45,19 @@ export function ListsScreen({}: Props) {
     ],
   })
 
+  const onCreateList = useCallback(
+    (uri: string) => {
+      try {
+        const urip = new AtUri(uri)
+        navigation.navigate('ProfileList', {
+          name: urip.hostname,
+          rkey: urip.rkey,
+        })
+      } catch {}
+    },
+    [navigation],
+  )
+
   return (
     <Layout.Screen testID="listsScreen">
       <Layout.Header.Outer>
@@ -78,7 +80,14 @@ export function ListsScreen({}: Props) {
           </ButtonText>
         </Button>
       </Layout.Header.Outer>
+
       <MyLists filter="curate" style={a.flex_grow} />
+
+      <CreateOrEditListDialog
+        purpose="app.bsky.graph.defs#curatelist"
+        control={createListDialogControl}
+        onSave={onCreateList}
+      />
     </Layout.Screen>
   )
 }

src/view/screens/ModerationModlists.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import {useCallback} from 'react'
 import {AtUri} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
@@ -10,11 +10,12 @@ import {
   type NativeStackScreenProps,
 } from '#/lib/routes/types'
 import {type NavigationProp} from '#/lib/routes/types'
-import {useModalControls} from '#/state/modals'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {MyLists} from '#/view/com/lists/MyLists'
 import {atoms as a} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {CreateOrEditListDialog} from '#/components/dialogs/lists/CreateOrEditListDialog'
 import {PlusLarge_Stroke2_Corner0_Rounded as PlusIcon} from '#/components/icons/Plus'
 import * as Layout from '#/components/Layout'
 
@@ -23,30 +24,18 @@ export function ModerationModlistsScreen({}: Props) {
   const {_} = useLingui()
   const setMinimalShellMode = useSetMinimalShellMode()
   const navigation = useNavigation<NavigationProp>()
-  const {openModal} = useModalControls()
   const requireEmailVerification = useRequireEmailVerification()
+  const createListDialogControl = useDialogControl()
 
   useFocusEffect(
-    React.useCallback(() => {
+    useCallback(() => {
       setMinimalShellMode(false)
     }, [setMinimalShellMode]),
   )
 
-  const onPressNewList = React.useCallback(() => {
-    openModal({
-      name: 'create-or-edit-list',
-      purpose: 'app.bsky.graph.defs#modlist',
-      onSave: (uri: string) => {
-        try {
-          const urip = new AtUri(uri)
-          navigation.navigate('ProfileList', {
-            name: urip.hostname,
-            rkey: urip.rkey,
-          })
-        } catch {}
-      },
-    })
-  }, [openModal, navigation])
+  const onPressNewList = useCallback(() => {
+    createListDialogControl.open()
+  }, [createListDialogControl])
 
   const wrappedOnPressNewList = requireEmailVerification(onPressNewList, {
     instructions: [
@@ -56,6 +45,19 @@ export function ModerationModlistsScreen({}: Props) {
     ],
   })
 
+  const onCreateList = useCallback(
+    (uri: string) => {
+      try {
+        const urip = new AtUri(uri)
+        navigation.navigate('ProfileList', {
+          name: urip.hostname,
+          rkey: urip.rkey,
+        })
+      } catch {}
+    },
+    [navigation],
+  )
+
   return (
     <Layout.Screen testID="moderationModlistsScreen">
       <Layout.Header.Outer>
@@ -78,7 +80,14 @@ export function ModerationModlistsScreen({}: Props) {
           </ButtonText>
         </Button>
       </Layout.Header.Outer>
+
       <MyLists filter="mod" style={a.flex_grow} />
+
+      <CreateOrEditListDialog
+        purpose="app.bsky.graph.defs#modlist"
+        control={createListDialogControl}
+        onSave={onCreateList}
+      />
     </Layout.Screen>
   )
 }