refactor(shared/component): extract useCharacterAvatar from avatar

shared/components/avatar/index.tsx

@@ -1,13 +1,11 @@
 import React from "react";
-import { useCharacter } from "@crossbell/indexer";
-import { ipfsLinkToHttpLink } from "@crossbell/util-ipfs";
-import { extractCharacterAvatar } from "@crossbell/util-metadata";
 import { Avatar as Avatar_, AvatarProps } from "@mantine/core";
 import { CharacterEntity } from "crossbell.js";
 import { PropsWithChildren } from "react";
 
 import CharacterHoverCard from "~/shared/components/character/character-hover-card";
-import { getDefaultAvatar } from "~/shared/avatar";
+
+import { useCharacterAvatar } from "./use-character-avatar";
 
 export function Avatar({
 	characterId,
@@ -30,29 +28,17 @@ export function Avatar({
 		showHoverCard?: boolean;
 	} & AvatarProps
 >) {
-	const { isLoading, data: character } = useCharacter(
-		characterId ?? initialCharacter?.characterId,
-		{
-			enabled: Boolean(characterId) && !src,
-			initialData: initialCharacter,
-		}
-	);
-
-	let src_ =
-		src ??
-		extractCharacterAvatar(character) ??
-		(isLoading
-			? getDefaultAvatar()
-			: extractCharacterAvatar(character) ??
-			  getDefaultAvatar(character?.handle));
-
-	src_ = ipfsLinkToHttpLink(src_);
+	const { src: avatarSrc, character } = useCharacterAvatar({
+		character: initialCharacter,
+		characterId,
+		disabled: !!src,
+	});
 
 	return (
 		<CharacterHoverCard character={character} showHoverCard={showHoverCard}>
 			<Avatar_
 				className="bg-coolgray-100"
-				src={src_}
+				src={src ?? avatarSrc}
 				alt={alt}
 				radius="xl"
 				{...props}

shared/components/avatar/use-character-avatar.ts

@@ -0,0 +1,40 @@
+import { useCharacter } from "@crossbell/indexer";
+import { extractCharacterAvatar } from "@crossbell/util-metadata";
+import { ipfsLinkToHttpLink } from "@crossbell/util-ipfs";
+import { CharacterEntity } from "crossbell.js";
+
+import { getDefaultAvatar } from "~/shared/avatar";
+import React from "react";
+
+export type UseCharacterAvatarParams = {
+	characterId?: number | null;
+	character?: CharacterEntity | null;
+	disabled?: boolean;
+};
+
+export function useCharacterAvatar({
+	character,
+	characterId,
+	disabled,
+}: UseCharacterAvatarParams) {
+	const { isLoading, data } = useCharacter(
+		characterId ?? character?.characterId,
+		{
+			enabled: !!characterId && !disabled,
+			initialData: character,
+		}
+	);
+
+	return React.useMemo(
+		() => ({
+			src: ipfsLinkToHttpLink(
+				extractCharacterAvatar(data) ??
+					(isLoading
+						? getDefaultAvatar()
+						: extractCharacterAvatar(data) ?? getDefaultAvatar(data?.handle))
+			),
+			character: data,
+		}),
+		[data, isLoading]
+	);
+}