Differential D7260 Diff 24444 lib/shared/avatar-utils.js

Changeset View

Standalone View

lib/shared/avatar-utils.js

// @flow		// @flow

import invariant from 'invariant';		import invariant from 'invariant';
		import * as React from 'react';
import stringHash from 'string-hash';		import stringHash from 'string-hash';

		import { userIdentifiedByETHAddress } from './account-utils.js';
import { selectedThreadColors } from './color-utils.js';		import { selectedThreadColors } from './color-utils.js';
import { threadOtherMembers } from './thread-utils.js';		import { threadOtherMembers } from './thread-utils.js';
import genesis from '../facts/genesis.js';		import genesis from '../facts/genesis.js';
		import { useENSAvatar } from '../hooks/ens-cache.js';
import { threadInfoSelector } from '../selectors/thread-selectors.js';		import { threadInfoSelector } from '../selectors/thread-selectors.js';
import type { ClientEmojiAvatar, ClientAvatar } from '../types/avatar-types.js';		import type {
		ClientEmojiAvatar,
		ClientImageAvatar,
		ClientAvatar,
		} from '../types/avatar-types.js';
import {		import {
type RawThreadInfo,		type RawThreadInfo,
type ThreadInfo,		type ThreadInfo,
threadTypes,		threadTypes,
} from '../types/thread-types.js';		} from '../types/thread-types.js';
import type { UserInfos } from '../types/user-types.js';		import type { UserInfos } from '../types/user-types.js';
import { useSelector } from '../utils/redux-utils.js';		import { useSelector } from '../utils/redux-utils.js';

▲ Show 20 Lines • Show All 93 Lines • ▼ Show 20 Lines	if (thread.containingThreadID && thread.containingThreadID !== genesis.id) {
return containingThreadInfo.avatar		return containingThreadInfo.avatar
? containingThreadInfo.avatar		? containingThreadInfo.avatar
: getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);		: getDefaultAvatar(containingThreadInfo.id, containingThreadInfo.color);
}		}

return getDefaultAvatar(thread.id, thread.color);		return getDefaultAvatar(thread.id, thread.color);
}		}

		function useAvatarForUserID(
		ashoatUnsubmitted Not Done Inline Actions This is a confusing specification (name, list of params) for this function. Its real function is ENS resolution. It's given an `avatarInfo`, and if it finds `avatarInfo.type === 'ens'`, then it looks for the ENS avatar of the provided `userID` Several suggestions: Instead of `userID`, pass in `userInfo` or (even better) `ensAddress`. `UserAvatar` already fetches `userInfo` so this would avoid "fetching it twice", and more importantly it makes it clear what it's being used for (especially if it's `ensAddress`) We should swap the parameter order. The more important thing here is `avatarInfo`. Unless it's `{ +type: 'ens' }`, the other parameter is ignored We should rename the function to eg. `useResolvedAvatar` or `useENSResolvedAvatar` ashoat: This is a confusing specification (name, list of params) for this function. Its real function…
		userID: ?string,
		avatarInfo: ClientAvatar,
		): ClientEmojiAvatar \| ClientImageAvatar {
		const userInfos = useSelector(state => state.userStore.userInfos);
		const userInfo = userID ? userInfos[userID] : null;

		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 avatar = React.useMemo(() => {
		if (avatarInfo.type !== 'ens') {
		return avatarInfo;
		}

		if (ensAvatarURI) {
		return {
		type: 'image',
		uri: ensAvatarURI,
		};
		}

		return defaultAnonymousUserEmojiAvatar;
		}, [ensAvatarURI, avatarInfo]);

		return avatar;
		}

export {		export {
defaultAnonymousUserEmojiAvatar,
getAvatarForUser,		getAvatarForUser,
getUserAvatarForThread,		getUserAvatarForThread,
useGetAvatarForThread,		useGetAvatarForThread,
		useAvatarForUserID,
};		};