@material-ui/core#Typography TypeScript Examples

function Movie({ id, name, age_limit, ticket, bookMovie }: MovieProps) {
  const classes = useStyles();

  return (
    <Card className={classes.root} variant="outlined">
      <CardContent>
        <Typography className={classes.title} color="textSecondary" gutterBottom>
          {name}
        </Typography>
        <Typography className={classes.pos} color="textSecondary">
          age limit: {age_limit}
        </Typography>
      </CardContent>
      {
        ticket !== undefined
          ? (
            <CardActions>
              <Button size="small">Already Book</Button>
            </CardActions>
          )
          : (
            <CardActions onClick={() => bookMovie(id)}>
              <Button size="small">Reservation</Button>
            </CardActions>
          )
      }
    </Card>
  );
}

function GitHubGistWidget(props: WidgetArgs) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const [url, setURL] = useState<string>("");

  const setGistURL = useCallback(
    (url: string) => {
      try {
        const location = new URL(url);
        if (location.host !== "gist.github.com") {
          return;
        } else {
          props.setAttributes({
            url: location.origin + location.pathname,
          });
        }
      } catch (error) {}
    },
    [props]
  );

  if (props.attributes["url"]) {
    return (
      <Box className={"preview github-gist"} style={{ whiteSpace: "normal" }}>
        <Gist url={props.attributes["url"]}></Gist>
        {!props.isPreview && (
          <Box className={clsx(classes.actionButtonsGroup)}>
            <IconButton onClick={() => props.removeSelf()}>
              <TrashCanOutline></TrashCanOutline>
            </IconButton>
          </Box>
        )}
      </Box>
    );
  }

  if (props.isPreview) {
    return null;
  }

  return (
    <Card elevation={2} className={clsx(classes.card)}>
      <Typography variant={"h5"}>
        {t("widget/crossnote.github_gist/title")}
      </Typography>
      <TextField
        label={t("widget/crossnote/github_gist/enter-github-gist-url")}
        placeholder={"https://gist.github.com/..."}
        value={url}
        onChange={(event) => setURL(event.target.value)}
        fullWidth={true}
        onKeyUp={(event) => {
          if (event.which === 13) {
            setGistURL(url);
          }
        }}
      ></TextField>
      <Box className={clsx(classes.actionButtonsGroup)}>
        <Tooltip title={t("general/Delete")}>
          <IconButton onClick={() => props.removeSelf()}>
            <TrashCan></TrashCan>
          </IconButton>
        </Tooltip>
      </Box>
    </Card>
  );
}

UserComment = ({ activity }: { activity: Activity }) => {
	const theme = useTheme();
	const time = Dayjs(activity.createdAt.toDate()).fromNow()
	const [user] = useDocumentListen<Social.User>(Social.User, Social.User.collectionReference().doc(activity.authoredBy))
	return (
		<Box display="flex" paddingY={1}>
			<Box>
				<Avatar variant="circle">
					<ImageIcon />
				</Avatar>
			</Box>
			<Box
				flexGrow={1}
				border={1}
				borderColor={theme.palette.grey[300]}
				borderRadius={8}
				marginLeft={2}
			>
				<Box display="flex"
					style={{
						background: theme.palette.grey[100]
					}}
				>
					<Box display="flex" padding={2} paddingY={1}>
						<Typography>{user?.name || activity.authoredBy}</Typography>
						<Box paddingX={1} color="text.secondary">commented on {time}</Box>
					</Box>
				</Box>
				<Box padding={2}>
					<Typography variant="body1" display="inline">{activity.comment?.text}</Typography>
				</Box>
			</Box>
		</Box>
	)
}

export default function AuthLayout({ children, loading }: IAuthLayoutProps) {
  const classes = useStyles();

  return (
    <Div100vh className={classes.root} style={{ minHeight: "100rvh" }}>
      <Paper className={classes.paper}>
        <Typography variant="h4" component="h1" className={classes.wordmark}>
          firetable
        </Typography>
        <Typography variant="overline" className={classes.projectName}>
          {process.env.REACT_APP_FIREBASE_PROJECT_ID}
        </Typography>
        {children}

        {loading && <LinearProgress className={classes.progress} />}
      </Paper>
    </Div100vh>
  );
}

export default function ExperimentCodeSetup(): JSX.Element {
  const classes = useStyles()
  return (
    <Paper className={classes.root}>
      <Typography variant='h4'>Experiment Code Setup</Typography>
      <br />
      <Typography variant='body1'>
        See{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#writing-the-controlvariant-code-experiences"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the wiki
        </Link>{' '}
        for platform-specific instructions.
      </Typography>
      <br />
      <Typography variant='body1'>
        When testing manually, note that <strong>changes may take up to ten minutes to propagate</strong> due to{' '}
        <Link
          href="https://github.com/Automattic/experimentation-platform/wiki/Experimenter's-Guide#the-file-system-cache"
          rel='noopener noreferrer'
          target='_blank'
          underline='always'
        >
          the file system assignment cache
        </Link>
        . As specified in the wiki, you will need to run <Code>svn up</Code> to update your sandbox copy of the cache to
        reflect the latest changes.
      </Typography>
    </Paper>
  )
}

LandingPage = () => {
  const logout = useLogout();
  return (
    <>
      <Typography variant="h3">You&#39;re authed!</Typography>
      <Button variant="contained" size="large" color="primary" onClick={logout}>
        Log out
      </Button>
    </>
  );
}

LatestBlock = (props: {block: BlockInfo}) => {

    return (
        <Card>
            <CardHeader title="Latest block"/>
            <CardContent>
                <Grid container alignItems="center">
                    <Grid item md={6} xs={12}>
                        <Typography variant="h6">Block number:</Typography>
                        <Typography variant="subtitle2">{props.block.number}</Typography>
                        <Divider light/>
                        <Box m={"0.5rem"}/>
                        <Typography variant="h6">Hash:</Typography>
                        <Typography variant="subtitle2">{props.block.hash}</Typography>
                    </Grid>
                </Grid>
            </CardContent>
        </Card>
    );
}

ButtonActionCreator: React.FC<{ buttonDuration: ButtonPress }> = ({ buttonDuration }) => {
    const draggableId = uuidv4();

    return (
        <Droppable droppableId="PALETTE" direction="horizontal" isDropDisabled={true}>
            {(provided, _snapshot) => (
                <div ref={provided.innerRef} {...provided.droppableProps}>
                    <Box width={1} style={{ display: 'inline-flex', verticalAlign: 'middle', alignItems: 'center' }}>
                        <Draggable key={draggableId} draggableId={draggableId} index={buttonDuration as number}>

                            {(provided, snapshot) => (
                                <Box style={{ width: 50, height: 50 }}>
                                    <div
                                        style={{ width: 50, height: 50 }}
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}>

                                        <ButtonPressIcon press={buttonDuration} isButton={true} />
                                    </div>
                                    {snapshot.isDragging &&
                                        <ButtonPressIcon press={buttonDuration} isButton={true} />
                                    }
                                </Box>
                            )}
                        </Draggable>


                        <Typography>
                            {buttonDuration === ButtonPress.Short ? "Short button press" : "Long button press"}
                        </Typography>
                    </Box>
                </div>
            )}
        </Droppable>
    );
}

MessageBlock = (props: IMessageBlockProps) => {
  const classes = useStyles();

  if (props.messages.length === 0) return (<div />);
  const firstMessage = props.messages[0];
  const ownMessage = firstMessage.author === me;
  const systemMessage = firstMessage.author === system;
  const alignment = ownMessage ? classes.messageRight : classes.messageLeft;
  const className = ownMessage ? classes.ownMessage : classes.receivedMessage;

  return (
    <Box className={alignment}>
      <Box className={classes.messageAuthorImg}>
        {
          ownMessage ? "" : <img className={classes.auhtorImg} src={firstMessage.author.avatar} width="40" />
        }
      </Box>
      <Box className={classes.messageContent} textAlign={ownMessage ? "right" : "left"}>
        <Box className={classes.participantNameMessage}><Typography variant="caption">{firstMessage.author.username} {firstMessage.date}</Typography></Box>
        {
          props.messages.map((m, i) => {
            return (
              <Box key={i} className={classes.messageChip}>
                {
                  m.type === "message" ? MessageChip(m.content, className) : NotificationChip(m.content)
                }
              </Box>
            );
          })
        }
      </Box>
    </Box>
  );
}

render() {
    const { width, height, margin } = this.props
    return (
      <div className="histogram">
        <Typography id="discrete-slider" gutterBottom>
          2020 Eth Price days/price Histogram Chart
        </Typography>
        <svg height={height + margin.top + margin.bottom} width={width + margin.left + margin.right}>
          <text x={margin.left - 35} y={margin.top - 10} fontSize={10}>
            Days
          </text>
          <text x={width + margin.left + 20} y={height + margin.top + 16} fontSize={10}>
            Price
          </text>
          <g className="histogramChart" transform={`translate(${margin.left},${margin.top})`} />
        </svg>
        <div className="sliderDiv">
          <Typography id="discrete-slider" gutterBottom>
            Number of ticks:
          </Typography>
          <Slider
            defaultValue={this.state.numberOfTicks}
            getAriaValueText={(value: number) => {
              return `${value} ticks`
            }}
            valueLabelDisplay="auto"
            min={10}
            max={85}
            onChange={this.handleChange}
          />
        </div>
      </div>
    )
  }

private _renderEntries() {
    return this.state.entries.map((entry, index) => {
      return (
        <React.Fragment key={`${entry.id}-fragment`}>
          {index ? <Divider /> : undefined}
          <ListItem
            key={`${entry.id}-listItem`}
            className={classes(logEntryClass)}
          >
            <Typography
              className={classes(logEntryTimeClass)}
              color="textSecondary"
              variant="body2"
              key={`${entry.id}-timestamp`}
            >
              {entry.date.toTimeString().split(' ')[0]}
            </Typography>
            <Typography
              className={classes(logEntryValueClass)}
              color={entry.error ? 'error' : 'textPrimary'}
              variant="body2"
              key={`${entry.id}-value`}
              component="div"
            >
              {entry.value}
            </Typography>
          </ListItem>
        </React.Fragment>
      );
    });
  }

export default function GameEnded({ game, players }: { game: any, players: any }) {
  const { user } = useContext(UserContext);
  const winners = useMemo(() => {
    return game.winner.map((winner: string) => players.find((player: any) => player._id === winner));
  }, [game, players]);

  useEffect(() => {
    (window as any)?.gtag('event', 'game_ended');
  }, []);

  return <div className="game-ended-container">
    <Typography variant="h3" className="game-ended-header">
      Game over!
    </Typography>
    <div className="winners-container">
      {winners?.length ? winners.map(({ username, score }: any) => {
        return <Typography variant="h4" key={username}>
          {username === user?.username ? "You win!" : `${username} wins!`} with {score} points
      </Typography>
      }) : null}
    </div>
    <div className="content-wrapper">
      <Typography variant="body1">
        If you enjoyed the game and would like to help keep the servers alive, please consider buying me a coffee.
      </Typography>
      <Button onClick={() => window.open("https://www.buymeacoffee.com/cards")} color="primary" variant="contained">Buy me a coffee</Button>
    </div>
  </div>
}

export function LinearProgressWithLabel(props: LinearProgressProps & { value: number; min: number; max: number; }) {
  return props.value > 0 ? (
      <div style={{ width: '98%' }}>
        <Box display="flex" alignItems="center">
          <Box width="100%" mr={1}>
            <LinearProgress variant="determinate" value={normalise(props.value, props.min, props.max)} />
          </Box>
          <Box minWidth={35} style={{ whiteSpace: "nowrap" }}>
            <Typography variant="body2" color="textSecondary">
              {`${Math.round(normalise(props.value, props.min, props.max))}% (${props.value}/${props.max})`}
            </Typography>
          </Box>
        </Box>
      </div>
  ) : null;
}

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

AboutThisApp: React.FC<AboutThisAppProps> = props => {
    return (
        <Dialog open={props.visible} style={{ userSelect: 'none', textAlign: 'center' }}>
            <DialogContent>
                <AppIcon src={infoIcon} alt="SpaceEye icon" />
                <Typography variant="h6">SpaceEye</Typography>
                <Typography variant="body2" style={{ userSelect: 'text' }}>
                    Version {APP_VERSION}
                </Typography>
                <Typography variant="body2">Copyright &copy; 2020 Michael Galliers</Typography>
                <Typography variant="body2">License: {APP_LICENSE}</Typography>
                <Link
                    component="button"
                    variant="body2"
                    onClick={() => shell.openExternal(APP_BUGS_URL)}
                >
                    Report bugs
                </Link>
                <DialogActions>
                    <Button
                        onClick={() =>
                            shell.openPath(path.join(process.resourcesPath, 'legal_notices.txt'))
                        }
                    >
                        Acknowledgements
                    </Button>
                    <Button onClick={props.onClickDone}>Done</Button>
                </DialogActions>
            </DialogContent>
        </Dialog>
    )
}

BankAccountListItem: React.FC<BankAccountListItemProps> = ({
  bankAccount,
  deleteBankAccount,
}) => {
  return (
    <ListItem data-test={`bankaccount-list-item-${bankAccount.id}`}>
      <Grid container direction="row" justify="space-between" alignItems="flex-start">
        <Grid item>
          <Typography variant="body1" color="primary" gutterBottom>
            {bankAccount.bankName} {bankAccount.isDeleted ? "(Deleted)" : undefined}
          </Typography>
        </Grid>
        {!bankAccount.isDeleted && (
          <Grid item>
            <Button
              variant="contained"
              color="secondary"
              size="large"
              data-test="bankaccount-delete"
              onClick={() => {
                deleteBankAccount({ id: bankAccount.id });
              }}
            >
              Delete
            </Button>
          </Grid>
        )}
      </Grid>
    </ListItem>
  );
}

NewsAppBar = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <IconButton
            edge="start"
            className={classes.menuButton}
            color="inherit"
            area-label="menu"
          >
            <MenuIcon />
          </IconButton>
          <Typography variant="h6" className={classes.title}>
            News
          </Typography>
          <NewsMenu />
        </Toolbar>
      </AppBar>
    </div>
  );
}

function KanbanColumnHeaderDisplay(props: KanbanColumnHeaderProps) {
  const classes = useStyles(props);
  const { t } = useTranslation();
  const column = props.column;
  const board = props.board;
  const isPreview = props.isPreview;
  const refreshBoard = props.refreshBoard;
  const [clickedTitle, setClickedTitle] = useState<boolean>(false);
  const [titleValue, setTitleValue] = useState<string>(column.title);

  useEffect(() => {
    if (!clickedTitle && titleValue !== column.title) {
      column.title = titleValue || t("general/Untitled");
      setTitleValue(column.title);
      refreshBoard(board);
    }
  }, [clickedTitle, board, column.title, titleValue, t, refreshBoard]);

  return (
    <Box className={clsx(classes.columnHeader)}>
      <Box>
        {clickedTitle ? (
          <TextField
            value={titleValue}
            onChange={(event) => {
              setTitleValue(event.target.value);
            }}
            onBlur={() => {
              setClickedTitle(false);
            }}
            onKeyUp={(event) => {
              if (event.which === 13) {
                setClickedTitle(false);
              }
            }}
          ></TextField>
        ) : (
          <Typography
            variant={"body1"}
            style={{ cursor: "text" }}
            onClick={() => {
              if (!isPreview) {
                setClickedTitle(true);
              }
            }}
          >
            {titleValue}
          </Typography>
        )}
      </Box>
      {!isPreview && (
        <Box>
          <IconButton
            onClick={() => {
              const card: KanbanCard = {
                id: Date.now(),
                title: "", //"Card " + column.cards.length,
                description: t("general/empty"),
              };
              if (column) {
                column.cards.push(card);
              }
              props.refreshBoard(board);
            }}
          >
            <CardPlus></CardPlus>
          </IconButton>
          <IconButton
            onClick={() => {
              board.columns = board.columns.filter((l) => column.id !== l.id);
              props.refreshBoard(board);
            }}
          >
            <Close></Close>
          </IconButton>
        </Box>
      )}
    </Box>
  );
}

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

BetaBanner = () => {
  const [isBetaBarVisible, setIsBetaBarVisible] = useState(false);
  const classes = useStyles();

  useEffect(() => {
    const isBetaBarSeen = localStorage.getItem("isBetaBarSeen");
    setIsBetaBarVisible(isBetaBarSeen === null ? true : false);
  }, []);

  const hideIsBetaBarVisible = () => {
    localStorage.setItem("isBetaBarSeen", "true");
    setIsBetaBarVisible(false);
  };

  return (
    <>
      {isBetaBarVisible && (
        <AppBar position="static" color="default" className={classes.root}>
          <Toolbar>
            <Chip label="BETA" color="primary" className={classes.betaChip} />
            <div className={classes.betaText}>
              <Box marginBottom=".5rem">
                <Typography variant="body2">
                  Akashlytics Deploy is now currently in open BETA.
                </Typography>
              </Box>
              <Button
                component={Link}
                to="/deploy"
                variant="contained"
                size="small"
                onClick={() => hideIsBetaBarVisible()}
              >
                Take a look!
              </Button>
            </div>

            <div className={classes.grow} />
            <IconButton
              aria-label="Close beta app bar"
              color="inherit"
              onClick={() => hideIsBetaBarVisible()}
            >
              <CloseIcon />
            </IconButton>
          </Toolbar>
        </AppBar>
      )}
    </>
  );
}

export default function FirebaseUi(props: Partial<FirebaseUiProps>) {
  const classes = useStyles();

  const [signInOptions, setSignInOptions] = useState<
    Parameters<typeof getSignInOptions>[0] | undefined
  >();
  useEffect(() => {
    db.doc("/_FIRETABLE_/publicSettings")
      .get()
      .then((doc) => {
        const options = doc?.get("signInOptions");
        if (!options) {
          setSignInOptions(["google"]);
        } else {
          setSignInOptions(options);
        }
      })
      .catch(() => setSignInOptions(["google"]));
  }, []);

  if (!signInOptions)
    return (
      <div
        id="firetable-firebaseui-skeleton"
        className={classes.skeleton}
        style={{ marginBottom: 0 }}
      >
        <Skeleton variant="rect" />
      </div>
    );

  const uiConfig: firebaseui.auth.Config = {
    ...defaultUiConfig,
    ...props.uiConfig,
    callbacks: {
      uiShown: () => {
        const node = document.getElementById("firetable-firebaseui-skeleton");
        if (node) node.style.display = "none";
      },
      ...props.uiConfig?.callbacks,
    },
    signInOptions: getSignInOptions(signInOptions),
  };

  return (
    <>
      <Typography variant="button" className={classes.signInText}>
        Sign in with
      </Typography>

      <div id="firetable-firebaseui-skeleton" className={classes.skeleton}>
        {Object.keys(signInOptions).map((_, i) => (
          <Skeleton key={i} variant="rect" />
        ))}
      </div>

      <StyledFirebaseAuth
        {...props}
        firebaseAuth={auth}
        uiConfig={uiConfig}
        className={clsx("firetable-firebaseui", props.className)}
      />
    </>
  );
}

export default function HealthIndicatorTable({
  className,
  indicators,
}: {
  className?: string
  indicators: HealthIndicator[]
}): JSX.Element {
  const classes = useStyles()
  const decorationClasses = useDecorationStyles()
  return (
    <TableContainer className={className}>
      <Table className={classes.table} aria-label='simple table'>
        <TableHead>
          <TableRow>
            <TableCell>Name</TableCell>
            <TableCell>Unit</TableCell>
            <TableCell>Value</TableCell>
            <TableCell>{/* Indication Emoji */}</TableCell>
            <TableCell>Indication</TableCell>
            <TableCell>Reason</TableCell>
            <TableCell>Recommendation</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {indicators.map((indicator) => (
            <TableRow key={indicator.name}>
              <TableCell scope='row'>
                <Link href={indicator.link} target='_blank'>
                  {indicator.name}
                </Link>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.unit === HealthIndicatorUnit.Pvalue ? (
                  <Tooltip title='The smaller the p-value the more likely there is an issue.'>
                    <span className={decorationClasses.tooltipped}>p-value</span>
                  </Tooltip>
                ) : (
                  <span>{indicator.unit}</span>
                )}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.value.toFixed(4)}
              </TableCell>
              <TableCell scope='row'>
                <span>{severityEmoji[indicator.indication.severity]}</span>
              </TableCell>
              <TableCell
                scope='row'
                className={clsx(
                  classes.indication,
                  classes[indicationSeverityClassSymbol(indicator.indication.severity)],
                  classes.monospace,
                  classes.nowrap,
                )}
              >
                <span>{indicator.indication.code}</span>
              </TableCell>
              <TableCell scope='row' className={clsx(classes.monospace, classes.deemphasized, classes.nowrap)}>
                {indicator.indication.reason}
              </TableCell>
              <TableCell scope='row' className={clsx(classes.deemphasized, classes.recommendation)}>
                <Typography variant='body1'>{indicator.indication.recommendation}</Typography>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  )
}

SnackbarNotification = () => {
  const classes = useStyles({});
  const {
    isOpen,
    message,
    variant,
    closeNotification,
  } = useSnackbarNotification();

  return (
    <Snackbar
      anchorOrigin={{
        vertical: "bottom",
        horizontal: "center",
      }}
      TransitionComponent={SlideTransition}
      open={isOpen}
      autoHideDuration={5000}
      onClose={closeNotification}
      className={classes.root}
    >
      <SnackbarContent
        classes={{
          root: clsx(classes.snackbarContent, classes[variant]),
          message: classes.message,
        }}
        message={
          <>
            <Typography variant="body1" className={classes.messageText}>
              {message}
            </Typography>
            <IconButton
              key="close"
              color="inherit"
              onClick={closeNotification}
              className={classes.closeButton}
            >
              <X />
            </IconButton>
          </>
        }
      />
    </Snackbar>
  );
}

renderImportForm() {
    const form = this.accountForm as ImportAccountFormData;
    return (
      <form className={this.props.classes.root}>
        <FormControl>
          <Typography id="continuous-slider" gutterBottom>
            Private Key File
          </Typography>
          <Box
            display={'flex'}
            flexDirection={'row'}
            alignItems={'center'}
            m={1}
          >
            <Button
              id={'private-key-uploader'}
              variant="contained"
              color="primary"
              component="label"
            >
              Upload
              <input
                type="file"
                style={{ display: 'none' }}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                  form.handleFileSelect(e)
                }
              />
            </Button>
            <Box ml={1}>
              <Typography>
                <Box fontSize={12}>
                  {form.file ? form.file.name : 'No file selected'}
                </Box>
              </Typography>
            </Box>
          </Box>
        </FormControl>
        <TextFieldWithFormState
          fullWidth
          label="Name"
          placeholder="Human Readable Alias"
          id="import-name"
          fieldState={this.accountForm.name}
        />
        <FormControl fullWidth className={this.props.classes.importButton}>
          <Button
            disabled={this.accountForm.submitDisabled}
            color="primary"
            variant={'contained'}
            onClick={() => {
              this.onImportAccount();
            }}
          >
            Import
          </Button>
        </FormControl>
      </form>
    );
  }

SignMessage = () => {
    const [textFieldValue, setTextFieldValue] = useState<string>("");
    const [modalBody, setModalBody] = useState<string>("");
    const [modalOpen, setModalOpen] = useState<boolean>(false);

    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setTextFieldValue(event.target.value);
      };

    const onSubmit = async () => {
        if(textFieldValue) {
            const extension = await getInjectedMetamaskExtension();
            if(extension && extension.signer && extension.signer.signRaw) {

                const messageAsHex = stringToHex(textFieldValue);
                const address = (await web3Accounts())[0].address

                const messageSignResponse = await extension.signer.signRaw({
                    data: messageAsHex,
                    address: address,
                    type: "bytes"
                });
                setTextFieldValue("");
                setModalBody(messageSignResponse.signature);
                setModalOpen(true);
            }
        }
    }

    return (
        <Card style={{height: "100%"}}>
            <CardHeader title="Sign custom message"/>
            <CardContent>
                <Grid container>
                    <TextField 
                    onChange={handleChange} 
                    value={textFieldValue} 
                    size="medium" 
                    fullWidth 
                    id="recipient" 
                    label="Message" 
                    variant="outlined" 
                    />
                </Grid>
                <Box m="0.5rem" />
                <Grid container justify="flex-end">
                    <Button onClick={onSubmit} color="secondary" variant="contained" size="large">Sign</Button>
                </Grid>
            </CardContent>
            <Dialog
                open={modalOpen}
                onClose={() => setModalOpen(false)}
                aria-labelledby="alert-dialog-title"
                aria-describedby="alert-dialog-description"
            >
                <DialogTitle id="alert-dialog-title">{"Message signature"}</DialogTitle>
                <DialogContent>
                    <DialogContentText id="alert-dialog-description">
                        This is signature of your message:<br/>
                        <Typography style={{ wordWrap: "break-word" }}>{modalBody}</Typography>
                    </DialogContentText>
                </DialogContent>
                <DialogActions>
                    <Button onClick={() => setModalOpen(false)} color="primary" autoFocus>
                        OK
                    </Button>
                </DialogActions>
            </Dialog>
        </Card>
    );
}

MonitoringCard: React.FC = () => {
    const [open, setOpen] = React.useState(false);
    const metrics = useSelector((state: RootState) => state.monitoring.activeMetrics);

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

    const cardActions = (
        <Box>
            <Tooltip title="Select metrics" placement="left">
                <IconButton aria-label="delete" color="default" onClick={handleOpen}>
                    <SettingsIcon />
                </IconButton>
            </Tooltip>
        </Box>
    );

    const activeMetrics = Object.keys(metrics)
        .filter(m => metrics[m as MonitoringMetric].active);

    const computeChartWidth = (len: number, idx: number) => {
        if (len > 1) {
            return (((idx % 2) === 0) && (idx === len - 1) ? '100%' : '50%');
        } else {
            return '100%';
        }
    }

    const charts = activeMetrics.map((metric, index) => (
        <Box width={computeChartWidth(activeMetrics.length, index)}>
            <MetricChart metric={metric as MonitoringMetric} key={`chart-${metric as string}`} />
        </Box>
    ));

    const noSelected = (charts.length === 0) && (
        <Box display="flex" justifyContent="center">
            <Typography>No metric selected.</Typography>
        </Box>
    );

    return (
        <MainCard title="Monitoring" actions={cardActions}>
            <MonitoringDialog open={open} onClose={handleClose} />
            <Box display="flex" flexWrap="wrap" width="100%" p={1}>
                {charts}
            </Box>

            {noSelected}
        </MainCard>
    );
}

Challenge = (props: IChallengeContainerProps) => {

  const [flag, _setFlag] = useState("");
  const [warning, setWarning] = useState("");
  const { setChallengesDone } = useContext(LayoutContext);
  const history = useHistory();

  const challengeData = props.obj || { description: "", explanation: "", name: "", objective: "", url: "" };
  const Component = props.obj.component;


  const setFlag = (flg: string) => {
    if (validFlag(flg)) {
      _setFlag(flg);
      ProgressService.updateProgress(props.obj.url, flg);
    }

    setChallengesDone(ProgressService.done());
  };

  const resetChallenge = () => {
    _setFlag("");
    ProgressService.updateProgress(props.obj.url, "");
    setChallengesDone(ProgressService.done());
  };

  const onGoToDocsClicked = (path: string) => {
    return () => history.push(path);
  };

  const displayWarning = () => {
    return (
      <Box>
        <AppBar position="static" className={classes.warningTitle}>
          <Typography variant="h6">Warning</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.warning}>
          {warning.split("\n").map((l, i) => <Typography key={i}>{l}</Typography>)}
        </Paper>
      </Box>
    );
  };

  useEffect(() => {
    const f = ProgressService.getFoundFlag(props.obj.url);
    setFlag(f);
  }, []);


  const classes = useStyles();

  return (
    <Grid container spacing={3}>
      <Grid item md={8}>

        <Paper className={classes.mainContainer}>
          <Typography variant="h4" gutterBottom className={classes.title}> {challengeData.name}</Typography>
          <Component flag={flag} setFlag={setFlag} setWarning={setWarning} />
        </Paper>
      </Grid>
      <Grid item md={4}>
        <Flag flag={flag} resetChallenge={resetChallenge} />

        {warning ? displayWarning() : ""}

        <AppBar position="static" className={classes.documentationTitle}>
          <Typography variant="h6">Docs</Typography>
        </AppBar>
        <Paper role="tabpanel" className={classes.documentation}>
          <Typography>If you are having trouble with this challenge take a look at our documentation <Link to={"docs" + props.obj.url}>here</Link> </Typography>
        </Paper>
      </Grid>
    </Grid>
  );
}

ClientListDetail = (props: IClientListDetailProps) => {
  const classes = useStyles(props)
  const handleNext = () => {
    const index = props.data.indexOf(props.selectedItem)
    let nextItem
    if (index < props.data.length - 1) {
      nextItem = props.data[index + 1]
    } else {
      // eslint-disable-next-line prefer-destructuring
      nextItem = props.data[0]
    }
    props.setSelectedItem(nextItem)
  }
  const handlePrevious = () => {
    const index = props.data.indexOf(props.selectedItem)
    let nextItem
    if (index > 0) {
      nextItem = props.data[index - 1]
    } else {
      nextItem = props.data[props.data.length - 1]
    }
    props.setSelectedItem(nextItem)
  }
  return (
    <div className={classes.root}>
      <ListItem>
        <Button
          size="medium"
          color="primary"
          className={classes.button}
          startIcon={<ChevronLeftIcon />}
          onClick={() => {
            handlePrevious()
          }}
        />
        <img className="about-image" src={profileImage} alt="Eli Elad Elrom" />
        <ListItemText
          primary={props.selectedItem?.name}
          secondary={
            <>
              <Typography component="span" variant="body2" className={classes.inline} color="textPrimary">
                {props.selectedItem?.city}, {props.selectedItem?.state} {props.selectedItem?.country}
              </Typography>
              <br />
              Eli helped {props.selectedItem?.name} with - {props.selectedItem?.description} - visit them on the web:{' '}
              <a href={props.selectedItem?.website} target="_blank" rel="noopener noreferrer">
                {props.selectedItem?.website}
              </a>
            </>
          }
        />
        <Button
          size="medium"
          color="primary"
          className={classes.button}
          startIcon={<ChevronRightIcon />}
          onClick={() => {
            handleNext()
          }}
        />
      </ListItem>
    </div>
  )
}

render() {
    const comments = this.props.commentsList.map((comment, index) => (
      <div key={index}>
        <Comment reviewComment={comment} file={this.props.file} />
        <Divider />
      </div>
    ));
    const reviewTimeStamp = timeAgo(
      new Date().getTime(),
      this.props.reviewRequest.timestamp
    );
    return (
      <List
        subheader={
          <Grid container direction="column" spacing={0}>
            <Grid container direction="row" spacing={0}>
              <Grid item style={style.reviewIcon}>
                <RateReviewIcon color="primary" />
              </Grid>
              <Grid item>
                <Typography
                  color="primary"
                  style={style.commentListHeader}
                  gutterBottom
                >
                  {'Review requested: ' + this.props.reviewRequest.description}
                </Typography>
              </Grid>
            </Grid>
            <Grid item>
              <Typography
                color="primary"
                style={style.commentListDescription}
                gutterBottom
              >
                {'Requested by: ' + this.props.reviewRequest.requester}
              </Typography>
            </Grid>
            <Grid item>
              <Typography color="primary" style={style.commentListDescription}>
                {'Opened ' + reviewTimeStamp}
              </Typography>
            </Grid>
          </Grid>
        }
      >
        {' '}
        {comments}{' '}
      </List>
    );
  }