feat: Using data store

decentralized-identity · Jan 16, 2020 · c2b76fd · c2b76fd
1 parent a463e40
commit c2b76fd
Show file tree

Hide file tree

Showing 6 changed files with 1,000 additions and 103 deletions.
diff --git a/examples/react-graphql/client/src/App.tsx b/examples/react-graphql/client/src/App.tsx
@@ -16,6 +16,10 @@ const {
   Loader,
   ToastMessage,
   Table,
+  Modal,
+  Text,
+  QR,
+  Icon,
 } = require('rimble-ui')
 
 declare global {
@@ -31,16 +35,39 @@ const App: React.FC = () => {
   const [claimType, setClaimType] = useState('name')
   const [claimValue, setClaimValue] = useState('Alice')
 
-  const [createIdentity] = useMutation(queries.createIdentityMutation, {
-    refetchQueries: [{ query: queries.managedIdentitiesQuery }],
+  const [createIdentity] = useMutation(queries.createIdentity, {
+    refetchQueries: [{ query: queries.managedIdentities }],
   })
-  const { data: managedIdentitiesData } = useQuery(queries.managedIdentitiesQuery)
-  const {
-    loading: serviceMessagesLoading,
-    data: serviceMessagesData,
-  } = useQuery(queries.serviceMessagesSince, { variables: { ts: [] } })
-  const [signVc] = useMutation(queries.actionSignVcMutation)
-  const [sendJwt] = useMutation(queries.actionSendJwtMutation)
+
+  const { data: managedIdentitiesData } = useQuery(queries.managedIdentities)
+
+  const { loading: messagesLoading, data: messagesData } = useQuery(queries.allMessages, {
+    variables: { activeDid },
+  })
+
+  const [signVc] = useMutation(queries.actionSignVc)
+  const [sendJwt] = useMutation(queries.actionSendJwt, {
+    refetchQueries: [
+      {
+        query: queries.allMessages,
+        variables: { activeDid },
+      },
+    ],
+  })
+
+  const [isOpen, setIsOpen] = useState(false)
+  const [isQROpen, setIsQROpen] = useState(false)
+  const [qrValue, setQrValue] = useState('')
+
+  const closeModal = (e: any) => {
+    e?.preventDefault()
+    setIsOpen(false)
+  }
+
+  const openModal = (e: any) => {
+    e?.preventDefault()
+    setIsOpen(true)
+  }
 
   const send = async () => {
     setIsSending(true)
@@ -74,7 +101,7 @@ const App: React.FC = () => {
       })
 
       console.log(dataSend)
-
+      setIsOpen(false)
       window.toastProvider.addMessage('Credential sent!', { variant: 'success' })
     } catch (e) {
       window.toastProvider.addMessage(e.message, { variant: 'failure' })
@@ -91,25 +118,17 @@ const App: React.FC = () => {
   return (
     <BaseStyles>
       <ToastMessage.Provider ref={(node: any) => (window.toastProvider = node)} />
+      <Modal isOpen={isQROpen}>
+        <QR value={qrValue} size={500} />
+        <Button.Outline onClick={() => setIsQROpen(false)}>Close</Button.Outline>
+      </Modal>
       <Flex>
         <Box p={3}>
           <Card width={'auto'} mx={'auto'}>
-            <Heading>Send Verifiable Credential</Heading>
-
-            {managedIdentitiesData?.managedIdentityTypes?.map((type: string) => (
-              <Button.Outline
-                mt={3}
-                mb={3}
-                mr={3}
-                key={type}
-                onClick={() => createIdentity({ variables: { type } })}
-              >
-                Create {type} DID
-              </Button.Outline>
-            ))}
+            <Heading>Managed Identities</Heading>
 
             <Form onSubmit={handleSubmit}>
-              <Field label="Sender" required>
+              <Field label="Active DID" required>
                 <div>
                   {managedIdentitiesData?.managedIdentities?.map(
                     (identity: { did: string; type: string }) => (
@@ -126,75 +145,129 @@ const App: React.FC = () => {
                   )}
                 </div>
               </Field>
-
-              <Flex mx={-3} flexWrap={'wrap'}>
-                <Box width={1} px={3}>
-                  <Field label="Receiver" width={1}>
-                    <Input
-                      type="text"
-                      required
-                      value={receiver}
-                      onChange={(e: any) => setReceiver(e.target.value)}
-                      width={1}
-                    />
-                  </Field>
-                </Box>
-              </Flex>
-
-              <Flex mx={-3} flexWrap={'wrap'}>
-                <Box width={[1, 1, 1 / 2]} px={3}>
-                  <Field label="Claim type" width={1}>
-                    <Input
-                      type="text"
-                      required
-                      value={claimType}
-                      onChange={(e: any) => setClaimType(e.target.value)}
-                      width={1}
-                    />
-                  </Field>
-                </Box>
-                <Box width={[1, 1, 1 / 2]} px={3}>
-                  <Field label="Claim value" width={1}>
-                    <Form.Input
-                      type="text"
-                      required
-                      value={claimValue}
-                      onChange={(e: any) => setClaimValue(e.target.value)}
-                      width={1}
-                    />
-                  </Field>
-                </Box>
-              </Flex>
-
-              <Flex flexWrap={'wrap'}>
-                {isSending ? <Loader size="40px" /> : <Button type="submit">Sign and send</Button>}
-              </Flex>
             </Form>
+
+            {managedIdentitiesData?.managedIdentityTypes?.map((type: string) => (
+              <Button.Outline
+                mt={3}
+                mb={3}
+                mr={3}
+                key={type}
+                onClick={() => createIdentity({ variables: { type } })}
+              >
+                Create {type} DID
+              </Button.Outline>
+            ))}
           </Card>
         </Box>
       </Flex>
+
+      <Button onClick={openModal} disabled={activeDid === ''} ml={3}>
+        Send Verifiable Credential
+      </Button>
+      <Modal isOpen={isOpen}>
+        <Flex>
+          <Box p={3}>
+            <Card width={'auto'} mx={'auto'}>
+              <Heading>Send Verifiable Credential</Heading>
+
+              <Form onSubmit={handleSubmit}>
+                <Field label="Sender" required>
+                  <Text>{activeDid}</Text>
+                </Field>
+
+                <Flex mx={-3} flexWrap={'wrap'}>
+                  <Box width={1} px={3}>
+                    <Field label="Receiver" width={1}>
+                      <Input
+                        type="text"
+                        required
+                        value={receiver}
+                        onChange={(e: any) => setReceiver(e.target.value)}
+                        width={1}
+                      />
+                    </Field>
+                  </Box>
+                </Flex>
+
+                <Flex mx={-3} flexWrap={'wrap'}>
+                  <Box width={[1, 1, 1 / 2]} px={3}>
+                    <Field label="Claim type" width={1}>
+                      <Input
+                        type="text"
+                        required
+                        value={claimType}
+                        onChange={(e: any) => setClaimType(e.target.value)}
+                        width={1}
+                      />
+                    </Field>
+                  </Box>
+                  <Box width={[1, 1, 1 / 2]} px={3}>
+                    <Field label="Claim value" width={1}>
+                      <Form.Input
+                        type="text"
+                        required
+                        value={claimValue}
+                        onChange={(e: any) => setClaimValue(e.target.value)}
+                        width={1}
+                      />
+                    </Field>
+                  </Box>
+                </Flex>
+
+                <Flex flexWrap={'wrap'}>
+                  {isSending ? <Loader size="40px" /> : <Button type="submit">Sign and send</Button>}
+                  <Button.Outline onClick={closeModal} ml={3}>
+                    Cancel
+                  </Button.Outline>
+                </Flex>
+              </Form>
+            </Card>
+          </Box>
+        </Flex>
+      </Modal>
+
       <Box p={3}>
         <Card width={'auto'} mx={'auto'}>
           <Heading>Messages</Heading>
-          {serviceMessagesLoading ? <Loader size="20px" /> : <div style={{ height: '20px' }} />}
+          {messagesLoading ? <Loader size="20px" /> : <div style={{ height: '20px' }} />}
           <Table>
             <thead>
               <tr>
                 <th>Sender</th>
                 <th>Receiver</th>
                 <th>Time</th>
                 <th>Type</th>
-                <th>Data</th>
+                <th>Claims</th>
+                <th></th>
               </tr>
             </thead>
             <tbody>
-              {serviceMessagesData?.serviceMessagesSince.map((msg: any) => (
+              {messagesData?.identity?.messagesAll?.map((msg: any) => (
                 <tr key={msg.id}>
-                  <td>{msg.sender}</td>
-                  <td>{msg.receiver}</td>
+                  <td>{msg.sender.shortId}</td>
+                  <td>{msg.receiver.shortId}</td>
                   <td>{msg.timestamp}</td>
                   <td>{msg.type}</td>
-                  <td>{msg.data}</td>
+                  <td>
+                    {msg.vc?.map((vc: any) =>
+                      vc.fields.map((field: any) => (
+                        <div key={field.type}>
+                          {field.type} = {field.value}
+                        </div>
+                      )),
+                    )}
+                  </td>
+                  <td>
+                    <Icon
+                      name="Search"
+                      size="30"
+                      onClick={() => {
+                        setQrValue(msg.raw)
+                        setIsQROpen(true)
+                      }}
+                    />
+                  </td>
                 </tr>
               ))}
             </tbody>

diff --git a/examples/react-graphql/client/src/queries.ts b/examples/react-graphql/client/src/queries.ts
@@ -1,6 +1,6 @@
 import { gql } from 'apollo-boost'
 
-export const managedIdentitiesQuery = gql`
+export const managedIdentities = gql`
   query managedIdentities {
     managedIdentityTypes
     managedIdentities {
@@ -10,38 +10,59 @@ export const managedIdentitiesQuery = gql`
   }
 `
 
-export const createIdentityMutation = gql`
+export const createIdentity = gql`
   mutation createIdentity($type: String) {
     createIdentity(type: $type) {
       did
     }
   }
 `
 
-export const actionSignVcMutation = gql`
+export const actionSignVc = gql`
   mutation actionSignVc($did: String!, $data: VerifiableCredentialInput!) {
     actionSignVc(did: $did, data: $data)
   }
 `
-export const actionSendJwtMutation = gql`
+export const actionSendJwt = gql`
   mutation actionSendJwt($from: String!, $to: String!, $jwt: String!) {
     actionSendJwt(from: $from, to: $to, jwt: $jwt)
   }
 `
 
-export const serviceMessagesSince = gql`
-  query m($ts: [LastMessageTimestampForInstance]!) {
-    serviceMessagesSince(ts: $ts) {
-      id
-      type
-      timestamp
-      data
-      raw
-      sender
-      receiver
-      metaData {
-        type
+export const allMessages = gql`
+  query allMessages($activeDid: ID!) {
+    identity(did: $activeDid) {
+      did
+      messagesAll {
         id
+        raw
+        data
+        threadId
+        type
+        timestamp
+        sender {
+          did
+          shortId
+          profileImage
+        }
+        receiver {
+          did
+          shortId
+          profileImage
+        }
+        vc {
+          rowId
+          fields {
+            type
+            value
+            isObj
+          }
+        }
+        metaData {
+          type
+          id
+          data
+        }
       }
     }
   }

diff --git a/examples/react-graphql/server/.gitignore b/examples/react-graphql/server/.gitignore
@@ -1 +1,3 @@
-node_modules
+node_modules
+identity-store.json
+data-store.sqlite3