52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
|
import { BrowserLink } from "@metis/core/client";
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
|
||
|
|
import { globalApplicationsApi } from "../api/global-applications-api";
|
||
|
|
import { globalApplicationKeys } from "../queries/global-applications-keys";
|
||
|
|
|
||
|
|
import { GlobalApplicationFeedback } from "./global-application-feedback";
|
||
|
|
|
||
|
|
export function GlobalApplicationCoincidences({ name }: { name: string }) {
|
||
|
|
const { t } = useTranslation("resources");
|
||
|
|
const queryData = { search: name.trim(), sort: "name", direction: "asc", pageSize: 10 } as const;
|
||
|
|
const query = useQuery({
|
||
|
|
queryKey: globalApplicationKeys.list(queryData),
|
||
|
|
queryFn: () => globalApplicationsApi.list(queryData),
|
||
|
|
enabled: queryData.search.length > 0,
|
||
|
|
retry: false,
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-2 text-sm">
|
||
|
|
<GlobalApplicationFeedback error={query.error} />
|
||
|
|
{query.isFetching && <p role="status">{t("global.duplicateLoading")}</p>}
|
||
|
|
{query.data && query.data.items.length > 0 && (
|
||
|
|
<>
|
||
|
|
<p>{t("global.duplicates")}</p>
|
||
|
|
<ul className="list-inside list-disc">
|
||
|
|
{query.data.items.map((item) => (
|
||
|
|
<li key={item.id}>
|
||
|
|
<BrowserLink
|
||
|
|
href={`/catalogs/global-applications/${item.id}`}
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
{item.name} · {item.provider ?? "—"}
|
||
|
|
</BrowserLink>
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<BrowserLink
|
||
|
|
href={`/catalogs/global-applications?q=${encodeURIComponent(queryData.search)}`}
|
||
|
|
rel="noopener noreferrer"
|
||
|
|
target="_blank"
|
||
|
|
>
|
||
|
|
{t("global.reviewCatalog")}
|
||
|
|
</BrowserLink>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|