/
Layout.tsx
118 lines (107 loc) · 3.71 KB
/
Layout.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
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'
import IdentityManager from '../views/Identity/IdentitiyManager'
import IdentityDetail from '../views/Identity/IdentityDetail'
import Request from '../views/Request/Request'
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 CredentialList from '../components/Credential/CredentialList'
import RequestDetail from '../components/Request/Request'
import Settings from '../views/Settings/Settings'
import * as queries from '../gql/queries'
interface DashboardProps {}
const renderCredentialQuery = (props: any) => {
return <Credential detailMode {...props?.credential} />
}
const renderSDRQuery = (props: any, close: () => void) => {
return <RequestDetail {...props?.message} close={close} />
}
const Dashboard: React.FC<DashboardProps> = () => {
return (
<Router>
<Flex flexDirection={'row'} flex={1}>
<Sidebar />
<NavigationLeft />
<Box flex={1} bg="#1C1C1C">
<Switch>
<Route exact path="/">
<Redirect to="/activity" />
</Route>
<Route path="/activity">
<Activity />
</Route>
<Route path="/explore">
<Explore />
</Route>
<Route path="/issue">
<Issue />
</Route>
<Route path="/request">
<Request />
</Route>
<Route path="/identities">
<IdentityManager />
</Route>
<Route path="/connections">
<Connections />
</Route>
<Route path="/settings">
<Settings />
</Route>
</Switch>
</Box>
{/*
The SidePanel component is a query wrapper that can query for any detail item based on the :id param.
If renderQuery prop is not passed in then it will ignore and just show the children.
The use case is if you need to have reusable components and not have embbeded GQL queries inside.
ie all components in the components directory should be reusable
*/}
<Switch>
<Route path="/connections/user/:id">
<SidePanel title={'Identity'} closeUrl={'/connections'}>
<CredentialList />
</SidePanel>
</Route>
<Route path="/identities/user/:id">
<SidePanel title={'Identity'} closeUrl={'/identities'}>
<IdentityDetail />
<CredentialList />
</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>
)
}
export default Dashboard