From d87127b97283a9fdcc8f9ac5b244f23b0a187cd8 Mon Sep 17 00:00:00 2001 From: Jason Healy Date: Fri, 24 Jan 2020 17:37:16 +0000 Subject: [PATCH] feat: Create + Send SDR request --- .../src/components/Credential/Credential.tsx | 4 +- .../react-graphql/client/src/layout/Page.tsx | 13 +- examples/react-graphql/client/src/queries.ts | 6 + .../client/src/views/Request/Request.tsx | 204 +++++++++++++++++- 4 files changed, 217 insertions(+), 10 deletions(-) diff --git a/examples/react-graphql/client/src/components/Credential/Credential.tsx b/examples/react-graphql/client/src/components/Credential/Credential.tsx index 6d6ed4d96..5f13d364f 100644 --- a/examples/react-graphql/client/src/components/Credential/Credential.tsx +++ b/examples/react-graphql/client/src/components/Credential/Credential.tsx @@ -39,9 +39,7 @@ const Component: React.FC = ({ onClick, detailMode, fields, jwt, iss, sub return ( - - {S.String.titleize(field.type)} - + {S.String.titleize(field.type)} {fieldValueImage ? ( diff --git a/examples/react-graphql/client/src/layout/Page.tsx b/examples/react-graphql/client/src/layout/Page.tsx index d7a1beb83..37dcf763d 100644 --- a/examples/react-graphql/client/src/layout/Page.tsx +++ b/examples/react-graphql/client/src/layout/Page.tsx @@ -1,7 +1,12 @@ import React from 'react' import { Box, Heading } from 'rimble-ui' -const Component = (props: any) => { +interface Props { + padding?: number + title: string +} + +const Component: React.FC = ({ padding, children, title }) => { return ( <> { display={'flex'} justifyContent={'space-between'} > - {props.title} + {title} - - {props.children} + + {children} ) diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts index e6c2bd7bf..df8ecfb39 100644 --- a/examples/react-graphql/client/src/queries.ts +++ b/examples/react-graphql/client/src/queries.ts @@ -65,6 +65,12 @@ export const actionSignVc = gql` actionSignVc(did: $did, data: $data) } ` + +export const actionSignSDR = gql` + mutation signSDR($did: String!, $data: SDRInput!) { + actionSignSDR(did: $did, data: $data) + } +` export const actionSendJwt = gql` mutation actionSendJwt($from: String!, $to: String!, $jwt: String!) { actionSendJwt(from: $from, to: $to, jwt: $jwt) diff --git a/examples/react-graphql/client/src/views/Request/Request.tsx b/examples/react-graphql/client/src/views/Request/Request.tsx index b10c4e911..512c0d15b 100644 --- a/examples/react-graphql/client/src/views/Request/Request.tsx +++ b/examples/react-graphql/client/src/views/Request/Request.tsx @@ -1,9 +1,207 @@ -import React from 'react' -import { Box, Heading } from 'rimble-ui' +import React, { useState, useContext } from 'react' +import { Box, Button, Field, Text, Form, Flex, Input, Loader, Checkbox } from 'rimble-ui' import Page from '../../layout/Page' +import Panel from '../../components/Panel/Panel' +import { AppContext } from '../../context/AppProvider' +import { useQuery, useMutation } from '@apollo/react-hooks' +import * as queries from '../../queries' + +declare global { + interface Window { + toastProvider: any + } +} const Component = () => { - return + const [appState] = useContext(AppContext) + const [isSending, setIsSending] = useState(false) + const [receiver, setReceiver] = useState('did:web:uport.me') + const [claims, updateClaims] = useState([]) + const [claimType, updateClaimType] = useState() + const [claimReason, updateClaimReason] = useState() + const [claimTypeRequired, updateClaimTypeRequired] = useState(false) + const [jwt, setJwt] = useState() + const [actionSendJwt] = useMutation(queries.actionSendJwt, { + onCompleted: response => { + if (response && response.actionSendJwt) { + setIsSending(false) + window.toastProvider.addMessage('Request sent!', { variant: 'success' }) + } + }, + }) + + const [actionSignSDR] = useMutation(queries.actionSignSDR, { + onCompleted: response => { + if (response && response.actionSignSDR) { + setJwt(response.actionSignSDR) + setIsSending(true) + + if (receiver) { + setIsSending(true) + + actionSendJwt({ + variables: { + from: appState.defaultDid, + to: receiver, + jwt: response.actionSignSDR, + }, + }) + } + } + }, + }) + + const addClaimField = (type: string, reason: string, essential: boolean) => { + const field = { + claimType: type, + reason, + essential, + } + const updatedClaims = claims.concat([field]) + updateClaims(updatedClaims) + updateClaimType('') + updateClaimReason('') + updateClaimTypeRequired(false) + } + + const removeClaimField = (index: number) => { + const updatedClaims = claims.filter((item: any, i: number) => i !== index) + updateClaims(updatedClaims) + } + + const sendRequest = () => { + actionSignSDR({ + variables: { + did: appState.defaultDid, + data: { + tag: 'tag-' + Date.now().toString(), + sub: receiver || null, + claims: claims, + }, + }, + }) + } + + return ( + + + + + + + + + + + + + + + setReceiver(e.target.value)} + width={1} + /> + + + + + + + + updateClaimType(e.target.value)} + width={1} + placeholder={'name'} + /> + + + + + updateClaimReason(e.target.value)} + width={1} + placeholder={'We need this'} + /> + + + + + + + + + + updateClaimTypeRequired(!claimTypeRequired)} + /> + + + + + {claims.map((c: any, i: number) => { + return ( + + + {c.claimType} + + + {c.reason} + + + {c.essential ? 'Required' : 'Not Required'} + + + ) + })} + + + + {isSending ? ( + + ) : ( + + )} + + + + + ) } export default Component