fix: image in widget

Crossbell-Box · Aug 24, 2022 · 775f7d7 · 775f7d7
1 parent 2b9fbf0
commit 775f7d7
Show file tree

Hide file tree

Showing 4 changed files with 138 additions and 118 deletions.
diff --git a/components/common/Image/index.tsx b/components/common/Image/index.tsx
@@ -4,7 +4,7 @@ import {
 	type ImageLoader,
 	type ImageProps,
 } from "next/future/image";
-import { PropsWithChildren, useState } from "react";
+import { PropsWithChildren, useEffect, useState } from "react";
 
 // Pixel GIF code adapted from https://stackoverflow.com/a/33919020/266535
 const keyStr =
@@ -74,6 +74,10 @@ export default function Image({
 
 	const [_src, _setSrc] = useState(src);
 
+	useEffect(() => {
+		_setSrc(src);
+	}, [src]);
+
 	return (
 		<NextImage
 			src={_src}

diff --git a/components/common/Note/MediaCarousel.tsx b/components/common/Note/MediaCarousel.tsx
@@ -109,98 +109,105 @@ export default function MediaCarousel({
 
 	// check clicking event
 	const [dragStartPos, setDragStartPos] = useState({ x: 0, y: 0 });
-	const onMouseDown = (
-		e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>
-	) => {
-		setDragStartPos({ x: e.screenX, y: e.screenY });
-	};
-	const onMouseUp = (e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
-		const dragX = Math.abs(dragStartPos.x - e.screenX);
-		const dragY = Math.abs(dragStartPos.y - e.screenY);
-		if (dragX < 5 && dragY < 5) {
-			// console.log(`click with drag of ${dragX}, ${dragY}`);
-			onTap?.(e);
-		} else {
-			// console.log(`click cancelled with drag of ${dragX}, ${dragY}`);
-		}
-	};
+	const onMouseDown = useCallback(
+		(e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+			setDragStartPos({ x: e.screenX, y: e.screenY });
+		},
+		[]
+	);
+	const onMouseUp = useCallback(
+		(e: MouseEvent<HTMLDivElement, globalThis.MouseEvent>) => {
+			const dragX = Math.abs(dragStartPos.x - e.screenX);
+			const dragY = Math.abs(dragStartPos.y - e.screenY);
+			if (dragX < 5 && dragY < 5) {
+				// console.log(`click with drag of ${dragX}, ${dragY}`);
+				onTap?.(e);
+			} else {
+				// console.log(`click cancelled with drag of ${dragX}, ${dragY}`);
+			}
+		},
+		[dragStartPos, onTap]
+	);
 
-	const renderAttachments = ({
-		isThumbnail = false,
-	}: {
-		isThumbnail?: boolean;
-	} = {}) => {
-		return validAttachments.map((a, index) => {
-			const mediaType = mimeTypeToMediaType(a.mime_type!);
-			if (a.address) {
-				const src = ipfsLinkToHttpLink(a.address);
-				if (mediaType === "image") {
-					return (
-						<Carousel.Slide key={index}>
-							<div
-								className={classNames(
-									"relative overflow-hidden flex justify-center items-center",
-									{
-										"h-300px": !isThumbnail && !isOverlay,
-										"h-80vh": !isThumbnail && isOverlay,
-										"h-100px rounded-md": isThumbnail,
-									}
-								)}
-								data-overlay-tap-area="1"
-							>
-								{!isThumbnail && isOverlay ? (
-									<img src={src} className="max-h-80vh max-w-full" />
-								) : (
-									<Image
-										alt={a.alt ?? "image"}
-										src={src}
-										className={classNames("transition-opacity object-cover", {
-											"opacity-20": isThumbnail && index !== selectedIndex,
-										})}
-										fill={!isThumbnail}
-										sizes={
-											!isThumbnail
-												? "(min-width: 75em) 33vw, (min-width: 48em) 50vw, 100vw"
-												: undefined
+	const renderAttachments = useCallback(
+		({
+			isThumbnail = false,
+		}: {
+			isThumbnail?: boolean;
+		} = {}) => {
+			return validAttachments.map((a, index) => {
+				const mediaType = mimeTypeToMediaType(a.mime_type!);
+				if (a.address) {
+					const src = ipfsLinkToHttpLink(a.address);
+					if (mediaType === "image") {
+						return (
+							<Carousel.Slide key={index}>
+								<div
+									className={classNames(
+										"relative overflow-hidden flex justify-center items-center",
+										{
+											"h-300px": !isThumbnail && !isOverlay,
+											"h-80vh": !isThumbnail && isOverlay,
+											"h-100px rounded-md": isThumbnail,
 										}
-										width={isThumbnail ? 100 : undefined}
-										height={isThumbnail ? 100 : undefined}
-										onClick={() => {
-											if (!isThumbnail && !isOverlay) {
-												setOverlayOpened(true);
-											} else {
-												handleThumbClick(index);
+									)}
+									data-overlay-tap-area="1"
+								>
+									{!isThumbnail && isOverlay ? (
+										<img src={src} className="max-h-80vh max-w-full" />
+									) : (
+										<Image
+											alt={a.alt ?? "image"}
+											src={src}
+											className={classNames("transition-opacity object-cover", {
+												"opacity-20": isThumbnail && index !== selectedIndex,
+											})}
+											fill={!isThumbnail}
+											sizes={
+												!isThumbnail
+													? "(min-width: 75em) 33vw, (min-width: 48em) 50vw, 100vw"
+													: undefined
 											}
-										}}
-									/>
-								)}
-							</div>
-						</Carousel.Slide>
-					);
-				}
+											width={isThumbnail ? 100 : undefined}
+											height={isThumbnail ? 100 : undefined}
+											onClick={() => {
+												if (!isThumbnail && !isOverlay) {
+													setOverlayOpened(true);
+												} else {
+													handleThumbClick(index);
+												}
+											}}
+										/>
+									)}
+								</div>
+							</Carousel.Slide>
+						);
+					}
 
-				if (mediaType === "video") {
-					return (
-						<Carousel.Slide key={index}>
-							<div
-								className={classNames("flex justify-center items-center", {
-									"h-300px": !isThumbnail && !isOverlay,
-									"h-80vh": !isThumbnail && isOverlay,
-									"h-100px rounded-md": isThumbnail,
-								})}
-								style={{ width: mainWidth }}
-							>
-								{/* TODO: should not be in thumbnail */}
-								<VideoPlayer url={src} controls />
-							</div>
-						</Carousel.Slide>
-					);
+					if (mediaType === "video") {
+						return (
+							<Carousel.Slide key={index}>
+								<div
+									className={classNames("flex justify-center items-center", {
+										"h-300px": !isThumbnail && !isOverlay,
+										"h-80vh": !isThumbnail && isOverlay,
+										"h-100px rounded-md": isThumbnail,
+									})}
+									style={{ width: mainWidth }}
+								>
+									{/* TODO: should not be in thumbnail */}
+									<VideoPlayer url={src} controls />
+								</div>
+							</Carousel.Slide>
+						);
+					}
 				}
-			}
 
-			return <Carousel.Slide key={index}></Carousel.Slide>;
-		});
-	};
+				return <Carousel.Slide key={index}></Carousel.Slide>;
+			});
+		},
+		[validAttachments, isOverlay, mainWidth]
+	);
 
 	if (!validAttachments || validAttachments?.length === 0) {
 		return <></>;

diff --git a/components/common/Note/index.tsx b/components/common/Note/index.tsx
@@ -267,16 +267,18 @@ export function Note({
 		note.metadata?.content?.attachments
 	);
 
+	const handlePrefetchNotePage = useCallback(() => {
+		prefetch();
+	}, []);
+
 	return (
 		<div
 			className={classNames("flex w-full py-3 px-3 border-b border-gray/20", {
 				"bg-hover cursor-pointer flex-row": displayMode === "normal",
 				"flex-col": displayMode === "main",
 			})}
-			onClick={() => navigate()}
-			onMouseEnter={() => {
-				prefetch();
-			}}
+			onClick={navigate}
+			onMouseEnter={handlePrefetchNotePage}
 		>
 			{/* avatar & username */}
 			<div className="flex">
@@ -341,6 +343,30 @@ function NoteActions({
 
 	const { navigate } = useNavigateToNote(characterId, noteId);
 
+	const handleLike = useCallback(() => {
+		if (status?.isLiked) {
+			unlikeNote.mutate();
+		} else {
+			likeNote.mutate();
+		}
+	}, [status?.isLiked]);
+
+	const handleMint = useCallback(() => {
+		if (!status?.isMinted) {
+			mintNote.mutate();
+		}
+	}, [status?.isMinted]);
+
+	const handleCopyToClipboard = useCallback(async () => {
+		await copyToClipboard(
+			location.origin + composeNoteHref(characterId, noteId)
+		);
+		showNotification({
+			message: "Copied to Clipboard!",
+			disallowClose: true,
+		});
+	}, [characterId, noteId]);
+
 	return (
 		<div className="flex items-center justify-between">
 			<LoadingOverlay
@@ -358,9 +384,7 @@ function NoteActions({
 				icon="i-csb:comment"
 				bgHoverColor="group-hover:bg-blue/10"
 				textHoverColor="group-hover:text-blue"
-				onClick={() => {
-					navigate();
-				}}
+				onClick={navigate}
 			/>
 
 			{/* like */}
@@ -371,13 +395,7 @@ function NoteActions({
 				color={status?.isLiked ? "text-red" : "text-dimmed"}
 				bgHoverColor="group-hover:bg-red/10"
 				textHoverColor="group-hover:text-red"
-				onClick={() => {
-					if (status?.isLiked) {
-						unlikeNote.mutate();
-					} else {
-						likeNote.mutate();
-					}
-				}}
+				onClick={handleLike}
 			/>
 
 			{/* mint */}
@@ -388,11 +406,7 @@ function NoteActions({
 				color={status?.isMinted ? "text-yellow" : "text-dimmed"}
 				bgHoverColor="group-hover:bg-yellow/10"
 				textHoverColor="group-hover:text-yellow"
-				onClick={() => {
-					if (!status?.isMinted) {
-						mintNote.mutate();
-					}
-				}}
+				onClick={handleMint}
 			/>
 
 			{/* share */}
@@ -401,15 +415,7 @@ function NoteActions({
 				icon="i-csb:share"
 				bgHoverColor="group-hover:bg-green/10"
 				textHoverColor="group-hover:text-green"
-				onClick={async () => {
-					await copyToClipboard(
-						location.origin + composeNoteHref(characterId, noteId)
-					);
-					showNotification({
-						message: "Copied to Clipboard!",
-						disallowClose: true,
-					});
-				}}
+				onClick={handleCopyToClipboard}
 			/>
 
 			{/* used for ui placeholder */}
@@ -473,11 +479,13 @@ export function NoteSkeleton() {
 function useNavigateToNote(characterId: number, noteId: number) {
 	const router = useRouter();
 	const targetURL = composeNoteHref(characterId, noteId);
-	const navigate = () => {
+
+	const navigate = useCallback(() => {
 		if (router.asPath === targetURL) return;
 
 		router.push(targetURL);
-	};
+	}, [router.asPath, targetURL]);
+
 	const prefetch = () => {
 		if (router.asPath === targetURL) return;
 

diff --git a/utils/wallet/provider.tsx b/utils/wallet/provider.tsx
@@ -32,7 +32,8 @@ const crossbellChain: Chain = {
 
 const { chains, provider } = configureChains(
 	[crossbellChain],
-	[jsonRpcProvider({ rpc: (chain) => ({ http: chain.rpcUrls.default }) })]
+	[jsonRpcProvider({ rpc: (chain) => ({ http: chain.rpcUrls.default }) })],
+	{ pollingInterval: 1_000 }
 );
 
 // const { connectors } = getDefaultWallets({