feat: Show credentials on connections

decentralized-identity · May 20, 2020 · 84abfa0 · 84abfa0
1 parent 50579e0
commit 84abfa0
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -74,6 +74,23 @@ const Dashboard: React.FC<DashboardProps> = () => {
         */}
 
         <Switch>
+          <Route path="/connections/user/:id">
+            <SidePanel title={'Identity'} closeUrl={'/connections'}>
+              <CredentialList />
+            </SidePanel>
+          </Route>
+          <Route
+            exact
+            path="/activity/credential/:id"
+            component={() => (
+              <SidePanel
+                title={'Credential'}
+                closeUrl={'/activity'}
+                query={queries.credential}
+                renderQuery={renderCredentialQuery}
+              ></SidePanel>
+            )}
+          ></Route>
           <Route path="/identities/user/:id">
             <SidePanel title={'Identity'} closeUrl={'/identities'}>
               <IdentityDetail />

diff --git a/examples/react-graphql/client/src/views/Connections/Connections.tsx b/examples/react-graphql/client/src/views/Connections/Connections.tsx
@@ -1,17 +1,26 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { Box, Heading } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Avatar from '../../components/Avatar/Avatar'
 import * as queries from '../../gql/queries'
 import { useQuery, useLazyQuery } from 'react-apollo'
 import * as Types from '../../types'
 import Panel from '../../components/Panel/Panel'
+import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
 
 const Component = () => {
   const { loading, data } = useQuery(queries.allIdentities)
-
+  const history = useHistory()
+  const { url } = useRouteMatch()
+  const [highlightedIdentity, highlightIdentity] = useState<string>()
   console.log(data?.identities)
 
+  const showIdentityDetail = (did: string) => {
+    highlightIdentity(did)
+
+    history.push(`${url}/user/${did}`)
+  }
+
   return (
     <Page title={'Connections'}>
       {/* <Avatar did={'ethr:did:0x145'} type={'circle'} size={60} /> */}
@@ -22,6 +31,7 @@ const Component = () => {
             {data?.identities?.map((id: Types.Identity) => {
               return (
                 <Box
+                  onClick={() => showIdentityDetail(id.did)}
                   className={'identity_row'}
                   key={id.did}
                   mb={2}