@material-ui/core#ListItemIcon JavaScript Examples

NavItem = ({ to, title, icon, onClick, disableActive, type }) => {
  const classes = useStyles();
  const location = useLocation();
  const isActive =
    location.pathname === "/trending"
      ? location.pathname + location.search === to
      : location.pathname === to;
  const Icon = icon;
  const Item =
    type === "secondary" ? (
      <CircleItem title={title}>
        <Icon />
      </CircleItem>
    ) : (
      <ListItem
        button
        onClick={onClick}
        className={isActive ? classes.active : ""}
      >
        <ListItemIcon
          className={clsx(classes.icon, {
            [classes.iconActive]: isActive && !disableActive,
          })}
        >
          <Icon />
        </ListItemIcon>
        <ListItemText primary={title} />
      </ListItem>
    );
  return to ? (
    <NavLink to={to} className={classes.text}>
      {Item}
    </NavLink>
  ) : (
    <> {Item} </>
  );
}

DarkModeMenuItem = ({ closeMenu, navItem }) => {
  const { darkMode } = useSelector((state) => state);
  const dispatch = useDispatch();

  const handleDarkMode = () => {
    dispatch(toggleDarkMode(!darkMode));
    closeMenu();
  };

  if (navItem) {
    return (
      <IconButton color="primary" onClick={handleDarkMode}>
        {darkMode ? <Brightness4Icon /> : <Brightness7Icon />}
      </IconButton>
    );
  }

  return (
    <MenuItem onClick={handleDarkMode}>
      <ListItemIcon>
        {darkMode ? (
          <Brightness4Icon style={{ marginRight: 7 }} />
        ) : (
          <Brightness7Icon style={{ marginRight: 7 }} />
        )}
        Dark Mode: {darkMode ? ' ON' : ' OFF'}
      </ListItemIcon>
    </MenuItem>
  );
}

export default function SimpleAccordion() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Accordion>
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
        >
          <Typography className={classes.heading}>Accordion 1</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <List>
            <ListItem button key={1}>
              <ListItemIcon>
                <NotificationsActiveIcon />
              </ListItemIcon>
              <ListItemText primary="Hello" />
            </ListItem>
          </List>
        </AccordionDetails>
      </Accordion>
    </div>
  );
}

UpdateAvatarModal = ({ handleCloseMenu, user }) => {
  const classes = useDialogStyles();
  const [open, setOpen] = useState(false);

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

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

  return (
    <div>
      <MenuItem onClick={handleClickOpen}>
        <ListItemIcon>
          <FaceIcon style={{ marginRight: 7 }} />
          {user.avatar.exists ? 'Change Avatar' : 'Add Avatar'}
        </ListItemIcon>
      </MenuItem>
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="sm"
        classes={{ paper: classes.dialogWrapper }}
        fullWidth
      >
        <DialogTitle onClose={handleClose}>
          {user.avatar.exists ? 'Update your avatar' : 'Add an avatar'}
        </DialogTitle>
        <DialogContent>
          <UpdateAvatarForm closeModal={handleClose} />
        </DialogContent>
      </Dialog>
    </div>
  );
}

function UserMoreMenu({ id }) {
  const navigate = useNavigate();
  const ref = useRef(null);
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <IconButton ref={ref} onClick={() => setIsOpen(true)}>
        <Icon icon={moreVerticalFill} width={20} height={20} />
      </IconButton>

      <Menu
        open={isOpen}
        anchorEl={ref.current}
        onClose={() => setIsOpen(false)}
        PaperProps={{
          sx: { width: 200, maxWidth: '100%' }
        }}
        anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
      >
        <MenuItem sx={{ color: 'text.secondary' }} onClick={() => navigate(id)}>
          <ListItemIcon>
            <Icon icon={trash2Outline} width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Delete" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>

        <MenuItem component={RouterLink} to="#" sx={{ color: 'text.secondary' }}>
          <ListItemIcon>
            <Icon icon={editFill} width={24} height={24} />
          </ListItemIcon>
          <ListItemText primary="Create" primaryTypographyProps={{ variant: 'body2' }} />
        </MenuItem>
      </Menu>
    </>
  );
}

SwitchLanguage = forwardRef((props, ref) => {
    const locale = useLocale();
    const setLocale = useSetLocale();
    const classes = useStyles();
    return (
        <MenuItem
            ref={ref}
            className={classes.menuItem}
            onClick={() => {
                setLocale(locale === 'en' ? 'fr' : 'en');
                props.onClick();
            }}
        >
            <ListItemIcon className={classes.icon}>
                <Language />
            </ListItemIcon>
            Switch Language
        </MenuItem>
    );
})

LanguageSelector = ({ languages, onSelect }) => {
  const { t } = useTranslation('languages')
  const [open, setOpen] = useState(false)
  const classes = useStyles()
  console.log({ languages })
  return (
    <>
      <ListItem button onClick={() => setOpen(!open)}>
        <ListItemIcon>
          <LanguageOutlined />
        </ListItemIcon>
        <ListItemText primary={t('selectorTitle')} />
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout={300} unmountOnExit>
        <List component='div' disablePadding>
          {languages.map(lan => (
            <ListItem
              key={lan}
              button
              className={classes.nested}
              onClick={() => onSelect(lan)}
            >
              <ListItemText primary={t(lan)} />
            </ListItem>
          ))}
        </List>
      </Collapse>
    </>
  )
}

function Sidebar(props) {
  const { open, variant, onClose } = props;
  const classes = useStyles();
  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      open={open}
      onClose={onClose}
      variant={variant}
    >
      <section className={classes.root}>
        <Hidden mdUp>
          <IconButton className={classes.menuButton} aria-label="Menu" onClick={onClose}>
            <CloseIcon />
          </IconButton>
        </Hidden>
        <Profile className={classes.profile} />
        <List component="div" disablePadding>
          {pages.map(page => (
            <ListItem
              key={page.title}
              activeClassName={classes.activeListItem}
              className={classes.listItem}
              component={NavLink}
              to={page.href}
            >
              <ListItemIcon className={classes.listItemIcon}>{page.icon}</ListItemIcon>
              <ListItemText classes={{ primary: classes.listItemText }} primary={page.title} />
            </ListItem>
          ))}
        </List>
      </section>
    </Drawer>
  );
}

function ListItemLink(props) {
  const selected = useMatch(props.to);
  const CustomLink = React.useMemo(
    () => React.forwardRef((linkProps, ref) => <Link ref={ref} to={props.to} {...linkProps} />),
    [props.to],
  );

  return (
    <li>
      <ListItem selected={selected} button component={CustomLink}>
        <ListItemIcon>{props.icon}</ListItemIcon>
        <ListItemText primary={props.text} />
      </ListItem>
    </li>
  );
}

OftadehListItemIcon = ({ item }) => (
  <>
    <ListItemAvatar>
      <ListItemIcon>
        <Avatar>
          <Icon color={item.color}>{item.icon}</Icon>
        </Avatar>
      </ListItemIcon>
    </ListItemAvatar>
    <ListItemText primary={item.title} secondary={item.subTitle} />
  </>
)

CreatePost = () => {  
  const [isOpen, setIsOpen] = useState(false);

  const handleOpen = () => {
    setIsOpen(true);
  };

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

  return (
    <>
      <List>
        <ListItem button onClick={handleOpen}>
            <ListItemIcon>
                <AddCircleIcon color="primary" />
            </ListItemIcon>
            <ListItemText primary="Add post" />
        </ListItem>
      </List>

      <CreatePostModal open={isOpen} handleClose={handleClose} />
    </>
  );
}

UserMenuItem = ({ userMenu, drawerOpen, activeRoute, withGradient }) => {
  const classes = useStyles({withGradient})
  const { t } = useTranslation()

  const navLinkClasses =
    classes.itemLink +
    ' ' +
    cx({
      [' ' + classes.menuActiveColor]: activeRoute(userMenu.path)
    })
  const itemText =
    classes.itemText +
    ' ' +
    cx({
      [classes.itemTextMini]: !drawerOpen
    })

  const text = t(userMenu.text)

  return (
    <Tooltip disableHoverListener={drawerOpen} title={text}>
      <ListItem className={classes.collapseItem}>
        <NavLink to={userMenu.path} className={navLinkClasses}>
          <ListItemIcon className={classes.itemIcon}>{userMenu.icon}</ListItemIcon>
          <ListItemText primary={text} disableTypography={true} className={itemText} />
        </NavLink>
      </ListItem>
    </Tooltip>
  )
}

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

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

  return (
    <>
      <List>
        <Divider className={classes.topDivider} />
        <ListItem component={NavLink} to="/admin/dashboard">
          <ListItemIcon>
            <DashboardOutlinedIcon className={classes.active} />
          </ListItemIcon>
          <ListItemText primary="Dashboard" className={classes.active} />
        </ListItem>
        <ListItem component={NavLink} to="/admin/applications">
          <ListItemIcon>
            <ChatBubbleOutlineIcon className={classes.inactive} />
          </ListItemIcon>
          <ListItemText primary="Applications" className={classes.inactive} />
        </ListItem>
        <ListItem component={NavLink} to="/admin/applications">
          <ListItemIcon>
            <ViewWeekOutlinedIcon className={classes.inactive} />
          </ListItemIcon>
          <ListItemText primary="Меню 3" className={classes.inactive} />
        </ListItem>
        <ListItem component={NavLink} to="#">
          <ListItemIcon>
            <ViewAgendaOutlinedIcon className={classes.inactive} />
          </ListItemIcon>
          <ListItemText primary="Меню 4" className={classes.inactive} />
        </ListItem>
        <ListItem component={NavLink} to="#">
          <ListItemIcon>
            <PermIdentityOutlinedIcon className={classes.inactive} />
          </ListItemIcon>
          <ListItemText primary="Меню 5" className={classes.inactive} />
        </ListItem>
        <Divider className={classes.bottomDivider} />
        <ListItem component={NavLink} to="#">
          <ListItemIcon>
            <MoreHorizOutlinedIcon className={classes.inactive} />
          </ListItemIcon>
          <ListItemText primary="Налаштування" className={classes.inactive} />
        </ListItem>
      </List>
    </>
  );
}

CustomDrawer = () => {
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const classes = useStyles()

  const handleOpen = () => setOpen(true)
  const handleClose = () => setOpen(false)
  return (
    <div>
      <IconButton
        onClick={handleOpen}
        edge='start'
        color='inherit'
        aria-label='menu'
      >
        <MenuIcon />
      </IconButton>
      <Drawer
        open={open}
        onClose={handleClose}
        variant='temporary'
        anchor={theme.direction === 'rtl' ? 'right' : 'left'}
        ModalProps={{
          keepMounted: true, // Better open performance on mobile.
        }}
      >
        <div className={classes.drawer}>
          <List>
            <ThemeToogleListItem />
            <LanguageSelector />
            {drawerLinks.map(({ name, url, Icon }) => (
              <ListItem
                button
                component='a'
                href={url}
                target='__blank'
                key={name}
              >
                {Icon && (
                  <ListItemIcon>
                    <Icon />
                  </ListItemIcon>
                )}
                <ListItemText primary={name} />
              </ListItem>
            ))}
          </List>
          <FilterList />
        </div>
      </Drawer>
    </div>
  )
}

MenuItem = ({ menu, drawerOpen, activeRoute, isSubMenuItem, subMenuOpen, onToggleSubMenu, withGradient }) => {
  const { children, path, icon, text } = menu;
  const isSubMenu = Boolean(children);

  const classes = useStyles({ isSubMenu, withGradient });
  const { t } = useTranslation();

  const navLinkClasses = classes.menuItemLink +
    " " +
    cx({
      [classes.menuActiveColor]: !isSubMenu && activeRoute(path)
    });
  const itemTextClasses = classes.menuItemText +
    " " +
    cx({
      [classes.menuItemTextMini]: !drawerOpen
    }) +
    " " +
    cx({ 
      [classes.paddingLeft]: isSubMenuItem 
    });
  const menuItemIconClasses = classes.menuItemIcon + ' ' + cx({ [classes.paddingLeft]: isSubMenuItem });

  const translatedText = t(text)
  const Item = isSubMenu ? ListItem : NavLink;
  const itemProps = isSubMenu ? { onClick: onToggleSubMenu, button: true } : { to: path };

  return (
    <Tooltip disableHoverListener={!drawerOpen} title={translatedText}>
      <ListItem className={classes.menuItem}>
        <Item {...itemProps} className={navLinkClasses}>
          <ListItemIcon className={menuItemIconClasses}>
            {icon}
          </ListItemIcon>
          <ListItemText
            primary={translatedText}
            secondary={isSubMenu && (subMenuOpen ? <ArrowDropUp className={classes.caret} /> : <ArrowDropDown className={classes.caret} />)}
            disableTypography={true}
            className={itemTextClasses}
          />
        </Item>
      </ListItem>
    </Tooltip>
  );
}

function ConnectionsListItem({ origin, connectedWallet }) {
  const classes = useStyles();
  const [open, setOpen] = useState(false);
  // TODO better way to get high res icon?
  const appleIconUrl = origin + '/apple-touch-icon.png';
  const faviconUrl = origin + '/favicon.ico';
  const [iconUrl, setIconUrl] = useState(appleIconUrl);
  const { accounts } = useWalletSelector();
  // TODO better way to do this
  const account = accounts.find(
    (account) => account.address.toBase58() === connectedWallet.publicKey,
  );

  const setAutoApprove = (autoApprove) => {
    chrome.storage.local.get('connectedWallets', (result) => {
      result.connectedWallets[origin].autoApprove = autoApprove;
      chrome.storage.local.set({ connectedWallets: result.connectedWallets });
    });
  };

  const disconnectWallet = () => {
    chrome.storage.local.get('connectedWallets', (result) => {
      delete result.connectedWallets[origin];
      chrome.storage.local.set({ connectedWallets: result.connectedWallets });
    });
  };

  return (
    <>
      <ListItem button onClick={() => setOpen((open) => !open)}>
        <ListItemIcon>
          <div className={classes.listItemIcon}>
            <img
              src={iconUrl}
              onError={() => setIconUrl(faviconUrl)}
              className={classes.listItemImage}
              alt=""
            />
          </div>
        </ListItemIcon>
        <div style={{ display: 'flex', flex: 1 }}>
          <ListItemText primary={origin} secondary={account.name} />
        </div>
        {open ? <ExpandLess /> : <ExpandMore />}
      </ListItem>
      <Collapse in={open} timeout="auto" unmountOnExit>
        <div class={classes.itemDetails}>
          <div class={classes.buttonContainer}>
            <Button
              variant={connectedWallet.autoApprove ? 'contained' : 'outlined'}
              color="primary"
              size="small"
              startIcon={<DoneAll />}
              onClick={() => setAutoApprove(!connectedWallet.autoApprove)}
            >
              {connectedWallet.autoApprove ? 'Auto-Approved' : 'Auto-Approve'}
            </Button>
            <Button
              variant="outlined"
              color="secondary"
              size="small"
              startIcon={<DeleteIcon />}
              onClick={disconnectWallet}
            >
              Disconnect
            </Button>
          </div>
        </div>
      </Collapse>
    </>
  );
}

SideList = (props) => {

    const useStyles = makeStyles((theme) => ({

        icons: {
            width: "20px",
            height: "20px",
        },

        listIcon: {
            minWidth: "30px"
        },

        paper: {
            display: "flex",
            minWidth: "100%",
            border: "none",
            backgrounColor: "transparent",
            boxShadow: "none"
        },

        navLink: {
            display: "flex",
            flexDirection: "row",
            alignItems: "center"
        },

        menuList: {
            border: "none", boxShadow: "none"
        },

        paper:{
            maxWidth: '100%', border: "none", boxShadow: "none"
	}
    }));
    const classes = useStyles();
    return (


        <Paper className={classes.paper}>
            <MenuList className={classes.menuList}>
      {props.menuItems.map(function (item, index) {
          return (
          <>
              {
                  item.link && <MenuItem key={item.link}>
                          <NavLink to={item.link} className={classes.navLink }>
                              {item.img && <ListItemIcon className={classes.listIcon}>
                              <img src={item.img} className={classes.icons} />
                          </ListItemIcon>}
                          <ListItemText>{item.name}</ListItemText>
                      </NavLink>
                  </MenuItem>
              }
                  {
                      !item.link && !item.onClick &&<MenuItem key={item.name}>
                          {item.img && <ListItemIcon className={classes.listIcon}>
                                  <img src={item.img} className={classes.icons} />
                              </ListItemIcon>}
                              <ListItemText>{item.name}</ListItemText>
                      </MenuItem>

                  }
                  {
                      !item.link && item.onClick && <MenuItem key={item.name} onClick={()=>item.onClick}>
                          {item.img && <ListItemIcon className={classes.listIcon}>
                              <img src={item.img} className={classes.icons} />
                          </ListItemIcon>}
                          <ListItemText>{item.name}</ListItemText>
                      </MenuItem>

                  }
                  </>
       )})}
      </MenuList>
    </Paper>
    );
}

SubFormModal = ({ type, handleCloseMenu }) => {
  const classes = useDialogStyles();
  const [open, setOpen] = useState(false);

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

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

  const handleOpenMenu = () => {
    handleClickOpen();
    handleCloseMenu();
  };

  return (
    <div>
      {type !== 'menu' ? (
        <Button
          color="primary"
          variant="contained"
          onClick={handleClickOpen}
          fullWidth
          className={classes.createSubBtn}
          size="large"
          startIcon={<AddCircleIcon />}
        >
          Create New Subreddish
        </Button>
      ) : (
        <MenuItem onClick={handleOpenMenu}>
          <ListItemIcon>
            <AddCircleIcon style={{ marginRight: 7 }} />
            Create Subreddish
          </ListItemIcon>
        </MenuItem>
      )}
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="sm"
        classes={{ paper: classes.dialogWrapper }}
        fullWidth
      >
        <DialogTitle onClose={handleClose}>Create a new subreddish</DialogTitle>
        <DialogContent>
          <SubForm />
        </DialogContent>
      </Dialog>
    </div>
  );
}

LeftNav = ({ onOpenMenuClick, isNavOpen }) => {
  const classes = useStyles();
  const location = useLocation();

  const routes = [
    { title: "Dashboard", icon: (props) => <DashboardIcon {...props} />, url: UrlService.dashboard(), activeRoutes: [UrlService.dashboard()] },
    {
      title: "Deployments",
      icon: (props) => <CloudIcon {...props} />,
      url: UrlService.deploymentList(),
      activeRoutes: [UrlService.deploymentList(), "/deployment"]
    },
    { title: "Templates", icon: (props) => <CollectionsIcon {...props} />, url: UrlService.templates(), activeRoutes: [UrlService.templates()] },
    { title: "Providers", icon: (props) => <DnsIcon {...props} />, url: UrlService.providers(), activeRoutes: [UrlService.providers()] },
    { title: "Settings", icon: (props) => <SettingsIcon {...props} />, url: UrlService.settings(), activeRoutes: [UrlService.settings()] }
  ];

  return (
    <div className={classes.root} style={{ width: isNavOpen ? drawerWidth : closedDrawerWidth }}>
      <List className={classes.list}>
        <ListItem>
          <ListItemIcon className={classes.closedListItemIcon}>
            <IconButton size="small" onClick={onOpenMenuClick} className={classes.toggleButton}>
              {isNavOpen ? <MenuOpenIcon /> : <MenuIcon />}
            </IconButton>
          </ListItemIcon>

          <ListItemText
            primary={
              <Button size="small" variant="contained" color="primary" fullWidth component={Link} to="/createDeployment" className={classes.deployButton}>
                Deploy
              </Button>
            }
            primaryTypographyProps={{
              component: "div",
              className: classes.deployButtonContainer,
              style: { opacity: isNavOpen ? 1 : 0, flex: 1 }
            }}
          />
        </ListItem>

        {routes.map((route) => {
          const isSelected = route.url === UrlService.dashboard() ? location.pathname === "/" : route.activeRoutes.some((x) => location.pathname.startsWith(x));
          const listItemIcon = (
            <ListItemIcon color="primary" className={classes.closedListItemIcon}>
              {route.icon({ color: isSelected ? "primary" : "disabled" })}
            </ListItemIcon>
          );

          return (
            <ListItem button key={route.title} component={Link} to={route.url} selected={isSelected}>
              {isNavOpen ? (
                listItemIcon
              ) : (
                <Tooltip classes={{ tooltip: classes.tooltip }} arrow title={route.title} placement="right">
                  {listItemIcon}
                </Tooltip>
              )}

              <ListItemText
                primary={route.title}
                primaryTypographyProps={{
                  className: clsx(classes.listText, { [classes.selected]: isSelected, [classes.notSelected]: !isSelected }),
                  style: { opacity: isNavOpen ? 1 : 0 }
                }}
              />
            </ListItem>
          );
        })}
      </List>
    </div>
  );
}

AuthFormModal = ({ closeMobileMenu, type }) => {
  const classes = useDialogStyles();
  const classesBtn = useNavStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const [open, setOpen] = useState(false);

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

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

  const handleMobileMenu = () => {
    handleClickOpen();
    closeMobileMenu();
  };

  return (
    <div>
      {type === 'upvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowUpwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : type === 'downvote' ? (
        <IconButton
          onClick={handleClickOpen}
          fontSize={isMobile ? 'small' : 'medium'}
        >
          <ArrowDownwardIcon style={{ color: '#b2b2b2' }} />
        </IconButton>
      ) : isMobile ? (
        <MenuItem onClick={handleMobileMenu}>
          <ListItemIcon>
            <ExitToAppIcon style={{ marginRight: 7 }} />
            Login/Register
          </ListItemIcon>
        </MenuItem>
      ) : (
        <Button
          color="primary"
          onClick={handleClickOpen}
          className={classesBtn.navButtons}
        >
          Login/Register
        </Button>
      )}
      <Dialog
        open={open}
        onClose={handleClose}
        maxWidth="md"
        classes={{ paper: classes.dialogWrapper }}
      >
        <DialogTitle onClose={handleClose}></DialogTitle>
        <DialogContent>
          <AuthForm />
        </DialogContent>
      </Dialog>
    </div>
  );
}

SelectNetworkModal = ({ onClose }) => {
  const classes = useStyles();
  const { selectedNetworkId } = useSettings();
  const [localSelectedNetworkId, setLocalSelectedNetworkId] = useState(selectedNetworkId);

  const handleSelectNetwork = (network) => {
    setLocalSelectedNetworkId(network.id);
  };

  const handleSaveChanges = () => {
    if (selectedNetworkId !== localSelectedNetworkId) {
      // Set in the settings and local storage
      localStorage.setItem("selectedNetworkId", localSelectedNetworkId);
      // Reset the ui to reload the settings for the currently selected network
      ipcApi.send("relaunch");
    } else {
      onClose();
    }
  };

  return (
    <Dialog open={true} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>Select Network</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <List className={classes.list}>
          {networks.map((network) => {
            return (
              <ListItem key={network.id} dense button onClick={() => handleSelectNetwork(network)}>
                <ListItemIcon>
                  <Radio checked={localSelectedNetworkId === network.id} value={network.id} />
                </ListItemIcon>
                <ListItemText
                  classes={{ secondary: classes.secondaryText }}
                  primary={
                    <Box display="flex" alignItems="center" justifyContent="space-between" fontSize="1rem">
                      <span>
                        {network.title}
                        {" - "}
                        <Typography variant="caption" className={classes.version}>
                          {network.version}
                        </Typography>
                      </span>
                      {network.id !== mainnetId && <Chip label="Experimental" size="small" color="secondary" className={classes.experimentalChip} />}
                    </Box>
                  }
                  secondary={network.description}
                />
              </ListItem>
            );
          })}
        </List>

        {localSelectedNetworkId !== mainnetId && (
          <Alert variant="outlined" severity="warning" className={classes.alert}>
            <Typography variant="body1">
              <strong>Warning</strong>
            </Typography>

            <Typography variant="body2">Changing networks will restart the app and some features are experimental.</Typography>
          </Alert>
        )}
      </DialogContent>
      <DialogActions className={classes.dialogActions}>
        <Button onClick={onClose} type="button" autoFocus>
          Close
        </Button>
        <Button variant="contained" onClick={handleSaveChanges} color="primary" type="button">
          Save
        </Button>
      </DialogActions>
    </Dialog>
  );
}

DrawerItem = (props) => {
    const router = useRouter()
    return(
    <ListItem style={{width : '250px', cursor: 'pointer'}} onClick={() => router.push(props.link)}>
        <ListItemIcon>{props.icon === undefined ? <MenuIcon /> : props.icon}</ListItemIcon>
    <ListItemText>{props.label}</ListItemText>
    </ListItem>)
}

// ----------------------------------------------------------------------

export default function LanguagePopover() {
  const anchorRef = useRef(null);
  const [open, setOpen] = useState(false);

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

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

  return (
    <>
      <IconButton
        ref={anchorRef}
        onClick={handleOpen}
        sx={{
          padding: 0,
          width: 44,
          height: 44,
          ...(open && {
            bgcolor: (theme) => alpha(theme.palette.primary.main, theme.palette.action.focusOpacity)
          })
        }}
      >
        <img src={LANGS[0].icon} alt={LANGS[0].label} />
      </IconButton>

      <MenuPopover open={open} onClose={handleClose} anchorEl={anchorRef.current}>
        <Box sx={{ py: 1 }}>
          {LANGS.map((option) => (
            <MenuItem
              key={option.value}
              selected={option.value === LANGS[0].value}
              onClick={handleClose}
              sx={{ py: 1, px: 2.5 }}
            >
              <ListItemIcon>
                <Box component="img" alt={option.label} src={option.icon} />
              </ListItemIcon>
              <ListItemText primaryTypographyProps={{ variant: 'body2' }}>
                {option.label}
              </ListItemText>
            </MenuItem>
          ))}
        </Box>
      </MenuPopover>
    </>
  );
}

MenuList = () => {
	const classes = useStyles();
	const location = useLocation();
	const { push } = useHistory();
	const { authService } = useOktaAuth();

	const logout = async () => {
		await authService.logout("/");
	};

	return (
		<>
			<Hidden xsDown>
				<Button className={classes.logoButton} onClick={() => push("/home")}>
					<img className={classes.logo} src={logo} alt="SoMe logo" />
				</Button>
			</Hidden>
			<CreatePost />
			<List aria-label="Menu">
				<ListItem button onClick={() => push("/home")}>
					<ListItemIcon>
						<DashboardIcon
							className={
								location.pathname.includes("/home")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Media Manager" />
				</ListItem>
				<ListItem button onClick={() => push("/analytics")}>
					<ListItemIcon>
						<TrendingUpIcon
							className={
								location.pathname.includes("/analytics")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Analytics" />
				</ListItem>
				<ListItem button onClick={() => push("/connect/twitter")}>
					<ListItemIcon>
						<AccountBoxIcon
							className={
								location.pathname.includes("/connect")
									? classes.selectedIcon
									: classes.icon
							}
						/>
					</ListItemIcon>
					<ListItemText primary="Accounts" />
				</ListItem>
			</List>
			<List>
				<ListItem button onClick={logout}>
					<ListItemIcon>
						<ExitToAppIcon color="primary" />
					</ListItemIcon>
					<ListItemText primary="Logout" />
				</ListItem>
			</List>
		</>
	);
}

export function PrerequisiteList({ selectedTemplate, setSelectedTemplate }) {
  const classes = useStyles();
  const [isLoadingPrerequisites, setIsLoadingPrerequisites] = useState(false);
  const [isBalanceValidated, setIsBalanceValidated] = useState(null);
  const [isCertificateValidated, setIsCertificateValidated] = useState(null);
  const [isLocalCertificateValidated, setIsLocalCertificateValidated] = useState(null);
  const { refreshBalance } = useWallet();
  const { loadValidCertificates, localCert, isLocalCertMatching } = useCertificate();
  const history = useHistory();
  const queryParams = useQueryParams();
  const { getDeploymentData } = useLocalNotes();
  const { getTemplateById } = useTemplates();

  const allCheckSucceeded = isCertificateValidated && isLocalCertificateValidated;

  useEffect(() => {
    const redeployTemplate = getRedeployTemplate();
    const galleryTemplate = getGalleryTemplate();

    if (redeployTemplate) {
      // If it's a redeploy, set the template from local storage
      setSelectedTemplate(redeployTemplate);
    } else if (galleryTemplate) {
      // If it's a deploy from the template gallery, load from template data
      setSelectedTemplate(galleryTemplate);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    async function loadPrerequisites() {
      setIsLoadingPrerequisites(true);

      const balance = await refreshBalance();
      const validCertificates = await loadValidCertificates();
      const currentCert = validCertificates.find((x) => x.parsed === localCert?.certPem);
      const isBalanceValidated = balance >= 5000000;
      const isCertificateValidated = currentCert?.certificate?.state === "valid";
      const isLocalCertificateValidated = !!localCert && isLocalCertMatching;

      setIsBalanceValidated(isBalanceValidated);
      setIsCertificateValidated(isCertificateValidated);
      setIsLocalCertificateValidated(isLocalCertificateValidated);

      setIsLoadingPrerequisites(false);

      // Auto redirect when all is good
      const redeployTemplate = getRedeployTemplate();
      const galleryTemplate = getGalleryTemplate();
      if (isBalanceValidated && isCertificateValidated && isLocalCertificateValidated) {
        if (redeployTemplate || galleryTemplate) {
          history.replace(UrlService.createDeploymentStepManifest());
        } else {
          history.replace(UrlService.createDeploymentStepTemplate());
        }
      }
    }

    loadPrerequisites();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [refreshBalance, loadValidCertificates, localCert, isLocalCertMatching]);

  const getRedeployTemplate = () => {
    let template = null;
    if (queryParams.get("redeploy")) {
      const deploymentData = getDeploymentData(queryParams.get("redeploy"));

      if (deploymentData && deploymentData.manifest) {
        template = {
          code: "empty",
          content: deploymentData.manifest
        };
      }
    }

    return template;
  };

  const getGalleryTemplate = () => {
    let template = null;
    if (queryParams.get("templateId")) {
      const templateById = getTemplateById(queryParams.get("templateId"));
      if (templateById) {
        template = {
          code: "empty",
          content: templateById.deploy,
          valuesToChange: templateById.valuesToChange || []
        };
      }
    }

    return template;
  };

  function handleNextClick() {
    if (selectedTemplate) {
      history.replace(UrlService.createDeploymentStepManifest());
    } else {
      history.replace(UrlService.createDeploymentStepTemplate());
    }
  }

  return (
    <div className={classes.root}>
      <Helmet title="Create Deployment - Prerequisites" />

      <List className={classes.list}>
        <ListItem>
          <ListItemIcon>
            {isBalanceValidated === null && <CircularProgress />}
            {isBalanceValidated === true && <CheckCircleOutlineIcon fontSize="large" style={{ color: green[500] }} />}
            {isBalanceValidated === false && <ErrorOutlineIcon fontSize="large" color="secondary" />}
          </ListItemIcon>
          <ListItemText
            primary="Wallet Balance"
            secondary="The balance of the wallet needs to be of at least 5 AKT. If you do not have 5 AKT, you will need to specify an authorized depositor."
          />
        </ListItem>

        <ListItem>
          <ListItemIcon>
            {isCertificateValidated === null && <CircularProgress />}
            {isCertificateValidated === true && <CheckCircleOutlineIcon fontSize="large" style={{ color: green[500] }} />}
            {isCertificateValidated === false && <ErrorOutlineIcon fontSize="large" color="secondary" />}
          </ListItemIcon>
          <ListItemText primary="Valid certificate on the blockchain" secondary="A valid certificate must be present on the blockchain" />
        </ListItem>

        <ListItem>
          <ListItemIcon>
            {isLocalCertificateValidated === null && <CircularProgress />}
            {isLocalCertificateValidated === true && <CheckCircleOutlineIcon fontSize="large" style={{ color: green[500] }} />}
            {isLocalCertificateValidated === false && <ErrorOutlineIcon fontSize="large" color="secondary" />}
          </ListItemIcon>
          <ListItemText
            primary="Valid local certificate"
            secondary={
              <>
                A local certificate must match the on-chain certificate.
                <br />
                {isCertificateValidated &&
                  isLocalCertificateValidated === false &&
                  "If you have a valid certificate on the blockchain but not a valid local certificate, you need to revoke your blockchain certificate and create a new one with the tool."}
              </>
            }
          />
        </ListItem>
      </List>

      <Button variant="contained" color="primary" disabled={!allCheckSucceeded} onClick={handleNextClick}>
        {isLoadingPrerequisites ? <CircularProgress size="1.5rem" color="primary" /> : "Continue"}
      </Button>
    </div>
  );
}

export default function App() {
  const classes = useStyles()
  const [open, setOpen] = React.useState(true)

  const { loginWithRedirect, logout, isAuthenticated } = useAuth0()

  const handleDrawerOpen = () => {
    setOpen(true)
  }
  const handleDrawerClose = () => {
    setOpen(false)
  }

  return (
    <Router>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="absolute"
          className={clsx(classes.appBar, open && classes.appBarShift)}
        >
          <Toolbar className={classes.toolbar}>
            <IconButton
              edge="start"
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              className={clsx(
                classes.menuButton,
                open && classes.menuButtonHidden
              )}
            >
              <MenuIcon />
            </IconButton>
            <img
              className={classes.appBarImage}
              src="img/grandstack.png"
              alt="GRANDstack logo"
            />
            <Typography
              component="h1"
              variant="h6"
              color="inherit"
              noWrap
              className={classes.title}
            >
              Welcome To GRANDstack App
            </Typography>
            {!isAuthenticated && (
              <Button color="inherit" onClick={() => loginWithRedirect()}>
                Log In
              </Button>
            )}
            {isAuthenticated && (
              <Button color="inherit" onClick={() => logout()}>
                Log Out
              </Button>
            )}
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          classes={{
            paper: clsx(classes.drawerPaper, !open && classes.drawerPaperClose),
          }}
          open={open}
        >
          <div className={classes.toolbarIcon}>
            <IconButton onClick={handleDrawerClose}>
              <ChevronLeftIcon />
            </IconButton>
          </div>
          <Divider />
          <List>
            <Link to="/" className={classes.navLink}>
              <ListItem button>
                <ListItemIcon>
                  <DashboardIcon />
                </ListItemIcon>
                <ListItemText primary="Dashboard" />
              </ListItem>
            </Link>

            <Link to="/search" className={classes.navLink}>
              <ListItem button>
                <ListItemIcon>
                  <PeopleIcon />
                </ListItemIcon>
                <ListItemText primary="Search" />
              </ListItem>
            </Link>

            <Link to="/create" className={classes.navLink}>
              <ListItem button>
                <ListItemIcon>
                  <HouseIcon />
                </ListItemIcon>
                <ListItemText primary="Create Property" />
              </ListItem>
            </Link>
          </List>
          <Divider />
        </Drawer>
        <main className={classes.content}>
          <div className={classes.appBarSpacer} />
          <Profile />
          <Container maxWidth="lg" className={classes.container}>
            <Switch>
              <Route exact path="/" component={Dashboard} />
              <Route exact path="/businesses" component={UserList} />
              <Route exact path="/search" component={Search} />
              <Route exact path="/create" component={CreateProperty} />
            </Switch>

            <Box pt={4}>
              <Copyright />
            </Box>
          </Container>
        </main>
      </div>
    </Router>
  )
}

function ResultPage(props) {
	const [quizId, setQuizId] = useState(props.match.params.id);
	const [loading, setLoading] = useState(true);

	const [name, setName] = useState("");
	const [marks, setMarks] = useState(null);
	const [responses, setResponses] = useState([]);


	const resIcon = (response) => {
		if(response.selected === response.correctAnswer) {
			return <Check style={{color: 'green', marginLeft: '3px'}} />
		} else if(response.selected === null) {
			return <Warning style={{color: 'goldenrod', marginLeft: '3px'}} />
		} 
		else {
			return <Close style={{color: 'red', marginLeft: '3px'}} />
		}
	}

	const getDetails = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/${quizId}`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setName(res.data.result.quizName);
			})
		} catch (error) {
			console.log(error);
		}
	}

	const getResponses = async () => {
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/user/studentQuizResult/${quizId}`;

		try {
			await axios.get(url, {
				headers: {
					"auth-token": token
				}
			}).then(res => {
				setMarks(res.data.result.marks);
				setResponses(res.data.result.responses);
				setLoading(false);
			})
		} catch (error) {
			console.log(error);
		}
	}

	useState(() => {
		getDetails();
		getResponses();
	}, [])

	if (loading) {
		return <Loading />
	}

	return (
		<Container className="result-page">
			<div className="result-head">
				<Typography variant="h4" className="result-title">Results</Typography>
			</div>
			<div className="result-quiz-info">
				<Typography variant="h5"><span className="profile-param">Quiz:</span> <strong>{name}</strong></Typography>
				<Typography variant="h5"><span className="profile-param">Scored:</span> <strong>{marks}</strong> out of <strong>{responses.length}</strong></Typography>
			</div>
			<div className="result-responses">
				<div className="result-response-title">
					<Typography variant="h5">Responses</Typography>
				</div>
				<div className="result-responses-list">
					{responses.map((response) => (
						<ExpansionPanel elevation={3} className="expansion" key={response.quesId}>
							<ExpansionPanelSummary
								className="question-response"
								expandIcon={<ExpandMore />}
								aria-controls="question-content"
								aria-label="Expand"
							>
								<Typography className="question-label">{response.description} {resIcon(response)}</Typography>
							</ExpansionPanelSummary>
							<ExpansionPanelDetails>
								<List component="nav" className="options-display">
									{response.options.map((option) => (
										<ListItem button key={option._id}>
											<ListItemIcon><Adjust style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} /></ListItemIcon>
											<ListItemText style={{ color: response.correctAnswer === option.text ? 'green' : (response.selected === option.text? 'red': 'black') }} primary={option.text} />
										</ListItem>
									))}
								</List>
							</ExpansionPanelDetails>
						</ExpansionPanel>
					))}
				</div>
			</div>
		</Container>
	)
}

OftadehAvatarMenu = props => {
  const classes = useStyles(props);

  const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);

  const handleToggle = () => {
    setOpen(prevOpen => !prevOpen);
  };

  const handleClose = event => {
    if (anchorRef.current && anchorRef.current.contains(event.target)) {
      return;
    }

    setOpen(false);
  };

  return (
    <>
      <ListItem
        button
        ref={anchorRef}
        aria-controls={open ? "menu-list-grow" : undefined}
        aria-haspopup="true"
        onClick={handleToggle}
        alignItems="flex-start"
        className={classes.paddingRightZero}
      >
        <ListItemAvatar>
          <OftadehAvatarBadge
            overlap="circle"
            anchorOrigin={{
              vertical: "bottom",
              horizontal: "right"
            }}
            variant="dot"
          >
            <Avatar
              alt="Mohammad Oftadeh"
              src="https://lh5.googleusercontent.com/-WqhFe4eMggE/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rdFUa5CK9Wi6g5qd8ZUt6apKFYSwA/photo.jpg?sz=328"
            />
          </OftadehAvatarBadge>
        </ListItemAvatar>
        <Hidden implementation="css" smDown>
          <ListItemText
            primary={
              <React.Fragment>
                <Typography component="span" variant="subtitle2">
                  Mohammad Oftadeh
                </Typography>
              </React.Fragment>
            }
            secondary={
              <React.Fragment>
                <Typography
                  component="span"
                  variant="caption"
                  className={classes.inline}
                  color="textPrimary"
                >
                  Admin
                </Typography>
              </React.Fragment>
            }
          />
        </Hidden>
      </ListItem>
      <Popper
        open={open}
        anchorEl={anchorRef.current}
        role={undefined}
        transition
        disablePortal
      >
        {({ TransitionProps, placement }) => (
          <Grow
            {...TransitionProps}
            style={{
              transformOrigin:
                placement === "bottom" ? "center top" : "center bottom"
            }}
          >
            <Paper>
              <ClickAwayListener onClickAway={handleClose}>
                <MenuList autoFocusItem={open} id="menu-list-grow">
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <AccountCircle fontSize="small" />
                    </ListItemIcon>
                    Profile
                  </MenuItem>
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <Settings fontSize="small" />
                    </ListItemIcon>
                    settings
                  </MenuItem>
                  <MenuItem onClick={handleClose}>
                    <ListItemIcon className={classes.menuIcon}>
                      <ExitToApp fontSize="small" />
                    </ListItemIcon>
                    Logout
                  </MenuItem>
                </MenuList>
              </ClickAwayListener>
            </Paper>
          </Grow>
        )}
      </Popper>
    </>
  );
}