refactor: List credentials

examples/react-graphql/client/src/components/Credential/CredentialList.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import * as Types from '../../types'
+import Credential from './Credential'
+import { Box, Heading, Text } from 'rimble-ui'
+import './Credential.css'
+import * as queries from '../../gql/queries'
+import { useQuery } from 'react-apollo'
+import { useParams } from 'react-router-dom'
+
+const S = require('sugar/string')
+
+interface Props {}
+
+const Component: React.FC<Props> = ({}) => {
+  const { id } = useParams()
+  const { data } = useQuery(queries.credentials, { variables: { id } })
+
+  return (
+    <Box>
+      <Heading as={'h3'} mt={2} mb={3}>
+        Credentials
+      </Heading>
+      {data &&
+        data.credentials &&
+        data.credentials.map((credential: any) => {
+          return (
+            <Credential
+              key={credential.hash}
+              issuer={credential.issuer}
+              subject={credential.subject}
+              claims={credential.claims}
+              jwt={credential.jwt}
+            />
+          )
+        })}
+    </Box>
+  )
+}
+
+export default Component

examples/react-graphql/client/src/gql/queries.ts

@@ -26,25 +26,23 @@ export const credential = gql`
 `
 
 export const credentials = gql`
-  query credentials($subject: String!) {
-    credentials(input: { where: [{ column: subject, value: $subject }] }) {
+  query credentials($id: String!) {
+    credentials(input: { where: [{ column: subject, value: [$id] }] }) {
       hash
-      issuanceDate
-      expirationDate
-      claims {
-        type
-        value
-        isObj
-      }
-      issuer {
+      subject {
         did
         shortId: shortDid
-        profileImage: latestClaimValue(type: "profileImage")
       }
-      subject {
+      issuer {
         did
         shortId: shortDid
-        profileImage: latestClaimValue(type: "profileImage")
+      }
+      issuanceDate
+      type
+      claims {
+        hash
+        type
+        value
       }
     }
   }

examples/react-graphql/client/src/layout/Layout.tsx

@@ -15,6 +15,7 @@ import SidePanel from './SidePanel'
 import NavigationLeft from './NavigationLeft'
 
 import Credential from '../components/Credential/Credential'
+import CredentialList from '../components/Credential/CredentialList'
 import RequestDetail from '../components/Request/Request'
 import Settings from '../views/Settings/Settings'
 
@@ -76,6 +77,7 @@ const Dashboard: React.FC<DashboardProps> = () => {
           <Route path="/identities/user/:id">
             <SidePanel title={'Identity'} closeUrl={'/identities'}>
               <IdentityDetail />
+              <CredentialList />
             </SidePanel>
           </Route>
           <Route