refactor: Pass close function to request component

decentralized-identity · Jan 28, 2020 · e6a647c · e6a647c
1 parent 8aafc6b
commit e6a647c
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/examples/react-graphql/client/src/components/Request/Request.tsx b/examples/react-graphql/client/src/components/Request/Request.tsx
@@ -14,6 +14,7 @@ interface Props {
   receiver: Types.Identity
   threadId: string
   sdr: any
+  close: () => void
 }
 
 interface ValidationState {
@@ -23,7 +24,7 @@ interface ValidationState {
   }
 }
 
-const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId }) => {
+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>({})
@@ -52,6 +53,7 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId }) => {
       if (response.actionSendJwt) {
         updateSending(false)
         window.toastProvider.addMessage('Response sent!', { variant: 'success' })
+        close()
       }
     },
     onError: response => {
@@ -189,7 +191,7 @@ const Component: React.FC<Props> = ({ sdr, sender, receiver, threadId }) => {
           <>
             <Button onClick={() => accept()}>Share</Button>
 
-            <Button.Outline>Later</Button.Outline>
+            <Button.Outline onClick={close}>Later</Button.Outline>
           </>
         )}
       </Box>

diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -25,8 +25,8 @@ const renderCredentialQuery = (props: any) => {
   return <Credential detailMode {...props?.credential} />
 }
 
-const renderSDRQuery = (props: any) => {
-  return <RequestDetail {...props?.message} />
+const renderSDRQuery = (props: any, close: () => void) => {
+  return <RequestDetail {...props?.message} close={close} />
 }
 
 const Dashboard: React.FC<DashboardProps> = () => {

diff --git a/examples/react-graphql/client/src/layout/SidePanel.tsx b/examples/react-graphql/client/src/layout/SidePanel.tsx
@@ -8,7 +8,7 @@ interface Props {
   title: string
   closeUrl: string
   query?: any
-  renderQuery?: (props: any) => React.ReactNode
+  renderQuery?: (props: any, close: () => void) => React.ReactNode
 }
 
 const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQuery }) => {
@@ -20,6 +20,10 @@ const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQu
     variables: { id, defaultDid: appState.defaultDid },
   })
 
+  const close = () => {
+    history.push(closeUrl)
+  }
+
   useEffect(() => {
     if (renderQuery) {
       getQuery()
@@ -38,12 +42,12 @@ const Component: React.FC<Props> = ({ title, closeUrl, query, children, renderQu
         bg="#222222"
       >
         <Heading as={'h4'}>{title}</Heading>
-        <Icon name={'Close'} onClick={() => history.push(closeUrl)} style={{ cursor: 'pointer' }} />
+        <Icon name={'Close'} onClick={close} style={{ cursor: 'pointer' }} />
       </Box>
 
       {renderQuery && data && (
         <Box p={3} pb={64} className={'scroll-container'}>
-          {renderQuery(data)}
+          {renderQuery(data, close)}
         </Box>
       )}