1import React from 'react';
2
3import {
4 Checkbox,
5 FormControlLabel,
6 Link,
7 Paper,
8 Typography,
9} from '@material-ui/core';
10import Avatar from '@material-ui/core/Avatar';
11import { makeStyles } from '@material-ui/core/styles';
12import InfoIcon from '@material-ui/icons/Info';
13import MailOutlineIcon from '@material-ui/icons/MailOutline';
14
15import { useCurrentIdentityQuery } from '../../components/CurrentIdentity/CurrentIdentity.generated';
16
17import BugList from './BugList';
18
19const useStyles = makeStyles((theme) => ({
20 main: {
21 maxWidth: 1000,
22 margin: 'auto',
23 marginTop: theme.spacing(4),
24 padding: theme.spacing(3, 2),
25 display: 'flex',
26 },
27 container: {
28 display: 'flex',
29 marginBottom: theme.spacing(1),
30 },
31 leftSidebar: {
32 marginTop: theme.spacing(2),
33 flex: '0 0 200px',
34 },
35 content: {
36 marginTop: theme.spacing(5),
37 padding: theme.spacing(3, 2),
38 minWidth: 800,
39 backgroundColor: theme.palette.background.paper,
40 },
41 rightSidebar: {
42 marginTop: theme.spacing(5),
43 flex: '0 0 200px',
44 },
45 large: {
46 width: theme.spacing(20),
47 height: theme.spacing(20),
48 },
49 control: {
50 paddingBottom: theme.spacing(3),
51 },
52 header: {
53 ...theme.typography.h4,
54 },
55}));
56
57const Identity = () => {
58 const classes = useStyles();
59 const { data } = useCurrentIdentityQuery();
60 const user = data?.repository?.userIdentity;
61 console.log(user);
62
63 return (
64 <main className={classes.main}>
65 <div className={classes.container}>
66 <div className={classes.leftSidebar}>
67 <h1 className={classes.header}>
68 {user?.displayName ? user?.displayName : 'none'}
69 </h1>
70 <Avatar
71 src={user?.avatarUrl ? user.avatarUrl : undefined}
72 className={classes.large}
73 >
74 {user?.displayName.charAt(0).toUpperCase()}
75 </Avatar>
76 <Typography variant="h5" component="h2">
77 Your account
78 </Typography>
79 <Typography variant="subtitle2" component="h2">
80 Name: {user?.name ? user?.name : '---'}
81 </Typography>
82 <Typography variant="subtitle2" component="h3">
83 Id (truncated): {user?.humanId ? user?.humanId : '---'}
84 <InfoIcon
85 fontSize={'small'}
86 titleAccess={user?.id ? user?.id : '---'}
87 />
88 </Typography>
89 <Typography variant="subtitle2" component="h3">
90 Login: {user?.login ? user?.login : '---'}
91 </Typography>
92 <Typography
93 variant="subtitle2"
94 component="h3"
95 style={{
96 display: 'flex',
97 alignItems: 'center',
98 flexWrap: 'wrap',
99 }}
100 >
101 <MailOutlineIcon />
102 <Link href={'mailto:' + user?.email} color={'inherit'}>
103 {user?.email ? user?.email : '---'}
104 </Link>
105 </Typography>
106 <FormControlLabel
107 className={classes.control}
108 label="Protected"
109 labelPlacement="end"
110 value={user?.isProtected}
111 control={<Checkbox color="secondary" indeterminate />}
112 />
113 </div>
114 <Paper className={classes.content}>
115 <Typography variant="h5" component="h2">
116 Bugs authored by {user?.displayName}
117 </Typography>
118 <BugList humanId={user?.humanId ? user?.humanId : ''} />
119 </Paper>
120 <div className={classes.rightSidebar}></div>
121 </div>
122 </main>
123 );
124};
125
126export default Identity;