Refactor lists to use new queries (#1875)

* Refactor lists queries to react-query

* Delete old lists-list model

* Implement list, list-members, and list-memberships react-queries

* Update CreateOrEditList modal

* First pass at my-follows and actor-autocomplete queries

* Update ListAddUserModal to use new queries, change to ListAddRemoveUsersModal

* Update UserAddRemoveLists modal

* Remove old TODO

* Fix indent, autocomplete query

* Add a todo

---------

Co-authored-by: Eric Bailey <git@esb.lol>

1 files changed, 4 insertions, 14 deletions

diff --git a/src/view/screens/ModerationModlists.tsx b/src/view/screens/ModerationModlists.tsx
index 3892e47c7..098d93cdc 100644
--- a/src/view/screens/ModerationModlists.tsx
+++ b/src/view/screens/ModerationModlists.tsx
@@ -3,11 +3,8 @@ import {View} from 'react-native'
 import {useFocusEffect, useNavigation} from '@react-navigation/native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {AtUri} from '@atproto/api'
-import {observer} from 'mobx-react-lite'
 import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
 import {withAuthRequired} from 'view/com/auth/withAuthRequired'
-import {useStores} from 'state/index'
-import {ListsListModel} from 'state/models/lists/lists-list'
 import {ListsList} from 'view/com/lists/ListsList'
 import {Text} from 'view/com/util/text/Text'
 import {Button} from 'view/com/util/forms/Button'
@@ -21,24 +18,17 @@ import {useModalControls} from '#/state/modals'
 
 type Props = NativeStackScreenProps<CommonNavigatorParams, 'ModerationModlists'>
 export const ModerationModlistsScreen = withAuthRequired(
-  observer(function ModerationModlistsScreenImpl({}: Props) {
+  function ModerationModlistsScreenImpl({}: Props) {
     const pal = usePalette('default')
-    const store = useStores()
     const setMinimalShellMode = useSetMinimalShellMode()
     const {isMobile} = useWebMediaQueries()
     const navigation = useNavigation<NavigationProp>()
     const {openModal} = useModalControls()
 
-    const mutelists: ListsListModel = React.useMemo(
-      () => new ListsListModel(store, 'my-modlists'),
-      [store],
-    )
-
     useFocusEffect(
       React.useCallback(() => {
         setMinimalShellMode(false)
-        mutelists.refresh()
-      }, [mutelists, setMinimalShellMode]),
+      }, [setMinimalShellMode]),
     )
 
     const onPressNewList = React.useCallback(() => {
@@ -89,8 +79,8 @@ export const ModerationModlistsScreen = withAuthRequired(
             </Button>
           </View>
         </SimpleViewHeader>
-        <ListsList listsList={mutelists} style={s.flexGrow1} />
+        <ListsList filter="mod" style={s.flexGrow1} />
       </View>
     )
-  }),
+  },
 )