All files / src/apps/containers/components ContainerCard.tsx

25% Statements 2/8
0% Branches 0/4
0% Functions 0/3
25% Lines 2/8

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 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127                                                1x                                               1x                                                                                                                                                            
import React from "react";
import {
  Button,
  Card,
  CardActions,
  CardContent,
  Grid,
  Theme,
  Typography
} from "@mui/material";
import { Link, useLocation, useHistory } from "react-router-dom";
import { VERIFIED_SOURCES } from "../../../utils";
import { VerifiedSource } from "../../../components/VerifiedSource";
import { createStyles, makeStyles } from "@mui/styles";
 
interface Props {
  name: string;
  short_code: string;
  owner: string;
  owner_type: string;
  description: string;
  url: string;
  index: number;
}
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    containerName: {
      overflowX: "auto"
    },
    card: {
      cursor: "pointer",
      display: "flex",
      width: "100%",
      justifyContent: "space-between",
      height: "100%"
    },
    details: {
      display: "flex",
      flexDirection: "column",
      justifyContent: "space-between",
      width: "100%"
    },
    trustedIcon: {
      margin: "3rem",
      transform: "scale(1.8)"
    }
  })
);
const ContainerCard: React.FC<Props> = ({
  name,
  short_code,
  owner,
  owner_type,
  description,
  url,
  index
}) => {
  const classes = useStyles();
  const location = useLocation();
  const { push: goTo } = useHistory();
 
  return (
    <Grid item xs={4}>
      <Card onClick={() => goTo(url)} className={classes.card}>
        <div className={classes.details}>
          <CardContent>
            <Typography
              noWrap
              variant="body1"
              color="textSecondary"
              gutterBottom
              data-testid={`shortCode-${index}`}
            >
              {short_code}
            </Typography>
            <Typography
              className={classes.containerName}
              noWrap
              variant="h5"
              data-testid={`name-${index}`}
            >
              {name}
            </Typography>
            <Typography
              noWrap
              variant="body2"
              color="textSecondary"
              data-testid={`owner-${index}`}
            >
              {owner_type}/{owner}
            </Typography>
            <Typography
              noWrap
              variant="body1"
              component="p"
              data-testid={`description-${index}`}
            >
              {description}
            </Typography>
          </CardContent>
          <CardActions>
            <Button
              to={{ pathname: url, state: { prevPath: location.pathname } }}
              component={Link}
              size="small"
              variant="text"
              color="primary"
              data-testid={`viewButton-${index}`}
            >
              View
            </Button>
          </CardActions>
        </div>
        {short_code && VERIFIED_SOURCES.includes(short_code) ? (
          <div className={classes.trustedIcon}>
            <VerifiedSource />
          </div>
        ) : (
          ""
        )}
      </Card>
    </Grid>
  );
};
 
export default ContainerCard;