44 lines
1.6 KiB
TypeScript
44 lines
1.6 KiB
TypeScript
import InputSearch from "~/components/ui/input/InputSearch";
|
|
import type { ApiEndpointDto } from "../dtos/ApiEndpointDto";
|
|
import { useMemo, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import EmptyState from "~/components/ui/emptyState/EmptyState";
|
|
import ApiEndpoint from "./ApiEndpoint";
|
|
|
|
export default function ApiEndpointsTable({ items }: { items: ApiEndpointDto[] }) {
|
|
const { t } = useTranslation();
|
|
const [searchInput, setSearchInput] = useState("");
|
|
const filteredItems = useMemo(() => {
|
|
const normalizedSearch = searchInput.trim().toLowerCase();
|
|
if (!normalizedSearch) return items;
|
|
return items.filter((f) => {
|
|
return (
|
|
f.route.toLowerCase().includes(normalizedSearch) ||
|
|
f.method.toLowerCase().includes(normalizedSearch) ||
|
|
f.description.toLowerCase().includes(normalizedSearch) ||
|
|
f.entity.name.toLowerCase().includes(normalizedSearch) ||
|
|
f.entity.title.toLowerCase().includes(normalizedSearch) ||
|
|
f.entity.titlePlural.toLowerCase().includes(normalizedSearch) ||
|
|
t(f.entity.title).toLowerCase().includes(normalizedSearch) ||
|
|
t(f.entity.titlePlural).toLowerCase().includes(normalizedSearch)
|
|
);
|
|
});
|
|
}, [items, searchInput, t]);
|
|
|
|
return (
|
|
<div className="space-y-2">
|
|
<InputSearch value={searchInput} setValue={setSearchInput} />
|
|
{filteredItems.length === 0 && (
|
|
<EmptyState
|
|
captions={{
|
|
thereAreNo: t("api.endpoints.empty"),
|
|
}}
|
|
/>
|
|
)}
|
|
{filteredItems.map((endpoint, idx) => {
|
|
return <ApiEndpoint key={idx} item={endpoint} />;
|
|
})}
|
|
</div>
|
|
);
|
|
}
|