Merge pull request #160 from uport-project/docs/react-gql

React GQL Docs/demo

examples/react-graphql/client/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

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

@@ -0,0 +1,40 @@
+import React from 'react'
+import * as Types from '../../types'
+import Credential from './Credential'
+import { Box, Heading, Text } from 'rimble-ui'
+import './Credential.css'
+import * as queries from '../../gql/queries'
+import { useQuery } from 'react-apollo'
+import { useParams } from 'react-router-dom'
+
+const S = require('sugar/string')
+
+interface Props {}
+
+const Component: React.FC<Props> = ({}) => {
+  const { id } = useParams()
+  const { data } = useQuery(queries.credentials, { variables: { id } })
+
+  return (
+    <Box>
+      <Heading as={'h3'} mt={2} mb={3}>
+        Credentials
+      </Heading>
+      {data &&
+        data.credentials &&
+        data.credentials.map((credential: any) => {
+          return (
+            <Credential
+              key={credential.hash}
+              issuer={credential.issuer}
+              subject={credential.subject}
+              claims={credential.claims}
+              jwt={credential.jwt}
+            />
+          )
+        })}
+    </Box>
+  )
+}
+
+export default Component

examples/react-graphql/client/src/gql/mutations.ts

@@ -15,8 +15,8 @@ export const deleteIdentity = gql`
 `
 
 export const signCredentialJwt = gql`
-  mutation signCredentialJwt($data: SignCredentialInput!) {
-    signCredentialJwt(data: $data) {
+  mutation signCredentialJwt($data: SignCredentialInput!, $save: Boolean) {
+    signCredentialJwt(data: $data, save: $save) {
       raw
     }
   }

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

@@ -25,6 +25,29 @@ export const credential = gql`
   }
 `
 
+export const credentials = gql`
+  query credentials($id: String!) {
+    credentials(input: { where: [{ column: subject, value: [$id] }] }) {
+      hash
+      subject {
+        did
+        shortId: shortDid
+      }
+      issuer {
+        did
+        shortId: shortDid
+      }
+      issuanceDate
+      type
+      claims {
+        hash
+        type
+        value
+      }
+    }
+  }
+`
+
 export const identity = gql`
   query identity($did: String!) {
     identity(did: $did) {

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

@@ -15,6 +15,7 @@ import SidePanel from './SidePanel'
 import NavigationLeft from './NavigationLeft'
 
 import Credential from '../components/Credential/Credential'
+import CredentialList from '../components/Credential/CredentialList'
 import RequestDetail from '../components/Request/Request'
 import Settings from '../views/Settings/Settings'
 
@@ -73,9 +74,15 @@ const Dashboard: React.FC<DashboardProps> = () => {
         */}
 
         <Switch>
+          <Route path="/connections/user/:id">
+            <SidePanel title={'Identity'} closeUrl={'/connections'}>
+              <CredentialList />
+            </SidePanel>
+          </Route>
           <Route path="/identities/user/:id">
             <SidePanel title={'Identity'} closeUrl={'/identities'}>
               <IdentityDetail />
+              <CredentialList />
             </SidePanel>
           </Route>
           <Route

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}

examples/react-graphql/client/src/views/Identity/IdentitiyManager.tsx

@@ -12,7 +12,7 @@ import { AppContext } from '../../context/AppProvider'
 const Component = () => {
   const history = useHistory()
   const { url } = useRouteMatch()
-  const [highlightedIdentity, highlightIdentity] = useState()
+  const [highlightedIdentity, highlightIdentity] = useState<string>()
   const { appState, setDefaultDid } = useContext(AppContext)
   const { defaultDid } = appState
   const { data: managedIdentitiesData } = useQuery(queries.managedIdentities)

examples/react-graphql/client/src/views/Issue/Issue.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useContext } from 'react'
-import { Box, Button, Field, Text, Form, Flex, Input, Loader, ToastMessage } from 'rimble-ui'
+import { Box, Button, Field, Text, Form, Flex, Input, Loader, ToastMessage, QR } from 'rimble-ui'
 import Page from '../../layout/Page'
 import Panel from '../../components/Panel/Panel'
 import { AppContext } from '../../context/AppProvider'
@@ -19,6 +19,7 @@ const Component = () => {
   const [receiver, setReceiver] = useState('did:web:uport.me')
   const [claimType, setClaimType] = useState('name')
   const [claimValue, setClaimValue] = useState('Alice')
+  const [signedVC, setSignedVC] = useState<any>(null)
   const [signVc] = useMutation(mutations.signCredentialJwt)
   const [sendMessageDidCommAlpha1] = useMutation(mutations.sendMessageDidCommAlpha1, {
     refetchQueries: [
@@ -29,8 +30,8 @@ const Component = () => {
     ],
   })
 
-  const send = async () => {
-    setIsSending(true)
+  const signVC = async (e: any) => {
+    e.preventDefault()
 
     try {
       const credentialSubject: any = {}
@@ -45,18 +46,31 @@ const Component = () => {
             type: ['VerifiableCredential'],
             credentialSubject,
           },
+          save: true,
         },
       })
+      setSignedVC(data.signCredentialJwt.raw)
+    } catch (e) {}
+  }
+
+  const send = async (e: any) => {
+    e.preventDefault()
+
+    if (!signedVC) {
+      return
+    }
 
-      console.log(data)
+    setIsSending(true)
 
+    try {
+      console.log(signedVC)
       const { data: dataSend } = await sendMessageDidCommAlpha1({
         variables: {
           data: {
             from: appState.defaultDid,
             to: receiver,
             type: 'jwt',
-            body: data.signCredentialJwt.raw,
+            body: signedVC,
           },
         },
       })
@@ -71,16 +85,11 @@ const Component = () => {
     setIsSending(false)
   }
 
-  const handleSubmit = (e: any) => {
-    e.preventDefault()
-    send()
-  }
-
   return (
     <Page title={'Issue Credential'} padding={3}>
       <Panel heading={'Credential form'}>
         <Box p={3}>
-          <Form onSubmit={handleSubmit}>
+          <Form>
             <Field label="Sender" required>
               <Text>{appState.defaultDid}</Text>
             </Field>
@@ -130,8 +139,25 @@ const Component = () => {
               </Box>
             </Flex>
 
+            {signedVC && (
+              <Box p={3} border={10} borderColor={'#FFFFFF'}>
+                <QR size={300} value={signedVC} />
+              </Box>
+            )}
+
             <Flex flexWrap={'wrap'}>
-              {isSending ? <Loader size="40px" /> : <Button type="submit">Sign and send</Button>}
+              {isSending ? (
+                <Loader size="40px" />
+              ) : (
+                <Box>
+                  <Button type="submit" mr={4} onClick={signVC}>
+                    Sign
+                  </Button>
+                  <Button type="submit" disabled={!signedVC} onClick={send}>
+                    Send
+                  </Button>
+                </Box>
+              )}
             </Flex>
           </Form>
         </Box>