refactor: Show detail credential view in sidepanel

examples/react-graphql/client/package.json

@@ -7,12 +7,6 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-table": "^7.0.3",
-    "@types/styled-components": "^4.4.2",
     "apollo-boost": "^0.4.7",
     "graphql": "^14.5.8",
     "md5": "^2.2.1",
@@ -23,7 +17,16 @@
     "react-scripts": "3.3.0",
     "react-table": "^7.0.0-rc.15",
     "rimble-ui": "^0.11.1",
-    "styled-components": "^5.0.0",
+    "styled-components": "^5.0.0"
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.3",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-table": "^7.0.3",
+    "@types/styled-components": "^4.4.2",
     "typescript": "~3.7.2"
   },
   "scripts": {
@@ -46,8 +49,5 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  },
-  "devDependencies": {
-    "@types/react-router-dom": "^5.1.3"
   }
 }

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

@@ -1,6 +1,5 @@
 import React from 'react'
 import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
-import Page from '../../layout/Page'
 
 interface Props {
   onClick?: () => void

examples/react-graphql/client/src/components/Credential/CredentialDetail.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { Box, Heading, Text, Icon, Avatar } from 'rimble-ui'
+
+interface Props {
+  onClick?: () => void
+}
+
+const Component: React.FC<Props> = ({ onClick }) => {
+  return (
+    <Box border={1} borderRadius={5} borderColor={'#555555'} p={3} maxWidth={350} mb={16} onClick={onClick}>
+      <Box flexDirection={'row'} display={'flex'} alignItems={'center'}>
+        <Avatar size={'40'} src={''} />
+        <Box ml={2}>
+          <Text fontWeight={'bold'}>Simon</Text>
+          <Box flexDirection={'row'} display={'flex'}>
+            <Icon name={'PlayArrow'} />
+            <Text>Mircea</Text>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  )
+}
+
+export default Component

examples/react-graphql/client/src/layout/Layout.tsx

@@ -1,8 +1,6 @@
-import React, { useState } from 'react'
-import { useQuery, useMutation } from '@apollo/react-hooks'
-
-import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui'
+import React from 'react'
 import { Switch, Route, BrowserRouter as Router, Redirect } from 'react-router-dom'
+import { Flex, Box } from 'rimble-ui'
 
 import Activity from '../views/Activity/Activity'
 import Explore from '../views/Explore/Explore'
@@ -13,8 +11,9 @@ import Connections from '../views/Connections/Connections'
 import Issue from '../views/Issue/Issue'
 
 import Sidebar from './Sidebar'
+import SidePanel from './SidePanel'
 import NavigationLeft from './NavigationLeft'
-import Credential from '../components/Credential/Credential'
+import CredentialDetail from '../components/Credential/CredentialDetail'
 
 interface DashboardProps {}
 
@@ -51,11 +50,15 @@ const Dashboard: React.FC<DashboardProps> = () => {
         </Box>
 
         <Switch>
-          <Route path="*/user/:id">
-            <IdentityDetail />
+          <Route path="/identities/user/:id">
+            <SidePanel title={'Identity'} closeUrl={'/identities'}>
+              <IdentityDetail />
+            </SidePanel>
           </Route>
-          <Route path="/credential/:id">
-            <Credential />
+          <Route path="/activity/credential/:id">
+            <SidePanel title={'Credential'} closeUrl={'/activity'}>
+              <CredentialDetail />
+            </SidePanel>
           </Route>
         </Switch>
       </Flex>

examples/react-graphql/client/src/layout/SidePanel.tsx

@@ -1,10 +1,34 @@
 import React from 'react'
-import { Flex, Box, Text, Heading, Button, Icon, Table, Field, Input } from 'rimble-ui'
-import { Switch, Route, useParams } from 'react-router-dom'
-import IdentityDetail from '../views/Identity/IdentityDetail'
+import { Box, Heading, Icon } from 'rimble-ui'
+import { useHistory } from 'react-router-dom'
 
-const Component = () => {
-  return <IdentityDetail />
+interface Props {
+  title: string
+  closeUrl: string
+}
+
+const Component: React.FC<Props> = ({ title, closeUrl, children }) => {
+  let history = useHistory()
+
+  return (
+    <Box width={450} bg="#1C1C1C" borderLeft={1} borderColor={'#4B4B4B'}>
+      <Box
+        p={3}
+        borderColor={'#4B4B4B'}
+        flexDirection={'row'}
+        display={'flex'}
+        justifyContent={'space-between'}
+        alignItems={'center'}
+        bg="#222222"
+      >
+        <Heading as={'h4'}>{title}</Heading>
+        <Icon name={'Close'} onClick={() => history.push(closeUrl)} style={{ cursor: 'pointer' }} />
+      </Box>
+      <Box p={3} pb={64} className={'scroll-container'}>
+        {children}
+      </Box>
+    </Box>
+  )
 }
 
 export default Component

examples/react-graphql/client/src/views/Identity/IdentityDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import { Box, Heading, Field, Input, Icon, Flash, Button, Text } from 'rimble-ui'
+import { Box, Heading, Button, Text } from 'rimble-ui'
 import { useParams, useHistory } from 'react-router-dom'
 import { AppContext } from '../../context/AppProvider'
 import { useMutation } from '@apollo/react-hooks'
@@ -27,63 +27,49 @@ const Component = () => {
   }
 
   return (
-    <Box width={450} bg="#1C1C1C" borderLeft={1} borderColor={'#4B4B4B'}>
-      <Box
-        p={3}
-        borderColor={'#4B4B4B'}
-        flexDirection={'row'}
-        display={'flex'}
-        justifyContent={'space-between'}
-        alignItems={'center'}
-        bg="#222222"
-      >
-        <Heading as={'h4'}>Identity</Heading>
-        <Icon name={'Close'} onClick={() => history.push('/identities')} style={{ cursor: 'pointer' }} />
+    <>
+      <Box borderRadius={1} bg="#222222" mb={32}>
+        <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
+          <Heading as={'h5'}>DID Details</Heading>
+        </Box>
+        <Box p={3} bg="#222222" mb={10}>
+          <Heading as={'h5'} pb={2}>
+            did
+          </Heading>
+          {id}
+        </Box>
       </Box>
-      <Box p={3} pb={64} className={'scroll-container'}>
-        <Box borderRadius={1} bg="#222222" mb={32}>
-          <Box p={3} borderBottom={1} borderColor={'#4B4B4B'}>
-            <Heading as={'h5'}>DID Details</Heading>
-          </Box>
-          <Box p={3} bg="#222222" mb={10}>
-            <Heading as={'h5'} pb={2}>
-              did
-            </Heading>
-            {id}
-          </Box>
+      <Box flexDirection={'column'} display={'flex'}>
+        <Box mb={4}>
+          <Text>
+            {defaultDid === id
+              ? 'This is your current default identity'
+              : 'Set this DID as the default identity'}
+          </Text>
+          <Button mt={3} mb={3} mr={3} onClick={() => setDefaultDid(id)} disabled={defaultDid === id}>
+            Set as default
+          </Button>
         </Box>
-        <Box flexDirection={'column'} display={'flex'}>
-          <Box mb={4}>
-            <Text>
-              {defaultDid === id
-                ? 'This is your current default identity'
-                : 'Set this DID as the default identity'}
-            </Text>
-            <Button mt={3} mb={3} mr={3} onClick={() => setDefaultDid(id)} disabled={defaultDid === id}>
-              Set as default
-            </Button>
-          </Box>
-          <Box>
-            <Text>
-              {defaultDid === id
-                ? 'You cannot delete your default identity. Set another identity as your default to delete this identity'
-                : 'Delete this identity. All data associated with it will be lost.'}
-            </Text>
-            <Text></Text>
-            <Button
-              variant="danger"
-              mt={3}
-              mb={3}
-              mr={3}
-              onClick={() => deleteId(id)}
-              disabled={defaultDid === id}
-            >
-              Delete DID
-            </Button>
-          </Box>
+        <Box>
+          <Text>
+            {defaultDid === id
+              ? 'You cannot delete your default identity. Set another identity as your default to delete this identity'
+              : 'Delete this identity. All data associated with it will be lost.'}
+          </Text>
+          <Text></Text>
+          <Button
+            variant="danger"
+            mt={3}
+            mb={3}
+            mr={3}
+            onClick={() => deleteId(id)}
+            disabled={defaultDid === id}
+          >
+            Delete DID
+          </Button>
         </Box>
       </Box>
-    </Box>
+    </>
   )
 }
 

examples/react-graphql/server/yarn.lock

@@ -809,10 +809,10 @@ daf-core@^1.4.0, daf-core@^1.4.1:
     debug "^4.1.1"
     events "^3.0.0"
 
-daf-data-store@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/daf-data-store/-/daf-data-store-1.4.1.tgz#5c97a6198786bf2014cada307b961f244162b50b"
-  integrity sha512-/jYuBXRLSPr0hLTMfRiSiKoatut0TBsY4Y3ACMiVWbAPOYk9lBeUfDD8iWbu1yef+are+kCxt0MRnDxUu2OptA==
+daf-data-store@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/daf-data-store/-/daf-data-store-1.5.0.tgz#dbd37a9d9be024eab76cc3a5531cfca654dbbf66"
+  integrity sha512-CngWn+G4Qd9HIsJAPOOMlNBlkDUbOmmL9+jF2iOHb33JIOiJ9MhSsAgNvofJq0G17EgxHLZ0dD6z4qP/GgZf/g==
   dependencies:
     blakejs "^1.1.0"
     daf-core "^1.4.1"
@@ -846,12 +846,12 @@ daf-ethr-did-fs@^1.4.0:
     debug "^4.1.1"
     ethr-did "^1.1.0"
 
-daf-node-sqlite3@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.npmjs.org/daf-node-sqlite3/-/daf-node-sqlite3-1.4.1.tgz#a2a823b3d54117842985aa250ebaca1193c4170a"
-  integrity sha512-axijTXIJxjkBF6kPJv2w2+2211zEK8VXzcTsK936DEqQnUo8H0eA9K91uMwfBL8U15idcQSGKqfxcy+HG8RbMw==
+daf-node-sqlite3@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/daf-node-sqlite3/-/daf-node-sqlite3-1.5.0.tgz#19b712fa8aa68ce2aa4de2cac254541e9a9192e4"
+  integrity sha512-g7AdC+pvrofLJueAK+JUUdhxbQtmozbDwa+gp4Xnn3nUyn1Rxh84XW84ssbvLexICjzIgrW8c37k1oYpeP8Njw==
   dependencies:
-    daf-data-store "^1.4.1"
+    daf-data-store "^1.5.0"
     debug "^4.1.1"
     sqlite3 "^4.1.0"