simplify data passed to rendered claims

Feature Merge Request

Related Issue

Resolves #46 (closed), #45 (closed), #47 (closed)

Description of Feature

• claimStatements are now exported as react elements, rather than strings.
• claimStatements are now included in rendered claims (in list view)
• address, hash, and timestamp are now being selectively displayed in rendered claims list

Motivation and Context

Screenshots, Code, Links

Claim Statements:

Claim statement generators now return a react-hyperscript component that contains a claim statement...

// app/statementGenerators.index.ts

export const fathomStatement = (msg: FathomMsg):ReactElement<any> => {
  let statement: string
  if (msg.type === 'assessor' || msg.type === 'assessee') {
    statement = `${msg.address} is an ${msg.type} on fathom assessment ${msg.assessment}`
  }
  else if (msg.type === 'credential') {
    statement = `${msg.address} holds a fathom ${msg.type} from assessment ${msg.assessment}`
  }
  return h('div', statement)
}

export const githubStatement = (msg: GithubMsg):ReactElement<any> => {
	let statement: string = `${msg.address} is ${msg.username} on github`
	return h('div', statement)	
}

...and they are imported into handlers.ts and packaged, for export, into a claimStatements object.

// app/handlers.ts

export const claimStatements:{[props: string]: (msg: MsgTypes) => ReactElement<any>} = {
  github: githubStatement,
  fathom: fathomStatement
}

The claimStatements object is later imported into the ClaimList component, where the appropriate claimStatement component function is invoked when iterating over, and rendering, each stored claim:

// app/components/Body/View/ClaimList.ts

let claims = []
for (let hash in props.claimStore) {
  let claimObj = props.claimStore[hash]
  let msgObj = claimObj.claim.data
  let claimStatement = claimStatements[claimObj.claim.type](msgObj)
  claims.push(h(NavLink, {to: '/claim/' + hash}, [
    h(ClaimListItem, {hash, claim: claimObj, claimStatement})
  ]))
}

And finally, in the ClaimListItem component, the address, timestamp and hash are parsed from the signedClaim object...

if (signedClaim.claim) {
  return {
    address: signedClaim.claim.data.address,
    timestamp: signedClaim.claim.timestamp,
    hash
}

...and the json object is processed and formatted to render in a more human readable way.

let formattedOutput = jsonOutput
  .replace(/[{}]/g,'')
  .replace(/\"/g, '')
  .split(',')// => [address:0xec..., timestamp:1530..., hash:QmYz...]
  .map(kvPair => {
    let tuple = kvPair.split(':') //[key, val]
    return h(StyledClaimItemDiv, [
      h(StyledClaimAttributeKey, tuple[0]),
      h('span', ': '),
      h(StyledClaimAttributeVal, tuple[1])
    ])
})

"Before" screenshot of rendered claims:

"After" screenshot of rendered claims:

Related Tasks

• #46 (closed) Export claim statement as react element (instead of as string)
• #45 (closed) Render claim statement inside ClaimListItem
• #47 (closed) Render timestamp, address, and hash inside ClaimListItem

What's Next?

• rendered claim can be polished further by rendering timestamp in human readable form ( #48 (closed) ) and by abbreviating long alphanumeric strings, like address and hash ( #50 (closed) ).

---