All files / src/apps/organisations/components OrgCard.tsx

25% Statements 2/8
100% Branches 0/0
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                                    1x                         1x                                                                                                      
import React from "react";
import {
  Button,
  Card,
  CardContent,
  Grid,
  Theme,
  Typography
} from "@mui/material";
import { createStyles, makeStyles } from "@mui/styles";
import { Link as RouterLink, useLocation, useHistory } from "react-router-dom";
interface Props {
  name: string;
  url: string;
  index: number;
  id: string;
}
 
const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    containerName: {
      overflowX: "auto"
    },
    button: {
      margin: theme.spacing(1)
    },
    card: {
      cursor: "pointer"
    }
  })
);
const OrganisationCard: React.FC<Props> = ({ name, url, id, index }) => {
  const classes = useStyles();
  const location = useLocation();
  const { push: goTo } = useHistory();
 
  return (
    <Grid item xs={4}>
      <Card onClick={() => goTo(url)} className={classes.card}>
        <CardContent>
          <Typography
            noWrap
            variant="body1"
            color="textSecondary"
            gutterBottom
            data-testid={`org-id-${index}`}
          >
            {id}
          </Typography>
          <Typography
            className={classes.containerName}
            noWrap
            variant="h5"
            data-testid={`name-${index}`}
          >
            {name}
          </Typography>
          <Typography
            noWrap
            variant="body1"
            component="p"
            data-testid={`url-${index}`}
          >
            {url}
          </Typography>
        </CardContent>
        <Button
          to={{ pathname: url, state: { prevPath: location.pathname } }}
          component={RouterLink}
          size="small"
          variant="text"
          color="primary"
          data-testid={`viewButton-${index}`}
        >
          View
        </Button>
      </Card>
    </Grid>
  );
};
 
export default OrganisationCard;