@material-ui/core#ListItem JavaScript Examples

CreatePost = () => {  
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

  const handleClose = () => {
    setIsOpen(false);
  };

  return (
    <>
      <List>
        <ListItem button onClick={handleOpen}>
            <ListItemIcon>
                <AddCircleIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Add post" />
        </ListItem>
      </List>

      <CreatePostModal open={isOpen} handleClose={handleClose} />
    </>
  );
}

ListItemStyle = styled((props) => <ListItem button disableGutters {...props} />)(
  ({ theme }) => ({
    ...theme.typography.body2,
    height: 48,
    position: 'relative',
    textTransform: 'capitalize',
    paddingLeft: theme.spacing(5),
    paddingRight: theme.spacing(2.5),
    color: theme.palette.text.secondary,
    '&:before': {
      top: 0,
      right: 0,
      width: 3,
      bottom: 0,
      content: "''",
      display: 'none',
      position: 'absolute',
      borderTopLeftRadius: 4,
      borderBottomLeftRadius: 4,
      backgroundColor: theme.palette.primary.main
    }
  })
)

export default function SimpleAccordion() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <List>
            <ListItem button key={1}>
              <ListItemIcon>
                <NotificationsActiveIcon />
              </ListItemIcon>
              <ListItemText primary="Hello" />
            </ListItem>
          </List>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

SidebarNav = props => {
  const { pages, className, ...rest } = props;

  const classes = useStyles();

  return (
    <List
      {...rest}
      className={clsx(classes.root, className)}
    >
      {pages.map(page => (
        <ListItem
          className={classes.item}
          disableGutters
          key={page.title}
        >
          <Button
            activeClassName={classes.active}
            className={classes.button}
            component={CustomRouterLink}
            to={page.href}
          >
            <div className={classes.icon}>{page.icon}</div>
            {page.title}
          </Button>
        </ListItem>
      ))}
    </List>
  );
}

RankCard = () => {
    return(
        <ListItem> 
            <Card>
                <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
            </Card>
        </ListItem>
    )
}

SideBarCard = ({ user, onLanguageSelect, lang, langCode }) => {
  const classes = useStyles();
  //TODO: this could be done better
  const fields = {
    label: lang.t("note.lable"),
    notes: [
      lang.t("note.note1"),
      lang.t("note.note2"),
      lang.t("note.note3"),
      lang.t("note.note4"),
    ],
  };

  return (
    <Card className={classes.card}>
      <CardContent>
        <Typography variant="h6" component="h2">
          {fields.label}
        </Typography>
        <List>
          {fields.notes.map((el, index) => {
            return (
              <ListItem key={index} disableGutters>
                <ListItemAvatar style={{ flexShrink: 1 }}>
                  <Avatar style={{ background: '#fff', margin: 0 }}>
                    <CheckIcon style={{ fill: 'green', width: 20 }}/>
                  </Avatar>
                </ListItemAvatar>
                <ListItemText className="sidebarText">{el}</ListItemText>
              </ListItem>
            );
          })}
        </List>
      </CardContent>
    </Card>
  );
}

SubTree = ({ level, root, getChildNodes, openChildren, toggleNode }) => {
    const childNodes = getChildNodes(root);
    const hasChildren = childNodes.length > 0;
    const open = openChildren.includes(root.id);
    return (
        <Fragment>
            <ListItem
                button={hasChildren}
                onClick={() => hasChildren && toggleNode(root)}
                style={{ paddingLeft: level * 16 }}
            >
                {hasChildren && open && <ExpandLess />}
                {hasChildren && !open && <ExpandMore />}
                {!hasChildren && <div style={{ width: 24 }}>&nbsp;</div>}
                <ListItemText primary={root.name} />

                <ListItemSecondaryAction>
                    <EditButton record={root} basePath="/tags" />
                </ListItemSecondaryAction>
            </ListItem>
            <Collapse in={open} timeout="auto" unmountOnExit>
                <MuiList component="div" disablePadding>
                    {childNodes.map(node => (
                        <SubTree
                            key={node.id}
                            root={node}
                            getChildNodes={getChildNodes}
                            openChildren={openChildren}
                            toggleNode={toggleNode}
                            level={level + 1}
                        />
                    ))}
                </MuiList>
            </Collapse>
        </Fragment>
    );
}

LanguageSelector = ({ languages, onSelect }) => {
  const { t } = useTranslation('languages')
  const [open, setOpen] = useState(false)
  const classes = useStyles()
  console.log({ languages })
  return (
    <>
      <ListItem button onClick={() => setOpen(!open)}>
        <ListItemIcon>
          <LanguageOutlined />
        </ListItemIcon>
        <ListItemText primary={t('selectorTitle')} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout={300} unmountOnExit>
        <List component='div' disablePadding>
          {languages.map(lan => (
            <ListItem
              key={lan}
              button
              className={classes.nested}
              onClick={() => onSelect(lan)}
            >
              <ListItemText primary={t(lan)} />
            </ListItem>
          ))}
        </List>
      </Collapse>
    </>
  )
}

Metrics = () => {
  const {loading, error, data} = useQuery(query);
  const [newMetricName, setNewMetricName] = useState("");
  const [addMetric, { loading: mutationLoading }] = useMutation(addMetricMutation, {
    awaitRefetchQueries: true,
    refetchQueries: [{query}],
  });

  const metrics = data?.queryMetric || []

  return <>
    <Navbar title="Metrics" color="primary" />
    <Content>
      {loading && <Backdrop open={loading || mutationLoading} >
        <CircularProgress />
      </Backdrop>}
      {error && <Alert severity="error">Something Went Horribly Wrong</Alert>}
      <Card style={{ padding: 30 }}>
        <Typography>Here are the metrics currently configured:</Typography>
        <List>
          {metrics.map(({ name }, index) => <ListItem item key={index} sm={12} md={6} lg={3}>
            <Typography>{name}</Typography>
          </ListItem>)}
        </List>

        <TextField
          label="Add Metric"
          defaultValue={newMetricName}
          onChange={e => setNewMetricName(e.target.value)}
        />
        <UglyButton onClick={() => addMetric({ variables: { newMetricName } })} disabled={newMetricName === ""}>
          Add Metric
        </UglyButton>
      </Card>
    </Content>
  </>
}

export function ImageExportDialog (props) {
  const classes = useStyles()
  const { onClose, open } = props

  const handleClose = () => {
    onClose('')
  }

  const handleListItemClick = (value) => {
    onClose(value)
  }

  return (
    <Dialog onClose={handleClose} aria-labelledby="image-export-dialog-title" open={open}>
      <DialogTitle id="image-export-dialog-title">Select Image type</DialogTitle>
      <List>
        {ImgTypes.map((img) => (
          <ListItem button onClick={() => handleListItemClick(img)} key={img}>
            <ListItemAvatar>
              <Avatar className={classes.avatar}>
                {img.charAt(0).toUpperCase()}
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={img} />
          </ListItem>
        ))}
      </List>
      <DialogActions>
        <Button onClick={handleClose} color="primary" autoFocus>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  )
}

function Sidebar(props) {
  const { open, variant, onClose } = props;
  const classes = useStyles();
  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      open={open}
      onClose={onClose}
      variant={variant}
    >
      <section className={classes.root}>
        <Hidden mdUp>
          <IconButton className={classes.menuButton} aria-label="Menu" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Hidden>
        <Profile className={classes.profile} />
        <List component="div" disablePadding>
          {pages.map(page => (
            <ListItem
              key={page.title}
              activeClassName={classes.activeListItem}
              className={classes.listItem}
              component={NavLink}
              to={page.href}
            >
              <ListItemIcon className={classes.listItemIcon}>{page.icon}</ListItemIcon>
              <ListItemText classes={{ primary: classes.listItemText }} primary={page.title} />
            </ListItem>
          ))}
        </List>
      </section>
    </Drawer>
  );
}

RuleProjects = ({ projects }) => {
  if (projects.length <= 0) {
    return <p>Found no projects matching the criteria.</p>;
  }

  return (
    <React.Fragment>
      <Typography variant="h6" paragraph>
        These {projects.length} repositories in the gitlab trigger this rule:
      </Typography>
      <List>
        {projects.map((row) => {
          return (
            <ListItem
              key={row.projectId}
              button
              component={RouterLink}
              to={`/projects/${row.projectId}`}
            >
              <ListItemText primary={row.pathWithNamespace} />
            </ListItem>
          );
        })}
      </List>
    </React.Fragment>
  );
}

ChatList = ({ chats, createChat }) => {
  const classes = useStyles();
  const [name, setName, setNameState] = useInput('');
  const handleAddChat = (event) => {
    event.preventDefault();
    createChat(name);
    setNameState('');
  }

  return (
    <List className={classes.root}>

      { chats.map(({id, name}) => {
          return (
            <Link key={id} to={`/chats/${id}`}>
              <ListItem className={classes.listItem}>
                <ListItemAvatar>
                  <Avatar />
                </ListItemAvatar>
                <ListItemText
                  primary={name}
                />
              </ListItem>
            </Link>
          )
        })
      }
      <ListItem className={classes.listItem}>
        <form onSubmit={handleAddChat}>
          <input type="text" placeholder="Chat name" value={name} onChange={setName} />
          <button>Create chat</button>
        </form>
      </ListItem>
    </List>
  )
}

ChatList = ({chats, addChat}) => {
    const [chatName, setChatName] = useState('');

    const chatsKeysArr = Object.keys(chats); //Определяю количество чатов
    let id = chatsKeysArr.length + 1;  //В зависимости от количества чатов присваиваю очередной порядковый номер создаваемому чату.

    return (
        <List className="ChatList">
            <ListItem>
                <AccountCircleIcon className="avatar"/>
                <Link to="/profile">My Profile</Link>
            </ListItem>
            {chats.map(({id, name, chatNumber, unread}) =>
                <ChatListElement name={name} number={chatNumber} unread={unread} key={id}
                />)}
            <ListItem>
                <TextField
                    type="text"
                    value={chatName}
                    onChange={({currentTarget: {value}}) => setChatName(value)}
                />
                <Fab onClick={() => addChat(chatName, id)}>
                    <AddIcon/>
                </Fab>
            </ListItem>
        </List>
    );
}

SideBarItem = ({ category, handlerItem, models, translationsKey, mainItemStyles }) => {
  const { sort, page, countPerPage, categoryFilter, modelsFilter, defaultPage } = URL_QUERIES_NAME;
  const { t } = useTranslation();

  const styles = useStyles();
  const [isListOpen, setIsListOpen] = useState(false);

  const handleClick = () => {
    setIsListOpen((prevValue) => setIsListOpen(!prevValue));
  };
  const countPerPageValue = ITEMS_PER_PAGE[0].value;

  return (
    <>
      <li className={mainItemStyles}>
        <ListItemText button='true' onClick={handleClick} primary={t(`${translationsKey}.name`)} />
        {isListOpen ? <RemoveIcon onClick={handleClick} /> : <AddIcon onClick={handleClick} />}
      </li>

      <Collapse in={isListOpen} timeout='auto' unmountOnExit>
        <List className={styles.list}>
          {models.map((model) => (
            <ListItem button className={styles.nested} key={model._id} onClick={handlerItem}>
              <Link
                to={`/catalog/products?${page}=${defaultPage}&${sort}=${POPULARITY}&${countPerPage}=${countPerPageValue}&${categoryFilter}=${category}&${modelsFilter}=${model._id}`}
              >
                <ListItemText primary={t(`${model.translationsKey}.name`)} />
              </Link>
            </ListItem>
          ))}
        </List>
      </Collapse>

      <div className={styles.itemHighlighting} />
    </>
  );
}

function ListItemLink(props) {
  const selected = useMatch(props.to);
  const CustomLink = React.useMemo(
    () => React.forwardRef((linkProps, ref) => <Link ref={ref} to={props.to} {...linkProps} />),
    [props.to],
  );

  return (
    <li>
      <ListItem selected={selected} button component={CustomLink}>
        <ListItemIcon>{props.icon}</ListItemIcon>
        <ListItemText primary={props.text} />
      </ListItem>
    </li>
  );
}

OftadehNavItem = props => {
  const classes = useStyles();
  const { item } = props;

  return (
    <ListItem
      button
      component={NavLinkAdapter}
      to={item.url}
      activeClassName={classes.active}
      exact={item.exact}
    >
      {item.icon && (
        <ListItemIcon>
          <Icon>{item.icon}</Icon>
        </ListItemIcon>
      )}
      <ListItemText primary={item.title} />
      {item.badge && <OftadehNavBadge className="mr-4" badge={item.badge} />}
    </ListItem>
  );
}

MuiListExpansion = ({
  rootClass,
  handleClick,
  icon,
  open,
  primaryText,
}) => {
  const styles = StoryBlok.arrayToMuiStyles(rootClass);

  return (
    <>
      <ListItem button onClick={handleClick} className={styles.root}>
        {icon.length ? <ListItemIcon {...icon[0]} /> : null}
        <ListItemText primary={primaryText} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
    </>
  );
}

LanguageSelector = ({ language, changeLanguage, drawerOpen }) => {
    const classes = useStyles()
    const iconComponent = !drawerOpen ? { IconComponent: EmptyElement } : {}

    return (
        <Select
            className={classes.langSelectorContainer}
            classes={{ selectMenu: classes.langSelectMenu, icon: classes.langSelectCaret }}
            value={language}
            onChange={changeLanguage}
            {...iconComponent}
        >
            <ListItem button value='ro' className={classes.langSelectorItem}>
                <Flag name='RO' format='png' pngSize={32} shiny={true} basePath='/static/flags' />
                {drawerOpen && <Typography className={classes.langSelectorText}>{'Romana'}</Typography>}
            </ListItem>
            <ListItem button value='en' className={classes.langSelectorItem}>
                <Flag name='GB' format='png' pngSize={32} shiny={true} basePath='/static/flags' />
                {drawerOpen && <Typography className={classes.langSelectorText}>{'English'}</Typography>}
            </ListItem>
        </Select>
    )
}

export default function NavList() {
  return (
    <div>
      <List component="nav" aria-label="main mailbox folders">
        <Divider />
        <ListItem button className={styles.navButton}>
          <PaymentIcon className={styles.navIcon} />
          <ListItemLink href="#/home/transactions" className={styles.navButton}>
            <ListItemText
              primary="Transactions"
              className={styles.unselectedNavText}
            />
          </ListItemLink>
        </ListItem>
        <Divider />
        <ListItem button>
          <PeopleOutlineIcon className={styles.navIcon} />
          <ListItemLink href="#/home/split">
            <ListItemText
              primary="Split a Bill"
              className={styles.unselectedNavText}
            />
          </ListItemLink>
        </ListItem>
        <Divider />
      </List>
    </div>
  );
}

SideCategoryMenu = () => {
  const classes = useStyles();
  return (
    <List>
      <ListItem>
        <ListItemText
          primary="BEST OF YOUTUBE"
          classes={{ primary: classes.title }}
        />
      </ListItem>
      {categoryIcons.map((item, index) => {
        return (
          <NavItem
            key={index}
            to={`/trending?category=${index}`}
            title={item.title}
            icon={() => (
              <img
                className={classes.bestOfYoutubeIcon}
                src={item.icon}
                alt={item.title + " logo"}
              />
            )}
          />
        );
      })}
    </List>
  );
}

render() {
    const { match, location, history, classes } = this.props;
    var isActive = location.pathname === this.props.link;

    return (
      <ListItem
        className={clsx(classes.item, this.props.nested ? styles.nested : "")}
        disableGutters
        key={this.props.text}
        onClick={this.props.clicked}
      >
        <Button
          className={
            isActive ? clsx(classes.button, classes.active) : classes.button
          }
          to={this.props.link}
          component={CustomRouterLink}
        >
          <div className={classes.icon}>
            <Icon>{this.props.icon}</Icon>
          </div>
          {this.props.text}
          {this.props.showopen ? (
            this.props.open ? (
              <ExpandLess />
            ) : (
              <ExpandMore />
            )
          ) : (
            ""
          )}
        </Button>
      </ListItem>
    );
  }

function Footer() {

  const useStyles = makeStyles((theme) => ({
    grow: {
      flexGrow: 1,
    },
    menuButton: {
      marginRight: theme.spacing(2),
    },
    title: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'block',
      },
    },
  
    inputRoot: {
      color: 'inherit',
    },
    inputInput: {
      padding: theme.spacing(1, 1, 1, 0),
  
      paddingLeft: `calc(1em + ${theme.spacing(4)}px)`,
      transition: theme.transitions.create('width'),
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '20ch',
      },
    },
    sectionDesktop: {
      display: 'none',
      [theme.breakpoints.up('sm')]: {
        display: 'flex',
        
      },
    },
    sectionMobile: {
      display: 'flex',
      [theme.breakpoints.down('sm')]: {
        display: 'grid',
        margin:'auto',
      },
    },
  }));
  
  const classes = useStyles();

  return (
    <div className={classes.grow}>
      <AppBar position="static" style={appBar}>
         <Container >
        <Toolbar>      
          <div className={classes.sectionDesktop}>
          <div className={classes.sectionMobile} >
        <div className="first">
         <ListItem className="navbar-links"> <Link to='/elements' className="individual">Get Started</Link> </ListItem>
         <ListItem className="navbar-links"> <Link to='/team' className="individual">About Us</Link> </ListItem>        
        </div>    
        <div className="second">
          <div className="social-div navbar-links">
            <a href="https://github.com/AasthaGithub/Customizable_Portfolio" className="social"><GitHubIcon></GitHubIcon></a>
          </div>
        </div>

        <div className="third">
          <ListItem className="navbar-links"> <Link to='/elements' className="individual">Work with Us</Link>  </ListItem>
          <ListItem className="navbar-links"><Link to='/team' className="individual">Connect with Us</Link>  </ListItem> 
        </div>
     </div>
      </div>
        </Toolbar>
        </Container>
      </AppBar>
    </div>
  );
}

AccountsModal = ({ onClose }) => {
  const classes = useStyles();
  const { address, setSelectedWallet, wallets, setWallets } = useWallet();
  const { localCerts, setLocalCert, setValidCertificates, setSelectedCertificate } = useCertificate();
  const { wallets: storageWallets } = useStorageWallets();
  const history = useHistory();

  const handleSelectAccount = (wallet) => {
    if (wallet.address !== address) {
      const newWallet = wallets.find((w) => w.address === wallet.address);

      // Update memory wallets
      for (let i = 0; i < wallets.length; i++) {
        wallets[i].selected = wallets[i].address === wallet.address;
      }

      // Update storage wallets
      const newStorageWallets = storageWallets.map((w) => ({ ...w, selected: w.address === wallet.address }));
      const localCert = localCerts.find((c) => c.address === wallet.address);

      updateStorageWallets(newStorageWallets);
      setWallets(wallets);
      setSelectedWallet(newWallet);
      setValidCertificates([]);
      setSelectedCertificate(null);

      if (localCert) {
        setLocalCert(localCert);
      }

      onClose();

      history.replace(UrlService.dashboard());
    }
  };

  const handleAddAccount = () => {
    history.push(UrlService.register(true));
    onClose();
  };

  return (
    <Dialog open={true} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>
        <span className={classes.dialogTitle}>
          Accounts
          <Button variant="contained" size="small" color="primary" onClick={handleAddAccount}>
            Add account
          </Button>
        </span>
      </DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <List className={classes.list}>
          {storageWallets.map((wallet) => {
            return (
              <ListItem key={wallet.address} dense button onClick={() => handleSelectAccount(wallet)}>
                <ListItemIcon>{wallet.address === address && <CheckIcon color="primary" />}</ListItemIcon>
                <ListItemText
                  classes={{ secondary: classes.secondaryText }}
                  primary={
                    <Box display="flex" alignItems="center" justifyContent="space-between" fontSize="1rem">
                      {wallet.name}
                    </Box>
                  }
                  secondary={wallet.address}
                />
              </ListItem>
            );
          })}
        </List>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} type="button" autoFocus variant="contained" color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ArchivedCards = () => {
  const cards = useSelector((state) => state.board.board.cardObjects);
  const lists = useSelector((state) => state.board.board.listObjects);
  const dispatch = useDispatch();

  const onDelete = async (listId, cardId) => {
    dispatch(deleteCard(listId, cardId));
  };

  const onSendBack = async (cardId) => {
    dispatch(archiveCard(cardId, false));
  };

  return (
    <div>
      <List>
        {cards
          .filter((card) => card.archived)
          .map((card, index) => (
            <ListItem key={index} className='archived-card'>
              <Card>
                <CardContent>{card.title}</CardContent>
              </Card>
              <div>
                <Button
                  color='secondary'
                  onClick={() =>
                    onDelete(
                      lists.find((list) => list.cards.includes(card._id))._id,
                      card._id
                    )
                  }
                >
                  Delete Card
                </Button>
                <Button onClick={() => onSendBack(card._id)}>Send to List</Button>
              </div>
            </ListItem>
          ))}
      </List>
    </div>
  );
}

MenuList = () => {
	const classes = useStyles();
	const location = useLocation();
	const { push } = useHistory();
	const { authService } = useOktaAuth();

	const logout = async () => {
		await authService.logout("/");
	};

	return (
		<>
			<Hidden xsDown>
				<Button className={classes.logoButton} onClick={() => push("/home")}>
					<img className={classes.logo} src={logo} alt="SoMe logo" />
				</Button>
			</Hidden>
			<CreatePost />
			<List aria-label="Menu">
				<ListItem button onClick={() => push("/home")}>
					<ListItemIcon>
						<DashboardIcon
							className={
								location.pathname.includes("/home")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Media Manager" />
				</ListItem>
				<ListItem button onClick={() => push("/analytics")}>
					<ListItemIcon>
						<TrendingUpIcon
							className={
								location.pathname.includes("/analytics")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Analytics" />
				</ListItem>
				<ListItem button onClick={() => push("/connect/twitter")}>
					<ListItemIcon>
						<AccountBoxIcon
							className={
								location.pathname.includes("/connect")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Accounts" />
				</ListItem>
			</List>
			<List>
				<ListItem button onClick={logout}>
					<ListItemIcon>
						<ExitToAppIcon color="primary" />
					</ListItemIcon>
					<ListItemText primary="Logout" />
				</ListItem>
			</List>
		</>
	);
}

function CommentList({ requestId }) {
  const classes = useStyles();
  const firestore = useFirestore();

  const querySnapshot = useFirestoreCollection(
    firestore
      .collection(`${REQUESTS_COMMENTS_PUBLIC_COLLECTION}`)
      .where('requestId', '==', requestId)
      .orderBy('createdAt', 'asc'),
  );

  if (querySnapshot.empty) {
    return (
      <Box color="text.disabled">
        <Typography
          variant="body2"
          className={classes.noComments}
          data-test="no-comments">
          No public comments.
        </Typography>
      </Box>
    );
  }

  return (
    <List>
      {querySnapshot.docs.map(
        (docSnap) =>
          // When new comment is added locally, the createdAt can be the serverTimestamp() value.
          // So, we wait on rendering until any new snapshot has finished writing.
          !docSnap.metadata.hasPendingWrites && (
            <ListItem
              key={docSnap.id}
              divider
              alignItems="flex-start"
              data-test="public-comment">
              <ListItemAvatar>
                <Avatar>{docSnap.get('author.firstName').slice(0, 1)}</Avatar>
              </ListItemAvatar>
              <ListItemText
                disableTypography
                primary={
                  <Typography variant="subtitle2" data-test="comment-author">
                    {docSnap.get('author.firstName')} &ndash;{' '}
                    <Typography
                      variant="body2"
                      display="inline"
                      color="textSecondary">
                      {format(docSnap.get('createdAt').toDate(), 'p - PPPP')}
                    </Typography>
                  </Typography>
                }
                secondary={docSnap
                  .get('content')
                  .split('\n')
                  .map((content, key) => (
                    <Typography
                      variant="body1"
                      /* eslint-disable react/no-array-index-key */
                      key={key}
                      /* eslint-enable react/no-array-index-key */
                      gutterBottom
                      data-test="comment-content">
                      {content}
                    </Typography>
                  ))}
              />
            </ListItem>
          ),
      )}
    </List>
  );
}

function OwnerUsers() {
	const [organizers, setOrganizers] = useState([]);

	const getUsers = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/owner/allAdmins`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setOrganizers(res.data.result);
			})
		} catch(error) {
			console.log(error);
		}
	}

	useEffect(() => {
		getUsers();
	}, [])

	return (
		<div className="owner-quizzes">
			<List aria-label="users-display" className="owner-quiz-list">
				{organizers.map((user) => (
					<ListItem button key={user._id}>
						<ListItemText primary={user.email} secondary={user.name} />
						<ListItemSecondaryAction>
							<IconButton edge="end" aria-label="details">
								<ArrowForwardIos />
							</IconButton>
					</ListItemSecondaryAction>
					</ListItem>
				))}
			</List>
		</div>
	)

}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }