Merge pull request #1387 from blockchain-certificates/fix/render-afte…

…r-state-update Prevent multiple renders of blockcerts' display after state update
blockchain-certificates · Feb 2, 2023 · b3e1aeb · b3e1aeb
2 parents a112066 + 089f1f1
commit b3e1aeb
Show file tree

Hide file tree

Showing 7 changed files with 376 additions and 145 deletions.
diff --git a/src/components/organisms/FullCertificate/FullCertificate.ts b/src/components/organisms/FullCertificate/FullCertificate.ts
@@ -1,4 +1,4 @@
-import { html } from '@polymer/lit-element';
+import { html, LitElement } from '@polymer/lit-element';
 import { TemplateResult } from 'lit-html';
 import { unsafeHTML } from 'lit-html/lib/unsafe-html.js';
 import CSS from './_components.full-certificate-css';
@@ -9,6 +9,7 @@ import '../../atoms/FinalVerificationStep';
 import getText from '../../../i18n/getText';
 import urlToLink from '../../../helpers/urlToLink';
 import domain from '../../../domain';
+import { IFullScreenCertificateAPI } from '../FullScreenCertificate/FullScreenCertificate';
 
 function renderDisplayHTML (displayHTML: string, clickableUrls: boolean): TemplateResult {
   const buvCertificateClasses: string[] = [
@@ -25,20 +26,37 @@ function renderDisplayHTML (displayHTML: string, clickableUrls: boolean): Templa
 
 export interface IFullCertificate {
   clickableUrls?: boolean;
-  hasCertificateDefinition: boolean;
+  hasCertificateDefinition?: boolean;
   displayHTML?: string;
 }
 
-export default function FullCertificate ({
-  clickableUrls,
-  hasCertificateDefinition,
-  displayHTML
-}: IFullCertificate): TemplateResult {
-  if (!hasCertificateDefinition) {
-    return null;
+export class FullCertificateComponent extends LitElement {
+  static get properties () {
+    return {
+      clickableUrls: Boolean,
+      hasCertificateDefinition: Boolean,
+      displayHTML: String
+    };
   }
 
-  return html`
+  _shouldRender (
+    _props: IFullScreenCertificateAPI,
+    _changedProps: IFullScreenCertificateAPI,
+    _prevProps: IFullScreenCertificateAPI
+  ): boolean {
+    return !!_changedProps?.displayHTML;
+  }
+
+  _render ({
+    clickableUrls,
+    hasCertificateDefinition,
+    displayHTML
+  }: IFullCertificate): TemplateResult {
+    if (!hasCertificateDefinition) {
+      return null;
+    }
+
+    return html`
     ${CSS}
     ${displayHTML ? renderDisplayHTML(displayHTML, clickableUrls) : html`<buv-full-certificate-v1></buv-full-certificate-v1>`}
     <div class='buv-c-full-certificate__details'>
@@ -48,4 +66,19 @@ export default function FullCertificate ({
       </buv-final-verification-step>
     </div>
   `;
+  }
 }
+
+window.customElements.define('buv-full-certificate-raw', FullCertificateComponent);
+function FullCertificateWrapper (props: IFullCertificate) {
+  return html`
+    <buv-full-certificate-raw
+      clickableUrls = '${props.clickableUrls}'
+      hasCertificateDefinition = '${props.hasCertificateDefinition}'
+      displayHTML = '${props.displayHTML}'
+    ></buv-full-certificate-raw>`;
+}
+
+export {
+  FullCertificateWrapper as FullCertificate
+};
diff --git a/src/components/organisms/FullCertificate/FullCertificateContainer.ts b/src/components/organisms/FullCertificate/FullCertificateContainer.ts
@@ -1,5 +1,5 @@
 import connector from '../../../store/connector';
-import FullCertificate, { IFullCertificate } from './FullCertificate';
+import { FullCertificate, IFullCertificate } from './FullCertificate';
 import {
   getCertificateDefinition,
   getDisplayAsHTML

diff --git a/src/components/organisms/FullScreenCertificate/FullScreenCertificate.ts b/src/components/organisms/FullScreenCertificate/FullScreenCertificate.ts
@@ -1,4 +1,4 @@
-import { html } from '@polymer/lit-element';
+import { html, LitElement } from '@polymer/lit-element';
 import { TemplateResult } from 'lit-html';
 import { unsafeHTML } from 'lit-html/lib/unsafe-html.js';
 import CSS from './_components.fullscreen-certificate-css';
@@ -24,59 +24,97 @@ function renderDisplayHTML (displayHTML: string, clickableUrls: boolean): Templa
 
 export interface IFullScreenCertificateAPI {
   clickableUrls?: boolean;
-  hasCertificateDefinition: boolean;
+  hasCertificateDefinition?: boolean;
   recipientName?: string;
   displayHTML?: string;
   onClose?: () => any;
   disableDownloadPdf?: boolean;
 }
 
-export default function FullScreenCertificate ({
-  clickableUrls,
-  hasCertificateDefinition,
-  recipientName,
-  displayHTML,
-  onClose,
-  disableDownloadPdf
-}: IFullScreenCertificateAPI): TemplateResult {
-  if (!hasCertificateDefinition) {
-    return null;
+export class FullScreenCertificateComponent extends LitElement {
+  static get properties () {
+    return {
+      clickableUrls: Boolean,
+      hasCertificateDefinition: Boolean,
+      recipientName: String,
+      displayHTML: String,
+      onClose: Function,
+      disableDownloadPdf: Boolean
+    };
   }
 
-  const buvFullscreenCertificateClasses: string[] = [
-    'buv-c-fullscreen-certificate__certificate',
-    'qa-fullscreen-certificate'
-  ];
-  if (displayHTML && domain.certificates.displayHtmlHasNoWidthConstraint(displayHTML)) {
-    buvFullscreenCertificateClasses.push('buv-c-certificate--fixed-width');
+  _shouldRender (
+    _props: IFullScreenCertificateAPI,
+    _changedProps: IFullScreenCertificateAPI,
+    _prevProps: IFullScreenCertificateAPI
+  ): boolean {
+    return !!_changedProps?.displayHTML;
   }
 
-  return html`
-    ${CSS}
-    <section class='buv-c-fullscreen-certificate'>
-      <header class='buv-c-fullscreen-certificate-header'>
-        <div class='buv-c-fullscreen-certificate-header__content'>
-          <h1 class='buv-c-fullscreen-certificate__title'>${recipientName}</h1>
-          ${CloseButton({ onClick: onClose, className: 'buv-c-fullscreen-certificate__close' })}
-        </div>  
-      </header>
-      <section class='buv-c-fullscreen-certificate__content'>
-        <div class='buv-c-fullscreen-certificate__details'>
-          <buv-final-verification-step class='buv-c-fullscreen-certificate__verification-status' isVisible hideLink standalone>
-            <buv-verify-button type='link'>${getText('text.verifyAgain')}</buv-verify-button>
-          </buv-final-verification-step>
-          <buv-certificate-details direction='column' hideRecipientName></buv-certificate-details>
-          <buv-metadata class='buv-c-fullscreen-certificate__details-item  buv-c-fullscreen-certificate__separator' display='plaintext'></buv-metadata>
-          ${disableDownloadPdf ? '' : html`<buv-download-pdf-link class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-download-pdf-link>`}
-          <buv-download-link class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-download-link>
-          <buv-social-share class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-social-share>
-          ${BlockcertsLogo({ className: 'buv-c-fullscreen-certificate__separator', showMotto: true })}
-          <buv-verify-other-certificate class='buv-c-fullscreen-certificate__verify-other'></buv-verify-other-certificate>
-        </div>
-        <div class$=${buvFullscreenCertificateClasses.join(' ')}>
-          ${displayHTML ? renderDisplayHTML(displayHTML, clickableUrls) : html`<buv-full-certificate-v1></buv-full-certificate-v1>`}
-        </div>
+  _render ({
+    clickableUrls,
+    hasCertificateDefinition,
+    recipientName,
+    displayHTML,
+    onClose,
+    disableDownloadPdf
+  }: IFullScreenCertificateAPI): TemplateResult {
+    if (!hasCertificateDefinition) {
+      return null;
+    }
+
+    const buvFullscreenCertificateClasses: string[] = [
+      'buv-c-fullscreen-certificate__certificate',
+      'qa-fullscreen-certificate'
+    ];
+    if (displayHTML && domain.certificates.displayHtmlHasNoWidthConstraint(displayHTML)) {
+      buvFullscreenCertificateClasses.push('buv-c-certificate--fixed-width');
+    }
+
+    return html`
+      ${CSS}
+      <section class='buv-c-fullscreen-certificate'>
+        <header class='buv-c-fullscreen-certificate-header'>
+          <div class='buv-c-fullscreen-certificate-header__content'>
+            <h1 class='buv-c-fullscreen-certificate__title'>${recipientName}</h1>
+            ${CloseButton({ onClick: onClose, className: 'buv-c-fullscreen-certificate__close' })}
+          </div>  
+        </header>
+        <section class='buv-c-fullscreen-certificate__content'>
+          <div class='buv-c-fullscreen-certificate__details'>
+            <buv-final-verification-step class='buv-c-fullscreen-certificate__verification-status' isVisible hideLink standalone>
+              <buv-verify-button type='link'>${getText('text.verifyAgain')}</buv-verify-button>
+            </buv-final-verification-step>
+            <buv-certificate-details direction='column' hideRecipientName></buv-certificate-details>
+            <buv-metadata class='buv-c-fullscreen-certificate__details-item  buv-c-fullscreen-certificate__separator' display='plaintext'></buv-metadata>
+            ${disableDownloadPdf ? '' : html`<buv-download-pdf-link class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-download-pdf-link>`}
+            <buv-download-link class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-download-link>
+            <buv-social-share class='buv-c-fullscreen-certificate__details-item' display='plaintext'></buv-social-share>
+            ${BlockcertsLogo({ className: 'buv-c-fullscreen-certificate__separator', showMotto: true })}
+            <buv-verify-other-certificate class='buv-c-fullscreen-certificate__verify-other'></buv-verify-other-certificate>
+          </div>
+          <div class$=${buvFullscreenCertificateClasses.join(' ')}>
+            ${displayHTML ? renderDisplayHTML(displayHTML, clickableUrls) : html`<buv-full-certificate-v1></buv-full-certificate-v1>`}
+          </div>
+        </section>
       </section>
-    </section>
-  `;
+    `;
+  }
 }
+
+window.customElements.define('buv-fullscreen-certificate-raw', FullScreenCertificateComponent);
+function FullScreenCertificateWrapper (props: IFullScreenCertificateAPI) {
+  return html`
+    <buv-fullscreen-certificate-raw
+      clickableUrls = '${props.clickableUrls}'
+      hasCertificateDefinition = '${props.hasCertificateDefinition}'
+      recipientName = '${props.recipientName}'
+      displayHTML = '${props.displayHTML}'
+      onClose = '${props.onClose}'
+      disableDownloadPdf = '${props.disableDownloadPdf}'
+    ></buv-fullscreen-certificate-raw>`;
+}
+
+export {
+  FullScreenCertificateWrapper as FullScreenCertificate
+};
diff --git a/src/components/organisms/FullScreenCertificate/FullScreenCertificateContainer.ts b/src/components/organisms/FullScreenCertificate/FullScreenCertificateContainer.ts
@@ -1,5 +1,5 @@
 import connector from '../../../store/connector';
-import FullScreenCertificate, { IFullScreenCertificateAPI } from './FullScreenCertificate';
+import { FullScreenCertificate, IFullScreenCertificateAPI } from './FullScreenCertificate';
 import {
   getCertificateDefinition,
   getDisplayAsHTML,