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