fix: Fix rendering route sidepanels

decentralized-identity · Jan 27, 2020 · 7c10ce9 · 7c10ce9
1 parent d930b92
commit 7c10ce9
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/examples/react-graphql/client/src/components/Request/Request.tsx b/examples/react-graphql/client/src/components/Request/Request.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Box, Heading } from 'rimble-ui'
+import { Box, Heading, Avatar, Text } from 'rimble-ui'
 import * as Types from '../../types'
 
 interface Props {
@@ -8,10 +8,30 @@ interface Props {
   sdr: any
 }
 
-const Component: React.FC<Props> = ({ sdr }) => {
-  console.log(sdr)
+const Component: React.FC<Props> = ({ sdr, sender, receiver }) => {
+  console.log(sdr, sender, receiver)
 
-  return <Box>Show contents from query. Results are logged in console..</Box>
+  return (
+    <Box>
+      <Box
+        flexDirection={'column'}
+        justifyContent={'center'}
+        alignItems={'center'}
+        display={'flex'}
+        flex={1}
+        py={4}
+        bg={'#252731'}
+      >
+        <Avatar size={'60px'} src={''} />
+        <Heading as={'h3'} mt={2}>
+          {sender.shortId}
+        </Heading>
+      </Box>
+      <Box bg={'#000000'} p={3}>
+        <Text>Share your data with {sender.shortId}</Text>
+      </Box>
+    </Box>
+  )
 }
 
 export default Component
diff --git a/examples/react-graphql/client/src/gql/queries.ts b/examples/react-graphql/client/src/gql/queries.ts
@@ -90,6 +90,11 @@ export const queryMessage = gql`
         shortId
         profileImage
       }
+      receiver {
+        did
+        shortId
+        profileImage
+      }
     }
   }
 `

diff --git a/examples/react-graphql/client/src/layout/Layout.tsx b/examples/react-graphql/client/src/layout/Layout.tsx
@@ -74,22 +74,30 @@ const Dashboard: React.FC<DashboardProps> = () => {
               <IdentityDetail />
             </SidePanel>
           </Route>
-          <Route path="/activity/credential/:id">
-            <SidePanel
-              title={'Credential'}
-              closeUrl={'/activity'}
-              query={queries.credential}
-              renderQuery={renderCredentialQuery}
-            ></SidePanel>
-          </Route>
-          <Route path="/activity/sdr/:id">
-            <SidePanel
-              title={'Selective Disclosure'}
-              closeUrl={'/activity'}
-              query={queries.queryMessage}
-              renderQuery={renderSDRQuery}
-            ></SidePanel>
-          </Route>
+          <Route
+            exact
+            path="/activity/credential/:id"
+            component={() => (
+              <SidePanel
+                title={'Credential'}
+                closeUrl={'/activity'}
+                query={queries.credential}
+                renderQuery={renderCredentialQuery}
+              ></SidePanel>
+            )}
+          ></Route>
+          <Route
+            exact
+            path="/activity/sdr/:id"
+            component={() => (
+              <SidePanel
+                title={'Selective Disclosure'}
+                closeUrl={'/activity'}
+                query={queries.queryMessage}
+                renderQuery={renderSDRQuery}
+              ></SidePanel>
+            )}
+          ></Route>
         </Switch>
       </Flex>
     </Router>
-Original file line number
+Diff line change
@@ Expand Up / @@ -90,6 +90,11 @@ export const queryMessage = gql` @@
             shortId
             profileImage
           }
+          receiver {
+            did
+            shortId
+            profileImage
+          }
         }
       }
     `
@@ Expand Down @@