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 | 1x 1x | import React from "react"; import { Paper, Typography } from "@mui/material"; import { makeStyles } from "@mui/styles"; import { APIOrg } from "../types"; import List from "@mui/material/List"; import { Link } from "react-router-dom"; interface Props { orgs?: APIOrg[]; } const useStyles = makeStyles({ container: { minWidth: "0" }, orgList: { maxHeight: 280, overflow: "scroll", color: "black" }, orgItem: { paddingBottom: "12px" } }); const UserOrganisationDetails: React.FC<Props> = ({ orgs }) => { const classes = useStyles(); const getUserOrganisationsList = () => { const OrganisationsList: Array<JSX.Element> = orgs ? [...orgs] .sort((a, b) => a.name.toLocaleLowerCase().localeCompare(b.name.toLocaleLowerCase()) ) .map(org => ( <li key={org.id} className={classes.orgItem}> <Link to={org.url}>{org.name}</Link> </li> )) : []; return OrganisationsList; }; const getUserOrgsEmptyMessage = () => { if (orgs && orgs.length === 0) { return ( <Typography data-testid="noUserOrgsMessage" align="center"> You're not part of any Organisation </Typography> ); } return null; }; return ( <Paper className="fieldsetParent"> <fieldset className={classes.container}> <Typography component="legend" variant="h5" gutterBottom> Your Organisations </Typography> {getUserOrgsEmptyMessage()} <List className={classes.orgList}> <ul>{getUserOrganisationsList()}</ul> </List> </fieldset> </Paper> ); }; export default UserOrganisationDetails; |