Taxon show issue + Document count on taxon modal

src/components/pages/common/status-badge.tsx

@@ -13,12 +13,12 @@ interface TaxonStatusBadgeProps {
 function TaxonStatusBadge({ reco, taxonId, crumbs }: TaxonStatusBadgeProps) {
   const { t } = useTranslation();
 
-  const taxonLink = `/taxonomy/list?taxonId=${taxonId}&showTaxon=${taxonId}`;
+  const taxonLink = `/taxonomy/list`;
 
   switch (reco?.status) {
     case "ACCEPTED":
       return (
-        <LocalLink href={taxonLink}>
+        <LocalLink href={taxonLink} params={{ taxonId: taxonId, showTaxon: taxonId }}>
           <Link>
             <Badge colorScheme={TAXON_BADGE_COLORS.ACCEPTED}>{t("common:accepted")}</Badge>
           </Link>

src/components/pages/taxonomy/list/table/taxon-modal/document/index.tsx

@@ -0,0 +1,25 @@
+import { Box, Skeleton, Text } from "@chakra-ui/react";
+import React from "react";
+
+import useDocumentCount from "./use-document-count";
+
+export function DocumentsLink({ showTaxon }) {
+  const { countsData } = useDocumentCount(showTaxon);
+  //const { t } = useTranslation();
+
+  return (
+    <div>
+      <Skeleton isLoaded={!countsData.isLoading} borderRadius="md">
+        <Box p={2} className="white-box" lineHeight={1} minWidth={200}>
+          <Text fontSize="3xl" mb={2}>
+            {countsData.value || 0}
+          </Text>
+          {/* <LocalLink href={`/observation/list`} params={{ taxon: showTaxon }}>
+            <ExternalBlueLink>{t("taxon:modal.data_links.observations")}</ExternalBlueLink>
+          </LocalLink> */}
+          <Text>Documents</Text>
+        </Box>
+      </Skeleton>
+    </div>
+  );
+}

src/components/pages/taxonomy/list/table/taxon-modal/document/use-document-count.tsx

@@ -0,0 +1,27 @@
+import { axGetDocumentDataByTaxonId } from "@services/document.service";
+import { useEffect, useState } from "react";
+
+export default function useDocumentCount(taxon) {
+  const [count, setCount] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const getData = async (taxon) => {
+    setIsLoading(true);
+
+    const { success, data } = await axGetDocumentDataByTaxonId(taxon);
+
+    if (success) {
+      setCount(data.length);
+    }
+
+    setIsLoading(false);
+  };
+
+  useEffect(() => {
+    getData(taxon);
+  }, []);
+
+  return {
+    countsData: { value: count, isLoading: isLoading }
+  };
+}

src/components/pages/taxonomy/list/table/taxon-modal/tabs/attributes/attributes-table.tsx

@@ -4,6 +4,7 @@ import { getInjectableHTML } from "@utils/text";
 import useTranslation from "next-translate/useTranslation";
 import React from "react";
 
+import { DocumentsLink } from "../../document";
 import { ObservationsLink } from "../../observation";
 import { SpeciesPageLink } from "../../species";
 
@@ -20,6 +21,7 @@ export function TaxonAttributesTable() {
         <HStack mb={4} spacing={4}>
           <SpeciesPageLink showTaxon={showTaxon} />
           <ObservationsLink showTaxon={showTaxon} />
+          <DocumentsLink showTaxon={showTaxon} />
         </HStack>
         <Heading as="h3" size="md" mb={4}>
           {t("common:information")}

src/services/document.service.ts

@@ -275,3 +275,13 @@ export const axUpdateScientifcNameToIsDeleted = async (nameId) => {
     return { succes: false, data: {} };
   }
 };
+
+export const axGetDocumentDataByTaxonId = async (taxonId) => {
+  try {
+    const { data } = await plainHttp.get(`${ENDPOINT.DOCUMENT}/v1/services/taxonomy/${taxonId}`);
+    return { success: true, data };
+  } catch (e) {
+    console.error(e);
+    return { succes: false, data: {} };
+  }
+};