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