@c-rex/components 0.3.0-build.28 → 0.3.0-build.30

package/src/results/generic/search-results-client.tsx

@@ -0,0 +1,258 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTranslations } from "next-intl";
+import { Settings2 } from "lucide-react";
+import { Button } from "@c-rex/ui/button";
+import type { AutoCompleteProps } from "../../autocomplete";
+import { Empty } from "../empty";
+import { FilterNavbar } from "../filter-navbar";
+import { DialogFilter } from "../dialog-filter";
+import { FilterSidebar } from "../filter-sidebar";
+import type { FilterSidebarProps } from "../filter-sidebar";
+import { GenericTableResultList } from "./table-result-list";
+import { Pagination } from "../pagination";
+import { Skeleton } from "@c-rex/ui/skeleton";
+import type { CommonItemsModel, ResultContainerModel, Tags } from "@c-rex/interfaces";
+import type { FacetLabelOverrides } from "../filter-sidebar/utils";
+
+type SerializedError = { message: string; name: string } | null;
+
+type GetAllClientProps<TData, TQueryParams> = {
+    queryParams: TQueryParams;
+    children: (result: {
+        data: TData | null;
+        error: SerializedError;
+        isLoading: boolean;
+    }) => React.ReactNode;
+};
+
+type SuggestionsProps = Pick<AutoCompleteProps, "embedded" | "initialValue" | "onSelectPath" | "keepParams">;
+
+export type GenericSearchResultsClientProps<
+    TItem extends CommonItemsModel,
+    TQueryParams
+> = {
+    GetAllClient: React.ComponentType<GetAllClientProps<ResultContainerModel<TItem>, TQueryParams>>;
+    SuggestionsComponent: React.ComponentType<SuggestionsProps>;
+    queryParams: TQueryParams;
+    search: string;
+    suggestionsPath: string;
+    linkPattern: string;
+    addPackageId: boolean;
+    showFilesColumn?: boolean;
+    facetLabelOverrides?: FacetLabelOverrides;
+    informationSubjectsTaxonomy?: NonNullable<FilterSidebarProps["facetTaxonomies"]>["informationSubjects"];
+    facetExcludeProperties?: string[];
+};
+
+const hasFacetTags = (tags?: Tags): tags is Tags => Boolean(tags && Object.keys(tags).length > 0);
+
+const ResultsSkeleton = ({ showFilesColumn = false }: { showFilesColumn?: boolean }) => (
+    <div className="rounded-md border mb-6">
+        <div className="font-bold text-sm p-2 border-b items-center flex-wrap hidden md:flex">
+            <div className="flex-1 p-2"><Skeleton className="h-4 w-20" /></div>
+            <div className="w-1/2 md:w-1/5 p-2 flex justify-center"><Skeleton className="h-4 w-20" /></div>
+            <div className="w-1/2 md:w-1/5 p-2 flex justify-center"><Skeleton className="h-4 w-16" /></div>
+            {showFilesColumn && (
+                <div className="w-1/2 md:w-1/5 p-2 flex justify-center"><Skeleton className="h-4 w-16" /></div>
+            )}
+        </div>
+        {Array.from({ length: 6 }).map((_, index) => (
+            <div key={index} className="min-h-12 flex flex-wrap items-center border-b last:border-b-0">
+                <div className="flex-1 p-2">
+                    <Skeleton className="h-5 w-72 max-w-full" />
+                </div>
+                <div className="w-1/5 md:w-1/5 flex justify-center p-2">
+                    <Skeleton className="h-5 w-8" />
+                </div>
+                <div className="w-4/5 md:w-1/5 p-2 flex justify-center">
+                    <Skeleton className="h-6 w-24" />
+                </div>
+                {showFilesColumn && (
+                    <div className="w-1/5 p-2 flex justify-center">
+                        <Skeleton className="h-6 w-10" />
+                    </div>
+                )}
+            </div>
+        ))}
+    </div>
+);
+
+type SearchResultsBodyProps<TItem extends CommonItemsModel> = {
+    data: ResultContainerModel<TItem> | null;
+    error: SerializedError;
+    isLoading: boolean;
+    facetLabelOverrides?: FacetLabelOverrides;
+    informationSubjectsTaxonomy?: NonNullable<FilterSidebarProps["facetTaxonomies"]>["informationSubjects"];
+    facetExcludeProperties: string[];
+    search: string;
+    linkPattern: string;
+    addPackageId: boolean;
+    showFilesColumn: boolean;
+};
+
+const SearchResultsBody = <TItem extends CommonItemsModel>({
+    data,
+    error,
+    isLoading,
+    facetLabelOverrides,
+    informationSubjectsTaxonomy,
+    facetExcludeProperties,
+    search,
+    linkPattern,
+    addPackageId,
+    showFilesColumn,
+}: SearchResultsBodyProps<TItem>) => {
+    const [lastFacetTags, setLastFacetTags] = useState<Tags | undefined>(undefined);
+
+    useEffect(() => {
+        if (hasFacetTags(data?.tags)) {
+            setLastFacetTags(data.tags);
+        }
+    }, [data?.tags]);
+
+    const effectiveTags = hasFacetTags(data?.tags) ? data.tags : lastFacetTags;
+
+    if (error) return <div className="text-red-600">{JSON.stringify(error)}</div>;
+
+    if (isLoading && !data) {
+        return (
+            <div className="flex flex-col gap-4 pb-4">
+                <ResultsSkeleton showFilesColumn={showFilesColumn} />
+            </div>
+        );
+    }
+
+    if (!data) {
+        return (
+            <div className="flex flex-col gap-4 pb-4">
+                <FilterNavbar
+                    tags={effectiveTags}
+                    facetLabelOverrides={facetLabelOverrides}
+                    excludeProperties={facetExcludeProperties}
+                />
+                <Empty />
+            </div>
+        );
+    }
+
+    if (data.items.length === 0) {
+        return (
+            <div className="flex flex-col gap-4 pb-4">
+                <FilterNavbar
+                    tags={effectiveTags}
+                    facetLabelOverrides={facetLabelOverrides}
+                    excludeProperties={facetExcludeProperties}
+                />
+
+                <div className="flex flex-row gap-4">
+                    <FilterSidebar
+                        tags={effectiveTags}
+                        totalItemCount={data.pageInfo.totalItemCount}
+                        facetLabelOverrides={facetLabelOverrides}
+                        facetTaxonomies={informationSubjectsTaxonomy ? { informationSubjects: informationSubjectsTaxonomy } : undefined}
+                        excludeProperties={facetExcludeProperties}
+                    />
+
+                    <div className="flex-1 flex flex-col gap-4">
+                        <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                        <Empty />
+                        <Pagination pageInfo={data.pageInfo} />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col gap-4 pb-4">
+            <FilterNavbar
+                tags={effectiveTags}
+                facetLabelOverrides={facetLabelOverrides}
+                excludeProperties={facetExcludeProperties}
+            />
+
+            <div className="flex flex-row gap-4">
+                <FilterSidebar
+                    tags={effectiveTags}
+                    totalItemCount={data.pageInfo.totalItemCount}
+                    facetLabelOverrides={facetLabelOverrides}
+                    facetTaxonomies={informationSubjectsTaxonomy ? { informationSubjects: informationSubjectsTaxonomy } : undefined}
+                    excludeProperties={facetExcludeProperties}
+                />
+
+                <div className="flex-1 flex flex-col gap-4">
+                    <Pagination pageInfo={data.pageInfo} className="pt-0" />
+                    <GenericTableResultList
+                        items={data.items}
+                        query={search}
+                        addPackageId={addPackageId}
+                        linkPattern={linkPattern}
+                        showFilesColumn={showFilesColumn}
+                    />
+                    <Pagination pageInfo={data.pageInfo} />
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export const GenericSearchResultsClient = <
+    TItem extends CommonItemsModel,
+    TQueryParams
+>({
+    GetAllClient,
+    SuggestionsComponent,
+    queryParams,
+    search,
+    suggestionsPath,
+    linkPattern,
+    addPackageId,
+    showFilesColumn = false,
+    facetLabelOverrides,
+    informationSubjectsTaxonomy,
+    facetExcludeProperties = [],
+}: GenericSearchResultsClientProps<TItem, TQueryParams>) => {
+    const t = useTranslations();
+
+    return (
+        <div className="container">
+            <div className="flex gap-6 py-6">
+                <div className="flex-1">
+                    <SuggestionsComponent
+                        embedded={false}
+                        initialValue={search}
+                        onSelectPath={suggestionsPath}
+                        keepParams
+                    />
+                </div>
+                <DialogFilter
+                    trigger={(
+                        <Button variant="default">
+                            <span className="hidden sm:inline">{t("searchSettings")}</span>
+                            <Settings2 />
+                        </Button>
+                    )}
+                />
+            </div>
+
+            <GetAllClient queryParams={queryParams}>
+                {({ data, error, isLoading }) => (
+                    <SearchResultsBody
+                        data={data}
+                        error={error}
+                        isLoading={isLoading}
+                        facetLabelOverrides={facetLabelOverrides}
+                        informationSubjectsTaxonomy={informationSubjectsTaxonomy}
+                        facetExcludeProperties={facetExcludeProperties}
+                        search={search}
+                        linkPattern={linkPattern}
+                        addPackageId={addPackageId}
+                        showFilesColumn={showFilesColumn}
+                    />
+                )}
+            </GetAllClient>
+        </div>
+    );
+};

package/src/results/generic/table-result-list.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { FC } from "react";
 import { CommonItemsModel } from "@c-rex/interfaces";
 import { cn, generateQueryParams } from "@c-rex/utils";
@@ -5,7 +7,7 @@ import { Flag } from "@c-rex/components/flag";
 import { Badge } from "@c-rex/ui/badge";
 import Link from "next/link";
 import { FileDownloadDropdown } from "@c-rex/components/file-download";
-import { getTranslations } from "next-intl/server";
+import { useTranslations } from "next-intl";
 import { QueryParams } from "@c-rex/types";
 import { getResultItemSummary } from "../summary";
 
@@ -17,14 +19,14 @@ interface Props {
     query?: string
 }
 
-export const GenericTableResultList: FC<Props> = async ({
+export const GenericTableResultList: FC<Props> = ({
     items,
     linkPattern,
     addPackageId,
     query,
     showFilesColumn = true,
 }) => {
-    const t = await getTranslations("results");
+    const t = useTranslations("results");
 
     return (
         <div className="rounded-md border mb-6 last:border-b-0">