fix review feedback, clean up

__e2e__/flows/curate-lists.yml

@@ -145,21 +145,21 @@ appId: xyz.blueskyweb.app
     id: "profileHeaderDropdownBtn"
 - tapOn: "Add to Lists"
 - assertVisible:
-    id: "userAddRemoveListsModal"
+    id: "userAddRemoveListsDialog"
 - tapOn:
     id: "user-bob.test-addBtn"
 - tapOn:
     id: "doneBtn"
 - assertNotVisible:
-    id: "userAddRemoveListsModal"
+    id: "userAddRemoveListsDialog"
 - tapOn:
     id: "profileHeaderDropdownBtn"
 - tapOn: "Add to Lists"
 - assertVisible:
-    id: "userAddRemoveListsModal"
+    id: "userAddRemoveListsDialog"
 - tapOn:
     id: "user-bob.test-addBtn"
 - tapOn:
     id: "doneBtn"
 - assertNotVisible:
-    id: "userAddRemoveListsModal"
+    id: "userAddRemoveListsDialog"

src/components/dialogs/lists/UserAddRemoveListsDialog.tsx

@@ -3,6 +3,7 @@ import {View} from 'react-native'
 import {Trans, useLingui} from '@lingui/react/macro'
 import {useQueryClient} from '@tanstack/react-query'
 
+import {createSanitizedDisplayName} from '#/lib/moderation/create-sanitized-display-name'
 import {sanitizeDisplayName} from '#/lib/strings/display-names'
 import {isNetworkError} from '#/lib/strings/errors'
 import {sanitizeHandle} from '#/lib/strings/handles'
@@ -27,34 +28,25 @@ import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Ti
 import {Loader} from '#/components/Loader'
 import * as Toast from '#/components/Toast'
 import {Text} from '#/components/Typography'
+import type * as bsky from '#/types/bsky'
 
 export type UserAddRemoveListsDialogProps = {
   control: Dialog.DialogControlProps
-  subjectDid: string
+  profile: bsky.profile.AnyProfileView | undefined
-  displayName: string
-  handle: string
   onAdd?: (listUri: string) => void
   onRemove?: (listUri: string) => void
 }
 
 export function UserAddRemoveListsDialog({
   control,
-  subjectDid,
+  profile,
-  displayName,
-  handle,
   onAdd,
   onRemove,
 }: UserAddRemoveListsDialogProps) {
   return (
     <Dialog.Outer control={control} testID="userAddRemoveListsDialog">
       <Dialog.Handle />
-      <ListsContent
+      <ListsContent profile={profile} onAdd={onAdd} onRemove={onRemove} />
-        subjectDid={subjectDid}
-        displayName={displayName}
-        handle={handle}
-        onAdd={onAdd}
-        onRemove={onRemove}
-      />
     </Dialog.Outer>
   )
 }
@@ -82,12 +74,14 @@ function Empty() {
 }
 
 function ListsContent({
-  subjectDid,
+  profile,
-  displayName,
-  handle,
   onAdd,
   onRemove,
-}: Omit<UserAddRemoveListsDialogProps, 'control'>) {
+}: {
+  profile: bsky.profile.AnyProfileView | undefined
+  onAdd?: (listUri: string) => void
+  onRemove?: (listUri: string) => void
+}) {
   const control = Dialog.useDialogContext()
   const {t: l} = useLingui()
 
@@ -98,7 +92,7 @@ function ListsContent({
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
-  } = useListsWithMembershipQuery({actor: subjectDid})
+  } = useListsWithMembershipQuery({actor: profile?.did})
 
   const listItems = data?.pages.flatMap(page => page.listsWithMembership) || []
 
@@ -112,17 +106,16 @@ function ListsContent({
   }, [isFetchingNextPage, hasNextPage, isError, fetchNextPage])
 
   const renderItem = useCallback(
-    ({item}: {item: ListWithMembership}) => (
+    ({item}: {item: ListWithMembership}) =>
-      <ListItem
+      profile ? (
-        listWithMembership={item}
+        <ListItem
-        subjectDid={subjectDid}
+          listWithMembership={item}
-        displayName={displayName}
+          profile={profile}
-        handle={handle}
+          onAdd={onAdd}
-        onAdd={onAdd}
+          onRemove={onRemove}
-        onRemove={onRemove}
+        />
-      />
+      ) : null,
-    ),
+    [profile, onAdd, onRemove],
-    [subjectDid, displayName, handle, onAdd, onRemove],
   )
 
   const onClose = useCallback(() => {
@@ -139,9 +132,16 @@ function ListsContent({
         native(a.pt_lg),
       ]}>
       <Text style={[a.text_lg, a.font_semi_bold]}>
-        <Trans>Update {sanitizeDisplayName(displayName)} in Lists</Trans>
+        {profile ? (
+          <Trans>
+            Update {createSanitizedDisplayName(profile, true)} in Lists
+          </Trans>
+        ) : (
+          <Trans>Update in Lists</Trans>
+        )}
       </Text>
       <Button
+        testID="doneBtn"
         label={l`Close`}
         onPress={onClose}
         variant="ghost"
@@ -185,16 +185,12 @@ function ListsContent({
 
 function ListItem({
   listWithMembership,
-  subjectDid,
+  profile,
-  displayName,
-  handle,
   onAdd,
   onRemove,
 }: {
   listWithMembership: ListWithMembership
-  subjectDid: string
+  profile: bsky.profile.AnyProfileView
-  displayName: string
-  handle: string
   onAdd?: (listUri: string) => void
   onRemove?: (listUri: string) => void
 }) {
@@ -214,13 +210,13 @@ function ListItem({
         onAdd?.(list.uri)
         updateListMembershipOptimistically({
           queryClient,
-          actor: subjectDid,
+          actor: profile.did,
           listUri: list.uri,
           membershipUri: data.uri,
           subject: {
-            did: subjectDid,
+            did: profile.did,
-            handle,
+            handle: profile.handle,
-            displayName,
+            displayName: profile.displayName,
           },
         })
       },
@@ -239,7 +235,7 @@ function ListItem({
         onRemove?.(list.uri)
         removeListMembershipOptimistically({
           queryClient,
-          actor: subjectDid,
+          actor: profile.did,
           listUri: list.uri,
         })
       },
@@ -259,7 +255,7 @@ function ListItem({
     if (!isMember) {
       addMembership({
         listUri: list.uri,
-        actorDid: subjectDid,
+        actorDid: profile.did,
       })
     } else {
       if (!listItem?.uri) {
@@ -268,13 +264,13 @@ function ListItem({
       }
       removeMembership({
         listUri: list.uri,
-        actorDid: subjectDid,
+        actorDid: profile.did,
         membershipUri: listItem.uri,
       })
     }
   }, [
     list.uri,
-    subjectDid,
+    profile.did,
     isMember,
     listItem,
     isPending,
@@ -315,7 +311,7 @@ function ListItem({
         </Text>
       </View>
       <Button
-        testID={`user-${handle}-addBtn`}
+        testID={`user-${profile.handle}-addBtn`}
         label={isMember ? l`Remove` : l`Add`}
         onPress={handleToggleMembership}
         disabled={isPending}

src/state/queries/list-memberships.ts

@@ -9,7 +9,10 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 
-import {RQKEY as LIST_MEMBERS_RQKEY} from '#/state/queries/list-members'
+import {
+  RQKEY as LIST_MEMBERS_RQKEY,
+  RQKEY_ALL as LIST_MEMBERS_ALL_RQKEY,
+} from '#/state/queries/list-members'
 import {useAgent, useSession} from '#/state/session'
 import type * as bsky from '#/types/bsky'
 import {RQKEY_WITH_MEMBERSHIP as STARTER_PACKS_WITH_MEMBERSHIPS_RKEY} from './actor-starter-packs'
@@ -52,9 +55,12 @@ export function useListMembershipAddMutation({
       // invalidate the members queries (used for rendering the listings)
       // use a timeout to wait for the appview
       setTimeout(() => {
-        queryClient.invalidateQueries({
+        void queryClient.invalidateQueries({
           queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
         })
+        void queryClient.invalidateQueries({
+          queryKey: LIST_MEMBERS_ALL_RQKEY(variables.listUri),
+        })
       }, 1e3)
 
       // update WITH_MEMBERSHIPS query for starter packs
@@ -144,9 +150,12 @@ export function useListMembershipRemoveMutation({
       // invalidate the members queries (used for rendering the listings)
       // use a timeout to wait for the appview
       setTimeout(() => {
-        queryClient.invalidateQueries({
+        void queryClient.invalidateQueries({
           queryKey: LIST_MEMBERS_RQKEY(variables.listUri),
         })
+        void queryClient.invalidateQueries({
+          queryKey: LIST_MEMBERS_ALL_RQKEY(variables.listUri),
+        })
       }, 1e3)
 
       // update WITH_MEMBERSHIPS query for starter packs

src/state/queries/lists-with-membership.ts

@@ -9,19 +9,20 @@ import {
   useInfiniteQuery,
 } from '@tanstack/react-query'
 
+import {createQueryKey} from '#/state/queries/util'
 import {useAgent} from '#/state/session'
 
 export type ListWithMembership =
   AppBskyGraphGetListsWithMembership.ListWithMembership
 
 const RQKEY_ROOT = 'lists-with-membership'
-export const RQKEY = (actor: string) => [RQKEY_ROOT, actor]
+export const RQKEY = (actor: string) => createQueryKey(RQKEY_ROOT, {actor})
 
 export function useListsWithMembershipQuery({
   actor,
   enabled = true,
 }: {
-  actor: string
+  actor: string | undefined
   enabled?: boolean
 }) {
   const agent = useAgent()
@@ -33,10 +34,10 @@ export function useListsWithMembershipQuery({
     QueryKey,
     string | undefined
   >({
-    queryKey: RQKEY(actor),
+    queryKey: RQKEY(actor ?? ''),
     queryFn: async ({pageParam}: {pageParam?: string}) => {
       const res = await agent.app.bsky.graph.getListsWithMembership({
-        actor,
+        actor: actor!, // the enabled flag prevents this from running until actor is set
         limit: 50,
         cursor: pageParam,
       })

src/view/com/lists/ListMembers.tsx

@@ -294,14 +294,10 @@ export function ListMembers({
         desktopFixedHeight={desktopFixedHeightOffset || true}
       />
 
-      {selectedProfile && (
+      <UserAddRemoveListsDialog
-        <UserAddRemoveListsDialog
+        control={editListsDialogControl}
-          control={editListsDialogControl}
+        profile={selectedProfile}
-          subjectDid={selectedProfile.did}
+      />
-          displayName={selectedProfile.displayName || selectedProfile.handle}
-          handle={selectedProfile.handle}
-        />
-      )}
     </View>
   )
 }

src/view/com/profile/ProfileMenu.tsx

@@ -525,9 +525,7 @@ let ProfileMenu = ({
 
       <UserAddRemoveListsDialog
         control={addToListsDialogControl}
-        subjectDid={profile.did}
+        profile={profile}
-        displayName={profile.displayName || profile.handle}
-        handle={profile.handle}
         onAdd={invalidateProfileQuery}
         onRemove={invalidateProfileQuery}
       />