From 1e515d528404fba3bb9738ab9b89192c7b091cc7 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Sun, 14 Dec 2025 17:19:49 -0500
Subject: [PATCH] move refetching logic to Links component

---
 .../LinkViews/LinkComponents/LinkCard.tsx     | 29 +------------------
 .../LinkViews/LinkComponents/LinkMasonry.tsx  | 29 +------------------
 apps/web/components/LinkViews/Links.tsx       | 22 ++++++++++++++
 3 files changed, 24 insertions(+), 56 deletions(-)

diff --git a/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx b/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
index 63e523b0..a7058adc 100644
--- a/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/apps/web/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@linkwarden/types";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
@@ -14,12 +14,10 @@ import {
   formatAvailable,
 } from "@linkwarden/lib/formatStats";
 import LinkIcon from "./LinkIcon";
-import useOnScreen from "@/hooks/useOnScreen";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
 import LinkTypeBadge from "./LinkTypeBadge";
 import { useUser } from "@linkwarden/router/user";
-import { useGetLink } from "@linkwarden/router/links";
 import useLocalSettingsStore from "@/store/localSettings";
 import LinkPin from "./LinkPin";
 import LinkFormats from "./LinkFormats";
@@ -67,36 +65,11 @@ export default function LinkCard({
     settings: { show },
   } = useLocalSettingsStore();
 
-  const { refetch } = useGetLink({ id: link.id as number, isPublicRoute });
-
   const ref = useRef<HTMLDivElement>(null);
-  const isVisible = useOnScreen(ref);
   const permissions = usePermissions(collection?.id as number);
 
   const [linkModal, setLinkModal] = useState(false);
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
-
-    if (
-      isVisible &&
-      !link.preview?.startsWith("archives") &&
-      link.preview !== "unavailable"
-    ) {
-      interval = setInterval(async () => {
-        refetch().catch((error) => {
-          console.error("Error refetching link:", error);
-        });
-      }, 5000);
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [isVisible, link.preview]);
-
   const selectable =
     editMode &&
     (permissions === true || permissions?.canCreate || permissions?.canDelete);
diff --git a/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx b/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
index e56f87e1..b73c78e3 100644
--- a/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
+++ b/apps/web/components/LinkViews/LinkComponents/LinkMasonry.tsx
@@ -3,7 +3,7 @@ import {
   CollectionIncludingMembersAndLinkCount,
   LinkIncludingShortenedCollectionAndTags,
 } from "@linkwarden/types";
-import { useEffect, useRef, useState } from "react";
+import { useRef, useState } from "react";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
@@ -15,12 +15,10 @@ import {
 } from "@linkwarden/lib/formatStats";
 import Link from "next/link";
 import LinkIcon from "./LinkIcon";
-import useOnScreen from "@/hooks/useOnScreen";
 import usePermissions from "@/hooks/usePermissions";
 import toast from "react-hot-toast";
 import LinkTypeBadge from "./LinkTypeBadge";
 import { useUser } from "@linkwarden/router/user";
-import { useGetLink } from "@linkwarden/router/links";
 import useLocalSettingsStore from "@/store/localSettings";
 import clsx from "clsx";
 import LinkPin from "./LinkPin";
@@ -70,34 +68,9 @@ export default function LinkMasonry({
     settings: { show },
   } = useLocalSettingsStore();
 
-  const { refetch } = useGetLink({ id: link.id as number, isPublicRoute });
-
   const ref = useRef<HTMLDivElement>(null);
-  const isVisible = useOnScreen(ref);
   const permissions = usePermissions(collection?.id as number);
 
-  useEffect(() => {
-    let interval: NodeJS.Timeout | null = null;
-
-    if (
-      isVisible &&
-      !link.preview?.startsWith("archives") &&
-      link.preview !== "unavailable"
-    ) {
-      interval = setInterval(async () => {
-        refetch().catch((error) => {
-          console.error("Error refetching link:", error);
-        });
-      }, 5000);
-    }
-
-    return () => {
-      if (interval) {
-        clearInterval(interval);
-      }
-    };
-  }, [isVisible, link.preview]);
-
   const selectable =
     editMode &&
     (permissions === true || permissions?.canCreate || permissions?.canDelete);
diff --git a/apps/web/components/LinkViews/Links.tsx b/apps/web/components/LinkViews/Links.tsx
index f7f7339c..27f24466 100644
--- a/apps/web/components/LinkViews/Links.tsx
+++ b/apps/web/components/LinkViews/Links.tsx
@@ -375,6 +375,28 @@ export default function Links({
     }
   }, [editMode]);
 
+  useEffect(() => {
+    let interval: NodeJS.Timeout | null = null;
+
+    if (
+      links?.some(
+        (e) => !e.preview?.startsWith("archives") && e.preview !== "unavailable"
+      )
+    ) {
+      interval = setInterval(async () => {
+        useData.refetch().catch((error: any) => {
+          console.error("Error refetching link:", error);
+        });
+      }, 5000);
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [links]);
+
   if (layout === ViewMode.List) {
     return (
       <ListView