1import InfoIcon from '@mui/icons-material/Info';
2import MailOutlineIcon from '@mui/icons-material/MailOutline';
3import { Link, Paper, Typography } from '@mui/material';
4import Avatar from '@mui/material/Avatar';
5import CircularProgress from '@mui/material/CircularProgress';
6import Grid from '@mui/material/Grid';
7import makeStyles from '@mui/styles/makeStyles';
8import { Link as RouterLink } from 'react-router-dom';
9
10import { IdentityFragment } from '../../components/Identity/IdentityFragment.generated';
11
12import { useGetUserStatisticQuery } from './GetUserStatistic.generated';
13
14const useStyles = makeStyles((theme) => ({
15 main: {
16 maxWidth: 1000,
17 margin: 'auto',
18 marginTop: theme.spacing(3),
19 },
20 content: {
21 padding: theme.spacing(0.5, 2, 2, 2),
22 wordWrap: 'break-word',
23 },
24 large: {
25 minWidth: 200,
26 minHeight: 200,
27 margin: 'auto',
28 maxWidth: '100%',
29 maxHeight: '100%',
30 },
31 heading: {
32 marginTop: theme.spacing(3),
33 },
34 header: {
35 ...theme.typography.h4,
36 wordBreak: 'break-word',
37 },
38 infoIcon: {
39 verticalAlign: 'bottom',
40 },
41}));
42
43type Props = {
44 identity: IdentityFragment;
45};
46const Identity = ({ identity }: Props) => {
47 const classes = useStyles();
48 const user = identity;
49
50 const { loading, error, data } = useGetUserStatisticQuery({
51 variables: {
52 authorQuery: 'author:' + user?.id,
53 participantQuery: 'participant:' + user?.id,
54 actionQuery: 'actor:' + user?.id,
55 },
56 });
57
58 if (loading) return <CircularProgress />;
59 if (error) return <p>Error: {error.message}</p>;
60 const statistic = data?.repository;
61 const authoredCount = statistic?.authored?.totalCount;
62 const participatedCount = statistic?.participated?.totalCount;
63 const actionCount = statistic?.actions?.totalCount;
64
65 return (
66 <main className={classes.main}>
67 <Paper elevation={3} className={classes.content}>
68 <Grid spacing={2} container direction="row">
69 <Grid xs={12} sm={4} className={classes.heading} item>
70 <Avatar
71 src={user?.avatarUrl ? user.avatarUrl : undefined}
72 className={classes.large}
73 >
74 {user?.displayName.charAt(0).toUpperCase()}
75 </Avatar>
76 </Grid>
77 <Grid xs={12} sm={4} item>
78 <section>
79 <h1 className={classes.header}>{user?.name}</h1>
80 <Typography variant="subtitle1">
81 Name: {user?.displayName ? user?.displayName : '---'}
82 </Typography>
83 <Typography variant="subtitle1">
84 Id (truncated): {user?.humanId ? user?.humanId : '---'}
85 <InfoIcon
86 titleAccess={user?.id ? user?.id : '---'}
87 className={classes.infoIcon}
88 />
89 </Typography>
90 {user?.email && (
91 <Typography
92 variant="subtitle1"
93 style={{
94 display: 'flex',
95 alignItems: 'center',
96 flexWrap: 'wrap',
97 }}
98 >
99 <MailOutlineIcon />
100 <Link
101 href={'mailto:' + user?.email}
102 color={'inherit'}
103 underline="hover"
104 >
105 {user?.email}
106 </Link>
107 </Typography>
108 )}
109 </section>
110 </Grid>
111 <Grid xs={12} sm={4} item>
112 <section>
113 <h1 className={classes.header}>Statistics</h1>
114 <Link
115 component={RouterLink}
116 to={`/?q=author%3A${user?.id}+sort%3Acreation`}
117 color={'inherit'}
118 underline="hover"
119 >
120 <Typography variant="subtitle1">
121 Created {authoredCount} bugs.
122 </Typography>
123 </Link>
124 <Link
125 component={RouterLink}
126 to={`/?q=participant%3A${user?.id}+sort%3Acreation`}
127 color={'inherit'}
128 underline="hover"
129 >
130 <Typography variant="subtitle1">
131 Participated to {participatedCount} bugs.
132 </Typography>
133 </Link>
134 <Link
135 component={RouterLink}
136 to={`/?q=actor%3A${user?.id}+sort%3Acreation`}
137 color={'inherit'}
138 underline="hover"
139 >
140 <Typography variant="subtitle1">
141 Interacted with {actionCount} bugs.
142 </Typography>
143 </Link>
144 </section>
145 </Grid>
146 </Grid>
147 </Paper>
148 </main>
149 );
150};
151
152export default Identity;