From 6bf90d0ac8ad83d60c555aebf76e40702d2748f9 Mon Sep 17 00:00:00 2001
From: Timo Welde <tjwelde@gmail.com>
Date: Thu, 8 Apr 2021 10:20:04 +0200
Subject: [PATCH] fix: show claim contents again (#343)

---
 .../AttestedClaimVerificationView.tsx         | 79 ++++++++++++++-----
 1 file changed, 60 insertions(+), 19 deletions(-)

diff --git a/src/components/AttestedClaimVerificationView/AttestedClaimVerificationView.tsx b/src/components/AttestedClaimVerificationView/AttestedClaimVerificationView.tsx
index dc50bdf9..01589d1f 100644
--- a/src/components/AttestedClaimVerificationView/AttestedClaimVerificationView.tsx
+++ b/src/components/AttestedClaimVerificationView/AttestedClaimVerificationView.tsx
@@ -3,12 +3,13 @@ import React from 'react'
 import * as UiState from '../../state/ducks/UiState'
 import { persistentStoreInstance } from '../../state/PersistentStore'
 
-import { ICType } from '../../types/Ctype'
+import { ICType, ICTypeWithMetadata } from '../../types/Ctype'
 import AttestationStatus from '../AttestationStatus/AttestationStatus'
 import ContactPresentation from '../ContactPresentation/ContactPresentation'
 import CTypePresentation from '../CTypePresentation/CTypePresentation'
 import { getCtypePropertyTitle } from '../../utils/CtypeUtils'
 import './AttestedClaimVerificationView.scss'
+import CTypeRepository from '../../services/CtypeRepository'
 
 type Props = {
   attestedClaim: IAttestedClaim
@@ -16,7 +17,9 @@ type Props = {
   cType?: ICType
 }
 
-type State = {}
+type State = {
+  cType?: ICTypeWithMetadata
+}
 
 class AttestedClaimVerificationView extends React.Component<Props, State> {
   private static verifyAttestatedClaim(): void {
@@ -30,6 +33,20 @@ class AttestedClaimVerificationView extends React.Component<Props, State> {
     this.state = {}
   }
 
+  public componentDidMount(): void {
+    this.setCType()
+  }
+
+  private setCType(): void {
+    const { attestedClaim } = this.props
+
+    CTypeRepository.findByHash(attestedClaim.attestation.cTypeHash).then(
+      _cType => {
+        if (_cType) this.setState({ cType: _cType })
+      }
+    )
+  }
+
   private getHeadline(): JSX.Element {
     const { attestedClaim, context }: Props = this.props
     const localContext = context != null ? context : 'Attested claim'
@@ -68,27 +85,51 @@ class AttestedClaimVerificationView extends React.Component<Props, State> {
   private static readonly BLOCK_CHAR: string = '\u2588'
 
   private buildClaimPropertiesView(attestedClaim: IAttestedClaim): JSX.Element {
-    const { cType } = this.props
-
-    const propertyNames: string[] = Object.keys(
-      attestedClaim.request.claimHashes
-    )
+    const { cType } = this.state
+
+    let properties: Array<{ key: string; label: string; value: string }> = []
+    if (cType) {
+      const propertyNames = Object.keys(cType.cType.schema.properties)
+      properties = propertyNames.map(propertyName => {
+        const label = getCtypePropertyTitle(propertyName, {
+          // TODO: What the hell? Why do we have two so similar types for a ctype with metadata?
+          cType: cType.cType,
+          metadata: cType.metaData.metadata,
+          ctypeHash: cType.metaData.ctypeHash,
+        })
+        const value = AttestedClaimVerificationView.getPropertyValue(
+          attestedClaim,
+          propertyName
+        )
+        return {
+          key: propertyName,
+          label,
+          value,
+        }
+      })
+    } else {
+      const propertyNames: string[] = Object.keys(
+        attestedClaim.request.claim.contents
+      )
+      properties = propertyNames.map(propertyName => {
+        return {
+          key: propertyName,
+          label: propertyName,
+          value: AttestedClaimVerificationView.getPropertyValue(
+            attestedClaim,
+            propertyName
+          ),
+        }
+      })
+    }
 
     return (
       <div className="attributes">
-        {propertyNames.map((propertyName: string) => {
-          const propertyTitle = cType
-            ? getCtypePropertyTitle(propertyName, cType)
-            : propertyName
+        {properties.map(({ key, label, value }) => {
           return (
-            <div key={propertyName}>
-              <label>{propertyTitle}</label>
-              <div>
-                {AttestedClaimVerificationView.getPropertyValue(
-                  attestedClaim,
-                  propertyName
-                )}
-              </div>
+            <div key={key}>
+              <label>{label}</label>
+              <div>{value}</div>
             </div>
           )
         })}