diff --git a/lib/shared/avatar-utils.js b/lib/shared/avatar-utils.js index 8e9c4fd55..34237cdfc 100644 --- a/lib/shared/avatar-utils.js +++ b/lib/shared/avatar-utils.js @@ -1,166 +1,164 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import stringHash from 'string-hash'; import { userIdentifiedByETHAddress } from './account-utils.js'; import { selectedThreadColors } from './color-utils.js'; import { threadOtherMembers } from './thread-utils.js'; import genesis from '../facts/genesis.js'; import { useENSAvatar } from '../hooks/ens-cache.js'; import { threadInfoSelector } from '../selectors/thread-selectors.js'; import type { ClientEmojiAvatar, ClientAvatar, ResolvedClientAvatar, } from '../types/avatar-types.js'; import { type RawThreadInfo, type ThreadInfo, threadTypes, } from '../types/thread-types.js'; import type { UserInfos, UserInfo } from '../types/user-types.js'; import { useSelector } from '../utils/redux-utils.js'; const defaultAnonymousUserEmojiAvatar: ClientEmojiAvatar = { color: selectedThreadColors[4], emoji: '👤', type: 'emoji', }; const defaultEmojiAvatars: $ReadOnlyArray = [ { color: selectedThreadColors[7], emoji: '😀', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '😆', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🤩', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🏈', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '👻', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🧑‍🚀', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🎩', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🍦', type: 'emoji' }, { color: selectedThreadColors[6], emoji: '🚀', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🥰', type: 'emoji' }, { color: selectedThreadColors[3], emoji: '🐬', type: 'emoji' }, { color: selectedThreadColors[4], emoji: '🍀', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🍕', type: 'emoji' }, { color: selectedThreadColors[0], emoji: '🙄', type: 'emoji' }, { color: selectedThreadColors[1], emoji: '🥳', type: 'emoji' }, { color: selectedThreadColors[7], emoji: '🥸', type: 'emoji' }, { color: selectedThreadColors[2], emoji: '🦋', type: 'emoji' }, { color: selectedThreadColors[9], emoji: '🏆', type: 'emoji' }, { color: selectedThreadColors[5], emoji: '🎲', type: 'emoji' }, { color: selectedThreadColors[8], emoji: '🏀', type: 'emoji' }, ]; function getDefaultAvatar(hashKey: string, color?: string): ClientEmojiAvatar { const avatarIndex = stringHash(hashKey) % defaultEmojiAvatars.length; return { ...defaultEmojiAvatars[avatarIndex], color: color ? color : defaultEmojiAvatars[avatarIndex].color, }; } function getAvatarForUser( user: ?{ +avatar?: ?ClientAvatar, +username?: ?string, ... }, ): ClientAvatar { if (user?.avatar) { return user.avatar; } if (!user?.username) { return defaultAnonymousUserEmojiAvatar; } return getDefaultAvatar(user.username); } function getUserAvatarForThread( threadInfo: RawThreadInfo | ThreadInfo, viewerID: ?string, userInfos: UserInfos, ): ClientAvatar { if (threadInfo.type === threadTypes.PRIVATE) { invariant(viewerID, 'viewerID should be set for PRIVATE threads'); return getAvatarForUser(userInfos[viewerID]); } invariant( threadInfo.type === threadTypes.PERSONAL, 'threadInfo should be a PERSONAL type', ); const memberInfos = threadOtherMembers(threadInfo.members, viewerID) .map(member => userInfos[member.id] && userInfos[member.id]) .filter(Boolean); if (memberInfos.length === 0) { return defaultAnonymousUserEmojiAvatar; } return getAvatarForUser(memberInfos[0]); } -function useGetAvatarForThread( - thread: RawThreadInfo | ThreadInfo, -): ClientAvatar { +function useAvatarForThread(thread: RawThreadInfo | ThreadInfo): ClientAvatar { const containingThreadID = thread.containingThreadID; const containingThreadInfo = useSelector(state => containingThreadID ? threadInfoSelector(state)[containingThreadID] : null, ); if (thread.avatar) { return thread.avatar; } if (thread.containingThreadID && thread.containingThreadID !== genesis.id) { invariant(containingThreadInfo, 'containingThreadInfo should be set'); return containingThreadInfo.avatar ? containingThreadInfo.avatar : getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color); } return getDefaultAvatar(thread.id, thread.color); } function useENSResolvedAvatar( avatarInfo: ClientAvatar, userInfo: ?UserInfo, ): ResolvedClientAvatar { const ethAddress = React.useMemo(() => { let address = null; if (userInfo && avatarInfo.type === 'ens') { const { username } = userInfo; address = username && userIdentifiedByETHAddress(userInfo) ? username : null; } return address; }, [avatarInfo.type, userInfo]); const ensAvatarURI = useENSAvatar(ethAddress); const resolvedAvatar = React.useMemo(() => { if (avatarInfo.type !== 'ens') { return avatarInfo; } if (ensAvatarURI) { return { type: 'image', uri: ensAvatarURI, }; } return defaultAnonymousUserEmojiAvatar; }, [ensAvatarURI, avatarInfo]); return resolvedAvatar; } export { getAvatarForUser, getUserAvatarForThread, - useGetAvatarForThread, + useAvatarForThread, useENSResolvedAvatar, }; diff --git a/native/components/thread-avatar.react.js b/native/components/thread-avatar.react.js index 2d6111a74..68b6b2d77 100644 --- a/native/components/thread-avatar.react.js +++ b/native/components/thread-avatar.react.js @@ -1,51 +1,51 @@ // @flow import * as React from 'react'; import { - useGetAvatarForThread, + useAvatarForThread, useENSResolvedAvatar, } from 'lib/shared/avatar-utils.js'; import { getSingleOtherUser } from 'lib/shared/thread-utils.js'; import { threadTypes, type RawThreadInfo, type ThreadInfo, } from 'lib/types/thread-types.js'; import Avatar from './avatar.react.js'; import { useSelector } from '../redux/redux-utils.js'; type Props = { +threadInfo: RawThreadInfo | ThreadInfo, +size: 'micro' | 'small' | 'large' | 'profile', }; function ThreadAvatar(props: Props): React.Node { const { threadInfo, size } = props; - const avatarInfo = useGetAvatarForThread(threadInfo); + const avatarInfo = useAvatarForThread(threadInfo); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); let displayUserIDForThread; if (threadInfo.type === threadTypes.PRIVATE) { displayUserIDForThread = viewerID; } else if (threadInfo.type === threadTypes.PERSONAL) { displayUserIDForThread = getSingleOtherUser(threadInfo, viewerID); } const displayUser = useSelector(state => displayUserIDForThread ? state.userStore.userInfos[displayUserIDForThread] : null, ); const resolvedThreadAvatar = useENSResolvedAvatar(avatarInfo, displayUser); return ; } export default ThreadAvatar;