feat: Validation in SDR response

examples/react-graphql/client/package.json

@@ -9,6 +9,7 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "apollo-boost": "^0.4.7",
+    "date-fns": "^2.9.0",
     "graphql": "^14.5.8",
     "md5": "^2.2.1",
     "react": "^16.12.0",
@@ -23,6 +24,7 @@
     "sugar-inflections": "^2.0.6"
   },
   "devDependencies": {
+    "@types/date-fns": "^2.6.0",
     "@types/jest": "^24.0.0",
     "@types/node": "^12.0.0",
     "@types/react": "^16.9.0",

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

@@ -1,19 +1,34 @@
 import React from 'react'
 import { Box, Heading, Text, Icon, Avatar, Button } from 'rimble-ui'
 import * as Types from '../../types'
+import { formatDistanceToNow } from 'date-fns'
 
-import './MessageItem.css'
+import './ActivityItem.css'
 
 interface Props {
   /**
-   * The activity that is takaing place
+   * The unique id or message hash
+   */
+  id: string
+
+  /**
+   * The message type
+   */
+  type: 'w3c.vp' | 'w3c.vc' | 'sdr' | string
+
+  /**
+   * The timestamp for when this message was recieved or sent
+   */
+  date: number
+  /**
+   * The activity that is taking place
    */
   activity?: string
 
   /**
-   * The type of message
+   * The viewer's did
    */
-  type: string
+  viewerDid: Types.Identity
 
   /**
    * The issuer of this message item
@@ -36,6 +51,7 @@ const Component: React.FC<Props> = ({
   receiver,
   type,
   showRequest,
+  date,
 }) => {
   return (
     <Box className={'message_item'} p={3}>
@@ -58,6 +74,10 @@ const Component: React.FC<Props> = ({
           )}
         </Box>
       </Box>
+      <Box ml={2} flexDirection={'row'} display={'flex'} py={2}>
+        <Icon name={'Alarm'} color={'#555555'} mr={2} />
+        <Text color={'#555555'}>{formatDistanceToNow(date) + ' ago'}</Text>
+      </Box>
       {type == 'sdr' && (
         <Box p={3}>
           <Button size={'medium'} onClick={showRequest}>

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

@@ -25,14 +25,17 @@ interface ValidationState {
 }
 
 const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close }) => {
-  console.log(sdr, sender, receiver)
   const [sending, updateSending] = useState<boolean>(false)
   const [selected, updateSelected] = useState<ValidationState>({})
   const [formValid, setValid] = useState(true)
   const [appState] = useContext(AppContext)
 
   const checkValidity = () => {
     let valid = true
+
+    if (Object.keys(selected).length === 0) {
+      valid = false
+    }
     Object.keys(selected).map(key => {
       if (selected[key].required && !selected[key].jwt) {
         valid = false
@@ -56,7 +59,7 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
         close()
       }
     },
-    onError: response => {
+    onError: () => {
       window.toastProvider.addMessage('There was a problem sending your response', { variant: 'error' })
     },
   })
@@ -112,8 +115,6 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
 
   useEffect(() => {
     checkValidity()
-
-    console.log(selected)
   }, [selected])
 
   useEffect(() => {
@@ -135,8 +136,6 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
       }
     })
     updateSelected(defaultSelected)
-
-    console.log(defaultSelected)
   }, [])
 
   return (
@@ -158,7 +157,6 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
         <Text>Share your data with {sender.shortId}</Text>
       </Box>
       {sdr.map((requestItem: any) => {
-        console.log(requestItem)
         return (
           <Box p={3} borderBottom={1} borderColor={'#333333'} key={requestItem.claimType}>
             <Box>
@@ -186,12 +184,17 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId, close })
           </Box>
         )
       })}
+      <Box p={3}>
+        <Text color={'#ea3939'}>{formValid ? '' : 'There are some missing fields'}</Text>
+      </Box>
       <Box p={3} justifyContent={'space-between'} display={'flex'} flexDirection={'row'}>
         {sending ? (
           <Loader size="40px" />
         ) : (
           <>
-            <Button onClick={() => accept()}>Share</Button>
+            <Button onClick={() => accept()} disabled={sending || !formValid}>
+              Share
+            </Button>
 
             <Button.Outline onClick={close}>Later</Button.Outline>
           </>

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

@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react'
 import { Flex } from 'rimble-ui'
-import MessageItem from '../../components/MessageItem/MessageItem'
+import ActivityItem from '../../components/ActivityItem/ActivityItem'
 import Page from '../../layout/Page'
 import Credential from '../../components/Credential/Credential'
 import * as queries from '../../gql/queries'
@@ -12,19 +12,20 @@ interface Activity {}
 
 const Activity: React.FC<Activity> = () => {
   const [appState] = useContext(AppContext)
-  const [isQROpen, setIsQROpen] = useState(false)
-  const [qrValue, setQrValue] = useState('')
   const history = useHistory()
   const { url } = useRouteMatch()
 
-  const { loading: messagesLoading, data: messagesData } = useQuery(queries.allMessages, {
+  const { data } = useQuery(queries.allMessages, {
     variables: { activeDid: appState.defaultDid },
   })
 
   return (
     <Page title={'Activity'}>
-      {messagesData?.identity?.messagesAll?.map((msg: any) => (
-        <MessageItem
+      {data?.identity?.messagesAll?.map((msg: any) => (
+        <ActivityItem
+          viewerDid={appState.defaultDid}
+          id={msg.id}
+          date={msg.timestamp * 1000}
           type={msg.type}
           key={msg.id}
           sender={msg.sender}

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

@@ -166,7 +166,7 @@ const Component = () => {
                 label="Required"
                 my={2}
                 checked={claimTypeRequired}
-                onClick={() => updateClaimTypeRequired(!claimTypeRequired)}
+                onChange={() => updateClaimTypeRequired(!claimTypeRequired)}
               />
             </Box>
           </Flex>

examples/react-graphql/client/yarn.lock

@@ -1497,6 +1497,13 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/date-fns@^2.6.0":
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/@types/date-fns/-/date-fns-2.6.0.tgz#b062ca46562002909be0c63a6467ed173136acc1"
+  integrity sha1-sGLKRlYgApCb4MY6ZGftFzE2rME=
+  dependencies:
+    date-fns "*"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -2075,7 +2082,7 @@ anymatch@^2.0.0:
 
 apollo-boost@^0.4.7:
   version "0.4.7"
-  resolved "https://registry.yarnpkg.com/apollo-boost/-/apollo-boost-0.4.7.tgz#b0680ab0893e3f8b1ab1058dcfa2b00cb6440d79"
+  resolved "https://registry.npmjs.org/apollo-boost/-/apollo-boost-0.4.7.tgz#b0680ab0893e3f8b1ab1058dcfa2b00cb6440d79"
   integrity sha512-jfc3aqO0vpCV+W662EOG5gq4AH94yIsvSgAUuDvS3o/Z+8Joqn4zGC9CgLCDHusK30mFgtsEgwEe0pZoedohsQ==
   dependencies:
     apollo-cache "^1.3.4"
@@ -3720,6 +3727,11 @@ data-urls@^1.0.0, data-urls@^1.1.0:
     whatwg-mimetype "^2.2.0"
     whatwg-url "^7.0.0"
 
+date-fns@*, date-fns@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.9.0.tgz#d0b175a5c37ed5f17b97e2272bbc1fa5aec677d2"
+  integrity sha512-khbFLu/MlzLjEzy9Gh8oY1hNt/Dvxw3J6Rbc28cVoYWQaC1S3YI4xwkF9ZWcjDLscbZlY9hISMr66RFzZagLsA==
+
 [email protected], debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.8, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"