@material-ui/core#CardHeader JavaScript Examples

export default function AppTasks() {
  const formik = useFormik({
    initialValues: {
      checked: [TASKS[2]]
    },
    onSubmit: (values) => {
      console.log(values);
    }
  });

  const { values, handleSubmit } = formik;

  return (
    <Card>
      <CardHeader title="Tasks" />
      <Box sx={{ px: 3, py: 1 }}>
        <FormikProvider value={formik}>
          <Form autoComplete="off" noValidate onSubmit={handleSubmit}>
            {TASKS.map((task) => (
              <TaskItem
                key={task}
                task={task}
                formik={formik}
                checked={values.checked.includes(task)}
              />
            ))}
          </Form>
        </FormikProvider>
      </Box>
    </Card>
  );
}

PieCard = ({ title, subtitle, data }) => {
  const classes = useStyles();
  return (
    <Card className={classes.statistic}>
      <CardHeader title={title} subheader={subtitle} />
      <CardContent>
        <Chart data={data} height={200}>
          <PieSeries valueField="value" argumentField="title" innerRadius={0.6} />
          <Legend />
          <EventTracker />
          <Tooltip />
          <Animation />
        </Chart>
      </CardContent>
    </Card>
  );
}

TicketInfo = ({ contact, ticket, onClick }) => {
	return (
		<CardHeader
			onClick={onClick}
			style={{ cursor: "pointer" }}
			titleTypographyProps={{ noWrap: true }}
			subheaderTypographyProps={{ noWrap: true }}
			avatar={<Avatar src={contact.profilePicUrl} alt="contact_image" />}
			title={`${contact.name} #${ticket.id}`}
			subheader={
				ticket.user &&
				`${i18n.t("messagesList.header.assignedTo")} ${ticket.user.name}`
			}
		/>
	);
}

Post = ({ post, onCommentChange, onLike }) => {
  const firstCharacter = post.userName[0].toUpperCase();
  return (
    <Card className="ins-post">
      <Link
        to={`/profile/${post.userName}`}
        className="profile-navigation-link"
      >
        <CardHeader
          avatar={
            <Avatar style={{ background: getBackgroundColor(firstCharacter) }}>
              {firstCharacter || '-'}
            </Avatar>
          }
          title={post.userName}
        />
      </Link>
      <img
        className="ins-post-media"
        src={post.media}
        title={post.content}
        alt={post.title}
      />
      <CardActions disableSpacing>
        <IconButton aria-label="add to favorites" onClick={onLike}>
          <FavoriteBorderOutlined />
        </IconButton>
      </CardActions>
      <CardContent className="comments-section">
        <b>{`${post.likes || 0} Likes`}</b>
        {post.comment.map((c) => (
          <Comment {...c} />
        ))}
      </CardContent>
      <AddComment onCommentChange={onCommentChange} />
    </Card>
  );
}

render() {

        const { classes, open } = this.state;

        return (
            <Dialog className={classes.thanksCard} open={open} onClick={this.props.accept} onClose={(event) => {this.props.onClose(event)}}>
                <CardActionArea className={classes.thanksCardArea}>
                    <CardHeader className={classes.thanksCardHeader}>
                        Thanks !
                    </CardHeader>
                    <CardContent className={classes.thanksCardContent}>
                        <div className={classes.thanksCardImage} />
                        Thanks for your engagement, we appreciate it a lot,
                        We have a new friend or user, do you want to join with a new person?
                    </CardContent>
                    <KindlyHappyEmojiIcon className={classes.thanksEmoji} />
                    <div className={classes.thanksButtonContainer}>
                        <Button color="primary" variant={"contained"} className={classes.thanksButton}>Invite a friend</Button>
                    </div>
                </CardActionArea>
            </Dialog>
        );
    }

AccountDetails = props => {
  const { className, ...rest } = props;
  const { user } = useUser();
  const classes = useStyles();

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <form
        autoComplete="off"
        noValidate
      >
        <CardHeader
          title="Linked Accounts"
        />
        <Divider />
        <CardContent>
          <Typography gutterBottom>
            If you are the owner of any organizations or repos, revoking your GitHub authorization will result in an interruption of service. No new commits will be imported.
          </Typography>
          <Button
            variant="outlined"
            color="primary"
            className={classes.button}
            startIcon={<Github />}
            href={`https://github.com/settings/installations/${user.githubAppId}`}
            target='_blank'
          >
            Manage Github Connection
          </Button>
        </CardContent>
      </form>
    </Card>
  );
}

export default function AppTrafficBySite() {
  return (
    <Card>
      <CardHeader title="Traffic by Site" />
      <CardContent>
        <Grid container spacing={2}>
          {SOCIALS.map((site) => (
            <SiteItem key={site.name} site={site} />
          ))}
        </Grid>
      </CardContent>
    </Card>
  );
}

export default function Widget(props) {
  const { children, title } = props;
  return (
    <Card elevation={0}>
      <CardHeader
        action={
          <IconButton aria-label="settings">
            <MoreVertIcon />
          </IconButton>
        }
        title={title}
      />
      <Divider light />
      <CardContent>{children}</CardContent>
      <Divider light />
    </Card>
  );
}

export default function ProjectCard ({ pub, is_review }) {
  const classes = useStyles()
  return (
    <>
      <Card>
        <ButtonBase
          target="_blank"
          component={RouterLink}
          to={'/project?save_id=' + pub.save_id + '&version=' + pub.active_version + '&branch=' + pub.active_branch + '&project_id=' + pub.project_id}
          style={{ width: '100%' }}>
          <CardActionArea>
            <CardHeader title={pub.title} />
            <CardMedia
              className={classes.media}
              image={pub.active_save.base64_image} />
            <CardContent>
              <Typography variant="body2" component="p" noWrap={true}>
                {pub.description}
              </Typography>
              <br/>
              <Typography variant='body2' color='textSecondary' component='p'>
              Status: {pub.status_name}
              </Typography>
              {/* <Typography variant='body2' component='p' color='textSecondary' style={{ margin: '5px 0px 0px 0px' }}>
              Updated at {timeSince(pub.save_time)} ago...
            </Typography> */}
            </CardContent>
          </CardActionArea>
        </ButtonBase>
      </Card>
    </>
  )
}

StatisticBar = ({ onChangeBar, selectedValue, updating }) => {
  const { mainData, options } = useBarData();

  const barData = useSelector(({ Stats }) => Stats.bar);

  const { total } = barData[selectedValue];

  const barList = select.map(({ label, value }) => (
    <MenuItem data-cy={`bar-select-${label}`} key={value} value={value}>
      {label}
    </MenuItem>
  ));

  return (
    <Card>
      <CardHeader
        title={
          <FormControl>
            <Select
              data-cy='bar-selector'
              onChange={onChangeBar}
              value={selectedValue}
            >
              {barList}
            </Select>
          </FormControl>
        }
      />
      <Divider />
      <CardContent>
        <Box data-cy='bar-chart-box' height={400} position='relative'>
          {updating ? <LoadingBar /> : handleStatisticBar(mainData, options)}
        </Box>
      </CardContent>
      <Divider />
      {total ? (
        <Box p={2}>
          <Typography data-cy='total-count' variant='body1'>
            {message[selectedValue] + total}
          </Typography>
        </Box>
      ) : (
        ''
      )}
    </Card>
  );
}

ActivityDatesAndTimesGraph = props => {
  const {
    className,
    children,
    dataLoading,
    title,
    ...rest
  } = props;

  const classes = useStyles();

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <CardHeader title={title}/>
      <Divider />
      <CardContent>
        <div className={classes.chartContainer}>
          {dataLoading ? (
            <Grid
              container
              spacing={0}
              alignItems="center"
              justify="center"
              style={{ minHeight: "100%" }}
            >
              <Grid item xs={6}  align="center">
                <CircularProgress/>
                <Typography>
                  Loading Chart..
                </Typography>
              </Grid>
            </Grid>
          ) : (
            <>
              {children}
            </>
          )}
        </div>
      </CardContent>
    </Card>
  );
}

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

  const [rows, setData] = useState({});
  const fetchData = () => {
    GitlabLintHttpClient("GET_ALL", { entity: "levels" })
      .then((data) => {
        setData(data.data);
      })
      .catch((err) => console.error(err));
  };

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

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    return <Loading />;
  }

  return (
    <React.Fragment>
      <Typography variant="h4" paragraph>
        Levels
      </Typography>
      <Grid container spacing={4}>
        {rows.map((level) => {
          return (
            <Grid item key={level.id} xs={12} sm={6} md={4}>
              <Card className={classes.root}>
                <CardHeader
                  className={`${classes.level} ${classes[level.id]}`}
                  title={level.name}
                />
                <CardContent>
                  <Typography variant="h5" component="h2">
                    {level.total}
                  </Typography>
                </CardContent>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </React.Fragment>
  );
}

function Profile({ id }) {
  const classes = useStyles();
  const [data, setData] = React.useState(null);
  React.useEffect(() => {
    const promises = [];
    promises.push(
      fetch(`${config.API_URL}${id}`).then((response) => response.json()),
      fetch(`${config.API_URL_MERGED}${id}`).then((response) => response.json())
    );
    Promise.all(promises).then(([all, merged]) => {
      const data =
        all.items &&
        all.items.map((pr) =>
          merged.items && merged.items.find((mergedPR) => mergedPR.id === pr.id)
            ? { ...pr, state: 'merged' }
            : pr
        );
      setData(data);
    });
  }, []);
  if (!data) {
    return <CircularProgress size={40} className={classes.loader} />;
  }

  return (
    <Card className={classes.card}>
      <CardHeader
        title={data[0].user.login}
        titleTypographyProps={{ variant: 'h4' }}
        subheader={<CountPullRequest totalPullRequests={data.length} />}
        avatar={
          <Avatar src={data[0].user.avatar_url} className={classes.image} />
        }
      />
      <Divider />
      <CardContent className={classes.cardContent}>
        <SimpleBarReact autoHide={false} style={{maxHeight:'60vh', paddingRight: 8 }}>
          <List component="nav">
            {data &&
                data.map(({ html_url, title, state, number }, i) => (
                  <ListItem
                    button
                    onClick={() => window.location.href=html_url}
                    key={i}
                  >
                    <ListItemIcon className={classes.icon}>
                      <PRStatus status={state}/>
                    </ListItemIcon>
                    <ListItemText 
                      secondary={<code className={classes.state}>{`#${number} - ${state}`}</code>} 
                      primaryTypographyProps='className={classes.cardContentList}'>
                      {`${title}  `}
                    </ListItemText>
                  </ListItem>
                  ))}
          </List>
        </SimpleBarReact>
      </CardContent>
    </Card>
  );
}

Rules = () => {
  const classes = useStyles();
  const [rows, setData] = useState({});
  const fetchData = () => {
    GitlabLintHttpClient("GET_ALL", { entity: "rules" })
      .then((data) => {
        setData(data.data);
      })
      .catch((err) => console.error(err));
  };

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

  if (Object.keys(rows).length === 0 && rows.constructor === Object) {
    return <Loading />;
  }

  return (
    <React.Fragment>
      <Typography variant="h4" paragraph>
        Rules
      </Typography>

      <Grid container spacing={4}>
        {rows.map((row) => {
          return (
            <Grid item key={row.ruleId} xs={12} sm={6} md={4}>
              <Card className={classes.root}>
                <CardActionArea component={Link} to={`rules/${row.ruleId}`}>
                  <CardHeader
                    className={classes[row.level]}
                    classes={{ title: classes["title"] }}
                    title={row.level}
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {row.name}
                    </Typography>
                    {row.description && (
                      <Typography
                        variant="body2"
                        color="textSecondary"
                        component="p"
                      >
                        {row.description}
                      </Typography>
                    )}
                  </CardContent>
                </CardActionArea>
                <CardActions>
                  <Button
                    component={Link}
                    size="small"
                    color="secondary"
                    to={`/rules/${row.ruleId}`}
                  >
                    Show projects
                  </Button>
                </CardActions>
              </Card>
            </Grid>
          );
        })}
      </Grid>
    </React.Fragment>
  );
}

StatisticDoughnut = ({ selectedValue, onChangeDoughnut, updating }) => {
  const styles = useStyles();

  const { mainData, options, relations, labels } = useDoughnutData();

  const doughnutList = select.map(({ label, value }) => (
    <MenuItem data-cy={`doughnut-select-${label}`} key={value} value={value}>
      {label}
    </MenuItem>
  ));

  return (
    <Card className={styles.root}>
      <CardHeader
        title={
          <FormControl>
            <Select
              data-cy='doughnut-selector'
              onChange={onChangeDoughnut}
              value={selectedValue}
            >
              {doughnutList}
            </Select>
          </FormControl>
        }
      />
      <Divider />
      <CardContent>
        {updating ? (
          <LoadingBar />
        ) : (
          <>
            <Box data-cy='doughnut-chart-box' height={300} position='relative'>
              {handleDoughnutBar(mainData, options)}
            </Box>
            <LegendsList options={relations} labels={labels} />
          </>
        )}
      </CardContent>
    </Card>
  );
}

export default function CardUrls(props) {
    const history = useHistory();
    const classes = useStyles();

    return (
        <Container className={classes.cardGrid} maxWidth="lg">
            <Grid container spacing={4}>
                {props.shortUrls.map((card) => (
                    <Grid item key={card.id} xs={12} sm={6} md={4}>
                        <Card className={classes.card}>
                            <CardHeader
                                action={
                                    <Tooltip title={"Copy to clipboard"}>
                                        <IconButton color="primary" className={classes.copyButton} onClick={() => { navigator.clipboard.writeText(window.location.origin + "/" + card.data.curl) }}>
                                            <FileCopyOutlinedIcon />
                                        </IconButton>
                                    </Tooltip>
                                }
                                title={
                                    <Tooltip title={card.data.track === true ? "Link Tracking ON" : "Link Tracking OFF"}>
                                        <Badge color={card.data.track === true ? "primary" : "error"} variant="dot">
                                            <Typography>{card.data.curl}</Typography>
                                        </Badge>
                                    </Tooltip>
                                }
                                titleTypographyProps={{
                                    variant: "subtitle1"
                                }}
                            >

                            </CardHeader>
                            <CardContent className={classes.cardContent}>
                                <Box bgcolor="text.primary" color="background.paper" p={2} style={{ overflowX: 'auto', overflowY: 'hidden', whiteSpace: "nowrap" }}>
                                    {card.data.lurl}
                                </Box>
                            </CardContent>
                            <CardActions className={classes.cardActions}>
                                <Tooltip title={"Preview link"}>
                                    <IconButton size="small" color="primary" href={card.data.lurl} target="_blank">
                                        <VisibilityIcon />
                                    </IconButton>
                                </Tooltip>
                                <Tooltip title={"Edit link"}>
                                    <IconButton size="small" onClick={() => props.handleEditShortUrl(card.data.curl)}>
                                        <EditIcon />
                                    </IconButton>
                                </Tooltip>
                                <Tooltip title={"Analytics"}>
                                    <IconButton size="small" disabled={!card.data.track} onClick={() => history.push(`/analytics/${card.data.curl}`)}>
                                        <AnalyticsIcon />
                                    </IconButton>
                                </Tooltip>
                                <Tooltip title={"Delete link"}>
                                    <IconButton size="small" color="secondary" onClick={() => props.handleDeleteShortUrl(card.data.curl)}>
                                        <DeleteForeverIcon />
                                    </IconButton>
                                </Tooltip>
                                <Tooltip title={card.data.hits + " Hits"}>
                                    <IconButton onClick={() => { props.openHits(card.data.curl) }} style={{ cursor: "pointer" }}>
                                        <Badge badgeContent={card.data.hits} color="secondary" max={Infinity} showZero>
                                            <OpenInBrowser />
                                        </Badge>
                                    </IconButton>
                                </Tooltip>
                                <Tooltip title={"Password protect"}>
                                    <IconButton size='small' color='default' onClick={() => props.toggleSecurity(card.data.curl)}>
                                        {card.data.locked ? <LockIcon /> : <LockOpenIcon />}
                                    </IconButton>
                                </Tooltip>
                            </CardActions>
                        </Card>
                    </Grid>
                ))}
            </Grid>
        </Container>
    );
}

Uploads = ({ record, resource, basePath }) => {
	const classes = useStyles();

	// eslint-disable-next-line no-shadow
	const Cards = ({ record, source }) => {
		return record[source].map(({ id, url, object_id }) => {
			return (
				<Card key={id} className={classes.cardStyle}>
					<CardHeader
						subheader={
							<ReferenceField
								basePath="/technologies"
								record={{ id: object_id }}
								source="id"
								reference="technologies"
							>
								<ChipField source="title" />
							</ReferenceField>
						}
					/>
					<CardContent>
						<ImageField
							record={{ url }}
							source="url"
							title="url"
							className={classes.img}
						/>
					</CardContent>
				</Card>
			);
		});
	};
	const newRecord = {
		images: [...record.uploads].filter(({ filename }) => !filename.match(/.pdf/g)),
		pdfs: [...record.uploads].filter(({ filename }) => filename.match(/.pdf/g)),
	};

	return (
		<SimpleShowLayout resource={resource} record={newRecord} basePath={basePath}>
			<Cards addLabel source="images" />
			<ArrayField source="pdfs">
				<Datagrid>
					<ReferenceField
						basePath="/technologies"
						source="object_id"
						reference="technologies"
					>
						<ChipField source="title" />
					</ReferenceField>
					<UrlField source="url" target="_blank" />
					<DateField showTime source="created_at" />
					<DateField showTime source="updated_at" />
				</Datagrid>
			</ArrayField>
		</SimpleShowLayout>
	);
}

DisruptionCardHeader = styled(CardHeader)`
  padding: 8px 0px 0px;
  font-weight: 700;
`

export default function CardUrls(props) {
    const classes = useStyles();

    return (
        <Container className={classes.cardGrid} maxWidth="md">
            <Grid container spacing={4}>
                {props.shortUrls.map((card) => (
                    <Grid item key={card.id} xs={12} sm={6} md={4}>
                        <Card className={classes.card}>
                            <CardHeader 
                                action={
                                    <IconButton color="primary" className={classes.copyButton} onClick={() => { navigator.clipboard.writeText(window.location.hostname + "/" + card.data.curl) }}>
                                        <FileCopyOutlinedIcon />
                                    </IconButton>
                                }
                                title={ card.data.curl }
                                titleTypographyProps={{
                                    variant: "subtitle1"
                                }}
                            />
                            <CardContent className={classes.cardContent}>
                                <Box bgcolor="text.primary" color="background.paper" p={2} style={{ overflowX: 'auto', overflowY: 'hidden', whiteSpace: "nowrap" }}>
                                    {card.data.lurl}
                                </Box>
                            </CardContent>
                            <CardActions>
                                <Button size="small" color="primary" href={card.data.lurl} target="_blank">
                                    Open
                                </Button>
                                <Button size="small" onClick={() => props.handleEditShortUrl(card.data.curl)}>
                                    Edit
                                </Button>
                                <Button size="small" color="secondary" onClick={() => props.handleDeleteShortUrl(card.data.curl)}>
                                    Delete
                                </Button>
                            </CardActions>
                        </Card>
                    </Grid>
                ))}
            </Grid>
        </Container>
    );
}

function Login() {
  const classes = useStyles();
  const dispatch = useDispatch();
  
  const initialLoginForm = {
    username: "",
    password: ""
  }
  const [loginForm, setLoginForm] = useState(initialLoginForm);
  const loading = useSelector(state => state.users.loading);

  function handleChange(e) {
    const newForm = {
      ...loginForm,
      [e.target.name]: e.target.value
    }
    setLoginForm(newForm);
  }

  function handleSubmit(e) {
    e.preventDefault();
    dispatch(userActions.login(loginForm))
    .then((response) => {
      if(response.error) {
        alertActions.handleError(dispatch, response.error);
        return;
      }
      history.push("/");
    })
  }

  function onClickRegist(e) {
    history.push('/regist');
  }
  
  return (
    <Box className={classes.root}>
      <Card className={classes.loginCard}>
        <CardHeader
          title="로그인"
          subheader="API Designer"
        />
        <CardContent>
        <form className={classes.loginForm} noValidate autoComplete="off" onSubmit={handleSubmit}>
          <Container className={classes.loginContainer} maxWidth="lg">
            <TextField className={classes.input} autoComplete='false' id="usernameInput" label="Username" name="username" value={loginForm.username} onChange={handleChange}/>
            <TextField className={classes.input} autoComplete='false' id="passwordInput" label="Password" name="password" value={loginForm.password} onChange={handleChange} type="password"/>
          </Container>
          <Grid className={classes.buttonArea} container direction="column" justify="center" alignitem="center">
            <Grid item>
              {!loading &&
                <Button type="submit" className={classes.loginButton} variant="contained">로그인</Button>
              }
              {loading &&
                <Button disabled className={classes.loginButton} variant="contained">로그인중...</Button>
              }
            </Grid>
            <Grid item>
              <Button variant="text" type="button" onClick={onClickRegist}>회원가입</Button>  
            </Grid>
          </Grid>
        </form>
        </CardContent>
      </Card>
    </Box>
  );
}

LatestProducts = () => {
  const classes = useStyles();
  const [products] = useState(data);

  return (
    <Card>
      <CardHeader
        subtitle={`${products.length} in total`}
        title="Latest Products"
      />
      <Divider />
      <List>
        {products.map((product, i) => (
          <ListItem
            divider={i < products.length - 1}
            key={product.id}
          >
            <ListItemAvatar>
              <img
                alt="Product"
                className={classes.image}
                src={product.imageUrl}
              />
            </ListItemAvatar>
            <ListItemText
              primary={product.name}
              secondary={`Updated ${product.updatedAt.fromNow()}`}
            />
            <IconButton
              edge="end"
              size="small"
            >
              <MoreVertIcon />
            </IconButton>
          </ListItem>
        ))}
      </List>
      <Divider />
      <Box
        display="flex"
        justifyContent="flex-end"
        p={2}
      >
        <Button
          color="primary"
          endIcon={<ArrowRightIcon />}
          size="small"
          variant="text"
        >
          View all
        </Button>
      </Box>
    </Card>
  );
}

MentorCard = (props) => {
  const classes = useStyles();
  const {
    mentor,
    choseCountry,
    choseSkill,
    heartedMentor,
    toggleHeartedMentor,
  } = props;

  const handleFlagClick = () => {
    choseCountry(mentor.countryAlpha2Code)
  }

  const handleSkillChipClick = (e) => {
    choseSkill(e.target.textContent)
  }
  return (
    <Card className={classes.root}>
      <CardHeader
        avatar={
          <Avatar
            src={`https://unavatar.now.sh/twitter/${mentor.twitter}`}
            aria-label="mentor"
            className={classes.avatar}
          >
            {mentor.name[0]}
          </Avatar>
        }
        action={
          <IconButton onClick={handleFlagClick}>
            <img
              src={`https://www.countryflags.io/${mentor.countryAlpha2Code}/flat/32.png`}
              alt={mentor.country}
            />
          </IconButton>
        }
        title={mentor.name}
        subheader={mentor.title}
      />
      <CardContent className={classes.MessageCardContent}>
        <Typography variant="body2">"{mentor.message}"</Typography>
      </CardContent>
      <CardContent className={classes.SkillsCardContent}>
        <Grid container justify="center" spacing={1}>
          {mentor.skills.map((skill, index) => (
            <Grid key={index} item>
              <Chip label={skill} variant="outlined" onClick={handleSkillChipClick} />
            </Grid>
          ))}
        </Grid>
      </CardContent>
      <Divider variant="fullWidth" />
      <CardActions className={classes.cardAction} disableSpacing>
        <Button href="#connect-mentor" color="primary">
          Connect
        </Button>
        <IconButton onClick={() => toggleHeartedMentor(mentor.id)}>
          {heartedMentor ? (
            <FavoriteOutlinedIcon color="secondary" />
          ) : (
            <FavoriteBorderOutlinedIcon />
          )}
        </IconButton>
      </CardActions>
    </Card>
  );
}

MissionDeliveredCard = ({ completeMission, missionUid, onClose }) => {
  const classes = useStyles();
  const [deliveryConfirmationImage, setDeliveryConfirmationImage] = useState(selectImage);
  const [deliveryConfirmationImageWasSelected, setDeliveryConfirmationImageWasSelected] = useState(
    false
  );

  function onImageChanged(image) {
    setDeliveryConfirmationImageWasSelected(true);
    setDeliveryConfirmationImage(image);
  }

  return (
    <Card>
      <Grid className={classes.content} direction="column" container>
        <Grid align="right" item>
          <CloseIcon align="right" className={classes.closeIcon} onClick={onClose} />
        </Grid>
        <Grid align="left" item>
          <CardHeader
            title="Take a photo of your delivery"
            titleTypographyProps={{
              variant: "h1",
              component: "span",
              className: classes.cardTitle,
            }}
            className={classes.cardHeader}
            align="center"
          />
          <MissionDeliveredImagePicker
            defaultImage={deliveryConfirmationImage}
            setCurrentImage={onImageChanged}
          />
          <CardContent>
            <H5 align="left" color="textPrimary" className={classes.infoText}>
              Make sure the photo is clear so the recipient can locate it easily!
            </H5>
          </CardContent>
          <CardActions className={classes.submitContainer}>
            <StyledButton
              color="primary"
              variant="contained"
              disableElevation
              disabled={!deliveryConfirmationImageWasSelected}
              onClick={() => completeMission(missionUid, deliveryConfirmationImage)}
            >
              Submit & Complete Mission
            </StyledButton>
          </CardActions>
        </Grid>
      </Grid>
    </Card>
  );
}

Chart = ({ className, title, data, labels, dataDescriptions, ...rest }) => {
	const classes = useStyles();
	const theme = useTheme();

	const options = {
		animation: false,
		cutoutPercentage: 80,
		layout: { padding: 0 },
		legend: {
			display: false
		},
		maintainAspectRatio: false,
		responsive: true,
		tooltips: {
			backgroundColor: theme.palette.background.default,
			bodyFontColor: theme.palette.text.secondary,
			borderColor: theme.palette.divider,
			borderWidth: 1,
			enabled: true,
			footerFontColor: theme.palette.text.secondary,
			intersect: false,
			mode: 'index',
			titleFontColor: theme.palette.text.primary
		}
	};

	return (
		<Card className={clsx(classes.root, className)} {...rest}>
			<CardHeader title={title} />
			<Divider />
			<CardContent>
				<Box height={300} position="relative">
					<Doughnut data={data} options={options} />
				</Box>
				<Box display="flex" justifyContent="center" mt={2}>
					{dataDescriptions.map(({ color, icon: Icon, title, value }) => (
						<Box key={title} p={1} textAlign="center">
							<Icon color="action" />
							<Typography color="textPrimary" variant="body1">
								{title}
							</Typography>
							<Typography style={{ color }} variant="h3">
								{value}%
							</Typography>
						</Box>
					))}
				</Box>
			</CardContent>
		</Card>
	);
}

CommentGrid = ({ ids, data, basePath }) => {
    const translate = useTranslate();
    const classes = useListStyles();

    return (
        <Grid spacing={2} container>
            {ids.map(id => (
                <Grid item key={id} sm={12} md={6} lg={4}>
                    <Card className={classes.card}>
                        <CardHeader
                            className="comment"
                            title={
                                <TextField
                                    record={data[id]}
                                    source="author.name"
                                />
                            }
                            subheader={
                                <DateField
                                    record={data[id]}
                                    source="created_at"
                                />
                            }
                            avatar={
                                <Avatar>
                                    <PersonIcon />
                                </Avatar>
                            }
                        />
                        <CardContent className={classes.cardContent}>
                            <TextField record={data[id]} source="body" />
                        </CardContent>
                        <CardContent className={classes.cardLink}>
                            {translate('comment.list.about')}&nbsp;
                            <ReferenceField
                                resource="comments"
                                record={data[id]}
                                source="post"
                                reference="posts"
                                basePath={basePath}
                            >
                                <TextField
                                    source="title"
                                    className={classes.cardLinkLink}
                                />
                            </ReferenceField>
                        </CardContent>
                        <CardActions className={classes.cardActions}>
                            <EditButton
                                resource="posts"
                                basePath={basePath}
                                record={data[id]}
                            />
                            <ShowButton
                                resource="posts"
                                basePath={basePath}
                                record={data[id]}
                            />
                        </CardActions>
                    </Card>
                </Grid>
            ))}
        </Grid>
    );
}

Password = props => {
  const { className, ...rest } = props;

  const classes = useStyles();

  const [values, setValues] = useState({
    password: '',
    confirm: ''
  });

  const handleChange = event => {
    setValues({
      ...values,
      [event.target.name]: event.target.value
    });
  };

  return (
    <Card
      {...rest}
      className={clsx(classes.root, className)}
    >
      <form>
        <CardHeader
          subheader="Update password"
          title="Password"
        />
        <Divider />
        <CardContent>
          <TextField
            fullWidth
            label="Password"
            name="password"
            onChange={handleChange}
            type="password"
            value={values.password}
            variant="outlined"
          />
          <TextField
            fullWidth
            label="Confirm password"
            name="confirm"
            onChange={handleChange}
            style={{ marginTop: '1rem' }}
            type="password"
            value={values.confirm}
            variant="outlined"
          />
        </CardContent>
        <Divider />
        <CardActions>
          <Button
            color="primary"
            variant="outlined"
          >
            Update
          </Button>
        </CardActions>
      </form>
    </Card>
  );
}

export default function AppWebsiteVisits() {
  const chartOptions = merge(BaseOptionChart(), {
    stroke: { width: [0, 2, 3] },
    plotOptions: { bar: { columnWidth: '11%', borderRadius: 4 } },
    fill: { type: ['solid', 'gradient', 'solid'] },
    labels: [
      '01/01/2003',
      '02/01/2003',
      '03/01/2003',
      '04/01/2003',
      '05/01/2003',
      '06/01/2003',
      '07/01/2003',
      '08/01/2003',
      '09/01/2003',
      '10/01/2003',
      '11/01/2003'
    ],
    xaxis: { type: 'datetime' },
    tooltip: {
      shared: true,
      intersect: false,
      y: {
        formatter: (y) => {
          if (typeof y !== 'undefined') {
            return `${y.toFixed(0)} visits`;
          }
          return y;
        }
      }
    }
  });

  return (
    <Card>
      <CardHeader title="Website Visits" subheader="(+43%) than last year" />
      <Box sx={{ p: 3, pb: 1 }} dir="ltr">
        <ReactApexChart type="line" series={CHART_DATA} options={chartOptions} height={364} />
      </Box>
    </Card>
  );
}

render() {
    let activitytypeFilter = this.state.getActivitytype;
    let addActivitytype = this.state.values.addActivitytype;
    return (
      <Layout
        breadcrumbs={
          this.state.editPage[0]
            ? EDIT_ACTIVITY_BREADCRUMBS
            : ADD_ACTIVITY_BREADCRUMBS
        }
      >
        {!this.state.isLoader ? (
          <Card style={{ maxWidth: "45rem" }}>
            <CardHeader
              title={this.state.editPage[0] ? "Edit Activity" : "Add Activity"}
              subheader={
                this.state.editPage[0]
                  ? "You can edit activity data here!"
                  : "You can add new activity data here!"
              }
            />
            <Divider />
            <CardContent>
              <Grid container spacing={3}>
                <Grid item md={12} xs={12}>
                  {this.state.formSubmitted === false ? (
                    <Snackbar severity="error" Showbutton={false}>
                      {this.state.errorCode}
                    </Snackbar>
                  ) : null}
                </Grid>
                <Grid item md={6} xs={12}>
                  <Autotext
                    id="combo-box-demo"
                    options={activitytypeFilter}
                    variant="outlined"
                    label="Select Activity Type*"
                    getOptionLabel={(option) => option.name}
                    onChange={(event, value) => {
                      this.handleAutocompleteChange(event, value);
                    }}
                    defaultValue={[]}
                    value={
                      addActivitytype
                        ? activitytypeFilter[
                            activitytypeFilter.findIndex(function (item, i) {
                              return item.id === addActivitytype;
                            })
                          ] || null
                        : null
                    }
                    error={this.hasError("addActivitytype")}
                    helperText={
                      this.hasError("addActivitytype")
                        ? this.state.errors.addActivitytype[0]
                        : null
                    }
                    renderInput={(params) => (
                      <Input
                        fullWidth
                        label="Select Activity Type*"
                        name="addActivitytype"
                        variant="outlined"
                      />
                    )}
                  />
                </Grid>
                <Grid item md={6} xs={12}>
                  <Input
                    fullWidth
                    label="Description*"
                    name="addTitle"
                    error={this.hasError("addTitle")}
                    helperText={
                      this.hasError("addTitle")
                        ? this.state.errors.addTitle[0]
                        : null
                    }
                    value={this.state.values.addTitle || ""}
                    onChange={this.handleChange}
                    variant="outlined"
                  />
                </Grid>
                <Grid item md={3} xs={12}>
                  <Datepicker
                    label="Date*"
                    name="addStartDate"
                    error={this.hasError("addStartDate")}
                    helperText={
                      this.hasError("addStartDate")
                        ? this.state.errors.addStartDate[0]
                        : null
                    }
                    value={this.state.values.addStartDate || null}
                    format={"dd MMM yyyy"}
                    onChange={(value) =>
                      this.setState({
                        values: { ...this.state.values, addStartDate: value },
                      })
                    }
                  />
                </Grid>
                <Grid item md={9} xs={12}>
                  <TextField
                    id="outlined-multiline-static"
                    fullWidth
                    label="Status / Comments"
                    rows={10}
                    name="addDescription"
                    value={this.state.values.addDescription || ""}
                    onChange={this.handleChange}
                    variant="outlined"
                  />
                </Grid>
                <Grid item md={12}>
                  <label htmlFor="upload-file">
                    <input
                      style={{ display: "none" }}
                      required
                      type="file"
                      name="upload-file"
                      id="upload-file"
                      onChange={this.onChangeHandler}
                    />
                    <Fab
                      color="primary"
                      size="medium"
                      component="span"
                      aria-label="add"
                      variant="extended"
                    >
                      <FileCopyIcon /> Upload Activity Document
                    </Fab>
                  </label>{" "}
                  <IconButton
                    aria-label="cancel"
                    color="secondary"
                    style={{ paddingLeft: "2px" }}
                  >
                    <CancelIcon onClick={this.cancelFile} />
                  </IconButton>
                  &nbsp;&nbsp;&nbsp;
                  {this.state.fileName !== "" ? (
                    <label style={{ color: "green", fontSize: "11px" }}>
                      Selected File: {this.state.fileName}
                    </label>
                  ) : (
                    <label style={{ color: "red", fontSize: "11px" }}>
                      No File Selected!
                    </label>
                  )}
                </Grid>
              </Grid>
            </CardContent>
            <Divider />
            <CardActions style={{ padding: "15px" }}>
              <Button type="submit" onClick={this.onSave.bind(this)}>
                Save
              </Button>
              <Button
                color="secondary"
                clicked={this.cancelForm}
                component={Link}
                to="/Activities"
              >
                cancel
              </Button>
            </CardActions>
          </Card>
        ) : (
          <Spinner />
        )}
      </Layout>
    );
  }

function UserDetails(props: UserDetailsProps) {
  const [state, dispatch] = useReducer(dataFetchReducer, initialState);
  const classes = useStyles();

  const buttonClassname = clsx({
    [classes.buttonFailure]: state.isError,
    [classes.buttonSuccess]: !state.isError,
  });

  function requestUserDetails() {
    const permissionsList = [
      {
        name: CustomPermissionName.USER_NAME,
        description:
          'We would like to display your Username on your profile page.',
      },
      {
        name: CustomPermissionName.PROFILE_PHOTO,
        description:
          'We would like to display your Profile Photo on your profile page.',
      },
      {
        name: CustomPermissionName.CONTACT_LIST,
        description: 'We would like to send messages to your contacts.',
      },
    ];

    props
      .requestPermissions(permissionsList)
      .then((permissions) => filterAllowedPermissions(permissions))
      .then((permissions) =>
        Promise.all([
          hasPermission(CustomPermissionName.USER_NAME, permissions)
            ? props.getUserName()
            : null,
          hasPermission(CustomPermissionName.PROFILE_PHOTO, permissions)
            ? props.getProfilePhoto()
            : null,
          hasPermission(CustomPermissionName.CONTACT_LIST, permissions)
            ? props.getContacts()
            : null,
        ])
      )
      .then(() => dispatch({ type: 'FETCH_SUCCESS' }))
      .catch((e) => {
        console.error(e);
        dispatch({ type: 'FETCH_FAILURE' });
      });
  }

  function requestPoints() {
    const permissionsList = [
      {
        name: CustomPermissionName.POINTS,
        description:
          'We would like to display your Points on your profile page.',
      },
    ];

    props
      .requestPermissions(permissionsList)
      .then((permissions) => filterAllowedPermissions(permissions))
      .then((permissions) =>
        Promise.all([
          hasPermission(CustomPermissionName.POINTS, permissions)
            ? props.getPoints()
            : null,
        ])
      )
      .then(() => dispatch({ type: 'POINTS_FETCH_SUCCESS' }))
      .catch((e) => {
        console.error(e);
        dispatch({ type: 'POINTS_FETCH_FAILURE' });
      });
  }

  function filterAllowedPermissions(permissions) {
    return permissions
      .filter(
        (permission) => permission.status === CustomPermissionStatus.ALLOWED
      )
      .map((permission) => permission.name);
  }

  function handleClick(e) {
    if (!state.isLoading) {
      e.preventDefault();
      dispatch({ type: 'FETCH_INIT' });
      requestUserDetails();
    }
  }

  function handlePointsClick(e) {
    if (!state.isLoading) {
      e.preventDefault();
      dispatch({ type: 'POINTS_FETCH_INIT' });
      requestPoints();
    }
  }

  function ProfilePhoto() {
    const hasDeniedPermission =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.PROFILE_PHOTO);

    return [
      hasDeniedPermission ? (
        <ListItemText
          primary='"Profile Photo" permission not granted.'
          className={classes.red}
          key="avatar-error"
        />
      ) : null,
      <Avatar
        src={props.profilePhoto}
        className={classes.profilePhoto}
        key="avatar"
      />,
    ];
  }

  function UserDetails() {
    const hasDeniedPermission =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.USER_NAME);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="User Details" />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-name"
          error={state.isError || hasDeniedPermission}
          label={'Name'}
          value={
            hasDeniedPermission
              ? '"User Name" permission not granted.'
              : props.userName || ' '
          }
        />
      </Paper>
    );
  }

  function ContactList() {
    const hasDeniedPermision =
      state.hasRequestedPermissions &&
      !hasPermission(CustomPermissionName.CONTACT_LIST);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="Contact List" />
        <List className={classes.contactsList}>
          {hasDeniedPermision && (
            <ListItem>
              <ListItemText
                primary='"Contacts" permission not granted.'
                className={classes.red}
              />
            </ListItem>
          )}
          {!hasDeniedPermision &&
            props.contactList &&
            props.contactList.map((contact) => (
              <ListItem divider>
                <ListItemAvatar>
                  <Avatar className={classes.contactIcon} />
                </ListItemAvatar>
                <ListItemText
                  primary={contact.id}
                  secondary={
                    <React.Fragment>
                      <Typography>
                        {contact.name && contact.name !== '' && (
                          <span>{'Name: ' + contact.name}</span>
                        )}
                      </Typography>
                      <Typography>
                        {contact.email && contact.email !== '' && (
                          <span>{'Email: ' + contact.email}</span>
                        )}
                      </Typography>
                    </React.Fragment>
                  }
                />
              </ListItem>
            ))}
        </List>
      </Paper>
    );
  }

  function PointBalance() {
    const hasDeniedPermission =
      state.hasRequestedPointPermissions &&
      !hasPermission(CustomPermissionName.POINTS);

    return (
      <Paper className={classes.paper}>
        <CardHeader subheader="Points" />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-standard"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Standard)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined &&
                props.points.standard !== undefined
              ? props.points.standard.toString()
              : '-'
          }
        />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-term"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Time-Limited)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined && props.points.term !== undefined
              ? props.points.term.toString()
              : '-'
          }
        />
        <TextField
          variant="outlined"
          disabled={true}
          className={classes.formInput}
          id="input-points-cash"
          error={state.isPointsError || hasDeniedPermission}
          label={'Points (Rakuten Cash)'}
          value={
            hasDeniedPermission
              ? '"Points" permission not granted.'
              : props.points !== undefined && props.points.cash !== undefined
              ? props.points.cash.toString()
              : '-'
          }
        />
      </Paper>
    );
  }

  function CardActionsForm() {
    return (
      <FormGroup column="true" className={classes.rootUserGroup}>
        <div className={classes.wrapper}>
          <Button
            onClick={handleClick}
            variant="contained"
            color="primary"
            classes={{ root: classes.button }}
            className={buttonClassname}
            disabled={state.isLoading}
            data-testid="fetchUserButton"
          >
            Fetch User Details
          </Button>
          {state.isLoading && (
            <CircularProgress size={20} className={classes.buttonProgress} />
          )}
        </div>
        {state.isError && (
          <Typography variant="body1" className={classes.error}>
            Error fetching the User Details
          </Typography>
        )}
      </FormGroup>
    );
  }

  function CardPointActionsForm() {
    return (
      <FormGroup column="true" className={classes.rootUserGroup}>
        <div className={classes.wrapper}>
          <Button
            onClick={handlePointsClick}
            variant="contained"
            color="primary"
            classes={{ root: classes.button }}
            className={buttonClassname}
            disabled={state.isPointsLoading}
            data-testid="fetchPointsButton"
          >
            Fetch Points
          </Button>
          {state.isPointsLoading && (
            <CircularProgress size={20} className={classes.buttonProgress} />
          )}
        </div>
        {state.isPointsError && (
          <Typography variant="body1" className={classes.error}>
            Error fetching the points
          </Typography>
        )}
      </FormGroup>
    );
  }

  function hasPermission(permission, permissionList: ?(string[])) {
    permissionList = permissionList || props.permissions || [];
    return permissionList.indexOf(permission) > -1;
  }

  return (
    <div className={classes.scrollable}>
      <GreyCard className={classes.card}>
        <CardContent>
          <div
            className={classes.dataFormsWrapper}
            data-testid="dataFormsWrapper"
          >
            {ProfilePhoto()}
            {UserDetails()}
            {ContactList()}
          </div>
        </CardContent>
        <CardActions classes={{ root: classes.rootCardActions }}>
          {CardActionsForm()}
        </CardActions>

        <CardContent>
          <div
            className={classes.dataFormsWrapper}
            data-testid="pointDataFormsWrapper"
          >
            {PointBalance()}
          </div>
        </CardContent>
        <CardActions classes={{ root: classes.rootCardActions }}>
          {CardPointActionsForm()}
        </CardActions>
      </GreyCard>
    </div>
  );
}