@material-ui/core#Divider JavaScript Examples

export default function AppNewsUpdate() {
  return (
    <Card>
      <CardHeader title="News Update" />

      <Scrollbar>
        <Stack spacing={3} sx={{ p: 3, pr: 0 }}>
          {NEWS.map((news) => (
            <NewsItem key={news.title} news={news} />
          ))}
        </Stack>
      </Scrollbar>

      <Divider />

      <Box sx={{ p: 2, textAlign: 'right' }}>
        <Button
          to="#"
          size="small"
          color="inherit"
          component={RouterLink}
          endIcon={<Icon icon={arrowIosForwardFill} />}
        >
          View all
        </Button>
      </Box>
    </Card>
  );
}

OrderSummary = ({ items }) => {
  const classes = useStyles()
  const getTotal = () => {
    return items.reduce((acc, item) => acc + parseFloat(item.price), 0)
  }

  return (
    <Grid container direction="column" className={classes.summaryContainer}>
      <Grid item>
        <Typography gutterBottom variant="h6" align="center">
          ORDER SUMMARY
        </Typography>
      </Grid>
      <Grid item>
        {items.map((item, key) => {
          return (
            <Grid key={key} container justify="space-between">
              <Typography gutterBottom variant="body1">
                {item.name}
              </Typography>
              <Typography gutterBottom variant="body1">
                ${item.price}
              </Typography>
            </Grid>
          )
        })}
      </Grid>
      <Divider className={classes.summaryDivider} />
      <Grid item>
        <Grid container justify="space-between">
          <Typography> ORDER TOTAL</Typography>
          <Typography data-cy={"total-amount"}>
            ${getTotal().toFixed(2)}
          </Typography>
        </Grid>
      </Grid>
    </Grid>
  )
}

export default function PageTitle({ title }) {
  const classes = useStyles();

  return (
    <>
      <Typography className={classes.title} variant="h2">
        {title}
      </Typography>
      <Divider />
    </>
  );
}

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

OrderHistoryTable = ({ items }) => {
  const styles = useStyles();
  const { t } = useTranslation();

  return (
    <>
      <Divider variant='fullWidth' />
      <Table>
        <TableHead>
          <TableRow classes={{ root: styles.tableHeader }}>
            <TableCell style={{ width: '22%' }} className={styles.tableCell}>
              {t('common.product')}
            </TableCell>
            <TableCell style={{ width: '25%' }} className={styles.tableCell} />
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.size')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.price')}
            </TableCell>
            <TableCell style={{ width: '12%' }} className={styles.tableCell}>
              {t('common.quantity')}
            </TableCell>
            <TableCell style={{ width: '15%' }} className={styles.tableCell}>
              {t('common.total')}
            </TableCell>
          </TableRow>
        </TableHead>
        <TableBody>{items}</TableBody>
      </Table>
    </>
  );
}

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: "16px 0" }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: '16px 0' }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

OftadehToday = () => {
  const classes = useStyles();
  return (
    <div>
      <Typography variant="h5">{moment().format("dddd")}</Typography>
      <Typography variant="subtitle1">{moment().format("LL")}</Typography>
      <Divider
        classes={{
          root: classes.dividerMargin
        }}
      />
      <Typography variant="h6">Events</Typography>
      <EventsContainer />
      <Divider
        classes={{
          root: classes.dividerMargin
        }}
      />
      <Typography variant="h6">Notes</Typography>
      <NotesContainer />
    </div>
  );
}

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

export default function infographics() {
  return (
    <div className="about">
      {/* <Header /> */}
      <CarouselComponent />
      {infos.map((a, i) => (
        <Card className="mycard">
          <CardContent className="mycard-inner">
            <div className="teams-name">
              <img src={a.image} alt="" />
            </div>
            <Divider orientation="vertical" flexItem />
            <div className="main-time-div">
              <div>
                <h4 className="has">{a.desc}</h4>
                <a
                  href={a.linkk}
                  style={{ color: "blue" }}
                  target="_blank"
                  rel="noreferrer noopener"
                  download
                >
                  {" "}
                  Download Pdf
                </a>
              </div>
            </div>
          </CardContent>
        </Card>
      ))}
      {/* <Footer /> */}
    </div>
  );
}

SideNav = () => {
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.down("sm"));

  const isDrawerOpen = useSelector(({ layout }) => layout.isDrawerOpen);
  const isAuth = useSelector(({ channel }) => channel.isAuth);
  let isOpen;
  if (isMaxScreenSm) isOpen = isDrawerOpen;
  else isOpen = true; //We will control open by css
  const classes = useStyles();
  return (
    <Drawer
      variant={isMaxScreenSm ? "temporary" : "persistent"}
      open={isOpen}
      className={clsx(classes.drawer, {
        [classes.drawerOpen]: isDrawerOpen,
        [classes.drawerClose]: !isDrawerOpen,
      })}
      classes={{
        paper: clsx({
          [classes.drawerOpen]: isDrawerOpen,
          [classes.drawerClose]: !isDrawerOpen,
        }),
      }}
    >
      <div className={classes.navHead}>
        <StartNav mobile />
      </div>
      <Divider />
      <MainNavMenu />
      <Divider />
      {isDrawerOpen && !isAuth && <SideCategoryMenu />}
    </Drawer>
  );
}

EditList = (props) => {
	const { listTitle, list, handleInputText, submit } = props;

	const { form, iconButton, divider, input } = useStyles();

	const dispatch = useDispatch();
	const { lists } = useSelector((state) => state.kanban);

	const [modalOpen, setModalOpen] = useState(false);

	const handleDeleteConfirmation = () => {
		dispatch(deleteList(lists, list));
	};

	const handleBlur = (e) => {
		if (!modalOpen) {
			submit(e);
		}
	};

	return (
		<>
			<form onSubmit={submit} className={form} style={{ width: "100%" }}>
				<InputBase
					autoFocus
					onFocus={(e) => e.target.select()}
					onBlur={handleBlur}
					onChange={handleInputText}
					id="standard-error-helper-text"
					defaultValue={listTitle}
					fullWidth
					className={input}
					inputProps={{
						"aria-label": "edit title",
					}}
				/>
				<IconButton
					type="submit"
					className={iconButton}
					aria-label="confirm edit"
				>
					<CheckIcon />
				</IconButton>
				<Divider className={divider} orientation="vertical" />
				<IconButton
					onClick={() => setModalOpen(true)}
					className={iconButton}
					aria-label="delete list"
				>
					<DeleteIcon />
				</IconButton>
			</form>

			<Modal
				open={modalOpen}
				handleClose={() => setModalOpen(false)}
				title={`Would you like to delete the ${listTitle} list?`}
				content={
					"Confirming this action all posts in the list will also be deleted."
				}
				handleConfirmation={handleDeleteConfirmation}
			/>
		</>
	);
}

render() {
        const menuItems = this.getMenuItems();
        const { anchorEl } = this.state;
        const open = Boolean(anchorEl);

        return (
            <div className="profile-menu">
                <DropdownIcon
                    aria-label="more"
                    aria-controls="long-menu"
                    aria-haspopup="true"
                    onClick={this.handleClick}
                    disableRipple={true}
                    size="small"
                >
                    <ArrowDropDown />
                </DropdownIcon>
                <Menu
                    id="menu-items"
                    anchorEl={anchorEl}
                    keepMounted
                    open={open}
                    onClose={this.handleClose}
                    getContentAnchorEl={null}
                    anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
                    transformOrigin={{ vertical: 'top', horizontal: 'left' }}
                    style={{ marginTop: '9px' }}
                >
                    {menuItems}
                    <Box m={1}>
                        <Divider />
                    </Box>
                    <MenuItem className="menuItem" onClick={this.onImportDataMenuItemClick}>
                        <span className="menuItemIcon">{getIcon('CloudUploadOutlined')}</span>
                        <span className="menuItemLabel">{t('ehr', 'Import Data')}</span>
                    </MenuItem>
                    <MenuItem className="menuItem" onClick={this.onPatientProfileMenuItemClick}>
                        <span className="menuItemIcon">{getIcon('PersonOutline')}</span>
                        <span className="menuItemLabel">{t('ehr', 'Patient Profile')}</span>
                    </MenuItem>
                </Menu>
            </div>
        );
    }

Footer = () => {
  const classes = useStyles()
  const [openFeedback, setOpenFeedback] = useState(false)
  const [openJoinUs, setOpenJoinUs] = useState(false)

  const handleClickOpenFeedBack = (e) => {
    e.preventDefault()
    setOpenFeedback(true)
  }

  const handleClickCloseFeedBack = () => {
    setOpenFeedback(false)
  }

  const handleClickOpenJoinUs = (e) => {
    e.preventDefault()
    setOpenJoinUs(true)
  }

  const handleClickCloseJoinUs = () => {
    setOpenJoinUs(false)
  }

  function FooterListElement (props) {
    return (
      <ListItemText className={classes.footerListItemStyle} onClick={props.onClick}>
        <Typography variant="h6" align="left">
          <Link color="textPrimary" href={props.href}>
            <FormattedMessage id={props.idMessage} defaultMessage="Missing String" />
          </Link>
        </Typography>
      </ListItemText>
    )
  }

  return (
    <footer className={classes.footer}>
      <Divider className={classes.dividerStyle} />
      <List className={classes.footerListStyle}>
        <FooterListElement idMessage="footer.feedback" href="#" onClick={handleClickOpenFeedBack} />
        <FooterListElement idMessage="footer.aboutus" href="/#/aboutus" />
        <FooterListElement idMessage="footer.joinus" href="#" onClick={handleClickOpenJoinUs} />
      </List>
      <Feedback open={openFeedback} handleClose={handleClickCloseFeedBack} />
      <JoinUs open={openJoinUs} handleClose={handleClickCloseJoinUs} />

    </footer>
  )
}

render() {
    const {
      setMobile,
      darkMode,
      setDarkMode,
      menuItems,
      session,
      myAccountUrl,
      openDialog,
      hideAds,
      setHideAds,
    } = this.props;

    return (
      <>
        {navigation.map(navLink => <NavMenu key={navLink.name} {...navLink} />)}
        {session.isAuthenticated && !session.verified &&
        <Tooltip title="E-mail is not verified. Click to verify.">
          <MuiLink href={myAccountUrl}>
            <WarningIcon className="verify-warn" />
          </MuiLink>
        </Tooltip>}
        <NavMenu
          name="My Account"
          button={
            <IconButton
              className="user-menu-icon"
              aria-controls="user-menu"
              aria-haspopup="true"
            >
              <Avatar src={session.avatarSrc} className={cn('avatar', { [session.avatarPlatform]: true })}>
                {!session.avatarSrc && <PersonIcon />}
              </Avatar>
            </IconButton>
          }
        >
          <>
            <ListItem dense divider>
              <ListItemText primary={<Typography variant="overline">{session.isAuthenticated ? session.username
                : 'Account'}</Typography>} />
            </ListItem>
            {menuItems}
            <MenuItem button onClick={() => openDialog(DIALOG_MY_GAME)}>My ArcheAge</MenuItem>
            <Divider />
            <MenuItem onClick={() => setDarkMode(!darkMode)}>
              <div className="menu-item-icon">
                <span>{darkMode ? 'Light' : 'Dark'} Mode</span>
                {darkMode ? <BrightnessHighIcon /> : <Brightness4Icon />}
              </div>
            </MenuItem>
            {isMobileBrowser() &&
            <MenuItem onClick={() => setMobile(true)}>
              <div className="menu-item-icon">
                <span>Switch to Mobile</span>
                <PhoneIphoneIcon />
              </div>
            </MenuItem>}
            <MenuItem onClick={() => setHideAds(!hideAds)}>
              <div className="menu-item-icon">
                <span>{hideAds ? 'Show' : 'Hide'} Ads</span>
                {hideAds ? <VisibilityIcon /> : <VisibilityOffIcon />}
              </div>
            </MenuItem>
          </>
        </NavMenu>
      </>
    );
  }

Sidebar = props => {
  const { open, variant, onClose, className, ...rest } = props;
  let user = ''
  const { pathname } = props.history.location;
  const matchFunction = matchPath(pathname, {
    path: '/:user',
    strict: true,
  });

  if(matchFunction) {
    user = matchFunction.params.user
  }
  const classes = useStyles();

  const pages = [
    {
      title: 'Setup',
      href: `/${user}/dashboard`,
      icon: <BuildIcon />
    }
  ];

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={onClose}
      open={open}
      variant={variant}
    >
      <div
        {...rest}
        className={clsx(classes.root, className)}
      >
        <Profile />
        <Divider className={classes.divider} />
        <SidebarNav
          className={classes.nav}
          pages={pages}
        />
      </div>
    </Drawer>
  );
}

DesktopNavMenu = () => {
  const { pathname } = useLocation();
  const classes = useMenuStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));

  if (isMobile) return null;

  return (
    <Grid item>
      <div className={classes.rootPanel}>
        <div className={classes.list}>
          <MenuItem
            selected={
              pathname === '/' ||
              (!pathname.startsWith('/tag') && !pathname.startsWith('/user'))
            }
            component={RouterLink}
            to="/"
          >
            <PublicIcon className={classes.menuIcon} />
            Stack Underflow
          </MenuItem>
          <MenuItem
            selected={pathname.startsWith('/tag')}
            component={RouterLink}
            to="/tags"
          >
            <LocalOfferIcon className={classes.menuIcon} />
            Tags
          </MenuItem>
          <MenuItem
            selected={pathname.startsWith('/user')}
            component={RouterLink}
            to="/users"
          >
            <PeopleIcon className={classes.menuIcon} />
            Users
          </MenuItem>
        </div>
        <Divider orientation="vertical" flexItem />
      </div>
    </Grid>
  );
}

DividerWithMargin = styled(Divider)`
  margin: 1rem 0;
`

LocationPreview = ({ image, link, description }) => {
    useEffect(() => {}, [image, link, description]);

    const handleLocation = async() => {
        try {
            window.open(link);
        } catch (err) {
            toastError(err);
        }
    }

    return (
		<>
			<div style={{
				minWidth: "250px",
			}}>
				<div>
					<div style={{ float: "left" }}>
						<img src={image} onClick={handleLocation} style={{ width: "100px" }} />
					</div>
					{ description && (
					<div style={{ display: "flex", flexWrap: "wrap" }}>
						<Typography style={{ marginTop: "12px", marginLeft: "15px", marginRight: "15px", float: "left" }} variant="subtitle1" color="primary" gutterBottom>
							<div dangerouslySetInnerHTML={{ __html: description.replace('\\n', '<br />') }}></div>
						</Typography>
					</div>
					)}
					<div style={{ display: "block", content: "", clear: "both" }}></div>
					<div>
						<Divider />
						<Button
							fullWidth
							color="primary"
							onClick={handleLocation}
							disabled={!link}
						>Visualizar</Button>
					</div>
				</div>
			</div>
		</>
	);

}

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

AddAnswer = props => {
    const {
        onClick,
        icon = <AddCircle>add_circle</AddCircle>,
        label,
    } = props;

    const styles = {
        divider: {
            width: '100%',
            flexShrink: 'unset',
        },
        button: {
            flexGrow: 2,
            marginRight: 5,
        },
        dividerContainer: {
            width: '100%',
        },
    };

    return (
        <div className="addAnswerContainer">
            <div>
                <Button
                    onClick={onClick}
                    style={styles.button}
                >
                    {icon}
                    {label}
                </Button>
            </div>
            <div style={styles.dividerContainer}>
                <Divider
                    style={styles.divider}
                />
            </div>
        </div>
    );
}

export function About() {
    useEffect(() => ReactGA.pageview('About'), []);

    return <React.Fragment>
        <Typography variant={'h2'}>About</Typography>
        <Divider style={{marginBottom: '15px'}}/>
        <Typography>
            Landlords of Omaha displays searchable data from the{' '}
            <a href={"https://data-dogis.opendata.arcgis.com/datasets/parcels"} target="_blank" rel="nopener noreferrer">Omaha/Douglas County GIS parcels dataset</a>
            {' '}and was created by volunteers from <a href={"https://codefornebraska.org"} target="_blank" rel="nopener noreferrer">Code for Nebraska</a>
            {' '}with input from <a href={"https://www.prineb.org/"} target="_blank" rel="nopener noreferrer">Policy Research & Innovation</a>.
            There are three options for what you see on this website, which you can see by clicking on the three
            little bars in the upper left hand corner.
        </Typography>
        <List>
            <ListItem>
                <Typography style={{fontWeight: 600}}>Out of Omaha:&nbsp;</Typography>Properties owned by people or companies located outside of Omaha
            </ListItem>
            <ListItem>
                <Typography style={{fontWeight: 600}}>Out of State:&nbsp;</Typography>Omaha properties that are owned by people or companies located outside of Nebraska
            </ListItem>
            <ListItem>
                <Typography style={{fontWeight: 600}}>Low Condition:&nbsp;</Typography>Omaha properties that are in Poor to Worn Out condition
            </ListItem>
        </List>
        <Typography>
            The table data is searchable. If you want to view only owners located in
            Omaha, simply enter omaha in the Search box by the upper right hand corner.
            Any column can be sorted up or down. You may sort by Owner Name or Owner Address or Owner City, etc. You
            can even do this after you have created a view of, say - Owner City as Omaha – as in the previous paragraph.
        </Typography>
        <List>
            <ListItem>
            <b>Property Quality</b> &nbsp;refers to the durability of the building when it was constructed.
            </ListItem>
            <ListItem>
                <b>Property Condition</b>&nbsp;
                means just what you would expect.
            </ListItem>
        </List>
        <Typography>

        </Typography>
        <Typography>
            Properties which do not display Property Quality or Property Condition are generally empty lots, parking
            lots, tennis courts, etc.<br/><br/>
        </Typography>
        <Typography>
            When sorting by <b>STATE</b> (owner state of residence), the abbreviation AE stands for U.S. Armed Forces –
            Europe.
        </Typography>
    </React.Fragment>
}

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

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

function SuccessState({ classes, state }) {
  const { details } = state;
  const org = useOrganization();
  useEffect(() => {
    if (details.recieptId) {
      Organization.logDonation(details);
    }
  }, [details, state]);

  const date = new Date(details.createdDate).toLocaleString();
  return (
    <>
      <Typography align="left" variant="body1" gutterBottom>
        Thank you for your generosity! Your donation will help our team of volunteers connect food
        to those in need.
      </Typography>
      <Typography align="left" variant="h2" gutterBottom color="textPrimary">
        Donation Summary
      </Typography>
      <Box className={classes.successDetails}>
        <span>Organization: {org.displayName} </span>
        <span> Donor Name: {details.donorName} </span>
        <span>Amount: ${details.amount} </span>
        <span>Reciept #: {details.recieptId} </span>
        <span>Donated At: {date} </span>
        <span>Payment Method: {details.method}</span>
      </Box>
      {org.EINNumber && (
        <>
          <Divider className={classes.marginVertical} />
          <Typography align="left" variant="subtitle2" gutterBottom>
            <em>
              {org.displayName} is a registered 501(c)3 non-profit organization #{org.EINNumber}.
              Your donation is tax deductible to the extent allowable by law. No goods or services
              were provided by {org.displayName} in return for this contribution.
            </em>
          </Typography>
        </>
      )}
    </>
  );
}

// Vertical Navbar for user dashboard
export default function DashSidebar (props) {
  const classes = useStyles()
  const auth = useSelector(state => state.authReducer)
  const dispatch = useDispatch()
  // For Fetching Saved Schematics
  useEffect(() => {
    dispatch(fetchSchematics())
    dispatch(fetchOtherProjects())
    dispatch(fetchRole())
  }, [dispatch])

  return (
    <>
      <Hidden smDown>
        <div className={classes.toolbar} />
      </Hidden>
      <List>
        <ListItem
          alignItems="flex-start"
          component={RouterLink}
          to="/dashboard"
          style={{ marginTop: '15px' }}
          className={classes.sideItem}
          button
          divider
        >
          <ListItemAvatar>
            <Avatar className={classes.purple}>
              {auth.user.username.charAt(0).toUpperCase()}
            </Avatar>
          </ListItemAvatar>
          <ListItemText
            primary={auth.user.username}
            secondary={
              <React.Fragment>
                <Typography
                  component="span"
                  variant="body2"
                  color="textSecondary"
                >
                  {auth.roles !== null && auth.roles.group.map((value, key) => (<h3 key={value}>{value}</h3>))}
                </Typography>
              </React.Fragment>
            }
          />
        </ListItem>

        <ListItem
          component={RouterLink}
          to="/dashboard/profile"
          className={classes.sideItem}
          button
          divider
        >
          <ListItemText primary='My Profile' />
        </ListItem>
        <ListItem
          component={RouterLink}
          to="/dashboard/schematics"
          className={classes.sideItem}
          button
        >
          <ListItemText primary='My Schematics' />
        </ListItem>
        <Divider />
        {auth.roles && auth.roles.e_sim_reviewer &&
          <ListItem
            component={RouterLink}
            to="/dashboard/review_projects"
            className={classes.sideItem}
            button
          >
            <ListItemText primary='Review Projects' />
          </ListItem>}

      </List>
    </>
  )
}

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

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

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

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

  return (
    <React.Fragment>
      <Breadcrumbs aria-label="breadcrumb">
        <Link component={RouterLink} color="inherit" to="/rules">
          Rules
        </Link>
        <Typography color="textPrimary">{rows.rule.ruleId}</Typography>
      </Breadcrumbs>
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleTitle rule={rows.rule} />
      {rows.rule.description && (
        <p className={classes.ruleDescription}>{rows.rule.description}</p>
      )}
      <Box pt={2} pb={2}>
        <Divider />
      </Box>
      <RuleProjects projects={rows.projects} />
    </React.Fragment>
  );
}

ProfileCard = (props) => {
  const styles = useStyles();
  const { name, clubs, roll, bio, posts, github, linkedin, instagram } = props;

  return (
    <Card className={styles.card}>
      <CardContent>
        <Avatar
          className={styles.avatar}
          //  src={"https://i.pravatar.cc/300"}
        >
          {name
            ? name[0]
            : // + name.split(" ")[1][0]
              'X'}
        </Avatar>

        <h3 className={styles.heading}>{name}</h3>
        <span className={styles.subheader}>
          {roll.substring(0, 6)}XXX <br /> {bio}
        </span>

        <Box display={'flex'}>
          {instagram ? (
            <Box flex={'auto'} p={2}>
              <a target="_blank" href={instagram}>
                <InstagramIcon />
              </a>
            </Box>
          ) : null}
          {github ? (
            <Box flex={'auto'} p={2}>
              <a target="_blank" href={github}>
                <GitHubIcon />
              </a>
            </Box>
          ) : null}
          {linkedin ? (
            <Box flex={'auto'} p={2}>
              <a target="_blank" href={linkedin}>
                <LinkedInIcon style={{ link: { color: 'black' } }} />
              </a>
            </Box>
          ) : null}
        </Box>

        {/* <EditIcon fontSize="small" /> */}
      </CardContent>
      <Divider light />
      <Box display={'flex'}>
        <Box
          p={2}
          flex={'auto'}
          // className={borderedGridStyles.item}
        >
          <p className={styles.statLabel}>Posts</p>
          <p className={styles.statValue}>{posts ? posts.length : 0}</p>
        </Box>

        <Box p={2} flex={'auto'}>
          <p className={styles.statLabel}>Clubs/Comm</p>
          <p className={styles.statValue}>{clubs ? clubs : 0}</p>
        </Box>
      </Box>
    </Card>
  );
}