fix: application view hydration error

City-of-Helsinki · Oct 22, 2024 · 9f54174 · 9f54174
1 parent 1c4334d
commit 9f54174
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 19 deletions.
diff --git a/apps/ui/components/application/ViewInner.tsx b/apps/ui/components/application/ViewInner.tsx
@@ -13,6 +13,7 @@ import { AccordionWithState as Accordion } from "../common/Accordion";
 import { ApplicationEventList } from "./ApplicationEventList";
 import TermsBox from "common/src/termsbox/TermsBox";
 import Sanitize from "../common/Sanitize";
+import ClientOnly from "common/src/ClientOnly";
 
 type Node = NonNullable<ApplicationViewQuery["application"]>;
 export function ViewInner({
@@ -41,22 +42,25 @@ export function ViewInner({
         <ApplicantInfoPreview application={application} />
       </Accordion>
       <ApplicationEventList application={application} />
-      {tos && (
-        <TermsBox
-          id="preview.acceptTermsOfUse"
-          heading={t("reservationUnit:termsOfUse")}
-          body={<Sanitize html={getTranslation(tos, "text")} />}
-        />
-      )}
-      {tos2 && (
-        <TermsBox
-          id="preview.acceptServiceSpecificTerms"
-          heading={t("application:preview.reservationUnitTerms")}
-          body={<Sanitize html={getTranslation(tos2, "text")} />}
-          /* TODO TermsBox has accepted and checkbox we could use but for now leaving the single
-           * page specfici checkbox to accept all terms */
-        />
-      )}
+      {/* NOTE TermsBox has hydration issues */}
+      <ClientOnly>
+        {tos && (
+          <TermsBox
+            id="preview.acceptTermsOfUse"
+            heading={t("reservationUnit:termsOfUse")}
+            body={<Sanitize html={getTranslation(tos, "text")} />}
+          />
+        )}
+        {tos2 && (
+          <TermsBox
+            id="preview.acceptServiceSpecificTerms"
+            heading={t("application:preview.reservationUnitTerms")}
+            body={<Sanitize html={getTranslation(tos2, "text")} />}
+            /* TODO TermsBox has accepted and checkbox we could use but for now leaving the single
+             * page specfici checkbox to accept all terms */
+          />
+        )}
+      </ClientOnly>
       {acceptTermsOfUse != null && setAcceptTermsOfUse != null && (
         <CheckboxContainer>
           <Checkbox

diff --git a/apps/ui/components/common/Sanitize.tsx b/apps/ui/components/common/Sanitize.tsx
@@ -27,14 +27,19 @@ const config = {
   },
 };
 
-const Sanitize = ({ html, style }: Props): JSX.Element | null =>
-  html ? (
+function Sanitize({ html, style }: Props): JSX.Element | null {
+  if (!html) {
+    return null;
+  }
+
+  return (
     <StyledContent
       style={style}
       dangerouslySetInnerHTML={{
         __html: sanitizeHtml(html, config),
       }}
     />
-  ) : null;
+  );
+}
 
 export default Sanitize;