@c-rex/components 0.1.37 → 0.1.39

package/src/documents/result-list.tsx

@@ -1,127 +1,124 @@
-import { FC } from "react";
-import { CommonItemsModel } from "@c-rex/interfaces";
-import { FileStack } from "lucide-react";
-import { cn, getType, getTitle, getVersions, getLanguage, generateQueryParams } from "@c-rex/utils";
-import { Button } from "@c-rex/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
-import { RESULT_TYPES } from "@c-rex/constants";
-import { FileDownloadDropdown } from "@c-rex/components/file-download";
-import { FavoriteButton } from "@c-rex/components/favorite-button";
-import { ImageRenditionContainer } from "../renditions/image/container";
-import { BookmarkButton } from "../favorites/bookmark-button";
-import { HtmlRendition } from "../renditions/html";
-import { QueryParams } from "@c-rex/types";
-
-interface Props {
-    items: CommonItemsModel[];
-    query?: string;
-    imageRestrictions?: string[];
-    showActions?: boolean;
-}
-
-
-export const DocumentsResultList: FC<Props> = ({
-    items,
-    query = "",
-    imageRestrictions = [],
-    showActions = true,
-}) => {
-    return (
-        <div className="flex-1">
-            {items.map((item, index) => {
-                const title = getTitle(item.titles, item.labels);
-                const language = getLanguage(item.languages);
-                const itemType = getType(item.class);
-                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
-                const multipleVersions = getVersions(item.versionOf);
-                const packageId = item.packages && item.packages.length > 0 ? item.packages[0]?.shortId : null;
-                const queryParams: QueryParams[] = []
-
-                if (packageId) {
-                    queryParams.push({
-                        key: "package",
-                        value: packageId,
-                    })
-                }
-
-                if (query.length > 0) {
-                    queryParams.push({
-                        key: "q",
-                        value: query,
-                    })
-                }
-
-                const params = generateQueryParams(queryParams)
-                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
-
-                return (
-                    <div
-                        key={item.shortId}
-                        className={cn(
-                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
-                            index == items.length - 1 ? "" : "mb-4",
-                            `c-rex-result-item c-rex-result-${itemType}`
-                        )}
-                    >
-                        <div className="h-16 w-16 flex items-start">
-                            <ImageRenditionContainer
-                                itemShortId={item.shortId!}
-                                imageRestrictions={imageRestrictions}
-                                emptyImageStyle="h-16 w-16"
-                            />
-                        </div>
-
-                        <div className="flex-1 p-2 flex flex-col">
-                            <span className="text-sm text-muted-foreground">
-                                {item.revision} - {language}
-                            </span>
-
-                            <span className="text-lg font-medium">
-                                <a className="hover:underline" href={itemLink}>{title}</a>
-                            </span>
-
-                            <span className="text-sm">
-                                {itemType}
-                            </span>
-                            <span className="text-sm">
-                                <HtmlRendition shortId={item.shortId!} />
-                            </span>
-                        </div>
-
-                        <div className="flex flex-col p-2 ml-auto justify-center">
-                            <div className="flex gap-2">
-                                <FileDownloadDropdown renditions={item.renditions} />
-
-                                <FavoriteButton
-                                    id={item.shortId!}
-                                    type={itemType}
-                                    label={title}
-                                />
-
-                                {multipleVersions.length > 1 && (
-                                    <Tooltip>
-                                        <TooltipTrigger asChild>
-                                            <Button variant="ghost" size="icon">
-                                                <FileStack />
-                                            </Button>
-                                        </TooltipTrigger>
-                                        <TooltipContent>
-                                            Available in: {multipleVersions.join(", ")}
-                                        </TooltipContent>
-                                    </Tooltip>
-                                )}
-
-                                {isDocument && (
-                                    <BookmarkButton
-                                        shortId={item.shortId!}
-                                        triggerVariant="ghost"
-                                    />
-                                )}
-                            </div>
-                        </div>
-                    </div>
-                );
-            })}
-        </div>
-    );
-};
+import { FC } from "react";
+import { CommonItemsModel } from "@c-rex/interfaces";
+import { FileStack } from "lucide-react";
+import { cn, generateQueryParams } from "@c-rex/utils";
+import { Button } from "@c-rex/ui/button";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@c-rex/ui/tooltip";
+import { RESULT_TYPES } from "@c-rex/constants";
+import { FileDownloadDropdown } from "@c-rex/components/file-download";
+import { FavoriteButton } from "@c-rex/components/favorite-button";
+import { ImageRenditionContainer } from "../renditions/image/container";
+import { BookmarkButton } from "../favorites/bookmark-button";
+import { HtmlRendition } from "../renditions/html";
+import { QueryParams } from "@c-rex/types";
+import { getResultItemSummary } from "../results/summary";
+
+interface Props {
+    items: CommonItemsModel[];
+    query?: string;
+    imageRestrictions?: string[];
+    showActions?: boolean;
+}
+
+
+export const DocumentsResultList: FC<Props> = ({
+    items,
+    query = "",
+    imageRestrictions = [],
+    showActions = true,
+}) => {
+    return (
+        <div className="flex-1">
+            {items.map((item, index) => {
+                const { title, language, itemType, multipleVersions, packageId } = getResultItemSummary(item);
+                const isDocument = itemType === RESULT_TYPES.DOCUMENT;
+                const queryParams: QueryParams[] = []
+
+                if (packageId) {
+                    queryParams.push({
+                        key: "package",
+                        value: packageId,
+                    })
+                }
+
+                if (query.length > 0) {
+                    queryParams.push({
+                        key: "q",
+                        value: query,
+                    })
+                }
+
+                const params = generateQueryParams(queryParams)
+                const itemLink = `/documents/${item.shortId}` + (params.length > 0 ? `?${params}` : "")
+
+                return (
+                    <div
+                        key={item.shortId}
+                        className={cn(
+                            "min-h-12 flex flex-wrap items-center border px-4 py-2 gap-2 rounded",
+                            index == items.length - 1 ? "" : "mb-4",
+                            `c-rex-result-item c-rex-result-${itemType}`
+                        )}
+                    >
+                        <div className="h-16 w-16 flex items-start">
+                            <ImageRenditionContainer
+                                itemShortId={item.shortId!}
+                                imageRestrictions={imageRestrictions}
+                                emptyImageStyle="h-16 w-16"
+                            />
+                        </div>
+
+                        <div className="flex-1 p-2 flex flex-col">
+                            <span className="text-sm text-muted-foreground">
+                                {item.revision} - {language}
+                            </span>
+
+                            <span className="text-lg font-medium">
+                                <a className="hover:underline" href={itemLink}>{title}</a>
+                            </span>
+
+                            <span className="text-sm">
+                                {itemType}
+                            </span>
+                            <span className="text-sm">
+                                <HtmlRendition shortId={item.shortId!} />
+                            </span>
+                        </div>
+
+                        <div className="flex flex-col p-2 ml-auto justify-center">
+                            <div className="flex gap-2">
+                                <FileDownloadDropdown renditions={item.renditions} />
+
+                                <FavoriteButton
+                                    id={item.shortId!}
+                                    type={itemType}
+                                    label={title}
+                                />
+
+                                {multipleVersions.length > 1 && (
+                                    <Tooltip>
+                                        <TooltipTrigger asChild>
+                                            <Button variant="ghost" size="icon">
+                                                <FileStack />
+                                            </Button>
+                                        </TooltipTrigger>
+                                        <TooltipContent>
+                                            Available in: {multipleVersions.join(", ")}
+                                        </TooltipContent>
+                                    </Tooltip>
+                                )}
+
+                                {isDocument && (
+                                    <BookmarkButton
+                                        shortId={item.shortId!}
+                                        triggerVariant="ghost"
+                                    />
+                                )}
+                            </div>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+};

package/src/favorites/bookmark-button.tsx

@@ -1,79 +1,97 @@
-"use client";
-
-import { ComponentProps, FC, ReactNode, useEffect, useState } from "react";
-import { Button, ButtonProps } from "@c-rex/ui/button";
-import { Trash } from "lucide-react";
-import { cn } from "@c-rex/utils";
-import Link from "next/link";
-import { useFavoritesStore } from "../stores/favorites-store";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
-import {
-    Table,
-    TableBody,
-    TableCell,
-    TableRow,
-} from "@c-rex/ui/table"
-import { FaRegBookmark } from "react-icons/fa6";
-
-type BookmarkProps = {
-    shortId: string;
-    triggerVariant?: ComponentProps<typeof Button>["variant"];
-}
-
-export const BookmarkButton: FC<BookmarkProps> = ({
-    shortId,
-    triggerVariant = "outline"
-}) => {
-    const [markersList, setMarkersList] = useState<Array<{ id: string; label: string; color: string }>>([]);
-
-    useEffect(() => {
-        setMarkersList(useFavoritesStore.getState().documents[shortId]?.topics || []);
-    }, [shortId]);
-    return (
-        <Dialog>
-            <DialogTrigger asChild>
-                <Button variant={triggerVariant} size="icon" className="relative">
-                    <FaRegBookmark className="text-primary" />
-
-                    {markersList.length > 0 && (
-                        <span
-                            className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
-                        >
-                            {markersList.length}
-                        </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>
-        </Dialog>
-    )
-}
+"use client";
+
+import { ComponentProps, FC } 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";
+import { useFavoritesStore } from "../stores/favorites-store";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@c-rex/ui/dialog";
+import { useTranslations } from "next-intl";
+import {
+    Table,
+    TableBody,
+    TableCell,
+    TableRow,
+} from "@c-rex/ui/table"
+import { FaRegBookmark } from "react-icons/fa6";
+
+const EMPTY_TOPICS: { id: string; label: string; color: string }[] = [];
+
+type BookmarkProps = {
+    shortId: string;
+    linkPattern?: string;
+    triggerVariant?: ComponentProps<typeof Button>["variant"];
+}
+
+export const BookmarkButton: FC<BookmarkProps> = ({
+    shortId,
+    linkPattern = `/topics/{shortId}/pages`,
+    triggerVariant = "outline"
+}) => {
+    const t = useTranslations("bookmarks");
+    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
+    const markersList = useFavoritesStore((state) => state.documents[shortId]?.topics) ?? EMPTY_TOPICS;
+    return (
+        <Dialog>
+            <DialogTrigger asChild>
+                <Button variant={triggerVariant} size="icon" className="relative">
+                    <FaRegBookmark className="text-primary" />
+
+                    {markersList.length > 0 && (
+                        <span
+                            className="absolute -top-[10px] -right-[10px] min-w-5 min-h-5 bg-primary text-white rounded-full"
+                        >
+                            {markersList.length}
+                        </span>
+                    )}
+                </Button>
+
+            </DialogTrigger>
+            <DialogContent>
+                <DialogHeader>
+                    <DialogTitle>{t("title")}</DialogTitle>
+                    <DialogDescription>
+                        {t("description")}
+                    </DialogDescription>
+                </DialogHeader>
+                <Table>
+                    <TableBody>
+                        {markersList.length === 0 && (
+                            <TableRow>
+                                <TableCell colSpan={3} className="text-center">
+                                    {t("empty")}
+                                </TableCell>
+                            </TableRow>
+                        )}
+
+                        {markersList.map((item) => (
+                            <TableRow key={item.id} className="min-h-12">
+                                <TableCell>
+                                    <FaRegBookmark className={cn("w-5", `text-${item.color}`)} />
+                                </TableCell>
+                                <TableCell>
+                                    <Link
+                                        href={linkPattern.replace("{shortId}", item.id).replace("{id}", item.id)}
+                                        className="hover:underline"
+                                    >
+                                        {item.label}
+                                    </Link>
+                                </TableCell>
+                                <TableCell>
+                                    <Button
+                                        variant="destructive"
+                                        size="icon"
+                                        onClick={() => removeFavoriteTopic(shortId, item.id)}
+                                    >
+                                        <Trash className="w-5 hover:text-red-600 cursor-pointer" />
+                                    </Button>
+                                </TableCell>
+                            </TableRow>
+                        ))}
+                    </TableBody>
+                </Table>
+            </DialogContent>
+        </Dialog>
+    )
+}

package/src/favorites/favorite-button.tsx

@@ -1,74 +1,137 @@
-"use client";
-
-import { FC, useEffect, useState } from "react";
-import { Button } from "@c-rex/ui/button";
-import { FaStar, FaRegStar } from "react-icons/fa";
-import { useFavoritesStore } from "../stores/favorites-store";
-import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
-import { ResultTypes } from "@c-rex/types";
-
-export const FavoriteButton: FC<{ id: string, type: ResultTypes, label: string }> = ({ id, type, label }) => {
-    const addFavoriteTopic = useFavoritesStore((state) => state.favoriteTopic);
-    const addFavoriteDocument = useFavoritesStore((state) => state.favoriteDocument);
-    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
-    const removeFavoriteDocument = useFavoritesStore((state) => state.unfavoriteDocument);
-
-    const favoriteDocumentList = useFavoritesStore((state) => state.documents);
-    const favoriteList = useFavoritesStore((state) => state.favorites);
-    const isFavorite = favoriteList.find((fav) => fav.id === id);
-    const [documentData, setDocumentData] = useState<{ id: string, label: string }>({ id, label });
-
-    useEffect(() => {
-        if (type === RESULT_TYPES.TOPIC) {
-            getTopicDocumentData(id);
-        }
-    }, []);
-
-    const addFavorite = async (id: string) => {
-        if (type === RESULT_TYPES.DOCUMENT) {
-            addFavoriteDocument(id, label);
-            return;
-        }
-
-        const length = favoriteDocumentList[documentData.id]?.topics.length || 0;
-        const color = MARKER_COLORS[length] || MARKER_COLORS[MARKER_COLORS.length - 1] as string;
-
-        addFavoriteTopic(documentData.id, id, label, color);
-    }
-
-    const removeFavorite = (id: string) => {
-        if (type === RESULT_TYPES.DOCUMENT) {
-            removeFavoriteDocument(id);
-            return;
-        }
-
-        removeFavoriteTopic(documentData.id, id);
-    }
-
-    const getTopicDocumentData = async (topicId: string): Promise<void> => {
-
-        const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
-            method: "GET"
-        });
-
-        if (!response.ok) throw new Error("Failed to fetch document by topic id")
-
-        const { documentId, label } = await response.json();
-
-        setDocumentData({ id: documentId, label });
-    }
-
-    if (isFavorite) {
-        return (
-            <Button variant="ghost" size="icon" onClick={() => removeFavorite(id)}>
-                <FaStar className="!h-5 !w-5 color-primary" />
-            </Button>
-        );
-    }
-
-    return (
-        <Button variant="ghost" size="icon" onClick={() => addFavorite(id)}>
-            <FaRegStar className="!h-5 !w-5" />
-        </Button>
-    )
-}
+"use client";
+
+import { FC, useEffect, useState } from "react";
+import { Button } from "@c-rex/ui/button";
+import { FaStar, FaRegStar } from "react-icons/fa";
+import { useFavoritesStore } from "../stores/favorites-store";
+import { MARKER_COLORS, RESULT_TYPES } from "@c-rex/constants";
+import { ResultTypes } from "@c-rex/types";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+
+export const FavoriteButton: FC<{
+    id: string;
+    type: ResultTypes;
+    label: string;
+    topicDocumentId?: string;
+    topicDocumentLabel?: string;
+}> = ({ id, type, label, topicDocumentId, topicDocumentLabel }) => {
+    const addFavoriteTopic = useFavoritesStore((state) => state.favoriteTopic);
+    const addFavoriteDocument = useFavoritesStore((state) => state.favoriteDocument);
+    const removeFavoriteTopic = useFavoritesStore((state) => state.unfavoriteTopic);
+    const removeFavoriteDocument = useFavoritesStore((state) => state.unfavoriteDocument);
+
+    const favoriteDocumentList = useFavoritesStore((state) => state.documents);
+    const favoriteList = useFavoritesStore((state) => state.favorites);
+    const isFavorite = favoriteList.find((fav) => fav.id === id);
+    const [documentData, setDocumentData] = useState<{ id: string, label: string }>({
+        id: topicDocumentId || id,
+        label: topicDocumentLabel || label,
+    });
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        if (type !== RESULT_TYPES.TOPIC || !topicDocumentId) return;
+        setDocumentData({
+            id: topicDocumentId,
+            label: topicDocumentLabel || label,
+        });
+    }, [type, topicDocumentId, topicDocumentLabel, label]);
+
+    useEffect(() => {
+        if (type === RESULT_TYPES.TOPIC && !topicDocumentId) {
+            void getTopicDocumentData(id).catch(() => {
+                // Lazy retry on user action.
+            });
+        }
+    }, [id, type, topicDocumentId]);
+
+    const ensureDocumentData = async (topicId: string): Promise<{ id: string, label: string }> => {
+        if (type !== RESULT_TYPES.TOPIC) {
+            return { id, label };
+        }
+
+        if (documentData.id !== topicId) {
+            return documentData;
+        }
+
+        return await getTopicDocumentData(topicId);
+    };
+
+    const addFavorite = async (targetId: string) => {
+        if (type === RESULT_TYPES.DOCUMENT) {
+            addFavoriteDocument(targetId, label);
+            return;
+        }
+
+        const docData = await ensureDocumentData(targetId);
+        const length = favoriteDocumentList[docData.id]?.topics.length || 0;
+        const color = MARKER_COLORS[length] || MARKER_COLORS[MARKER_COLORS.length - 1] as string;
+
+        addFavoriteTopic(docData.id, targetId, label, color);
+    };
+
+    const removeFavorite = async (targetId: string) => {
+        if (type === RESULT_TYPES.DOCUMENT) {
+            removeFavoriteDocument(targetId);
+            return;
+        }
+
+        const docData = await ensureDocumentData(targetId);
+        removeFavoriteTopic(docData.id, targetId);
+    };
+
+    const getTopicDocumentData = async (topicId: string): Promise<{ id: string, label: string }> => {
+        const response = await fetch(`/api/information-units/document-by-topic-id?shortId=${topicId}`, {
+            method: "GET"
+        });
+
+        if (!response.ok) {
+            throw new Error("Failed to fetch document by topic id");
+        }
+
+        const { documentId, label } = await response.json();
+        const data = { id: documentId, label };
+        setDocumentData(data);
+        return data;
+    };
+
+    const handleToggle = async () => {
+        if (isLoading) return;
+        setIsLoading(true);
+
+        try {
+            if (isFavorite) {
+                await removeFavorite(id);
+            } else {
+                await addFavorite(id);
+            }
+        } catch {
+            toast.error("Não foi possível atualizar os favoritos.");
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    if (isFavorite) {
+        return (
+            <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
+                {isLoading ? (
+                    <Loader2 className="!h-5 !w-5 animate-spin" />
+                ) : (
+                    <FaStar className="!h-5 !w-5 color-primary" />
+                )}
+            </Button>
+        );
+    }
+
+    return (
+        <Button variant="ghost" size="icon" onClick={handleToggle} disabled={isLoading}>
+            {isLoading ? (
+                <Loader2 className="!h-5 !w-5 animate-spin" />
+            ) : (
+                <FaRegStar className="!h-5 !w-5" />
+            )}
+        </Button>
+    )
+}