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