fix: Adding profileImage

decentralized-identity · Jan 30, 2020 · 1063057 · 1063057
1 parent 14211c5
commit 1063057
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 23 deletions.
diff --git a/examples/react-graphql/client/src/components/Request/Request.tsx b/examples/react-graphql/client/src/components/Request/Request.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useContext, useEffect } from 'react'
-import { Box, Heading, Avatar, Text, Radio, Button, Loader } from 'rimble-ui'
+import { Box, Heading, Text, Radio, Button, Loader } from 'rimble-ui'
+import Avatar from '../../components/Avatar/Avatar'
 import * as Types from '../../types'
 import Credential from '../Credential/Credential'
 import { AppContext } from '../../context/AppProvider'
@@ -141,7 +142,7 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
   const isSelected = (jwt: string, claimtype: string): Boolean => {
     return selected[claimtype] && selected[claimtype].jwt === jwt
   }
-
+  console.log({ sender })
   return (
     <Box borderRadius={5} overflow={'hidden'} border={1} borderColor={'#333333'} bg={'#222222'}>
       <Box
@@ -152,7 +153,7 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
         flex={1}
         py={4}
       >
-        <Avatar size={'60px'} src={''} />
+        <Avatar size={60} did={sender.did} source={sender.profileImage} type={'circle'} />
         <Heading as={'h3'} mt={2}>
           {sender.shortId}
         </Heading>

diff --git a/examples/react-graphql/client/src/gql/queries.ts b/examples/react-graphql/client/src/gql/queries.ts
@@ -8,10 +8,12 @@ export const credential = gql`
       iss {
         did
         shortId
+        profileImage
       }
       sub {
         did
         shortId
+        profileImage
       }
       jwt
       nbf
@@ -31,6 +33,7 @@ export const identity = gql`
       did
       type
       shortId
+      profileImage
     }
   }
 `
@@ -55,6 +58,7 @@ export const managedIdentities = gql`
       did
       type
       shortId
+      profileImage
     }
   }
 `
@@ -71,6 +75,7 @@ export const queryMessage = gql`
           did {
             did
             shortId
+            profileImage
           }
           url
         }
@@ -133,6 +138,7 @@ export const allMessages = gql`
             did {
               did
               shortId
+              profileImage
             }
             url
           }

diff --git a/examples/react-graphql/client/src/layout/Sidebar.tsx b/examples/react-graphql/client/src/layout/Sidebar.tsx
@@ -2,9 +2,12 @@ import React, { useContext } from 'react'
 import { Box } from 'rimble-ui'
 import { AppContext } from '../context/AppProvider'
 import Avatar from '../components/Avatar/Avatar'
+import * as queries from '../gql/queries'
+import { useQuery } from 'react-apollo'
 
 const Component = () => {
   const [appState] = useContext(AppContext)
+  const { data } = useQuery(queries.identity, { variables: { did: appState.defaultDid } })
 
   return (
     <Box
@@ -15,7 +18,7 @@ const Component = () => {
       display={'flex'}
       flexDirection={'column'}
     >
-      <Avatar size={45} did={appState.defaultDid} type={'circle'} />
+      <Avatar size={45} did={appState.defaultDid} source={data?.identity?.profileImage} type={'circle'} />
       <Box borderRadius={5} width={45} height={45} bg="#FFFFFF" p={3}></Box>
     </Box>
   )

diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts
@@ -42,6 +42,7 @@ export const managedIdentities = gql`
       did
       type
       shortId
+      profileImage
     }
   }
 `

diff --git a/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx b/examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useContext } from 'react'
 import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Panel from '../../components/Panel/Panel'
+import Avatar from '../../components/Avatar/Avatar'
 import { useHistory, useRouteMatch, useParams } from 'react-router-dom'
 import * as queries from '../../queries'
 import { useQuery, useMutation } from '@apollo/react-hooks'
@@ -51,6 +52,7 @@ const Component = () => {
         <Table border={0} color={'#FFFFFF'} borderColor={'#4B4B4B'}>
           <thead>
             <tr>
+              <th>Avatar</th>
               <th>DID</th>
               <th>Type</th>
               <th>Short ID</th>
@@ -59,7 +61,13 @@ const Component = () => {
           </thead>
           <tbody>
             {managedIdentitiesData?.managedIdentities?.map(
-              (identity: { did: string; type: string; shortId: string; name: string }) => {
+              (identity: {
+                did: string
+                type: string
+                shortId: string
+                name: string
+                profileImage?: string
+              }) => {
                 return (
                   <tr
                     key={identity.did}
@@ -68,6 +76,9 @@ const Component = () => {
                     }`}
                     onClick={() => showIdentityDetail(identity.did)}
                   >
+                    <td>
+                      <Avatar did={identity.did} source={identity.profileImage} type={'circle'} />
+                    </td>
                     <td>{identity.did}</td>
                     <td>{identity.type}</td>
                     <td>{identity.shortId}</td>

diff --git a/examples/react-graphql/server/package-lock.json b/examples/react-graphql/server/package-lock.json