@material-ui/core#ListItemIcon TypeScript Examples

OnCallForScheduleList = ({ schedule }: { schedule: Schedule }) => {
    const opsgenieApi = useApi(opsgenieApiRef);
    const { value, loading, error } = useAsync(async () => await opsgenieApi.getOnCall(schedule.id));

    if (loading) {
        return <Progress />;
    } else if (error) {
        return (
            <Alert data-testid="error-message" severity="error">
                {error.message}
            </Alert>
        );
    }

    return (
        <List>
            {value!.map((responder, i) => (
                <ListItem key={i} button component="a" href={opsgenieApi.getUserDetailsURL(responder.id)}>
                    <ListItemIcon>
                        <PersonIcon />
                    </ListItemIcon>

                    <ListItemText primary={responder.name} />
                </ListItem>
            ))}

            {value!.length === 0 && <ListItem><ListItemText primary="⚠️ No one on-call." /></ListItem>}
        </List>
    );
}

NavigationMenuItem = ({ navigation, icon, title }: NavigationItem) => {
  const classes = useStyles();
  const [, setScroll] = useScroll();
  return (
    <MenuItem
      button
      data-testid={`menu-item-${navigation}`}
      className={classes.menuItem}
      onClick={() => setScroll(navigation)}
    >
      <ListItemIcon className={classes.listItemIcon}>{icon}</ListItemIcon>
      <ListItemText
        primary={<Typography className={classes.title}>{title}</Typography>}
      />
    </MenuItem>
  );
}

SettingsSwitchAccount = ({ user }: SettingsSwitchAccountProps) => {
    const classes = useStyles();
    const dispatch: AppDispatch = useDispatch();

    const { loading } = useSelector((state: RootState) => state.common);

    return (
        <ListItem className={classes.root} dense>
            <ListItemIcon className={classes.icon}>
                <PersonIcon />
            </ListItemIcon>
            <ListItemText
                primary={
                    <span>
                        Logged in as <span className={classes.user}>{user?.login}</span>
                    </span>
                }
            />
            <ListItemSecondaryAction>
                <IconButton
                    edge="end"
                    aria-label="delete"
                    size={'small'}
                    className={classes.button}
                    disabled={loading}
                    onClick={async () => await dispatch(switchAccount())}
                >
                    <ExitToAppIcon />
                </IconButton>
            </ListItemSecondaryAction>
        </ListItem>
    );
}

UserSettingsMenu = () => {
  const identityApi = useApi(identityApiRef);
  const [open, setOpen] = React.useState(false);
  const [anchorEl, setAnchorEl] = React.useState<undefined | HTMLElement>(
    undefined,
  );

  const handleOpen = (event: React.MouseEvent<HTMLButtonElement>) => {
    setAnchorEl(event.currentTarget);
    setOpen(true);
  };

  const handleClose = () => {
    setAnchorEl(undefined);
    setOpen(false);
  };

  return (
    <>
      <IconButton
        data-testid="user-settings-menu"
        aria-label="more"
        onClick={handleOpen}
      >
        <MoreVertIcon />
      </IconButton>
      <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
        <MenuItem data-testid="sign-out" onClick={() => identityApi.signOut()}>
          <ListItemIcon>
            <SignOutIcon />
          </ListItemIcon>
          Sign Out
        </MenuItem>
      </Menu>
    </>
  );
}

AlertListItem = ({ alert }: { alert: Alert }) => {
    const classes = useStyles();
    const [alertState, setAlertState] = useState({data: alert, updatedAt: alert.updatedAt});

    const onAlertChanged = (newAlert: Alert) => {
        setAlertState({
            data: newAlert,
            updatedAt: (new Date()).toISOString(),
        });
    };

    return (
        <ListItem dense key={alertState.data.id}>
            <ListItemIcon className={classes.listItemIcon}>
                <AlertStatus alert={alertState.data} />
            </ListItemIcon>
            <ListItemText
                primary={alertState.data.message}
                primaryTypographyProps={{
                    variant: 'body1',
                    className: classes.listItemPrimary,
                }}
                secondary={
                    <Typography noWrap variant="body2" color="textSecondary">
                        Created {moment(alertState.data.createdAt).fromNow()}
                    </Typography>
                }
            />
            <ListItemSecondaryAction>
                <AlertActionsMenu alert={alertState.data} onAlertChanged={onAlertChanged} />
            </ListItemSecondaryAction>
        </ListItem>
    );
}

PersonListItem = ({
  person,
  remove,
  onEdit,
  editing = false
}: PersonListItemProps): ReactElement => (
  <ListItem className={editing ? 'active' : ''}>
    <ListItemIcon>
      <PersonIcon />
    </ListItemIcon>
    <ListItemText
      primary={`${person.firstName} ${person.lastName}`}
      secondary={formatSSID(person.ssid)}
    />
    {(() => {
      if (editing) {
        return (
          <ListItemIcon>
            <IconButton onClick={onEdit} edge="end" aria-label="edit">
              <EditIcon />
            </IconButton>
          </ListItemIcon>
        )
      }
    })()}
    <ListItemSecondaryAction>
      <IconButton onClick={remove} edge="end" aria-label="delete">
        <DeleteIcon />
      </IconButton>
    </ListItemSecondaryAction>
  </ListItem>
)

export default function SideBarItem({ iconStart, iconEnd, path, label }: Props): ReactElement {
  const classes = useStyles()
  const location = useLocation()
  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <StyledListItem button selected={isSelected} disableRipple>
      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
      <ListItemText primary={label} />
      <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
    </StyledListItem>
  )
}

AccountListItem = () => {

	const [account, isLoading] = useAccount()
	const currently_due: string[] = account?.stripe?.requirements.currently_due ?? []
	const isRequired = currently_due.includes("external_account") || account === undefined
	return (
		<ListItem button key={"provider"} component={Link} to="/admin/account">
			<ListItemIcon>
				<AccountBoxIcon />
			</ListItemIcon>
			<ListItemText primary={"Account"} />
			<ListItemSecondaryAction>
				{isLoading && <DataLoading />}
				{!isLoading && isRequired && <Chip variant="outlined" size="small" color="secondary" label="Required" />}
			</ListItemSecondaryAction>
		</ListItem>
	)
}

export default function SideBarItem({ path }: Props): ReactElement {
  const { status, isLoading } = useContext(Context)
  const classes = useStyles()
  const location = useLocation()
  const isSelected = Boolean(path && matchPath(location.pathname, path))

  return (
    <ListItem
      button
      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
      selected={isSelected}
      disableRipple
    >
      <ListItemIcon style={{ marginLeft: '30px' }}>
        <StatusIcon checkState={status.all} isLoading={isLoading} />
      </ListItemIcon>
      <ListItemText primary={<Typography className={classes.smallerText}>{`Node ${status.all}`}</Typography>} />
      <ListItemIcon className={classes.icon}>
        {status.all ? null : <ArrowRight className={classes.iconSmall} />}
      </ListItemIcon>
    </ListItem>
  )
}

MenuItem: FC<MenuItemProps> = (props) => {
  const { withIcons, loading, icon, iconClassName } = props;

  const renderIcon = useCallback(() => {
    if (loading) return <Loader size={24} className={iconClassName} />;
    if (icon) return cloneElement(icon, { className: iconClassName });
    return null;
  }, [loading, icon, iconClassName]);

  if (withIcons) {
    return (
      <MaterialMenuItem
        selected={props.selected}
        className={props.className}
        onClick={(e) => props.onClick?.(e, props)}
      >
        <ListItemIcon>{renderIcon()}</ListItemIcon>
        <ListItemText>{props.text}</ListItemText>
      </MaterialMenuItem>
    );
  } else {
    return (
      <MaterialMenuItem
        selected={props.selected}
        className={props.className}
        onClick={(e) => props.onClick?.(e, props)}
      >
        {props.text}
      </MaterialMenuItem>
    );
  }
}

SettingsMenu = ({ setCurrentMenu }: SettingsMenuProps) => {
  const {
    t: translate,
    i18n: { language },
  } = useTranslation();
  const classes = useStyles();
  const languageLabel =
    language === "en" ? translate("language.en") : translate("language.th");
  return (
    <List component="nav" aria-label="sidemenu">
      <ListItem button onClick={() => setCurrentMenu("language")}>
        <ListItemIcon>
          <TranslateIcon />
        </ListItemIcon>
        <ListItemText primary={translate("sidemenuDrawer.language")} />
        <Typography variant="body1" className={classes.menuRightIcon}>
          {languageLabel}
        </Typography>
      </ListItem>
      <ListItem button onClick={() => setCurrentMenu("contact")}>
        <ListItemIcon>
          <InfoOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary={translate("sidemenuDrawer.contact")} />
      </ListItem>
      {/* <ListItem button>
        <ListItemIcon>
          <FeedbackOutlinedIcon />
        </ListItemIcon>
        <ListItemText primary={translate("sidemenuDrawer.feedback")} />
      </ListItem> */}
    </List>
  );
}

NeoReportExamplesModal = ({ database }) => {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

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

    return (
        <div>
            <ListItem button onClick={handleClickOpen}>
                <ListItemIcon>
                    <CategoryIcon />
                </ListItemIcon>
                <ListItemText primary="Examples" />
            </ListItem>

            {open ? <Dialog maxWidth={"xl"} open={open == true} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">
                    Report Examples
                    <IconButton onClick={handleClose} style={{ padding: "3px", float: "right" }}>
                        <Badge badgeContent={""} >
                            <CloseIcon />
                        </Badge>
                    </IconButton>
                </DialogTitle>
                <div>
                    <DialogContent >
                        <hr></hr>
                        {EXAMPLE_REPORTS.map(example => {
                            return <>
                                <h3>{example.title}</h3>
                                <DialogContentText>{example.description}
                                    <br />
                                    <br />
                                    <Grid container spacing={4}>
                                        <Grid item xs={4}>
                                            <div style={{ width: "400px", border: "0px solid lightgrey" }} >
                                                <NeoCodeEditorComponent editable={false}
                                                    placeholder=""
                                                    value={example.exampleQuery}
                                                    language={example.type == "iframe" ? "url" : "cypher"}
                                                ></NeoCodeEditorComponent>
                                            </div>
                                        </Grid>

                                        <Grid item xs={8}>
                                            <div style={{ height: "355px", width: "800px", overflow: "hidden", border: "1px solid lightgrey" }} >
                                                <NeoReport
                                                    query={example.syntheticQuery}
                                                    database={database}
                                                    disabled={!open}
                                                    selection={example.selection}
                                                    parameters={example.globalParameters}
                                                    settings={example.settings}
                                                    fields={example.fields}
                                                    dimensions={example.dimensions}
                                                    ChartType={example.chartType}
                                                    type={example.type}
                                                />
                                            </div>
                                        </Grid>
                                    </Grid>
                                </DialogContentText>
                                <hr></hr>
                            </>
                        })}
                    </DialogContent>
                </div>
            </Dialog> : <></>}
        </div>
    );
}

MutableListItem = ({
  icon,
  primary,
  secondary,
  remove,
  onEdit,
  editing = false,
  disableEdit = false
}: MutableListItemProps): ReactElement => {
  const canEdit = !editing && !disableEdit && onEdit !== undefined
  const canDelete = remove !== undefined && !editing

  const editAction = (() => {
    if (canEdit) {
      return (
        <ListItemIcon>
          <IconButton onClick={onEdit} edge="end" aria-label="edit">
            <Edit />
          </IconButton>
        </ListItemIcon>
      )
    }
  })()

  const deleteAction = (() => {
    if (canDelete) {
      return (
        <ListItemSecondaryAction>
          <IconButton onClick={remove} edge="end" aria-label="delete">
            <Delete />
          </IconButton>
        </ListItemSecondaryAction>
      )
    }
  })()

  const status = editing ? 'editing' : undefined

  return (
    <ListItem>
      <ListItemIcon>{icon}</ListItemIcon>
      <ListItemText
        primary={<strong>{primary}</strong>}
        secondary={secondary}
      />
      {editAction}
      {deleteAction}
      {status}
    </ListItem>
  )
}

function Actions({
  onActionSelect,
}: {
  onActionSelect: (value: string) => void
}) {
  const [anchorEl, setAnchorEl] = React.useState(null)

  const handleClick = (event: any) => {
    setAnchorEl(event.currentTarget)
  }

  const handleClose = () => {
    setAnchorEl(null)
  }

  const handleSelect = (value: string) => {
    onActionSelect && onActionSelect(value)
    handleClose()
  }

  return (
    <>
      <Tooltip title="Actions">
        <IconButton aria-label="actions" onClick={handleClick}>
          <MoreVertIcon />
        </IconButton>
      </Tooltip>
      <Menu
        id="simple-menu"
        anchorEl={anchorEl}
        keepMounted
        open={Boolean(anchorEl)}
        onClose={handleClose}
      >
        <MenuItem onClick={() => handleSelect('Duplicate')}>
          <ListItemIcon>
            <FileCopyIcon />
          </ListItemIcon>
          <ListItemText primary="Duplicate" />
        </MenuItem>
        <MenuItem onClick={() => handleSelect('Delete')}>
          <ListItemIcon>
            <DeleteIcon />
          </ListItemIcon>
          <ListItemText primary="Delete" />
        </MenuItem>
      </Menu>
    </>
  )
}

export default function ContextMenu(contents: MenuContent[]): [React.ElementType, (event: React.MouseEvent<HTMLElement>) => void, () => void] {
  const [state, setState] = React.useState<{
    mouseX: null | number;
    mouseY: null | number;
  }>(initialState);

  const handleMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
    event.preventDefault();
    setState({
      mouseX: event.clientX - 2,
      mouseY: event.clientY - 4,
    });
  };

  const handleMenuClose = () => {
    setState(initialState);
  }

  const handleMenuClick = (action: string, callback?: (action: string) => void) => {
    handleMenuClose();
    callback && callback(action);
  };

  const anchorPosition =
    state.mouseY !== null && state.mouseX !== null
      ? { top: state.mouseY, left: state.mouseX }
      : undefined;

  return [
    React.memo((innerProps: ContextMenuProps) =>
      <Menu
        keepMounted
        open={state.mouseY !== null}
        onClose={handleMenuClose}
        anchorReference="anchorPosition"
        anchorPosition={ anchorPosition }
      >
        {
          (innerProps.contents ?? contents).map(content => (
            <StyledMenuItem
              key={content.action}
              onClick={() => handleMenuClick(content.action, innerProps.onItemClick)}
            >
              <ListItemIcon>
                { content.icon }
              </ListItemIcon>
              <Typography variant="inherit">{content.label}</Typography>
            </StyledMenuItem>
          ))
        }
    </Menu>
    ),
    handleMenuOpen,
    handleMenuClose
  ];
}

UserProfileCard = (props: { variant?: InfoCardVariants }) => {
  const { entity: user } = useEntity<UserEntity>();
  if (!user) {
    return <Alert severity="error">User not found</Alert>;
  }

  const {
    metadata: { name: metaName, description },
    spec: { profile },
  } = user;
  const displayName = profile?.displayName ?? metaName;
  const emailHref = profile?.email ? `mailto:${profile.email}` : undefined;
  const memberOfRelations = getEntityRelations(user, RELATION_MEMBER_OF, {
    kind: 'Group',
  });

  return (
    <InfoCard
      title={<CardTitle title={displayName} />}
      subheader={description}
      variant={props.variant}
    >
      <Grid container spacing={3} alignItems="flex-start">
        <Grid item xs={12} sm={2} xl={1}>
          <Avatar displayName={displayName} picture={profile?.picture} />
        </Grid>

        <Grid item md={10} xl={11}>
          <List>
            {profile?.email && (
              <ListItem>
                <ListItemIcon>
                  <Tooltip title="Email">
                    <EmailIcon />
                  </Tooltip>
                </ListItemIcon>
                <ListItemText>
                  <Link to={emailHref ?? ''}>{profile.email}</Link>
                </ListItemText>
              </ListItem>
            )}

            <ListItem>
              <ListItemIcon>
                <Tooltip title="Member of">
                  <GroupIcon />
                </Tooltip>
              </ListItemIcon>
              <ListItemText>
                <EntityRefLinks
                  entityRefs={memberOfRelations}
                  defaultKind="Group"
                />
              </ListItemText>
            </ListItem>
          </List>
        </Grid>
      </Grid>
    </InfoCard>
  );
}

DrawerMenu: React.FC<DrawerMenuProps> = props => {
  const { t } = useTranslation();
  const styles = useStyles();
  const { onClick, hideIcon } = props;

  const getMatchedClasses = (matched: boolean) => clsx(styles['text'], matched && styles['matchHighlight']);

  const matchHomePath = getMatchedClasses(!!useRouteMatch('/home'));
  const matchSettingsPath = getMatchedClasses(!!useRouteMatch('/settings'));
  const matchAboutPath = getMatchedClasses(!!useRouteMatch('/about'));

  return (
    <>
      { !hideIcon && (
        <>
          <img className={styles.banner} src={banner}></img>
          <Divider />
        </>
        )
      }
      <List>
        <Link to="/home" onClick={onClick}>
          <ListItem button>
            <ListItemIcon className={matchHomePath}>
              <HomeIcon />
            </ListItemIcon>
            <ListItemText primary={t('home')} className={matchHomePath}/>
          </ListItem>
        </Link>
        <Link to="/settings" onClick={props.onClick}>
          <ListItem button>
            <ListItemIcon className={matchSettingsPath}>
              <SettingsIcon />
            </ListItemIcon>
            <ListItemText primary={t('settings')} className={matchSettingsPath}/>
          </ListItem>
        </Link>
        <Link to="/about" onClick={props.onClick} >
          <ListItem button>
            <ListItemIcon className={matchAboutPath}>
              <InfoIcon />
            </ListItemIcon>
            <ListItemText primary={t('about')} className={matchAboutPath} />
          </ListItem>
        </Link>
      </List>
    </>
  );
}

NeoSettingsModal = ({ dashboardSettings, updateDashboardSetting }) => {
    const [open, setOpen] = React.useState(false);

    const handleClickOpen = () => {
        setOpen(true);
    };

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

    const settings = DASHBOARD_SETTINGS;

    // Else, build the advanced settings view.
    const advancedDashboardSettings = <div style={{ marginLeft: "-10px" }}>
        {Object.keys(settings).map(setting =>
            <>
            <NeoSetting key={setting} name={setting}
                value={dashboardSettings[setting]}
                type={settings[setting]["type"]}
                disabled={settings[setting]["disabled"]}
                helperText={settings[setting]["helperText"]}
                label={settings[setting]["label"]}
                defaultValue={settings[setting]["default"]}
                choices={settings[setting]["values"]}
                onChange={(e) => updateDashboardSetting(setting, e)}
            /><br/></>
        )}
    </div>

    return (
        <div>
            <ListItem button onClick={handleClickOpen}>
                <ListItemIcon>
                    <SettingsIcon />
                </ListItemIcon>
                <ListItemText primary="Settings" />
            </ListItem>

            <Dialog maxWidth={"lg"} open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                <DialogTitle id="form-dialog-title">
                <SettingsIcon style={{
                        height: "30px",
                        paddingTop: "4px",
                        marginBottom: "-8px",
                        marginRight: "5px",
                        paddingBottom: "5px"
                    }} />  
                    Dashboard Settings
                    <IconButton onClick={handleClose} style={{ padding: "3px", float: "right" }}>
                        <Badge badgeContent={""} >
                            <CloseIcon />
                        </Badge>
                    </IconButton>
                </DialogTitle>
                <DialogContent>
                    <DialogContentText>
                        You can modify settings for your entire dashboard here.      
                        <br/><br/>
                        {advancedDashboardSettings}
                    </DialogContentText>

                </DialogContent>
            </Dialog>
        </div>
    );
}

OwnerListPicker = (props: {
  filter: string;
  onSelectOwner: (id: 'owned' | 'all') => void;
}) => {
  const { filter, onSelectOwner } = props;
  const classes = useStyles();

  const filterGroups = getFilterGroups();
  return (
    <Card className={classes.root}>
      {filterGroups.map(group => (
        <Fragment key={group.name}>
          <Typography variant="subtitle2" className={classes.title}>
            {group.name}
          </Typography>
          <Card className={classes.groupWrapper}>
            <List disablePadding dense>
              {group.items.map(item => (
                <MenuItem
                  key={item.id}
                  button
                  divider
                  onClick={() => onSelectOwner(item.id as 'owned' | 'all')}
                  selected={item.id === filter}
                  className={classes.menuItem}
                  data-testid={`owner-picker-${item.id}`}
                >
                  {item.icon && (
                    <ListItemIcon className={classes.listIcon}>
                      <item.icon fontSize="small" />
                    </ListItemIcon>
                  )}
                  <ListItemText>
                    <Typography variant="body1">{item.label}</Typography>
                  </ListItemText>
                </MenuItem>
              ))}
            </List>
          </Card>
        </Fragment>
      ))}
    </Card>
  );
}

Bookmark = () => {
  const { t } = useTranslation("main_screen");
  const { bookmarkLocation, removeBookmarkLocation } = useBookmarkLocation();
  const { language } = useI18n();
  const { enterLocation } = useTravelRecord();

  return (
    <PageWrapper>
      <Header name={t("bookmark.name")} />
      <ContentWrapper>
        <List component="nav">
          {isEmpty(bookmarkLocation) && (
            <Msg>{t("bookmark.message.empty")}</Msg>
          )}
          {bookmarkLocation.map((item) => {
            const name = getVenueName(item, language);
            return (
              <React.Fragment key={item.id}>
                <ListItem dense>
                  <ListItemIcon>
                    {item.type === locationType.TAXI ? (
                      <LocalTaxiIcon />
                    ) : (
                      <StoreIcon />
                    )}
                  </ListItemIcon>
                  <ListItemText
                    primary={name}
                    secondary={dayjs(item.createdAt).format("YYYY-MM-DD HH:mm")}
                  />
                  <ListItemSecondaryAction>
                    <IconButton
                      edge="end"
                      aria-label="enter"
                      onClick={() => {
                        enterLocation({
                          ...item,
                          inputType: travelRecordInputType.BOOKMARK,
                        });
                      }}
                    >
                      <ExitToAppIcon />
                    </IconButton>
                    <IconButton
                      edge="end"
                      aria-label="delete"
                      onClick={() => {
                        removeBookmarkLocation(item.id);
                      }}
                    >
                      <DeleteIcon />
                    </IconButton>
                  </ListItemSecondaryAction>
                </ListItem>
                <Divider />
              </React.Fragment>
            );
          })}
        </List>
      </ContentWrapper>
    </PageWrapper>
  );
}

SubMenu: FC<{
    dense?: boolean;
    handleToggle: () => void;
    icon: ReactElement;
    isOpen: boolean;
    label: string;
    sidebarIsOpen: boolean;
}> = ({
    handleToggle,
    sidebarIsOpen,
    isOpen,
    icon,
    label,
    children,
    dense = false,
}) => {
    const classes = useStyles();

    const header = (
        <MUIMenuItem
            className={classes.subMenuItem}
            dense={dense}
            button
            onClick={handleToggle}
        >
            <ListItemIcon className={classes.icon}>
                {isOpen ? <ExpandMore /> : icon}
            </ListItemIcon>
            <Typography variant="inherit" color="textSecondary">
                {label}
            </Typography>
        </MUIMenuItem>
    );

    return (
        <>
            {sidebarIsOpen || isOpen ? (
                header
            ) : (
                <Tooltip title={label} placement="right">
                    {header}
                </Tooltip>
            )}
            <Collapse in={isOpen} timeout="auto" unmountOnExit>
                <List
                    className={classes.subMenuContainer}
                    dense={dense}
                    component="div"
                    disablePadding
                >
                    {children}
                </List>
            </Collapse>
        </>
    );
}

ProviderSettingsItem = ({
  title,
  description,
  icon: Icon,
  apiRef,
}: Props) => {
  const api = useApi(apiRef);
  const [signedIn, setSignedIn] = useState(false);

  useEffect(() => {
    let didCancel = false;

    const subscription = api
      .sessionState$()
      .subscribe((sessionState: SessionState) => {
        if (!didCancel) {
          setSignedIn(sessionState === SessionState.SignedIn);
        }
      });

    return () => {
      didCancel = true;
      subscription.unsubscribe();
    };
  }, [api]);

  return (
    <ListItem>
      <ListItemIcon>
        <Icon />
      </ListItemIcon>
      <ListItemText
        primary={title}
        secondary={
          <Tooltip placement="top" arrow title={description}>
            <span>{description}</span>
          </Tooltip>
        }
        secondaryTypographyProps={{ noWrap: true, style: { width: '80%' } }}
      />
      <ListItemSecondaryAction>
        <Tooltip
          placement="top"
          arrow
          title={signedIn ? `Sign out from ${title}` : `Sign in to ${title}`}
        >
          <Button
            variant="outlined"
            color="primary"
            onClick={() => (signedIn ? api.signOut() : api.signIn())}
          >
            {signedIn ? `Sign out` : `Sign in`}
          </Button>
        </Tooltip>
      </ListItemSecondaryAction>
    </ListItem>
  );
}

ActionSheet = ({ url, text, onClose }: { url: string, text: string, onClose: () => void }) => {
	const [showSnackbar] = useSnackbar()
	return (
		<Paper>
			<Box>
				<Box padding={2}>
					<Typography variant="subtitle1">Share this page</Typography>
				</Box>
				<List>
					<ListItem button onClick={async () => {
						await navigator.clipboard.writeText(url)
						showSnackbar('success', 'Copied this page URL.')
						onClose()
					}}>
						<ListItemIcon>
							<AssignmentTurnedInIcon />
						</ListItemIcon>
						<ListItemText primary="Copy URL of this page" />
					</ListItem>
					<ListItem button onClick={() => {
						const encoded = encodeURI(url)
						const uri = `https://twitter.com/intent/tweet?text=${encoded}`
						if (!window.open(uri)) window.location.href = uri
						onClose()
					}}>
						<ListItemIcon>
							<TwitterIcon />
						</ListItemIcon>
						<ListItemText primary="Twitter" />
					</ListItem>
				</List>
				<Divider />
				<List>
					<ListItem button onClick={onClose}>
						<ListItemText primary="Cancel" />
					</ListItem>
				</List>
			</Box>
		</Paper>
	)
}

ConfigureTimeoutPage = observer(
  (props: { accountManager: AccountManager }) => {
    return props.accountManager.isUnLocked ? (
      <div>
        <h2>Set Idle Timeout</h2>
        <Typography>
          Select how long you'd like before the Signer locks due to inactivity.
        </Typography>
        <List>
          <ListItem
            button={true}
            onClick={async () => {
              await props.accountManager.configureTimeout(1);
            }}
          >
            <ListItemText primary="1 minute" />
            {1 === props.accountManager.idleTimeoutMins && (
              <ListItemIcon>
                <ActiveIcon style={{ color: 'green', marginLeft: '30px' }} />
              </ListItemIcon>
            )}
          </ListItem>
          <ListItem
            button={true}
            onClick={async () => {
              await props.accountManager.configureTimeout(2);
            }}
          >
            <ListItemText primary="2 minutes" />
            {2 === props.accountManager.idleTimeoutMins && (
              <ListItemIcon>
                <ActiveIcon style={{ color: 'green', marginLeft: '30px' }} />
              </ListItemIcon>
            )}
          </ListItem>
          <ListItem
            button={true}
            onClick={async () => {
              await props.accountManager.configureTimeout(5);
            }}
          >
            <ListItemText primary="5 minutes" />
            {5 === props.accountManager.idleTimeoutMins && (
              <ListItemIcon>
                <ActiveIcon style={{ color: 'green', marginLeft: '30px' }} />
              </ListItemIcon>
            )}
          </ListItem>
          <ListItem
            button={true}
            onClick={async () => {
              await props.accountManager.configureTimeout(10);
            }}
          >
            <ListItemText primary="10 minutes" />
            {10 === props.accountManager.idleTimeoutMins && (
              <ListItemIcon>
                <ActiveIcon style={{ color: 'green', marginLeft: '30px' }} />
              </ListItemIcon>
            )}
          </ListItem>
        </List>
      </div>
    ) : (
      <Redirect to={Pages.Home} />
    );
  }
)

ResponseStepListItem = ({
  responseStep,
  animationDelay = 300,
}: ResponseStepListItemProps) => {
  const classes = useStyles({ animationDelay });

  function ItemIcon() {
    if (responseStep.icon === 'success') {
      return (
        <CheckCircleOutline
          data-testid={TEST_IDS.components.responseStepListItemIconSuccess}
          style={{ color: colors.green[500] }}
        />
      );
    }

    if (responseStep.icon === 'failure') {
      return (
        <ErrorOutlineIcon
          data-testid={TEST_IDS.components.responseStepListItemIconFailure}
          style={{ color: colors.red[500] }}
        />
      );
    }

    if (responseStep.link) {
      return (
        <IconButton
          data-testid={TEST_IDS.components.responseStepListItemIconLink}
          style={{ padding: 0 }}
          aria-label="link"
          onClick={() => {
            const newTab = window.open(responseStep.link, '_blank');
            newTab?.focus();
          }}
        >
          <OpenInNewIcon color="primary" />
        </IconButton>
      );
    }

    return (
      <FiberManualRecordIcon
        data-testid={TEST_IDS.components.responseStepListItemIconDefault}
        fontSize="small"
        style={{ opacity: 0.85 }}
      />
    );
  }

  return (
    <ListItem
      className={`${classes.item}`}
      data-testid={TEST_IDS.components.responseStepListItem}
    >
      <ListItemIcon>
        <ItemIcon />
      </ListItemIcon>

      <ListItemText
        primary={responseStep.message}
        secondary={responseStep.secondaryMessage}
      />
    </ListItem>
  );
}

MonitoringDialog: React.FC<MonitoringDialogProps> = ({ onClose, open }) => {
    const dispatch = useDispatch();
    const activeMetrics = useSelector((state: RootState) => state.monitoring.activeMetrics);
    const classes = useStyles();

    const metricList = Object.keys(activeMetrics).map((key, index) => {
        return (
            <ListItem key={index}>
                <ListItemIcon>
                    {metricLookup[key].icon}
                </ListItemIcon>
                <ListItemText id="switch-list-label-wifi" primary={metricLookup[key].label} />
                <ListItemSecondaryAction>
                    <Switch
                        edge="end"
                        onChange={(_event, checked) => dispatch(setMonitoringMetric(key, checked))}
                        checked={activeMetrics[key as MonitoringMetric].active}
                        inputProps={{ 'aria-labelledby': 'switch-list-label-wifi' }}
                    />
                </ListItemSecondaryAction>
            </ListItem>
        );
    });

    return (
        <Dialog aria-labelledby="simple-dialog-title" open={open} onClose={onClose}>
            <DialogTitle id="simple-dialog-title">
                <Typography variant="h5">
                    Select monitoring metrics
	      </Typography>
            </DialogTitle>
            <List className={classes.root}>
                {metricList}
            </List>
        </Dialog>
    );

}

export default function MenuContents({ menuItems }: IMenuContentsProps) {
  const classes = useStyles();

  return (
    <>
      {menuItems.map((item, index) => {
        if (item.type === "subheader")
          return (
            <>
              {index !== 0 && <Divider />}
              <ListSubheader
                key={index}
                className={classes.subheader}
                disableGutters
                disableSticky
              >
                {item.label}
              </ListSubheader>
            </>
          );

        let icon: JSX.Element = item.icon ?? <></>;
        if (item.active && !!item.activeIcon) icon = item.activeIcon;

        return (
          <>
            {index !== 0 && <Divider />}
            <MenuItem
              key={index}
              onClick={item.onClick}
              className={clsx(
                classes.menuItem,
                item.active && classes.menuItemActive,
                item.color === "error" && classes.menuItemError
              )}
              disabled={item.disabled}
            >
              <ListItemIcon className={classes.menuItemIcon}>
                {icon}
              </ListItemIcon>
              {item.active ? item.activeLabel : item.label}
            </MenuItem>
          </>
        );
      })}
    </>
  );
}

export function NavDrawer({ isDrawerOpen, toggleDrawer }) {
  const classes = useStyles();
  const anchor = "left";

  return (
    <React.Fragment>
      <SwipeableDrawer anchor={anchor} open={isDrawerOpen} onClose={toggleDrawer(false)} onOpen={toggleDrawer(true)}>
        <div className={clsx(classes.list)} role="presentation" onClick={toggleDrawer(false)} onKeyDown={toggleDrawer(false)}>
          <List
            subheader={
              <ListSubheader component={Link} to="/" id="nested-list-subheader" className={classes.listSubHeader}>
                <img src="/images/akashlytics_logo_compact_small.png" alt="Akashlytics logo" className={clsx(classes.listSubHeaderLogo, "App-logo")} />
              </ListSubheader>
            }
          >
            <ListItem button component={Link} to="/">
              <ListItemIcon>
                <DashboardIcon />
              </ListItemIcon>
              <ListItemText primary="Dashboard" />
            </ListItem>
            <ListItem button component={Link} to="/price-compare">
              <ListItemIcon>
                <AttachMoneyIcon />
              </ListItemIcon>
              <ListItemText primary="Compare price" />
            </ListItem>
            <ListItem button component={Link} to="/faq">
              <ListItemIcon>
                <HelpIcon />
              </ListItemIcon>
              <ListItemText primary="FAQ" />
            </ListItem>
            <ListItem button component={Link} to="/deploy">
              <ListItemIcon>
                <CloudUploadIcon />
              </ListItemIcon>
              <ListItemText primary="Deploy" />
            </ListItem>
          </List>
        </div>
      </SwipeableDrawer>
    </React.Fragment>
  );
}

/**
 * Returns dropdown component of all available types
 */
export default function FieldsDropdown({
  value,
  onChange,
  className,
  hideLabel = false,
  options: optionsProp,
}: IFieldsDropdownProps) {
  const classes = useStyles();

  const options = optionsProp
    ? Object.values(FieldType).filter(
        (fieldType) => optionsProp.indexOf(fieldType) > -1
      )
    : Object.values(FieldType);

  return (
    <TextField
      fullWidth
      select
      value={value ? value : ""}
      onChange={onChange}
      inputProps={{ name: "type", id: "type" }}
      label={!hideLabel ? "Field Type" : ""}
      aria-label="Field Type"
      hiddenLabel={hideLabel}
      helperText={value && getFieldProp("description", value)}
      FormHelperTextProps={{ classes: { root: classes.helperText } }}
      className={className}
    >
      {options.map((fieldType) => (
        <MenuItem
          key={`select-field-${getFieldProp("name", fieldType)}`}
          id={`select-field-${fieldType}`}
          value={fieldType}
        >
          <ListItemIcon className={classes.listItemIcon}>
            {getFieldProp("icon", fieldType)}
          </ListItemIcon>
          {getFieldProp("name", fieldType)}
        </MenuItem>
      ))}
    </TextField>
  );
}