Added removeHTMLFromString service

ConductionNL · Mar 22, 2024 · ea7bece · ea7bece
1 parent 9614ed7
commit ea7bece
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 16 deletions.
diff --git a/pwa/src/services/removeHTMLFromString.ts b/pwa/src/services/removeHTMLFromString.ts
@@ -0,0 +1,5 @@
+export const removeHTMLFromString = (html: string) => {
+  let tmp = document.createElement("div");
+  tmp.innerHTML = html;
+  return tmp.textContent || tmp.innerText || "";
+};
diff --git a/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx b/pwa/src/templates/templateParts/cardsResultsTemplate/CardsResultsTemplate.tsx
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
 import { navigate } from "gatsby";
 import { CardHeader, CardHeaderDate, CardHeaderTitle, CardWrapper } from "@conduction/components";
 import { TOOLTIP_ID } from "../../../layout/Layout";
+import { removeHTMLFromString } from "../../../services/removeHTMLFromString";
 
 interface CardsResultsTemplateProps {
   requests: any[];
@@ -26,7 +27,7 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
             tabIndex={0}
             aria-label={`${
               request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
-            }, ${request.titel}, ${request.samenvatting} ${
+            }, ${removeHTMLFromString(removeHTMLFromString(request.titel))}, ${removeHTMLFromString(removeHTMLFromString(request.samenvatting))} ${
               window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
             } ${
               window.sessionStorage.getItem("SHOW_CATEGORY") === "true"
@@ -39,11 +40,15 @@ export const CardsResultsTemplate: React.FC<CardsResultsTemplateProps> = ({ requ
                 {request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")}
               </CardHeaderDate>
               <CardHeaderTitle className={styles.title}>
-                <Heading2>{request.titel ?? t("No title available")}</Heading2>
+                <Heading2>
+                  {removeHTMLFromString(removeHTMLFromString(request.titel)) ?? t("No title available")}
+                </Heading2>
               </CardHeaderTitle>
             </CardHeader>
 
-            <Paragraph className={styles.description}>{request.samenvatting}</Paragraph>
+            <Paragraph className={styles.description}>
+              {removeHTMLFromString(removeHTMLFromString(request.samenvatting))}
+            </Paragraph>
 
             {(window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ||
               window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true") && (

diff --git a/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx b/pwa/src/templates/templateParts/tableResultsTemplate/TableResultsTemplate.tsx
@@ -13,6 +13,7 @@ import { navigate } from "gatsby";
 import { translateDate } from "../../../services/dateFormat";
 import { useTranslation } from "react-i18next";
 import { HorizontalOverflowWrapper } from "@conduction/components";
+import { removeHTMLFromString } from "../../../services/removeHTMLFromString";
 
 interface TableResultsTemplateProps {
   requests: any[];
@@ -55,15 +56,17 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
                 key={request._id}
                 onClick={() => navigate(request._id)}
                 tabIndex={0}
-                aria-label={`${request.titel},  ${
+                aria-label={`${removeHTMLFromString(removeHTMLFromString(request.titel))},  ${
                   request.publicatiedatum ? translateDate(i18n.language, request.publicatiedatum) : t("N/A")
                 } ${
                   window.sessionStorage.getItem("SHOW_ORGANIZATION") === "true" ? `,${request.organisatie?.naam}` : ""
                 } ${window.sessionStorage.getItem("SHOW_CATEGORY") === "true" ? `, ${request.categorie}` : ""}, ${
-                  request.samenvatting ?? t("No summary available")
+                  removeHTMLFromString(removeHTMLFromString(request.samenvatting)) ?? t("No summary available")
                 }`}
               >
-                <TableCell>{request.titel ?? t("No subject available")}</TableCell>
+                <TableCell>
+                  {removeHTMLFromString(removeHTMLFromString(request.titel)) ?? t("No subject available")}
+                </TableCell>
                 <TableCell>
                   {request.publicatiedatum
                     ? translateDate(i18n.language, request.publicatiedatum)
@@ -90,7 +93,9 @@ export const TableResultsTemplate: React.FC<TableResultsTemplateProps> = ({ requ
                   </>
                 )}
                 <TableCell>
-                  <div className={styles.description}>{request.samenvatting ?? t("No summary available")}</div>
+                  <div className={styles.description}>
+                    {removeHTMLFromString(removeHTMLFromString(request.samenvatting)) ?? t("No summary available")}
+                  </div>
                 </TableCell>
               </TableRow>
             ))}

diff --git a/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx b/pwa/src/templates/wooItemDetailTemplate/WOOItemDetailTemplate.tsx
@@ -23,6 +23,7 @@ import { QueryClient } from "react-query";
 import { useOpenWoo } from "../../hooks/openWoo";
 import { getPDFName } from "../../services/getPDFName";
 import { HorizontalOverflowWrapper } from "@conduction/components";
+import { removeHTMLFromString } from "../../services/removeHTMLFromString";
 
 interface WOOItemDetailTemplateProps {
   wooItemId: string;
@@ -34,12 +35,6 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
   const queryClient = new QueryClient();
   const getItems = useOpenWoo(queryClient).getOne(wooItemId);
 
-  function stripHtml(html: any) {
-    let tmp = document.createElement("div");
-    tmp.innerHTML = html;
-    return tmp.textContent || tmp.innerText || "";
-  }
-
   const sortAlphaNum = (a: any, b: any) => a.titel.localeCompare(b.titel, i18n.language, { numeric: true });
 
   return (
@@ -66,7 +61,9 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
               tabIndex={0}
               aria-label={`${t("Title of woo request")}, ${getItems.data.titel !== "" ? getItems.data.titel : t("No title available")}`}
             >
-              {getItems.data.titel !== "" ? getItems.data.titel : t("No title available")}
+              {getItems.data.titel !== ""
+                ? removeHTMLFromString(removeHTMLFromString(getItems.data.titel))
+                : t("No title available")}
             </Heading1>
 
             <HorizontalOverflowWrapper
@@ -106,7 +103,7 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                       aria-label={`${t("Summary")}, ${getItems.data.samenvatting}`}
                     >
                       <TableCell>{t("Summary")}</TableCell>
-                      <TableCell>{stripHtml(stripHtml(getItems.data.samenvatting))}</TableCell>
+                      <TableCell>{removeHTMLFromString(removeHTMLFromString(getItems.data.samenvatting))}</TableCell>
                     </TableRow>
                   )}
                   {getItems.data.beschrijving && (
@@ -116,7 +113,7 @@ export const WOOItemDetailTemplate: React.FC<WOOItemDetailTemplateProps> = ({ wo
                       aria-label={`${t("Description")}, ${getItems.data.beschrijving}`}
                     >
                       <TableCell>{t("Description")}</TableCell>
-                      <TableCell>{stripHtml(stripHtml(getItems.data.beschrijving))}</TableCell>
+                      <TableCell>{removeHTMLFromString(removeHTMLFromString(getItems.data.beschrijving))}</TableCell>
                     </TableRow>
                   )}