refactor: Query and display single credential in sidepanel

examples/react-graphql/client/package.json

@@ -3,6 +3,7 @@
   "version": "1.3.7",
   "private": true,
   "dependencies": {
+    "@apollo/react-hoc": "^3.1.3",
     "@apollo/react-hooks": "^3.1.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
@@ -20,11 +21,11 @@
     "styled-components": "^5.0.0"
   },
   "devDependencies": {
-    "@types/react-router-dom": "^5.1.3",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
+    "@types/react-router-dom": "^5.1.3",
     "@types/react-table": "^7.0.3",
     "@types/styled-components": "^4.4.2",
     "typescript": "~3.7.2"

examples/react-graphql/client/src/components/Credential/Credential.css

@@ -0,0 +1,3 @@
+.credential_hover:hover {
+  box-shadow: 1px 1px 15px 0px rgba(0, 0, 0, 0.3);
+}

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

@@ -1,23 +1,68 @@
 import React from 'react'
-import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+import { Box, Heading, Text, Icon, Avatar, QR } from 'rimble-ui'
+import * as Types from '../../types'
+
+import './Credential.css'
 
 interface Props {
+  iss: Types.Identity
+  sub: Types.Identity
   onClick?: () => void
+  fields: Types.Field[]
+  detailMode?: Boolean
+  jwt?: string
 }
 
-const Component: React.FC<Props> = ({ onClick }) => {
+const Component: React.FC<Props> = ({ onClick, detailMode, fields, jwt, iss, sub }) => {
+  const detail = detailMode
+    ? {}
+    : { maxWidth: 350, style: { cursor: 'pointer' }, className: 'credential_hover' }
+
   return (
-    <Box border={1} borderRadius={5} borderColor={'#555555'} p={3} maxWidth={350} mb={16} onClick={onClick}>
+    <Box {...detail} border={1} borderRadius={5} borderColor={'#555555'} p={3} mb={16} onClick={onClick}>
       <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
         <Avatar size={'40'} src={''} />
         <Box ml={2}>
-          <Text fontWeight={'bold'}>Simon</Text>
+          <Text fontWeight={'bold'}>{iss.shortId}</Text>
           <Box flexDirection={'row'} display={'flex'}>
             <Icon name={'PlayArrow'} />
-            <Text>Mircea</Text>
+            <Text>{sub.shortId}</Text>
           </Box>
         </Box>
       </Box>
+      <Box mt={detailMode ? 30 : 16}>
+        {fields.map((field: any, i: number) => {
+          const fieldValueImage = !field.isObj
+            ? field.value.endsWith('.jpg') || field.value.endsWith('.png')
+            : false
+          return (
+            <Box mb={1} key={i}>
+              <Box>
+                <Text>{field.type}</Text>
+              </Box>
+              <Box justifyContent={'flex-start'}>
+                {fieldValueImage ? (
+                  <Box paddingTop={5}>
+                    <Avatar source={{ uri: field.value }} type={'rounded'} gravatarType={'retro'} size={25} />
+                  </Box>
+                ) : (
+                  <Text>{field.isObj ? 'Type not supported yet' : field.value}</Text>
+                )}
+              </Box>
+            </Box>
+          )
+        })}
+        {!detailMode && fields.length > 2 && (
+          <Box>
+            <Text>...</Text>
+          </Box>
+        )}
+        {detailMode && jwt && (
+          <Box mt={50} alignItems={'center'} justifyContent={'center'} display={'flex'}>
+            <QR size={200} value={jwt} />
+          </Box>
+        )}
+      </Box>
     </Box>
   )
 }

examples/react-graphql/client/src/components/MessageItem/MessageItem.css

@@ -0,0 +1,3 @@
+.message_item:hover {
+  background-color: #292929;
+}

examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx

@@ -1,29 +1,46 @@
 import React from 'react'
 import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+import * as Types from '../../types'
 
-import Credential from '../../components/Credential/Credential'
+import './MessageItem.css'
 
 interface Props {
-  credentialAction?: () => void
+  /**
+   * The activity that is takaing place
+   */
+  activity?: string
+
+  /**
+   * The issuer of this message item
+   */
+  sender: Types.Identity
+
+  /**
+   * The subject
+   */
+  receiver: Types.Identity
+  attachments: any
+  renderAttachments?: (attachmentItem: any, itemIndex: number) => React.ReactNode
 }
 
-const Component: React.FC<Props> = ({ credentialAction }) => {
+const Component: React.FC<Props> = ({ attachments, renderAttachments, sender, receiver }) => {
   return (
-    <Box>
+    <Box className={'message_item'} p={3}>
       <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
         <Avatar size={'50'} src="https://airswap-token-images.s3.amazonaws.com/DAI.png" />
         <Box ml={2}>
           <Text>
-            <b>Simon</b> sent 4 credentials to <b>Mircea</b>
+            <b>{sender.shortId}</b> sent a message to <b>{receiver ? receiver.shortId : 'You'}</b>
           </Text>
         </Box>
       </Box>
-      <Box p={3} pl={4}>
-        <Credential onClick={credentialAction} />
-        <Credential onClick={credentialAction} />
-        <Credential onClick={credentialAction} />
-        <Credential onClick={credentialAction} />
-      </Box>
+      {attachments && attachments.length > 0 && renderAttachments && (
+        <Box p={3} pl={4}>
+          {attachments.map((item: any, itemIndex: number) => {
+            return renderAttachments(item, itemIndex)
+          })}
+        </Box>
+      )}
     </Box>
   )
 }

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

@@ -13,10 +13,17 @@ import Issue from '../views/Issue/Issue'
 import Sidebar from './Sidebar'
 import SidePanel from './SidePanel'
 import NavigationLeft from './NavigationLeft'
-import CredentialDetail from '../components/Credential/CredentialDetail'
+import Credential from '../components/Credential/Credential'
+
+import * as queries from '../queries'
 
 interface DashboardProps {}
 
+const renderCredentialQuery = (props: any) => {
+  console.log(props)
+  return <Credential detailMode {...props} />
+}
+
 const Dashboard: React.FC<DashboardProps> = () => {
   return (
     <Router>
@@ -56,9 +63,12 @@ const Dashboard: React.FC<DashboardProps> = () => {
             </SidePanel>
           </Route>
           <Route path="/activity/credential/:id">
-            <SidePanel title={'Credential'} closeUrl={'/activity'}>
-              <CredentialDetail />
-            </SidePanel>
+            <SidePanel
+              title={'Credential'}
+              closeUrl={'/activity'}
+              query={queries.credential}
+              renderQuery={renderCredentialQuery}
+            ></SidePanel>
           </Route>
         </Switch>
       </Flex>

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

@@ -15,7 +15,7 @@ const Component = (props: any) => {
       >
         <Heading as={'h4'}>{props.title}</Heading>
       </Box>
-      <Box p={3} flex={1} pb={64} className={'scroll-container'}>
+      <Box flex={1} pb={64} className={'scroll-container'}>
         {props.children}
       </Box>
     </>

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

@@ -1,14 +1,22 @@
 import React from 'react'
 import { Box, Heading, Icon } from 'rimble-ui'
-import { useHistory } from 'react-router-dom'
+import { useHistory, useParams } from 'react-router-dom'
+import { useQuery } from '@apollo/react-hooks'
 
 interface Props {
   title: string
   closeUrl: string
+  query?: any
+  renderQuery?: (props: any) => React.ReactNode
 }
 
-const Component: React.FC<Props> = ({ title, closeUrl, children }) => {
+const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQuery }) => {
   let history = useHistory()
+  const { id } = useParams()
+
+  const { loading: queryLoading, data: queryData } = useQuery(query, {
+    variables: { id },
+  })
 
   return (
     <Box width={450} bg="#1C1C1C" borderLeft={1} borderColor={'#4B4B4B'}>
@@ -24,9 +32,18 @@ const Component: React.FC<Props> = ({ title, closeUrl, children }) => {
         <Heading as={'h4'}>{title}</Heading>
         <Icon name={'Close'} onClick={() => history.push(closeUrl)} style={{ cursor: 'pointer' }} />
       </Box>
-      <Box p={3} pb={64} className={'scroll-container'}>
-        {children}
-      </Box>
+
+      {renderQuery && queryData && (
+        <Box p={3} pb={64} className={'scroll-container'}>
+          {renderQuery(queryData?.credential)}
+        </Box>
+      )}
+
+      {children && (
+        <Box p={3} pb={64} className={'scroll-container'}>
+          {children}
+        </Box>
+      )}
     </Box>
   )
 }

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

@@ -1,5 +1,30 @@
 import { gql } from 'apollo-boost'
 
+export const credential = gql`
+  query credential($id: ID!) {
+    credential(id: $id) {
+      hash
+      rowId
+      iss {
+        did
+        shortId
+      }
+      sub {
+        did
+        shortId
+      }
+      jwt
+      nbf
+      iat
+      fields {
+        isObj
+        type
+        value
+      }
+    }
+  }
+`
+
 export const managedIdentities = gql`
   query managedIdentities {
     managedIdentityTypes
@@ -60,6 +85,16 @@ export const allMessages = gql`
         vc {
           rowId
           hash
+          iss {
+            did
+            shortId
+            profileImage
+          }
+          sub {
+            did
+            shortId
+            profileImage
+          }
           fields {
             type
             value

examples/react-graphql/client/src/types/index.ts

@@ -0,0 +1,17 @@
+export interface Identity {
+  isManaged?: boolean
+  did: string
+  type?: string
+  shortId: string
+  firstName?: string
+  lastName?: string
+  url?: string
+  description?: string
+  profileImage?: string
+}
+
+export interface Field {
+  type: string
+  value: any
+  isObj: boolean
+}