@c-rex/components 0.1.32 → 0.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c-rex/components",
-  "version": "0.1.32",
+  "version": "0.1.33",
   "files": [
     "src"
   ],

package/src/favorites/bookmark-button.analysis.md

@@ -2,16 +2,14 @@
 
 - Component: packages/components/src/favorites/bookmark-button.tsx
 - Type: Client component
-- Detected signals: useQueryStates=no, stores=no, window/document=yes, effects=yes, fetch/call=no
+- Detected signals: useQueryStates=no, stores=yes, window/document=no, effects=no, fetch/call=no
 
 ## Possible re-render causes
-- Effects that update state can add extra renders on mount and dependency changes.
+- Store updates for the selected document topics will re-render this component (expected and desired for live badge updates).
 
 ## Possible bugs/risks
-- Access to window/document needs care to avoid hydration mismatch and non-browser runtime issues.
-- markersList is loaded only on mount/shortId change; later store updates may not refresh the badge.
+- Dynamic Tailwind class name interpolation (`text-${item.color}`) may be purged depending on Tailwind safelist config.
 
 ## Recommended improvements
-- Keep browser-only access inside event handlers or useEffect, not in initial render paths.
-- Read documents[shortId]?.topics directly through a Zustand selector to keep UI reactive.
-
+- Keep the direct Zustand selector approach (`documents[shortId]?.topics`) to preserve reactive UI behavior.
+- If marker colors are dynamic, safelist all expected `text-*` classes or map colors to explicit class names.

package/src/favorites/bookmark-button.tsx

@@ -1,7 +1,7 @@
 "use client";
 
-import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
-import { Button, ButtonProps } from "@c-rex/ui/button";
+import { ComponentProps, FC, useState } from "react";
+import { Button } from "@c-rex/ui/button";
 import { Trash } from "lucide-react";
 import { cn } from "@c-rex/utils";
 import Link from "next/link";
@@ -20,17 +20,18 @@ type BookmarkProps = {
     triggerVariant?: ComponentProps<typeof Button>["variant"];
 }
 
+const EMPTY_TOPICS: Array<{ id: string; label: string; color: string }> = [];
+
 export const BookmarkButton: FC<BookmarkProps> = ({
     shortId,
     triggerVariant = "outline"
 }) => {
-    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
+    const [open, setOpen] = useState(false);
+    const document = useFavoritesStore((state) => state.documents[shortId]);
+    const markersList = document?.topics ?? EMPTY_TOPICS;
 
-    useEffect(() => {
-        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
-    }, [shortId]);
     return (
-        <Dialog>
+        <Dialog open={open} onOpenChange={setOpen}>
             <DialogTrigger asChild>
                 <Button variant={triggerVariant} size="icon" className="relative">
                     <FaRegBookmark className="text-primary" />
@@ -43,37 +44,38 @@ export const BookmarkButton: FC<BookmarkProps> = ({
                         </span>
                     )}
                 </Button>
-
             </DialogTrigger>
-            <DialogContent>
-                <DialogHeader>
-                    <DialogTitle>Bookmarks</DialogTitle>
-                    <DialogDescription>
-                        Manage your bookmarks here
-                    </DialogDescription>
-                </DialogHeader>
-                <Table>
-                    <TableBody>
-                        {markersList.map((item) => (
-                            <TableRow key={item.id} className="min-h-12">
-                                <TableCell>
-                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
-                                </TableCell>
-                                <TableCell>
-                                    <Link href={`${window.location.origin}/topics/${item.id}`}>
-                                        {item.label}
-                                    </Link>
-                                </TableCell>
-                                <TableCell>
-                                    <Button variant="destructive" size="icon">
-                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
-                                    </Button>
-                                </TableCell>
-                            </TableRow>
-                        ))}
-                    </TableBody>
-                </Table>
-            </DialogContent>
+            {open && (
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>Bookmarks</DialogTitle>
+                        <DialogDescription>
+                            Manage your bookmarks here
+                        </DialogDescription>
+                    </DialogHeader>
+                    <Table>
+                        <TableBody>
+                            {markersList.map((item) => (
+                                <TableRow key={item.id} className="min-h-12">
+                                    <TableCell>
+                                        <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                    </TableCell>
+                                    <TableCell>
+                                        <Link href={`/topics/${item.id}`}>
+                                            {item.label}
+                                        </Link>
+                                    </TableCell>
+                                    <TableCell>
+                                        <Button variant="destructive" size="icon">
+                                            <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                        </Button>
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </DialogContent>
+            )}
         </Dialog>
     )
 }

package/src/favorites/favorite-button.analysis.md

@@ -10,9 +10,8 @@
 
 ## Possible bugs/risks
 - Async flows can hit race conditions during fast param/route changes.
-- useEffect with empty deps calls getTopicDocumentData(id) and does not react if id/type changes.
+- Residual risk: fetch errors are silently ignored (except abort), which can hide API issues.
 
 ## Recommended improvements
-- Consider cancellation guards (isMounted or AbortController) and standardized error handling.
-- Include id and type in effect dependencies and handle fetch cancellation on unmount.
-
+- Keep cancellation guards (AbortController + unmount guard) in place as currently implemented.
+- Consider surfacing non-abort fetch failures through logging or telemetry.

package/src/favorites/favorite-button.tsx

@@ -19,10 +19,32 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
     const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
 
     useEffect(() => {
-        if (type === RESULT_TYPES.TOPIC) {
-            getTopicDocumentData(id);
+        if (type !== RESULT_TYPES.TOPIC) {
+            setDocumentData({ id, label });
+            return;
         }
-    }, []);
+
+        let isCancelled = false;
+        const controller = new AbortController();
+
+        const loadTopicDocumentData = async () => {
+            try {
+                const data = await getTopicDocumentData(id, controller.signal);
+                if (!isCancelled) {
+                    setDocumentData(data);
+                }
+            } catch (error) {
+                if ((error as Error).name === "AbortError") return;
+            }
+        };
+
+        loadTopicDocumentData();
+
+        return () => {
+            isCancelled = true;
+            controller.abort();
+        };
+    }, [id, label, type]);
 
     const addFavorite = async (id: string) => {
         if (type === RESULT_TYPES.DOCUMENT) {
@@ -45,17 +67,18 @@ export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }
         removeFavoriteTopic(documentData.id, id);
     }
 
-    const getTopicDocumentData = async (topicId: string): Promise<void> => {
+    const getTopicDocumentData = async (topicId: string, signal?: AbortSignal): Promise<{ id: string, label: string }> => {
 
         const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
-            method: "GET"
+            method: "GET",
+            signal,
         });
 
         if (!response.ok) throw new Error("Failed to fetch document by topic id")
 
-        const { documentId, label } = await response.json();
+        const { documentId, label: documentLabel } = await response.json();
 
-        setDocumentData({ id: documentId, label });
+        return { id: documentId, label: documentLabel };
     }
 
     if (isFavorite) {

package/src/stores/favorites-store.ts

@@ -60,29 +60,29 @@ export const useFavoritesStore = create<FavoritesStore>()(
 
 
 const favoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string, label: string, color: string): Record<string, { topics: Favorite[] }> => {
-
-    const documentsCopy = { ...documents };
-    const notFound = documents[documentId] == undefined;
-
-    if (notFound) {
-        documentsCopy[documentId] = { topics: [] };
-    }
-
-    documentsCopy[documentId]!.topics.push({ id, label, color });
-
-    return documentsCopy
+    const currentDocument = documents[documentId];
+    const topics = currentDocument?.topics || [];
+
+    return {
+        ...documents,
+        [documentId]: {
+            ...(currentDocument?.label ? { label: currentDocument.label } : {}),
+            topics: [...topics, { id, label, color }],
+        },
+    };
 };
 
 const unfavoriteTopic = (documents: Record<string, { topics: Favorite[] }>, documentId: string, id: string): Record<string, { topics: Favorite[] }> => {
-
-    const documentsCopy = { ...documents };
-    const notFound = documents[documentId] == undefined;
-
-    if (notFound) {
-        return documentsCopy;
+    const currentDocument = documents[documentId];
+    if (!currentDocument) {
+        return documents;
     }
 
-    documentsCopy[documentId]!.topics = documentsCopy[documentId]!.topics.filter(topic => topic.id !== id);
-
-    return documentsCopy
-}
+    return {
+        ...documents,
+        [documentId]: {
+            ...(currentDocument.label ? { label: currentDocument.label } : {}),
+            topics: currentDocument.topics.filter((topic) => topic.id !== id),
+        },
+    };
+}