From 7c10ce9921734b042c36a62af0fd646cde605f26 Mon Sep 17 00:00:00 2001
From: Jason Healy <hello@jasonhealy.io>
Date: Mon, 27 Jan 2020 16:33:35 +0000
Subject: [PATCH] fix: Fix rendering route sidepanels

---
 .../client/src/components/Request/Request.tsx | 28 +++++++++++--
 .../react-graphql/client/src/gql/queries.ts   |  5 +++
 .../client/src/layout/Layout.tsx              | 40 +++++++++++--------
 3 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/examples/react-graphql/client/src/components/Request/Request.tsx b/examples/react-graphql/client/src/components/Request/Request.tsx
index e237ed5c7..3a85da2af 100644
--- 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
index f7b4f0064..5c41b4510 100644
--- 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
index 065a3caab..c34aea40b 100644
--- 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>