use real api for listSubscriptions

src/screens/Settings/NotificationSettings/ActivityNotificationSettings.tsx

@@ -3,7 +3,6 @@ import {type ListRenderItemInfo, Text as RNText, View} from 'react-native'
 import {type ModerationOpts} from '@atproto/api'
 import {msg, Trans} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
-import {useInfiniteQuery} from '@tanstack/react-query'
 
 import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
 import {
@@ -13,8 +12,8 @@ import {
 import {cleanError} from '#/lib/strings/errors'
 import {logger} from '#/logger'
 import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useActivitySubscriptionsQuery} from '#/state/queries/activity-subscriptions'
 import {useNotificationSettingsQuery} from '#/state/queries/notifications/settings'
-import {useAgent} from '#/state/session'
 import {List} from '#/view/com/util/List'
 import {atoms as a, useTheme} from '#/alf'
 import * as Admonition from '#/components/Admonition'
@@ -40,10 +39,9 @@ export function ActivityNotificationSettingsScreen({}: Props) {
   const t = useTheme()
   const {_} = useLingui()
   const {data: preferences, isError} = useNotificationSettingsQuery()
-  const agent = useAgent()
+
   const moderationOpts = useModerationOpts()
 
-  // TODO: Fetch subscriptions
   const {
     data: subscriptions,
     isPending,
@@ -51,22 +49,11 @@ export function ActivityNotificationSettingsScreen({}: Props) {
     isFetchingNextPage,
     fetchNextPage,
     hasNextPage,
-  } = useInfiniteQuery({
+  } = useActivitySubscriptionsQuery()
-    queryKey: ['TEMP'],
-    queryFn: async ({pageParam}) => {
-      const response = await agent.getFollows({
-        actor: agent.assertDid,
-        cursor: pageParam,
-      })
-      return response.data
-    },
-    initialPageParam: undefined as string | undefined,
-    getNextPageParam: prev => prev.cursor,
-  })
 
   const items = useMemo(() => {
     if (!subscriptions) return []
-    return subscriptions?.pages.flatMap(page => page.follows)
+    return subscriptions?.pages.flatMap(page => page.subscriptions)
   }, [subscriptions])
 
   const renderItem = useCallback(
@@ -138,49 +125,51 @@ export function ActivityNotificationSettingsScreen({}: Props) {
         onEndReached={onEndReached}
         onEndReachedThreshold={4}
         ListEmptyComponent={
-          <View style={[a.px_xl, a.py_md]}>
+          error ? null : (
-            {!isPending ? (
+            <View style={[a.px_xl, a.py_md]}>
-              <Admonition.Outer type="tip">
+              {!isPending ? (
-                <Admonition.Row>
+                <Admonition.Outer type="tip">
-                  <Admonition.Icon />
+                  <Admonition.Row>
-                  <View style={[a.flex_1, a.gap_sm]}>
+                    <Admonition.Icon />
-                    <Admonition.Text>
+                    <View style={[a.flex_1, a.gap_sm]}>
-                      <Trans>
+                      <Admonition.Text>
-                        Enable notifications for an account by visiting their
+                        <Trans>
-                        profile and pressing the{' '}
+                          Enable notifications for an account by visiting their
-                        <RNText
+                          profile and pressing the{' '}
-                          style={[a.font_bold, t.atoms.text_contrast_high]}>
+                          <RNText
-                          bell icon
+                            style={[a.font_bold, t.atoms.text_contrast_high]}>
-                        </RNText>{' '}
+                            bell icon
-                        <BellIcon
+                          </RNText>{' '}
-                          size="xs"
+                          <BellIcon
-                          style={t.atoms.text_contrast_high}
+                            size="xs"
-                        />
+                            style={t.atoms.text_contrast_high}
-                        .
+                          />
-                      </Trans>
+                          .
-                    </Admonition.Text>
+                        </Trans>
-                    <Admonition.Text>
+                      </Admonition.Text>
-                      <Trans>
+                      <Admonition.Text>
-                        By default, only accounts you follow can receive alerts
+                        <Trans>
-                        from you – this can be changed in{' '}
+                          By default, only accounts you follow can receive
-                        <InlineLinkText
+                          alerts from you – this can be changed in{' '}
-                          label={_(msg`Privacy & Security settings`)}
+                          <InlineLinkText
-                          to={{screen: 'PrivacyAndSecuritySettings'}}
+                            label={_(msg`Privacy & Security settings`)}
-                          style={[a.font_bold]}>
+                            to={{screen: 'PrivacyAndSecuritySettings'}}
-                          Settings &rarr; Privacy &amp; Security
+                            style={[a.font_bold]}>
-                        </InlineLinkText>
+                            Settings &rarr; Privacy &amp; Security
-                        .
+                          </InlineLinkText>
-                      </Trans>
+                          .
-                    </Admonition.Text>
+                        </Trans>
-                  </View>
+                      </Admonition.Text>
-                </Admonition.Row>
+                    </View>
-              </Admonition.Outer>
+                  </Admonition.Row>
-            ) : (
+                </Admonition.Outer>
-              <View style={[a.flex_1, a.align_center, a.pt_xl]}>
+              ) : (
-                <Loader size="lg" />
+                <View style={[a.flex_1, a.align_center, a.pt_xl]}>
-              </View>
+                  <Loader size="lg" />
-            )}
+                </View>
-          </View>
+              )}
+            </View>
+          )
         }
         ListFooterComponent={
           <ListFooter

src/state/queries/activity-subscriptions.ts

@@ -1,12 +1,35 @@
 import {type AppBskyNotificationDeclaration} from '@atproto/api'
 import {t} from '@lingui/macro'
-import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query'
+import {
+  useInfiniteQuery,
+  useMutation,
+  useQuery,
+  useQueryClient,
+} from '@tanstack/react-query'
 
 import {useAgent, useSession} from '#/state/session'
 import * as Toast from '#/view/com/util/Toast'
 
+const RQKEY_getActivitySubscriptions = ['activity-subscriptions']
 const RQKEY_getNotificationDeclaration = ['notification-declaration']
 
+export function useActivitySubscriptionsQuery() {
+  const agent = useAgent()
+
+  return useInfiniteQuery({
+    queryKey: RQKEY_getActivitySubscriptions,
+    queryFn: async ({pageParam}) => {
+      const response =
+        await agent.app.bsky.notification.listActivitySubscriptions({
+          cursor: pageParam,
+        })
+      return response.data
+    },
+    initialPageParam: undefined as string | undefined,
+    getNextPageParam: prev => prev.cursor,
+  })
+}
+
 export function useNotificationDeclarationQuery() {
   const agent = useAgent()
   const {currentAccount} = useSession()