From 28420bdb15dd4e3f41023a95f9a981381a9813bb Mon Sep 17 00:00:00 2001 From: Jason Healy Date: Fri, 24 Jan 2020 13:06:04 +0000 Subject: [PATCH] refactor: Query and display single credential in sidepanel --- examples/react-graphql/client/package.json | 3 +- .../src/components/Credential/Credential.css | 3 + .../src/components/Credential/Credential.tsx | 55 +++++++- .../Credential/CredentialDetail.tsx | 25 ---- .../components/MessageItem/MessageItem.css | 3 + .../components/MessageItem/MessageItem.tsx | 39 ++++-- .../client/src/layout/Layout.tsx | 18 ++- .../react-graphql/client/src/layout/Page.tsx | 2 +- .../client/src/layout/SidePanel.tsx | 27 +++- examples/react-graphql/client/src/queries.ts | 35 +++++ .../react-graphql/client/src/types/index.ts | 17 +++ .../client/src/views/Activity/Activity.tsx | 126 +++--------------- examples/react-graphql/client/yarn.lock | 2 +- 13 files changed, 194 insertions(+), 161 deletions(-) create mode 100644 examples/react-graphql/client/src/components/Credential/Credential.css delete mode 100644 examples/react-graphql/client/src/components/Credential/CredentialDetail.tsx create mode 100644 examples/react-graphql/client/src/components/MessageItem/MessageItem.css create mode 100644 examples/react-graphql/client/src/types/index.ts diff --git a/examples/react-graphql/client/package.json b/examples/react-graphql/client/package.json index 25fbb3bde..e450f2dca 100644 --- a/examples/react-graphql/client/package.json +++ b/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" diff --git a/examples/react-graphql/client/src/components/Credential/Credential.css b/examples/react-graphql/client/src/components/Credential/Credential.css new file mode 100644 index 000000000..0a90b5065 --- /dev/null +++ b/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); +} diff --git a/examples/react-graphql/client/src/components/Credential/Credential.tsx b/examples/react-graphql/client/src/components/Credential/Credential.tsx index 129156cd0..6689f430f 100644 --- a/examples/react-graphql/client/src/components/Credential/Credential.tsx +++ b/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 = ({ onClick }) => { +const Component: React.FC = ({ onClick, detailMode, fields, jwt, iss, sub }) => { + const detail = detailMode + ? {} + : { maxWidth: 350, style: { cursor: 'pointer' }, className: 'credential_hover' } + return ( - + - Simon + {iss.shortId} - Mircea + {sub.shortId} + + {fields.map((field: any, i: number) => { + const fieldValueImage = !field.isObj + ? field.value.endsWith('.jpg') || field.value.endsWith('.png') + : false + return ( + + + {field.type} + + + {fieldValueImage ? ( + + + + ) : ( + {field.isObj ? 'Type not supported yet' : field.value} + )} + + + ) + })} + {!detailMode && fields.length > 2 && ( + + ... + + )} + {detailMode && jwt && ( + + + + )} + ) } diff --git a/examples/react-graphql/client/src/components/Credential/CredentialDetail.tsx b/examples/react-graphql/client/src/components/Credential/CredentialDetail.tsx deleted file mode 100644 index 129156cd0..000000000 --- a/examples/react-graphql/client/src/components/Credential/CredentialDetail.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react' -import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui' - -interface Props { - onClick?: () => void -} - -const Component: React.FC = ({ onClick }) => { - return ( - - - - - Simon - - - Mircea - - - - - ) -} - -export default Component diff --git a/examples/react-graphql/client/src/components/MessageItem/MessageItem.css b/examples/react-graphql/client/src/components/MessageItem/MessageItem.css new file mode 100644 index 000000000..addfd5d7b --- /dev/null +++ b/examples/react-graphql/client/src/components/MessageItem/MessageItem.css @@ -0,0 +1,3 @@ +.message_item:hover { + background-color: #292929; +} diff --git a/examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx b/examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx index 9b337b1f0..462b86dec 100644 --- a/examples/react-graphql/client/src/components/MessageItem/MessageItem.tsx +++ b/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 = ({ credentialAction }) => { +const Component: React.FC = ({ attachments, renderAttachments, sender, receiver }) => { return ( - + - Simon sent 4 credentials to Mircea + {sender.shortId} sent a message to {receiver ? receiver.shortId : 'You'} - - - - - - + {attachments && attachments.length > 0 && renderAttachments && ( + + {attachments.map((item: any, itemIndex: number) => { + return renderAttachments(item, itemIndex) + })} + + )} ) } diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx index ec35bbf7e..8dd9181aa 100644 --- a/examples/react-graphql/client/src/layout/Layout.tsx +++ b/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 +} + const Dashboard: React.FC = () => { return ( @@ -56,9 +63,12 @@ const Dashboard: React.FC = () => { - - - + diff --git a/examples/react-graphql/client/src/layout/Page.tsx b/examples/react-graphql/client/src/layout/Page.tsx index 3e0ab0f2d..d7a1beb83 100644 --- a/examples/react-graphql/client/src/layout/Page.tsx +++ b/examples/react-graphql/client/src/layout/Page.tsx @@ -15,7 +15,7 @@ const Component = (props: any) => { > {props.title} - + {props.children} diff --git a/examples/react-graphql/client/src/layout/SidePanel.tsx b/examples/react-graphql/client/src/layout/SidePanel.tsx index 36520d1da..692506d56 100644 --- a/examples/react-graphql/client/src/layout/SidePanel.tsx +++ b/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 = ({ title, closeUrl, children }) => { +const Component: React.FC = ({ title, closeUrl, query, children, renderQuery }) => { let history = useHistory() + const { id } = useParams() + + const { loading: queryLoading, data: queryData } = useQuery(query, { + variables: { id }, + }) return ( @@ -24,9 +32,18 @@ const Component: React.FC = ({ title, closeUrl, children }) => { {title} history.push(closeUrl)} style={{ cursor: 'pointer' }} /> - - {children} - + + {renderQuery && queryData && ( + + {renderQuery(queryData?.credential)} + + )} + + {children && ( + + {children} + + )} ) } diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts index d7d163a86..a76b4b56b 100644 --- a/examples/react-graphql/client/src/queries.ts +++ b/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 diff --git a/examples/react-graphql/client/src/types/index.ts b/examples/react-graphql/client/src/types/index.ts new file mode 100644 index 000000000..60c5a0928 --- /dev/null +++ b/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 +} diff --git a/examples/react-graphql/client/src/views/Activity/Activity.tsx b/examples/react-graphql/client/src/views/Activity/Activity.tsx index 812a6cb4f..2bc734acd 100644 --- a/examples/react-graphql/client/src/views/Activity/Activity.tsx +++ b/examples/react-graphql/client/src/views/Activity/Activity.tsx @@ -1,22 +1,8 @@ import React, { useContext, useState } from 'react' -import { - Flex, - Box, - Text, - Heading, - Button, - Icon, - Table, - Field, - Input, - Card, - Loader, - QR, - Modal, - Avatar, -} from 'rimble-ui' +import { Flex } from 'rimble-ui' import MessageItem from '../../components/MessageItem/MessageItem' import Page from '../../layout/Page' +import Credential from '../../components/Credential/Credential' import * as queries from '../../queries' import { AppContext } from '../../context/AppProvider' import { useQuery } from '@apollo/react-hooks' @@ -39,99 +25,23 @@ const Activity: React.FC = () => { return ( - - setIsQROpen(false)} + {messagesData?.identity?.messagesAll?.map((msg: any) => ( + ( + history.push(`${url}/credential/${attachment.hash}`)} + fields={attachment.fields} + /> + )} /> - - - - - history.push( - `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`, - ) - } - /> - - history.push( - `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`, - ) - } - /> - - history.push( - `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`, - ) - } - /> - - history.push( - `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`, - ) - } - /> - - history.push( - `${url}/credential/4b61787d8ee3f136b2079b8d766e85a4c9fc65ff2fe70cb78b9871d1e09e45efb86c8a6f6828c9e639f9350bf0affec9d6caff98703c9497ea7138974d4033fc`, - ) - } - /> - - {/* - - - - - - - - - - - - {messagesData?.identity?.messagesAll?.map((msg: any) => ( - - - - - - - - - ))} - -
SenderReceiverTimeTypeClaims
{msg.sender.shortId}{msg.receiver.shortId}{msg.timestamp}{msg.type} - {msg.vc?.map((vc: any) => - vc.fields.map((field: any) => ( -
- {field.type} = {field.value} -
- )), - )} - 		- { - setQrValue(msg.raw) - setIsQROpen(true) - }} - /> -
*/} + ))} ) } diff --git a/examples/react-graphql/client/yarn.lock b/examples/react-graphql/client/yarn.lock index 644e36a7a..c13f32652 100644 --- a/examples/react-graphql/client/yarn.lock +++ b/examples/react-graphql/client/yarn.lock @@ -23,7 +23,7 @@ "@apollo/react-hoc@^3.1.3": version "3.1.3" - resolved "https://registry.yarnpkg.com/@apollo/react-hoc/-/react-hoc-3.1.3.tgz#5742ee74f57611058f5ea1f966c38fc6429dda7b" + resolved "https://registry.npmjs.org/@apollo/react-hoc/-/react-hoc-3.1.3.tgz#5742ee74f57611058f5ea1f966c38fc6429dda7b" integrity sha512-oCPma0uBVPTcYTR5sOvtMbpaWll4xDBvYfKr6YkDorUcQVeNzFu1LK1kmQjJP64bKsaziKYji5ibFaeCnVptmA== dependencies: "@apollo/react-common" "^3.1.3"