From 6b97c0a70f4e27dd091ded60a6e20f4efb1bc9c0 Mon Sep 17 00:00:00 2001
From: Stefan Hardegger <dev@hardegger.io>
Date: Mon, 18 Aug 2025 10:41:32 +0200
Subject: [PATCH] fix loop

---
 frontend/src/app/library/page.tsx             | 45 ++++++++++---------
 frontend/src/components/stories/StoryCard.tsx | 11 +----
 .../components/stories/StoryMultiSelect.tsx   |  8 ----
 3 files changed, 27 insertions(+), 37 deletions(-)

diff --git a/frontend/src/app/library/page.tsx b/frontend/src/app/library/page.tsx
index a577e37..44f6daa 100644
--- a/frontend/src/app/library/page.tsx
+++ b/frontend/src/app/library/page.tsx
@@ -93,27 +93,32 @@ export default function LibraryPage() {
 
   // Enrich existing tags when fullTags are loaded
   useEffect(() => {
-    if (fullTags.length > 0 && tags.length > 0) {
-      // Check if tags already have color data to avoid infinite loops
-      const hasColors = tags.some(tag => tag.color);
-      if (!hasColors) {
-        // Re-enrich existing tags with color data
-        const enrichedTags = tags.map(tag => {
-          const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
-          return {
-            ...tag,
-            color: fullTag?.color,
-            description: fullTag?.description,
-            aliasCount: fullTag?.aliasCount,
-            createdAt: fullTag?.createdAt,
-            aliases: fullTag?.aliases,
-            id: fullTag?.id || tag.id
-          };
-        });
-        setTags(enrichedTags);
-      }
+    if (fullTags.length > 0) {
+      // Use functional update to get the current tags state
+      setTags(currentTags => {
+        if (currentTags.length > 0) {
+          // Check if tags already have color data to avoid infinite loops
+          const hasColors = currentTags.some(tag => tag.color);
+          if (!hasColors) {
+            // Re-enrich existing tags with color data
+            return currentTags.map(tag => {
+              const fullTag = fullTags.find(ft => ft.name.toLowerCase() === tag.name.toLowerCase());
+              return {
+                ...tag,
+                color: fullTag?.color,
+                description: fullTag?.description,
+                aliasCount: fullTag?.aliasCount,
+                createdAt: fullTag?.createdAt,
+                aliases: fullTag?.aliases,
+                id: fullTag?.id || tag.id
+              };
+            });
+          }
+        }
+        return currentTags; // Return unchanged if no enrichment needed
+      });
     }
-  }, [fullTags, tags]); // Run when fullTags or tags change
+  }, [fullTags]); // Only run when fullTags change
   
   // Debounce search to avoid too many API calls
   useEffect(() => {
diff --git a/frontend/src/components/stories/StoryCard.tsx b/frontend/src/components/stories/StoryCard.tsx
index a1b1830..b391a58 100644
--- a/frontend/src/components/stories/StoryCard.tsx
+++ b/frontend/src/components/stories/StoryCard.tsx
@@ -29,7 +29,6 @@ export default function StoryCard({
   const [updating, setUpdating] = useState(false);
 
   const handleRatingClick = async (e: React.MouseEvent, newRating: number) => {
-    console.log('Rating click:', newRating, 'for story:', story.title);
     // Prevent default and stop propagation to avoid triggering navigation
     e.preventDefault();
     e.stopPropagation();
@@ -58,10 +57,7 @@ export default function StoryCard({
 
   if (viewMode === 'list') {
     return (
-      <div 
-        className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow"
-        onClick={(e) => console.log('Story card clicked (list view):', story.title, 'Target:', e.target)}
-      >
+      <div className="theme-card theme-shadow rounded-lg p-4 hover:shadow-lg transition-shadow">
         <div className="flex gap-4">
           {/* Cover Image */}
           <div className="flex-shrink-0">
@@ -176,10 +172,7 @@ export default function StoryCard({
 
   // Grid view
   return (
-    <div 
-      className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group"
-      onClick={(e) => console.log('Story card clicked (grid view):', story.title, 'Target:', e.target)}
-    >
+    <div className="theme-card theme-shadow rounded-lg overflow-hidden hover:shadow-lg transition-shadow group">
       {/* Cover Image */}
       <Link href={`/stories/${story.id}`}>
         <div className="aspect-[3/4] bg-gray-200 dark:bg-gray-700 overflow-hidden">
diff --git a/frontend/src/components/stories/StoryMultiSelect.tsx b/frontend/src/components/stories/StoryMultiSelect.tsx
index e7de941..937472e 100644
--- a/frontend/src/components/stories/StoryMultiSelect.tsx
+++ b/frontend/src/components/stories/StoryMultiSelect.tsx
@@ -20,16 +20,8 @@ export default function StoryMultiSelect({
 }: StoryMultiSelectProps) {
   const [selectedStoryIds, setSelectedStoryIds] = useState<string[]>([]);
   const [isSelectionMode, setIsSelectionMode] = useState(false);
-  
-  console.log('StoryMultiSelect render:', { 
-    storiesCount: stories.length, 
-    isSelectionMode, 
-    selectedCount: selectedStoryIds.length,
-    allowMultiSelect 
-  });
 
   const handleStorySelect = (storyId: string) => {
-    console.log('Story selection triggered:', storyId, 'Selection mode:', isSelectionMode);
     setSelectedStoryIds(prev => {
       if (prev.includes(storyId)) {
         const newSelection = prev.filter(id => id !== storyId);