cleanup

src/features/post/crosspost/CrosspostContents.tsx

@@ -4,17 +4,13 @@ import { repeat } from "ionicons/icons";
 import { arrowUpSharp } from "ionicons/icons";
 import { chatbubbleOutline } from "ionicons/icons";
 import { PostView } from "lemmy-js-client";
-import { useEffect } from "react";
 
-import { imageLoaded } from "#/features/media/imageSlice";
-import useAspectRatio from "#/features/media/useAspectRatio";
 import LargePostContents from "#/features/post/inFeed/large/LargePostContents";
-import usePostSrc from "#/features/post/inFeed/usePostSrc";
 import { cx } from "#/helpers/css";
 import { formatNumber } from "#/helpers/number";
-import { useAppDispatch } from "#/store";
 
 import { CrosspostProps } from "./Crosspost";
+import { useCopyPostAspectRatioIfNeeded } from "./useCopyPostAspectRatioIfNeeded";
 
 import styles from "./CrosspostContents.module.css";
 
@@ -28,21 +24,7 @@ export default function CrosspostContents({
   hasBeenRead,
   post,
 }: CrosspostContentsProps) {
-  const dispatch = useAppDispatch();
-  const postAspectRatio = useAspectRatio(usePostSrc(post));
-  const crosspostSrc = usePostSrc(crosspost);
-  const crosspostAspectRatio = useAspectRatio(crosspostSrc);
-
-  // Workaround to immediately copy over the aspect ratio of the original image
-  // to avoid flickering when the new crosspost image src loads
-  useEffect(() => {
-    if (!crosspostSrc) return;
-    if (postAspectRatio && !crosspostAspectRatio) {
-      dispatch(
-        imageLoaded({ src: crosspostSrc, aspectRatio: postAspectRatio }),
-      );
-    }
-  }, [crosspostSrc, postAspectRatio, crosspostAspectRatio, dispatch]);
+  useCopyPostAspectRatioIfNeeded(post, crosspost);
 
   return (
     <>

src/features/post/crosspost/useCopyPostAspectRatioIfNeeded.ts

@@ -0,0 +1,30 @@
+import { PostView } from "lemmy-js-client";
+import { useEffect } from "react";
+
+import { imageLoaded } from "#/features/media/imageSlice";
+import useAspectRatio from "#/features/media/useAspectRatio";
+import usePostSrc from "#/features/post/inFeed/usePostSrc";
+import { useAppDispatch } from "#/store";
+
+/**
+ * Workaround to immediately copy over the aspect ratio of the original image
+ * to avoid flickering when the new crosspost image src loads
+ */
+export function useCopyPostAspectRatioIfNeeded(
+  post: PostView | undefined,
+  crosspost: PostView | undefined,
+) {
+  const dispatch = useAppDispatch();
+  const postAspectRatio = useAspectRatio(usePostSrc(post));
+  const crosspostSrc = usePostSrc(crosspost);
+  const crosspostAspectRatio = useAspectRatio(crosspostSrc);
+
+  useEffect(() => {
+    if (!crosspostSrc) return;
+    if (postAspectRatio && !crosspostAspectRatio) {
+      dispatch(
+        imageLoaded({ src: crosspostSrc, aspectRatio: postAspectRatio }),
+      );
+    }
+  }, [crosspostSrc, postAspectRatio, crosspostAspectRatio, dispatch]);
+}