view Badges.tsx

78.57% Statements 11/14

28.57% Branches 2/7

66.66% Functions 2/3

75% Lines 9/12

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46 4x
 
4x
 
4x
 
 
 
 
 
25x
 
 
 
 
 
 
 
 
 
4x
64x
64x
 
64x
64x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { Chip, Tooltip } from "@material-ui/core";
import { User } from "proto/api_pb";
import makeStyles from "utils/makeStyles";
 
import { useBadges } from "../hooks/useBadges";
 
interface Props {
  user: User.AsObject;
}
 
const useStyles = makeStyles((theme) => ({
  badgeContainer: {
    marginTop: theme.spacing(1),
  },
  badge: {
    marginInlineStart: theme.spacing(1),
    marginBottom: theme.spacing(1),
  },
}));
 
export const Badges = ({ user }: Props) => {
  const classes = useStyles();
  const { badges } = useBadges();
 
  if (badges === undefined || user.badgesList === undefined) {
    return <></>;
  }
 
  return (
    <div className={classes.badgeContainer}>
      {(user.badgesList || []).map((badgeId) => {
        const badge = (badges || {})[badgeId];
        return (
          <Tooltip key={badge.id} title={badge.description}>
            <Chip
              className={classes.badge}
              label={badge.name}
              style={{ background: badge.color }}
            />
          </Tooltip>
        );
      })}
    </div>
  );
};