Profiles to React Queries

components/Avatar.tsx

@@ -17,7 +17,7 @@
 import { Indicator } from "./Indicator";
 import Picto from "./Picto/Picto";
 
-type Props = {
+export type AvatarProps = {
   uri?: string | undefined;
   size?: number | undefined;
   style?: StyleProp<ImageStyle>;
@@ -36,7 +36,7 @@
   name,
   showIndicator,
   invertColor,
-}: Props) {
+}: AvatarProps) {
   const colorScheme = useColorScheme();
   const styles = getStyles(colorScheme, size, invertColor || false);
   const firstLetter = getFirstLetterForAvatar(name || "");
@@ -125,4 +125,4 @@
     },
   });
 
 export default React.memo(Avatar);

components/ConversationListItem.tsx

@@ -41,11 +41,11 @@ import Animated, {
   runOnJS,
 } from "react-native-reanimated";
 
-import Avatar from "./Avatar";
 import { ConversationContextMenu } from "./ConversationContextMenu";
 import GroupAvatar from "./GroupAvatar";
 import Picto from "./Picto/Picto";
 import { showActionSheetWithOptions } from "./StateHandlers/ActionSheetStateHandler";
+import { ConnectedAvatar } from "../containers/ConnectedAvatar";
 import {
   currentAccount,
   useChatStore,
@@ -258,15 +258,14 @@ const ConversationListItem = memo(function ConversationListItem({
         onConversationListScreen
       />
     ) : (
-      <Avatar
+      <ConnectedAvatar
         size={AvatarSizes.conversationListItem}
         style={styles.avatarWrapper}
-        uri={conversationPeerAvatar}
-        name={conversationName}
+        peerAddress={conversationPeerAddress!}
       />
     );
   }, [
-    conversationName,
+    conversationPeerAddress,
     conversationPeerAvatar,
     conversationTopic,
     isGroupConversation,

containers/ConnectedAvatar.tsx

@@ -0,0 +1,23 @@
+import Avatar, { AvatarProps } from "@components/Avatar";
+import { useProfileSocials } from "@hooks/useProfileSocials";
+import { getPreferredAvatar, getPreferredName } from "@utils/profile";
+import { FC } from "react";
+
+interface ConnectedAvatarProps
+  extends Pick<
+    AvatarProps,
+    "size" | "style" | "color" | "showIndicator" | "invertColor"
+  > {
+  peerAddress: string;
+}
+
+export const ConnectedAvatar: FC<ConnectedAvatarProps> = ({
+  peerAddress,
+  ...avatarProps
+}) => {
+  const { data } = useProfileSocials(peerAddress);
+
+  const preferredAvatar = data ? getPreferredAvatar(data) : undefined;
+  const preferredName = data ? getPreferredName(data, peerAddress) : undefined;
+  return <Avatar uri={preferredAvatar} name={preferredName} {...avatarProps} />;
+};

containers/GroupPendingRequestsTable.tsx

@@ -1,13 +1,14 @@
 import { showActionSheetWithOptions } from "@components/StateHandlers/ActionSheetStateHandler";
 import { TableViewPicto } from "@components/TableView/TableViewImage";
-import { useCurrentAccount, useProfilesStore } from "@data/store/accountsStore";
+import { useCurrentAccount } from "@data/store/accountsStore";
 import { useGroupPendingRequests } from "@hooks/useGroupPendingRequests";
+import { usePreferredNames } from "@hooks/usePreferredNames";
 import { translate } from "@i18n";
 import { useAddToGroupMutation } from "@queries/useAddToGroupMutation";
 import { invalidatePendingJoinRequestsQuery } from "@queries/usePendingRequestsQuery";
 import { actionSheetColors, textSecondaryColor } from "@styles/colors";
 import { updateGroupJoinRequestStatus } from "@utils/api";
 import { getPreferredName, getProfile } from "@utils/profile";
 import { FC, useMemo } from "react";
 import { StyleSheet, Text, useColorScheme, View } from "react-native";
 
@@ -26,20 +27,18 @@
   const currentAccount = useCurrentAccount() as string;
   const styles = useStyles();
   const requests = useGroupPendingRequests(topic);
-  const profiles = useProfilesStore((s) => s.profiles);
+  const addresses = useMemo(() => requests.map((a) => a[0]), [requests]);
+  const preferredNames = usePreferredNames(addresses);
   const { mutateAsync: addToGroup } = useAddToGroupMutation(
     currentAccount,
     topic
   );
   const tableViewItems = useMemo(() => {
     const items: TableViewItemType[] = [];
-    requests.forEach((a) => {
+    requests.forEach((a, id) => {
       const address = a[0];
       const request = a[1];
-      const preferredName = getPreferredName(
-        getProfile(address, profiles)?.socials,
-        address
-      );
+      const preferredName = preferredNames[id];
       items.push({
         id: address,
         title: preferredName,
@@ -101,7 +100,7 @@
     addToGroup,
     colorScheme,
     currentAccount,
-    profiles,
+    preferredNames,
     requests,
     styles.adminText,
     styles.tableViewRight,

data/helpers/profiles/profilesUpdate.ts

@@ -1,3 +1,4 @@
+import { setProfileSocialsQueryData } from "@queries/useProfileSocialsQuery";
 import { getCleanAddress } from "@utils/evm/address";
 
 import { getProfilesForAddresses } from "../../../utils/api";
@@ -31,7 +32,14 @@ export const updateProfilesForConvos = async (
         updatedAt: now,
       };
     }
-    getProfilesStore(account).getState().setProfiles(socialsToDispatch);
+    for (const peerAddress in socialsToDispatch) {
+      setProfileSocialsQueryData(
+        account,
+        peerAddress,
+        socialsToDispatch[peerAddress].socials,
+        socialsToDispatch[peerAddress].updatedAt
+      );
+    }
   }
 };
 
@@ -42,7 +50,6 @@ export const refreshProfileForAddress = async (
   const now = new Date().getTime();
   const profilesByAddress = await getProfilesForAddresses([address]);
   // Save profiles to db
-
   getProfilesStore(account)
     .getState()
     .setProfiles({
@@ -51,6 +58,7 @@ export const refreshProfileForAddress = async (
         updatedAt: now,
       },
     });
+  setProfileSocialsQueryData(account, address, profilesByAddress[address], now);
 };
 
 export const refreshProfilesIfNeeded = async (account: string) => {

data/index.ts

@@ -1,15 +1,16 @@
 import "reflect-metadata";
 
+import { setProfileSocialsQueryData } from "@queries/useProfileSocialsQuery";
 import logger from "@utils/logger";
 import { getProfile } from "@utils/profile";
 
 import { getRepository } from "./db";
 import { Conversation } from "./db/entities/conversationEntity";
 import { Message } from "./db/entities/messageEntity";
-import { refreshProfilesIfNeeded } from "./helpers/profiles/profilesUpdate";
 import { xmtpConversationFromDb } from "./mappers";
 import { getChatStore, getProfilesStore } from "./store/accountsStore";
 import { saveXmtpEnv, saveApiURI } from "../utils/sharedData";
+import { refreshProfilesIfNeeded } from "./helpers/profiles/profilesUpdate";
 
 const getTypeormBoolValue = (value: number) => value === 1;
 
@@ -76,6 +77,17 @@ export const loadDataToContext = async (account: string) => {
   });
 
   const profilesByAddress = getProfilesStore(account).getState().profiles;
+  for (const peerAddress in profilesByAddress) {
+    const profile = profilesByAddress[peerAddress];
+    if (profile?.socials && profile?.updatedAt) {
+      setProfileSocialsQueryData(
+        account,
+        peerAddress,
+        profile.socials,
+        profile.updatedAt
+      );
+    }
+  }
   getChatStore(account)
     .getState()
     .setConversations(

hooks/usePreferredName.ts

@@ -0,0 +1,8 @@
+import { getPreferredName } from "@utils/profile";
+
+import { useProfileSocials } from "./useProfileSocials";
+
+export const usePreferredName = (peerAddress: string) => {
+  const { data } = useProfileSocials(peerAddress);
+  return data ? getPreferredName(data, peerAddress) : peerAddress;
+};

hooks/usePreferredNames.ts

@@ -0,0 +1,22 @@
+import { getPreferredName } from "@utils/profile";
+import { useMemo } from "react";
+
+import { useProfilesSocials } from "./useProfilesSocials";
+
+/**
+ *
+ * @param peerAddress Multiple peer addresses to get their socials
+ * @returns array of preferred names or the address if not found
+ */
+export const usePreferredNames = (peerAddresses: string[]) => {
+  const data = useProfilesSocials(peerAddresses);
+  const names = useMemo(() => {
+    // Not sure how performant this will be, or if we can safely rely on the index
+    // If we can't, we should probably use a Map instead
+    return data.map(({ data: socials }, index) => {
+      const peerAddress = peerAddresses[index];
+      return socials ? getPreferredName(socials, peerAddress) : peerAddress;
+    });
+  }, [data, peerAddresses]);
+  return names;
+};

hooks/useProfileSocials.ts

@@ -0,0 +1,7 @@
+import { useCurrentAccount } from "@data/store/accountsStore";
+import { useProfileSocialsQuery } from "@queries/useProfileSocialsQuery";
+
+export const useProfileSocials = (peerAddress: string) => {
+  const currentAccount = useCurrentAccount();
+  return useProfileSocialsQuery(currentAccount!, peerAddress);
+};

hooks/useProfilesSocials.ts

@@ -0,0 +1,12 @@
+import { useCurrentAccount } from "@data/store/accountsStore";
+import { useProfileSocialsQueries } from "@queries/useProfileSocialsQuery";
+
+/**
+ *
+ * @param peerAddresses Use multiple peer addresses to get their socials
+ * @returns
+ */
+export const useProfilesSocials = (peerAddresses: string[]) => {
+  const currentAccount = useCurrentAccount();
+  return useProfileSocialsQueries(currentAccount!, peerAddresses);
+};

package.json

@@ -74,6 +74,7 @@
     "@xmtp/proto": "^3.60.0",
     "@xmtp/react-native-sdk": "^2.6.4",
     "@xmtp/xmtp-js": "11.5.0",
+    "@yornaath/batshit": "^0.10.1",
     "amazon-cognito-identity-js": "^6.3.12",
     "axios": "^1.2.1",
     "babel-plugin-transform-remove-console": "^6.9.4",

queries/QueryKeys.ts

@@ -31,6 +31,9 @@ export enum QueryKeys {
   GROUP_INVITE = "groupInvite",
   GROUP_JOIN_REQUEST = "groupJoinRequest",
   PENDING_JOIN_REQUESTS = "pendingJoinRequests",
+
+  // Profiles
+  PROFILE_SOCIALS = "profileSocials",
 }
 
 export const groupsQueryKey = (account: string) => [QueryKeys.GROUPS, account];
@@ -127,3 +130,8 @@ export const pendingJoinRequestsQueryKey = (account: string) => [
   QueryKeys.PENDING_JOIN_REQUESTS,
   account,
 ];
+
+export const profileSocialsQueryKey = (
+  account: string,
+  peerAddress: string
+) => [QueryKeys.PROFILE_SOCIALS, account, peerAddress];

queries/useProfileSocialsQuery.ts

@@ -0,0 +1,84 @@
+import { ProfileSocials } from "@data/store/profilesStore";
+import { useQueries, useQuery } from "@tanstack/react-query";
+import { getProfilesForAddresses } from "@utils/api";
+import {
+  create,
+  windowedFiniteBatchScheduler,
+  indexedResolver,
+} from "@yornaath/batshit";
+
+import { profileSocialsQueryKey } from "./QueryKeys";
+import { queryClient } from "./queryClient";
+
+const profileSocials = create({
+  fetcher: async (addresses: string[]) => {
+    const data = await getProfilesForAddresses(addresses);
+    return data;
+  },
+  resolver: indexedResolver(),
+  scheduler: windowedFiniteBatchScheduler({
+    windowMs: 10,
+    maxBatchSize: 150,
+  }),
+});
+
+const fetchProfileSocials = async (peerAddress: string) => {
+  const data = await profileSocials.fetch(peerAddress);
+  return data;
+};
+
+const profileSocialesQueryConfig = (account: string, peerAddress: string) => ({
+  queryKey: profileSocialsQueryKey(account, peerAddress),
+  queryFn: () => fetchProfileSocials(peerAddress),
+  enabled: !!account,
+  // Store for 30 days
+  gcTime: 1000 * 60 * 60 * 24 * 30,
+  refetchIntervalInBackground: false,
+  refetchOnWindowFocus: false,
+  // We really just want a 24 hour cache here
+  // And automatic retries if there was an error fetching
+  refetchOnMount: false,
+  staleTime: 1000 * 60 * 60 * 24,
+});
+
+export const useProfileSocialsQuery = (
+  account: string,
+  peerAddress: string
+) => {
+  return useQuery(profileSocialesQueryConfig(account, peerAddress));
+};
+
+export const useProfileSocialsQueries = (
+  account: string,
+  peerAddresses: string[]
+) => {
+  return useQueries({
+    queries: peerAddresses.map((peerAddress) =>
+      profileSocialesQueryConfig(account, peerAddress)
+    ),
+  });
+};
+
+export const fetchProfileSocialsQuery = (
+  account: string,
+  peerAddress: string
+) => {
+  return queryClient.fetchQuery(
+    profileSocialesQueryConfig(account, peerAddress)
+  );
+};
+
+export const setProfileSocialsQueryData = (
+  account: string,
+  peerAddress: string,
+  data: ProfileSocials,
+  updatedAt?: number
+) => {
+  return queryClient.setQueryData(
+    profileSocialsQueryKey(account, peerAddress),
+    data,
+    {
+      updatedAt,
+    }
+  );
+};

screens/Profile.tsx

@@ -1,4 +1,5 @@
 import Picto from "@components/Picto/Picto";
+import { ConnectedAvatar } from "@containers/ConnectedAvatar";
 import { useDisconnectActionSheet } from "@hooks/useDisconnectActionSheet";
 import { useShouldShowErrored } from "@hooks/useShouldShowErrored";
 import { translate } from "@i18n";
@@ -43,7 +44,6 @@ import { ConversationNavParams } from "./Navigation/ConversationNav";
 import { NavigationParamList } from "./Navigation/Navigation";
 import { useIsSplitScreen } from "./Navigation/navHelpers";
 import ActivityIndicator from "../components/ActivityIndicator/ActivityIndicator";
-import Avatar from "../components/Avatar";
 import { showActionSheetWithOptions } from "../components/StateHandlers/ActionSheetStateHandler";
 import TableView, {
   TableViewItemType,
@@ -78,7 +78,6 @@ import {
   requestPushNotificationsPermissions,
 } from "../utils/notifications";
 import {
-  getPreferredAvatar,
   getPreferredName,
   getProfile,
   getPreferredUsername,
@@ -600,11 +599,7 @@ export default function ProfileScreen({
       style={styles.profile}
       contentContainerStyle={styles.profileContent}
     >
-      <Avatar
-        uri={getPreferredAvatar(socials)}
-        style={styles.avatar}
-        name={getPreferredName(socials, peerAddress)}
-      />
+      <ConnectedAvatar peerAddress={peerAddress} style={styles.avatar} />
       <Text style={styles.title}>{getPreferredName(socials, peerAddress)}</Text>
       {isMyProfile && shouldShowError && (
         <View style={styles.errorContainer}>