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
119
120
121
122
123
124
125
126
|
import React from 'react';
import {
Checkbox,
FormControlLabel,
Link,
Paper,
Typography,
} from '@material-ui/core';
import Avatar from '@material-ui/core/Avatar';
import { makeStyles } from '@material-ui/core/styles';
import InfoIcon from '@material-ui/icons/Info';
import MailOutlineIcon from '@material-ui/icons/MailOutline';
import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
import BugList from './BugList';
const useStyles = makeStyles((theme) => ({
main: {
maxWidth: 1000,
margin: 'auto',
marginTop: theme.spacing(4),
padding: theme.spacing(3, 2),
display: 'flex',
},
container: {
display: 'flex',
marginBottom: theme.spacing(1),
},
leftSidebar: {
marginTop: theme.spacing(2),
flex: '0 0 200px',
},
content: {
marginTop: theme.spacing(5),
padding: theme.spacing(3, 2),
minWidth: 800,
backgroundColor: theme.palette.background.paper,
},
rightSidebar: {
marginTop: theme.spacing(5),
flex: '0 0 200px',
},
large: {
width: theme.spacing(20),
height: theme.spacing(20),
},
control: {
paddingBottom: theme.spacing(3),
},
header: {
...theme.typography.h4,
},
}));
const Identity = () => {
const classes = useStyles();
const { data } = useCurrentIdentityQuery();
const user = data?.repository?.userIdentity;
console.log(user);
return (
<main className={classes.main}>
<div className={classes.container}>
<div className={classes.leftSidebar}>
<h1 className={classes.header}>
{user?.displayName ? user?.displayName : 'none'}
</h1>
<Avatar
src={user?.avatarUrl ? user.avatarUrl : undefined}
className={classes.large}
>
{user?.displayName.charAt(0).toUpperCase()}
</Avatar>
<Typography variant="h5" component="h2">
Your account
</Typography>
<Typography variant="subtitle2" component="h2">
Name: {user?.name ? user?.name : '---'}
</Typography>
<Typography variant="subtitle2" component="h3">
Id (truncated): {user?.humanId ? user?.humanId : '---'}
<InfoIcon
fontSize={'small'}
titleAccess={user?.id ? user?.id : '---'}
/>
</Typography>
<Typography variant="subtitle2" component="h3">
Login: {user?.login ? user?.login : '---'}
</Typography>
<Typography
variant="subtitle2"
component="h3"
style={{
display: 'flex',
alignItems: 'center',
flexWrap: 'wrap',
}}
>
<MailOutlineIcon />
<Link href={'mailto:' + user?.email} color={'inherit'}>
{user?.email ? user?.email : '---'}
</Link>
</Typography>
<FormControlLabel
className={classes.control}
label="Protected"
labelPlacement="end"
value={user?.isProtected}
control={<Checkbox color="secondary" indeterminate />}
/>
</div>
<Paper className={classes.content}>
<Typography variant="h5" component="h2">
Bugs authored by {user?.displayName}
</Typography>
<BugList humanId={user?.humanId ? user?.humanId : ''} />
</Paper>
<div className={classes.rightSidebar}></div>
</div>
</main>
);
};
export default Identity;
|
