@material-ui/core#ListItemSecondaryAction TypeScript Examples

SettingsNotifications = () => {
    const classes = useStyles();
    const [notificationsFlag, setNotificationsFlag] = useState<boolean>(false);
    const dispatch: AppDispatch = useDispatch();

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

    useEffect(() => {
        setNotificationsFlag(localStorageService.getNotificationFlag());
    }, [dispatch]);

    const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
        setNotificationsFlag(event.target.checked);
        await dispatch(updateNotificationsState(event.target.checked));
    };

    return (
        <ListItem className={classes.root} dense>
            <ListItemIcon className={classes.icon}>
                <NotificationsIcon />
            </ListItemIcon>
            <ListItemText primary={<span>Just went live notification</span>} />
            <ListItemSecondaryAction>
                <AntSwitch
                    className={classes.switch}
                    checked={notificationsFlag}
                    onChange={async (e) => await handleChange(e)}
                    name="notifications-state"
                    color="primary"
                    inputProps={{ 'aria-label': 'secondary checkbox' }}
                    disabled={loading}
                />
            </ListItemSecondaryAction>
        </ListItem>
    );
}

EscalationUser = ({ user }: Props) => {
  const classes = useStyles();

  return (
    <ListItem>
      <ListItemIcon>
        <Avatar alt="User" />
      </ListItemIcon>
      <ListItemText
        primary={
          <Typography className={classes.listItemPrimary}>
            {user.firstName} {user.lastName}
          </Typography>
        }
        secondary={user.email}
      />
      <ListItemSecondaryAction>
        <Tooltip title="Send e-mail to user" placement="top">
          <IconButton href={`mailto:${user.email}`}>
            <EmailIcon color="primary" />
          </IconButton>
        </Tooltip>
      </ListItemSecondaryAction>
    </ListItem>
  );
}

export function ContentPageTwo({ accountManager }: ContentPageTwoProps) {
  return (
    <List>
      {accountManager &&
        accountManager.userAccounts &&
        accountManager.userAccounts.map((account, index) => (
          <ListItem>
            <ListItemText primary={account.alias} />
            <ListItemSecondaryAction>
              <Tooltip title="Download">
                <IconButton
                  edge="end"
                  onClick={() => {
                    accountManager.downloadPemFiles(account.alias);
                  }}
                >
                  <GetApp />
                </IconButton>
              </Tooltip>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
    </List>
  );
}

LanguageMenu = () => {
  const { t: translate, i18n } = useTranslation();
  const classes = useStyles();

  const checkBox = (language: "en" | "th") => {
    if (i18n.language === language) {
      return (
        <ListItemSecondaryAction className={classes.menuRightIcon}>
          <CheckIcon />
        </ListItemSecondaryAction>
      );
    }
    return null;
  };

  const handleChangeLanguage = (language: "en" | "th") => {
    i18n.changeLanguage(language);
  };

  return (
    <List component="nav" aria-label="sidemenu">
      <ListItem button key="th" onClick={() => handleChangeLanguage("th")}>
        <ListItemText primary={translate("language.th")} />
        {checkBox("th")}
      </ListItem>
      <ListItem button key="en" onClick={() => handleChangeLanguage("en")}>
        <ListItemText primary={translate("language.en")} />
        {checkBox("en")}
      </ListItem>
    </List>
  );
}

BitriseArtifactsComponent = (
  props: BitriseArtifactsComponentComponentProps,
) => {
  const { value, loading, error } = useBitriseArtifacts(
    props.build.appSlug,
    props.build.buildSlug,
  );

  if (loading) {
    return <Progress />;
  } else if (error) {
    return <Alert severity="error">{error.message}</Alert>;
  } else if (!value || !value.length) {
    return <Alert severity="info">No artifacts</Alert>;
  }

  return (
    <List>
      {value.map(row => (
        <ListItem key={row.slug}>
          <ListItemText primary={row.title} secondary={row.artifact_type} />
          <ListItemSecondaryAction>
            <BitriseDownloadArtifactComponent
              appSlug={props.build.appSlug}
              buildSlug={props.build.buildSlug}
              artifactSlug={row.slug}
            />
          </ListItemSecondaryAction>
        </ListItem>
      ))}
    </List>
  );
}

DbEntry = ({ db, isSelected, select, duplicate }: DbEntryProps) => {
  const handleDelete = () => {
    ipcRenderer
      .invoke('drop-db', db, isSelected)
      .then(() => {
        if (isSelected) select('');
      })
      .catch(() =>
        sendFeedback({ type: 'error', message: `Failed to delete ${db}` })
      );
  };

  return (
    <SidebarListItem
      button
      $customSelected={isSelected}
      onClick={() => select(db)}
    >
      <StyledListItemText primary={db} />
      <ListItemSecondaryAction>
        <Tooltip title="Copy Database">
          <IconButton edge="end" onClick={duplicate}>
            <FileCopyIcon />
          </IconButton>
        </Tooltip>
        <Tooltip title="Drop Database">
          <IconButton edge="end" onClick={handleDelete}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      </ListItemSecondaryAction>
    </SidebarListItem>
  );
}

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>
    );
}

QueryEntry = ({
  query,
  select,
  isSelected,
  setComparison,
  isCompared,
  deleteThisQuery,
  saveThisQuery,
}: QueryEntryProps) => (
  <SidebarListItem button $customSelected={isSelected} onClick={select}>
    <QueryText primary={`${query.label} - ${query.db}`} />
    <ListItemSecondaryAction>
      <Tooltip title="View in Comparison">
        <CompareCheck onChange={setComparison} checked={isCompared} />
      </Tooltip>
      <Tooltip title="Save Query">
        <IconButton onClick={saveThisQuery}>
          <SaveIcon fontSize='default' />
        </IconButton>
      </Tooltip>
      <Tooltip title="Forget Query">
        <IconButton edge="end" onClick={deleteThisQuery}>
          <CloseIcon />
        </IconButton>
      </Tooltip>
    </ListItemSecondaryAction>
  </SidebarListItem>
)

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>
    );
}

BankAccount = () => {
	const [account, isLoading] = useAccount()
	const [showModal, closeModal] = useModal()
	const currently_due: string[] = account?.stripe?.requirements.currently_due ?? []
	const isRequired = isLoading || currently_due.includes("external_account")
	const bankAccounts = account?.stripe?.external_accounts.data || []

	return (
		<Box>
			<List>
				{bankAccounts.map(value => {
					return (
						<ListItem button key={value.id}>
							<ListItemText primary={`${value.bank_name} - ${value.account_holder_name}`} primaryTypographyProps={{ variant: "subtitle1" }} />
							<ListItemSecondaryAction>
								<Box display="flex" alignItems="center">
									<NavigateNextIcon />
								</Box>
							</ListItemSecondaryAction>
						</ListItem>
					)
				})}

				<ListItem button onClick={() => {
					showModal(<Payout onClose={closeModal} />, false)
				}}>
					<ListItemText primary="Register your bank account" primaryTypographyProps={{ variant: "subtitle2" }} />
					<ListItemSecondaryAction>
						<Box display="flex" alignItems="center">
							{isRequired && <Chip variant="outlined" size="small" color="secondary" label="Required" />}
							<NavigateNextIcon />
						</Box>
					</ListItemSecondaryAction>
				</ListItem>
			</List>
		</Box>
	)
}

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>
)

Player = ({ player, isHost, isCzar, onPlayerKick, isCurrentUserHost }: any) => {
  function renderIcon() {
    return <div style={!isCzar ? { opacity: 0 } : {}}>
      <ListItemAvatar>
        <Avatar>
          <StyleIcon />
        </Avatar>
      </ListItemAvatar>
    </div>
  }

  function renderKick() {
    if (isHost || !isCurrentUserHost) {
      return null;
    }

    return <ListItemSecondaryAction style={{ right: '-10px' }}>
      <Button color="secondary" onClick={() => { onPlayerKick(player?._id) }}>Kick</Button>
    </ListItemSecondaryAction>
  }

  return <ListItem>
    {renderIcon()}
    <ListItemText primary={player.username} secondary={`Score: ${!player?.score ? 0 : player.score}`} />
    {renderKick()}
  </ListItem>;
}

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>
  )
}

CartContentItem: React.FC<CartProps> = ({ key, cartItem }) => {
    const classes = useStyles();
    const bloc = useCartPloc();

    return (
        <React.Fragment>
            <Paper className={classes.itemContainer}>
                <ListItem key={key}>
                    <img
                        width={80}
                        className={classes.itemImage}
                        src={cartItem.image}
                        alt={cartItem.title}
                    />
                    <ListItemText
                        primary={cartItem.title}
                        secondary={
                            <Box flexDirection="row" className={classes.secondContainer}>
                                <TextField
                                    id="standard-number"
                                    label="Quantity"
                                    type="number"
                                    className={classes.quantityField}
                                    InputLabelProps={{
                                        shrink: true,
                                    }}
                                    margin="none"
                                    value={cartItem.quantity}
                                    onChange={event =>
                                        bloc.editQuantityCartItem(cartItem, +event.target.value)
                                    }
                                />
                                <Typography variant="body1">{cartItem.price}</Typography>
                            </Box>
                        }
                    />
                    <ListItemSecondaryAction>
                        <IconButton edge="end" aria-label="delete">
                            <RemoveIcon onClick={() => bloc.removeCartItem(cartItem)} />
                        </IconButton>
                    </ListItemSecondaryAction>
                </ListItem>
            </Paper>
        </React.Fragment>
    );
}

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>
  );
}

ConnectedSitesPage = observer((props: Props) => {
  const handleClickRemove = (name: string) => {
    confirm(
      <div className="text-danger">Remove Site</div>,
      'Are you sure you want to disconnect and remove this site?'
    ).then(() => props.connectionContainer.removeSite(name));
  };

  return !props.accountManager.isUnLocked ? (
    <Redirect to={Pages.Home} />
  ) : props.connectionContainer.connectedSites[0] ? (
    <List>
      {props.connectionContainer.connectedSites.map((item, index) => {
        return (
          <ListItem>
            <ListItemText primary={item.url} />
            <ListItemSecondaryAction>
              <Tooltip title="Delete">
                <IconButton
                  edge={'end'}
                  onClick={() => {
                    handleClickRemove(item.url);
                  }}
                >
                  <DeleteIcon />
                </IconButton>
              </Tooltip>
              {item.isConnected ? (
                <Tooltip title="Disconnect">
                  <IconButton
                    edge={'end'}
                    onClick={() => {
                      props.connectionContainer.disconnectFromSite(item.url);
                    }}
                  >
                    <CheckCircleIcon />
                  </IconButton>
                </Tooltip>
              ) : (
                <Tooltip title="Connect">
                  <IconButton
                    edge={'end'}
                    onClick={() => {
                      props.connectionContainer.connectToSite(item.url);
                    }}
                  >
                    <CheckCircleOutlineIcon />
                  </IconButton>
                </Tooltip>
              )}
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  ) : (
    <Typography variant="h5">No Saved Sites</Typography>
  );
})

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>
  );
}

export function Updates(props: Required<ISectionProps>): JSX.Element {
  const { t } = useTranslation();

  const preference = usePreferenceObservable();
  const updaterMetaData = useUpdaterObservable();

  return (
    <>
      <SectionTitle ref={props.sections.updates.ref}>{t('Preference.Network')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          {preference === undefined || updaterMetaData === undefined ? (
            <ListItem>{t('Loading')}</ListItem>
          ) : (
            <>
              <ListItem
                button
                onClick={
                  updaterMetaData.status === IUpdaterStatus.updateAvailable
                    ? async () => await window.service.native.open(updaterMetaData.info?.latestReleasePageUrl ?? latestStableUpdateUrl)
                    : async () => await window.service.updater.checkForUpdates()
                }
                disabled={updaterMetaData.status === IUpdaterStatus.checkingForUpdate || updaterMetaData.status === IUpdaterStatus.downloadProgress}>
                {updaterMetaData.status !== undefined && (
                  <ListItemText
                    primary={t(`Updater.${updaterMetaData.status}`)}
                    secondary={getUpdaterMessage(updaterMetaData.status, updaterMetaData.info, t)}
                  />
                )}
                <ChevronRightIcon color="action" />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemText primary={t('Preference.ReceivePreReleaseUpdates')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.allowPrerelease}
                    onChange={async (event) => {
                      await window.service.preference.set('allowPrerelease', event.target.checked);
                      await window.service.updater.checkForUpdates();
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>
            </>
          )}
        </List>
      </Paper>
    </>
  );
}

Scores = ({ score, nested }: ScoreProps) => {
  const [show, setShow] = useState(false)
  const { palette } = useTheme()

  let { op_name, operands, value, ref_id, description } = score
  if (!op_name && !operands && !value) {
    return <></>
  }

  const toggleShow = () => {
    setShow((prev) => !prev)
  }

  const canToggle = operands && operands.length > 0

  return (
    <div style={{ paddingLeft: nested ? "10px" : "0px" }}>
      <ListItem button={canToggle} onClick={toggleShow}>
        <Grid container>
          <Grid item xs={4}>
            <Box paddingTop="0.75rem">
              <Typography noWrap fontSize="1.25rem">
                {score.value || "0.12341234"}
              </Typography>
            </Box>
          </Grid>
          <Grid item xs={7}>
            <Box>
              <Typography noWrap>{op_name}</Typography>
              <Typography noWrap color={palette.grey[500]}>
                {description}
              </Typography>
            </Box>
          </Grid>
        </Grid>
        {canToggle && (
          <ListItemSecondaryAction>
            ({operands?.length}){show ? <ExpandLess /> : <ExpandMore />}
          </ListItemSecondaryAction>
        )}
      </ListItem>
      {operands && (
        <div>
          <Collapse in={show}>
            <List>
              {operands.map((operand, index) => (
                <Scores score={operand} key={`${index}-${ref_id}`} nested />
              ))}
            </List>
          </Collapse>
        </div>
      )}
    </div>
  )
}

export function Performance(props: Required<ISectionProps>): JSX.Element {
  const { t } = useTranslation();

  const preference = usePreferenceObservable();

  return (
    <>
      <SectionTitle ref={props.sections.performance.ref}>{t('Preference.Performance')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          {preference === undefined ? (
            <ListItem>{t('Loading')}</ListItem>
          ) : (
            <>
              <ListItem>
                <ListItemText primary={t('Preference.HibernateAllUnusedWorkspaces')} secondary={t('Preference.HibernateAllUnusedWorkspacesDescription')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.hibernateUnusedWorkspacesAtLaunch}
                    onChange={async (event) => {
                      await window.service.preference.set('hibernateUnusedWorkspacesAtLaunch', event.target.checked);
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>

              <Divider />
              <ListItem>
                <ListItemText primary={t('Preference.hardwareAcceleration')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.useHardwareAcceleration}
                    onChange={async (event) => {
                      await window.service.preference.set('useHardwareAcceleration', event.target.checked);
                      props.requestRestartCountDown();
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>
            </>
          )}
        </List>
      </Paper>
    </>
  );
}

Content = (props: StackOverflowQuestionsContentProps) => {
  const { requestParams } = props;
  const configApi = useApi(configApiRef);
  const baseUrl =
    configApi.getOptionalString('stackoverflow.baseUrl') ||
    'https://api.stackexchange.com/2.2';

  const { value, loading, error } = useAsync(async (): Promise<
    StackOverflowQuestion[]
  > => {
    const params = qs.stringify(requestParams, { addQueryPrefix: true });
    const response = await fetch(`${baseUrl}/questions${params}`);
    const data = await response.json();
    return data.items;
  }, []);

  if (loading) {
    return <p>loading...</p>;
  }

  if (error || !value || !value.length) {
    return <p>could not load questions</p>;
  }

  const getSecondaryText = (answer_count: Number) =>
    answer_count > 1 ? `${answer_count} answers` : `${answer_count} answer`;

  return (
    <List>
      {value.map(question => (
        <ListItem key={question.link}>
          <Link to={question.link}>
            <ListItemText
              primary={question.title}
              secondary={getSecondaryText(question.answer_count)}
            />
            <ListItemSecondaryAction>
              <IconButton edge="end" aria-label="external-link">
                <OpenInNewIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </Link>
        </ListItem>
      ))}
    </List>
  );
}

export function Downloads(props: Required<ISectionProps>): JSX.Element {
  const { t } = useTranslation();

  const preference = usePreferenceObservable();

  return (
    <>
      <SectionTitle ref={props.sections.downloads.ref}>{t('Preference.Downloads')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          {preference === undefined ? (
            <ListItem>{t('Loading')}</ListItem>
          ) : (
            <>
              <ListItem
                button
                onClick={() => {
                  window.service.native
                    .pickDirectory(preference.downloadPath)
                    .then(async (filePaths) => {
                      if (filePaths.length > 0) {
                        await window.service.preference.set('downloadPath', filePaths[0]);
                      }
                    })
                    .catch((error: Error) => {
                      console.log(error); // eslint-disable-line no-console
                    });
                }}>
                <ListItemText primary={t('Preference.DownloadLocation')} secondary={preference.downloadPath} />
                <ChevronRightIcon color="action" />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemText primary={t('Preference.AskDownloadLocation')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.askForDownloadPath}
                    onChange={async (event) => {
                      await window.service.preference.set('askForDownloadPath', event.target.checked);
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>
            </>
          )}
        </List>
      </Paper>
    </>
  );
}

AccountInformation = () => {
	const [account, isLoading] = useAccount()
	const businessType = account?.businessType
	const stripe = account?.stripe ?? {}


	if (isLoading) {
		return <DataLoading />
	}

	if (businessType === "company") {
		const info = stripe["company"] ?? {}
		return (
			<Box>
				<List>
					<ListItem button>
						<ListItemText
							primary="Name"
						/>
						<ListItemSecondaryAction>
							<Box display="flex" alignItems="center">

							</Box>
						</ListItemSecondaryAction>
					</ListItem>
				</List>
			</Box>
		)
	} else {
		const info = stripe["individual"] ?? {}
		const address = info.address ?? info.address_kanji
		return (
			<Box>
				<List>
					<ListItem>
						<ListItemText
							primary="Name"
							primaryTypographyProps={{ variant: "subtitle1" }}
						/>
						<ListItemSecondaryAction>
							<Typography variant="body1">{`${info.first_name} ${info.last_name}`}</Typography>
						</ListItemSecondaryAction>
					</ListItem>
					<ListItem>
						<ListItemText
							primary="Address"
							primaryTypographyProps={{ variant: "subtitle1" }}
						/>
						<ListItemSecondaryAction>
							<Typography variant="body1">{`${address.state}${address.city}${address.town}${address.line1}${address.line2 ?? ""}`}</Typography>
						</ListItemSecondaryAction>
					</ListItem>
					<ListItem>
						<ListItemText
							primary="E mail"
							primaryTypographyProps={{ variant: "subtitle1" }}
						/>
						<ListItemSecondaryAction>
							<Typography variant="body1">{`${info.email}`}</Typography>
						</ListItemSecondaryAction>
					</ListItem>
					<ListItem>
						<ListItemText
							primary="Phone"
							primaryTypographyProps={{ variant: "subtitle1" }}
						/>
						<ListItemSecondaryAction>
							<Typography variant="body1">{`${info.phone}`}</Typography>
						</ListItemSecondaryAction>
					</ListItem>
				</List>
			</Box>
		)
	}
}

LiveStreamListItem = (elem: FollowedLivestream) => {
    const classes = useStyles();
    const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
    const handlePopoverOpen = (event: React.MouseEvent<HTMLElement, MouseEvent>) => {
        setAnchorEl(event.currentTarget);
    };
    const [elapsedTime, setElapsedTime] = useState(getElapsedTime(elem.started_at));

    useEffect(() => {
        const timer = setInterval(() => {
            setElapsedTime(getElapsedTime(elem.started_at));
        }, 1000);

        return () => clearInterval(timer);
    }, [elem.started_at]);

    const handlePopoverClose = () => {
        setAnchorEl(null);
    };

    const open = Boolean(anchorEl);

    return (
        <>
            <ListItem
                className={classes.root}
                button
                component="a"
                target="_blank"
                rel="noopener noreferrer"
                href={elem.url}
                divider
                dense
                onMouseEnter={handlePopoverOpen}
                onMouseLeave={handlePopoverClose}
            >
                <ListItemAvatar>
                    <Avatar src={elem.profile_image_url} />
                </ListItemAvatar>
                <ListItemText
                    className={classes.streamerDiv}
                    primary={elem.display_name}
                    secondary={
                        <Typography
                            className={classes.gameText}
                            noWrap
                            variant={'subtitle2'}
                            color={'textSecondary'}
                        >
                            {elem.game}
                        </Typography>
                    }
                />
                <ListItemSecondaryAction>
                    <IconButton edge="end" disabled size={'small'}>
                        <Typography
                            noWrap
                            variant={'subtitle1'}
                            color={'textSecondary'}
                            className={classes.viewersText}
                        >
                            {formatViewers(elem.viewer_count)}
                        </Typography>
                        <ViewerIcon />
                    </IconButton>
                    <Typography
                        noWrap
                        variant={'subtitle2'}
                        color={'textSecondary'}
                        className={classes.elapsedTimeText}
                    >
                        {elapsedTime}
                    </Typography>
                </ListItemSecondaryAction>
            </ListItem>
            <PopperTitle title={elem.title} anchorEl={anchorEl} open={open} />
        </>
    );
}

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>
    );

}

Notification = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(
    null
  );

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

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

  const open = Boolean(anchorEl);
  const id = open ? "simple-popover" : undefined;

  const notifications: Notification[] = [
    {
      title: "a",
      subtitle: "a",
      variant: "error",
      link:
        "https://console.cloud.google.com/cloud-build/builds;region=global/f7b8fd9b-eb6e-401f-a889-73c4bf75f232?project=antler-vc",
    },
  ];

  const notificationsCount = notifications.length;
  return (
    <>
      <IconButton onClick={handleClick}>
        <Badge
          color={"primary"}
          variant="standard"
          badgeContent={notificationsCount}
        >
          <BellIcon />
        </Badge>
      </IconButton>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: "bottom",
          horizontal: "center",
        }}
        transformOrigin={{
          vertical: "top",
          horizontal: "center",
        }}
      >
        <List>
          {notifications.map((notification) => (
            <ListItem>
              <ListItemAvatar>
                <Avatar>
                  <ErrorIcon />
                </Avatar>
              </ListItemAvatar>
              <ListItemText
                primary={notification.title}
                secondary={notification.subtitle}
              />
              <ListItemSecondaryAction>
                <IconButton edge="end" aria-label="delete">
                  <DeleteIcon />
                </IconButton>
              </ListItemSecondaryAction>
            </ListItem>
          ))}
        </List>
      </Popover>
    </>
  );
}

Content = () => {
  const catalogApi = useApi(catalogApiRef);
  const catalogEntityRoute = useRouteRef(entityRouteRef);
  const { starredEntities, toggleStarredEntity } = useStarredEntities();

  // Grab starred entities from catalog to ensure they still exist and also retrieve display titles
  const entities = useAsync(async () => {
    if (!starredEntities.size) {
      return [];
    }

    const filter = [...starredEntities]
      .map(ent => parseEntityRef(ent))
      .map(ref => ({
        kind: ref.kind,
        'metadata.namespace': ref.namespace,
        'metadata.name': ref.name,
      }));

    return (
      await catalogApi.getEntities({
        filter,
        fields: [
          'kind',
          'metadata.namespace',
          'metadata.name',
          'metadata.title',
        ],
      })
    ).items;
  }, [catalogApi, starredEntities]);

  if (starredEntities.size === 0)
    return (
      <Typography variant="body1">
        You do not have any starred entities yet!
      </Typography>
    );

  if (entities.loading) {
    return <Progress />;
  }

  return entities.error ? (
    <ResponseErrorPanel error={entities.error} />
  ) : (
    <List>
      {entities.value
        ?.sort((a, b) =>
          (a.metadata.title ?? a.metadata.name).localeCompare(
            b.metadata.title ?? b.metadata.name,
          ),
        )
        .map(entity => (
          <ListItem key={stringifyEntityRef(entity)}>
            <Link to={catalogEntityRoute(entityRouteParams(entity))}>
              <ListItemText
                primary={entity.metadata.title ?? entity.metadata.name}
              />
            </Link>
            <ListItemSecondaryAction>
              <Tooltip title="Remove from starred">
                <IconButton
                  edge="end"
                  aria-label="unstar"
                  onClick={() => toggleStarredEntity(entity)}
                >
                  <StarIcon style={{ color: '#f3ba37' }} />
                </IconButton>
              </Tooltip>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
    </List>
  );
}

export default function AlgoliaFilters({
  index,
  request,
  requestDispatch,
  requiredFilters,
  label,
  filters,
  search = true,
}: IAlgoliaFiltersProps) {
  const classes = useStyles();

  // Store filter values
  const [filterValues, setFilterValues] = useState<Record<string, string[]>>(
    {}
  );
  // Push filter values to dispatch
  useEffect(() => {
    const filtersString = generateFiltersString(filterValues, requiredFilters);
    if (filtersString === null) return;
    requestDispatch({ filters: filtersString });
  }, [filterValues]);

  // Store facet values
  const [facetValues, setFacetValues] = useState<
    Record<string, readonly FacetHit[]>
  >({});
  // Get facet values
  useEffect(() => {
    if (!index) return;

    filters.forEach((filter) => {
      const params = { ...request, maxFacetHits: 100 };
      // Ignore current user-selected value for these filters so all options
      // continue to show up
      params.filters =
        generateFiltersString(
          { ...filterValues, [filter.facet]: [] },
          requiredFilters
        ) ?? "";

      index
        .searchForFacetValues(filter.facet, "", params)
        .then(({ facetHits }) =>
          setFacetValues((other) => ({ ...other, [filter.facet]: facetHits }))
        );
    });
  }, [filters, index, filterValues, requiredFilters]);

  // Reset filters
  const handleResetFilters = () => {
    setFilterValues({});
    setQuery("");
    requestDispatch({ filters: requiredFilters ?? "", query: "" });
  };

  // Store search query
  const [query, setQuery] = useState("");
  const [handleQueryChange] = useDebouncedCallback(
    (query: string) => requestDispatch({ query }),
    500
  );

  return (
    <div>
      <Grid container spacing={1} alignItems="center">
        <Grid item xs>
          <Typography variant="overline">
            Filter{label ? " " + label : "s"}
          </Typography>
        </Grid>

        <Grid item>
          <Button
            color="primary"
            onClick={handleResetFilters}
            className={classes.resetFilters}
            disabled={query === "" && Object.keys(filterValues).length === 0}
          >
            Reset Filters
          </Button>
        </Grid>
      </Grid>

      <Grid
        container
        spacing={2}
        alignItems="center"
        className={classes.filterGrid}
      >
        {search && (
          <Grid item xs={12} md={4} lg={3}>
            <TextField
              value={query}
              onChange={(e) => {
                setQuery(e.target.value);
                handleQueryChange(e.target.value);
              }}
              variant="filled"
              type="search"
              InputProps={{
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                ),
              }}
              aria-label={`Search${label ? " " + label : ""}`}
              placeholder={`Search${label ? " " + label : ""}`}
              hiddenLabel
              fullWidth
            />
          </Grid>
        )}

        {filters.map((filter) => (
          <Grid item key={filter.facet} xs={12} sm={6} md={4} lg={3}>
            <MultiSelect
              label={filter.label}
              value={filterValues[filter.facet] ?? []}
              onChange={(value) =>
                setFilterValues((other) => ({
                  ...other,
                  [filter.facet]: value,
                }))
              }
              options={
                facetValues[filter.facet]?.map((item) => ({
                  value: item.value,
                  label: filter.labelTransformer
                    ? filter.labelTransformer(item.value)
                    : item.value,
                  count: item.count,
                })) ?? []
              }
              itemRenderer={(option) => (
                <React.Fragment key={option.value}>
                  {option.label}
                  <ListItemSecondaryAction className={classes.count}>
                    <Typography
                      variant="body2"
                      color="inherit"
                      component="span"
                    >
                      {(option as any).count}
                    </Typography>
                  </ListItemSecondaryAction>
                </React.Fragment>
              )}
              searchable={facetValues[filter.facet]?.length > 10}
            />
          </Grid>
        ))}
      </Grid>
    </div>
  );
}

export function Sync(props: Required<ISectionProps>): JSX.Element {
  const { t } = useTranslation();

  const preference = usePreferenceObservable();

  return (
    <>
      <SectionTitle ref={props.sections.sync.ref}>{t('Preference.Sync')}</SectionTitle>
      <Paper elevation={0}>
        <List dense disablePadding>
          {preference === undefined ? (
            <ListItem>{t('Loading')}</ListItem>
          ) : (
            <>
              <ListItem>
                <TokenForm />
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemText primary={`${t('Preference.SyncBeforeShutdown')} (Mac/Linux)`} secondary={t('Preference.SyncBeforeShutdownDescription')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.syncBeforeShutdown}
                    onChange={async (event) => {
                      await window.service.preference.set('syncBeforeShutdown', event.target.checked);
                      props.requestRestartCountDown();
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>
              <ListItem>
                <ListItemText primary={`${t('Preference.SyncOnlyWhenNoDraft')}`} secondary={t('Preference.SyncOnlyWhenNoDraftDescription')} />
                <ListItemSecondaryAction>
                  <Switch
                    edge="end"
                    color="primary"
                    checked={preference.syncOnlyWhenNoDraft}
                    onChange={async (event) => {
                      await window.service.preference.set('syncOnlyWhenNoDraft', event.target.checked);
                    }}
                  />
                </ListItemSecondaryAction>
              </ListItem>
              <Divider />
              <ListItem>
                <ListItemText primary={t('Preference.SyncInterval')} secondary={t('Preference.SyncIntervalDescription')} />
                <TimePickerContainer>
                  <TimePicker
                    ampm={false}
                    openTo="hours"
                    views={['hours', 'minutes', 'seconds']}
                    inputFormat="HH:mm:ss"
                    mask="__:__:__"
                    renderInput={(timeProps) => <TextField {...timeProps} />}
                    value={fromUnixTime(preference.syncDebounceInterval / 1000 + new Date().getTimezoneOffset() * 60)}
                    onChange={async (date) => {
                      if (date === null) throw new Error(`date is null`);
                      const timeWithoutDate = setDate(setMonth(setYear(date, 1970), 0), 1);
                      const utcTime = (timeWithoutDate.getTime() / 1000 - new Date().getTimezoneOffset() * 60) * 1000;
                      await window.service.preference.set('syncDebounceInterval', utcTime);
                      props.requestRestartCountDown();
                    }}
                    onClose={async () => await window.service.window.updateWindowMeta(WindowNames.preferences, { preventClosingWindow: false })}
                    onOpen={async () => await window.service.window.updateWindowMeta(WindowNames.preferences, { preventClosingWindow: true })}
                  />
                </TimePickerContainer>
              </ListItem>
              <ListItem>
                <ListItemText
                  primary={`${t('Preference.MoreWorkspaceSyncSettings')} (Mac/Linux)`}
                  secondary={t('Preference.MoreWorkspaceSyncSettingsDescription')}
                />
              </ListItem>
            </>
          )}
        </List>
      </Paper>
    </>
  );
}