Merge pull request #373 from OpenCatalogi/feature/OP-107/total-results

Feature/op 107/total results
OpenCatalogi · Oct 31, 2023 · 6112e6f · 6112e6f
2 parents d333f0e + c549ef6
commit 6112e6f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx b/pwa/src/templates/componentDetail/ComponentsDetailTemplate.tsx
@@ -198,12 +198,14 @@ export const ComponentsDetailTemplate: React.FC<ComponentsDetailTemplateProps> =
                   className={styles.logo}
                 />
               </div>
-              <Button>
+
+              {/* This button should only be visible for authenticated users; feature will come in the future. */}
+              {/* <Button>
                 <Icon>
                   <IconExternalLink />
                 </Icon>{" "}
                 Toevoegen aan catalogus
-              </Button>
+              </Button> */}
 
               {_getComponent.data.embedded?.url?.url && (
                 <Button

diff --git a/pwa/src/templates/components/ComponentsTemplate.tsx b/pwa/src/templates/components/ComponentsTemplate.tsx
@@ -2,7 +2,7 @@ import * as React from "react";
 import * as styles from "./ComponentsTemplate.module.css";
 import { Container, Pagination } from "@conduction/components";
 import { ComponentResultTemplate } from "../templateParts/resultsTemplates/ComponentResultsTemplate";
-import { useFiltersContext } from "../../context/filters";
+import { defaultFiltersContext, useFiltersContext } from "../../context/filters";
 import { useTranslation } from "react-i18next";
 import { QueryClient } from "react-query";
 import { VerticalFiltersTemplate } from "../templateParts/filters/verticalFilters/VerticalFiltersTemplate";
@@ -14,6 +14,7 @@ import { ActiveFiltersTemplate } from "../templateParts/filters/activeFilters/Ac
 import ResultsDisplaySwitch from "../../components/resultsDisplaySwitch/ResultsDisplaySwitch";
 import { Alert, Heading, Icon, Paragraph } from "@utrecht/component-library-react/dist/css-module";
 import { IconInfoCircle } from "@tabler/icons-react";
+import { useComponent } from "../../hooks/components";
 
 export const ComponentsTemplate: React.FC = () => {
   const { filters, setFilters } = useFiltersContext();
@@ -23,12 +24,15 @@ export const ComponentsTemplate: React.FC = () => {
   const _useSearch = useSearch(queryClient);
   const getComponents = _useSearch.getSearch({ ...filters, resultDisplayLayout: "table", organizationSearch: "" }); // Ensure no refetch on resultDisplayLayout change
 
+  const _useComponents = useComponent(queryClient);
+  const componentsCount = _useComponents.getCount(defaultFiltersContext);
+
   return (
     <Container layoutClassName={styles.container}>
       <div className={styles.header}>
         <div>
           <Heading level={2} className={styles.title}>
-            Componenten
+            Componenten {componentsCount.data && `(${componentsCount.data})`}
           </Heading>
         </div>