@material-ui/core#useMediaQuery JavaScript Examples

StartNav = ({ mobile }) => {
  const dispatch = useDispatch();
  const classes = useStyles();
  const theme = useTheme();
  const isMinScreenLg = useMediaQuery(theme.breakpoints.up("lg"));

  useEffect(() => {
    if (!mobile) dispatch(setDrawer(isMinScreenLg));
  });

  return (
    <Toolbar
      classes={{
        gutters: classes.toolbar,
      }}
    >
      <IconButton
        aria-label="open drawer"
        edge="start"
        className={classes.iconButton}
        onClick={() => dispatch(toggleDrawer())}
      >
        <MenuIcon />
      </IconButton>
      <NavLink to="/">
        <img
          src={youtubeLogo}
          className={classes.youtubeLogo}
          alt="YouTube logo"
        />
      </NavLink>
    </Toolbar>
  );
}

Menu = ({ onMenuClick, logout }) => {
	const isXSmall = useMediaQuery((theme) => theme.breakpoints.down('xs'));
	const open = useSelector((state) => state.admin.ui.sidebarOpen);
	const resources = useSelector(getResources);
	const translate = useTranslate();
	return (
		<div>
			{resources.map((resource) => (
				<MenuItemLink
					key={resource.name}
					to={`/${resource.name}`}
					primaryText={translate(`resources.${resource.name}.name`)}
					leftIcon={resource.icon ? <resource.icon /> : <DefaultIcon />}
					onClick={onMenuClick}
					sidebarIsOpen={open}
				/>
			))}
			{isXSmall && logout}
		</div>
	);
}

TopPanel = () => {
  const [, dispatch] = useEntryContext();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const classes = useTopPanelStyles();

  return (
    <Paper className={classes.root}>
      <Search />
      <Filter />
      {!isMobile ? (
        <Button
          className={classes.desktopButton}
          component={RouterLink}
          to="/add_update"
          size="large"
          variant="contained"
          color="primary"
          startIcon={<PostAddIcon />}
          onClick={() => dispatch(resetEditValues())}
        >
          Add Entry
        </Button>
      ) : (
        <HideOnScroll>
          <Fab
            className={classes.fab}
            color="primary"
            component={RouterLink}
            to="/add_update"
            onClick={() => dispatch(resetEditValues())}
          >
            <PostAddIcon />
          </Fab>
        </HideOnScroll>
      )}
    </Paper>
  );
}

NotificationPanelPopper = ({ open, anchorEl, children }) => {
  const classes = useStyles();
  const mediaQuery = useMediaQuery('(max-width: 600px)');

  return (
    <Popper
      open={open}
      anchorEl={mediaQuery ? undefined : anchorEl.current}
      disablePortal={!mediaQuery}
      modifiers={mediaQuery ? fullscreenModifiers : modifiers}
      placement="bottom-end"
      className={mediaQuery ? classes.popperContainerStyle : ''}
      style={{ zIndex: mediaQuery ? 2 : 'unset' }}
    >
      {!mediaQuery && (
        <div x-arrow="true" className={classes.popperArrowStyle}></div>
      )}
      {children}
    </Popper>
  );
}

CommentList = props => {
    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));

    return (
        <List
            {...props}
            perPage={6}
            exporter={exporter}
            filters={<CommentFilter />}
            pagination={<CommentPagination />}
            component="div"
        >
            {isSmall ? <CommentMobileList /> : <CommentGrid />}
        </List>
    );
}

AppBar = (props) => {
	const classes = useStyles();
	const isBigger = useMediaQuery((theme) => theme.breakpoints.up('sm'));
	return (
		// eslint-disable-next-line react/jsx-props-no-spreading
		<AppBarRA {...props} className={classes.AppBarRA}>
			{isBigger ? (
				<img
					src="/images/logo-sabia.png"
					title="Plataforma Sabiá - ADMIN"
					alt="Plataforma Sabiá - ADMIN"
					height="40"
					className={classes.logo}
				/>
			) : (
				<></>
			)}
			<Typography
				variant="h6"
				color="inherit"
				className={classes.title}
				id="react-admin-title"
			/>
			<span className={classes.spacer} />
			<LocaleSwitcher />
		</AppBarRA>
	);
}

function Search() {
  const theme = useTheme()
  const amp = useAmp()
  const isDesktop = useMediaQuery(theme.breakpoints.up('sm')) && !amp

  return (
    <>
      {!isDesktop && <SearchMobile />}
      <Spacer />
      {isDesktop && <SearchDesktop />}
    </>
  )
}

export default function VideoPage({ location }) {
  const classes = useStyles();
  const { v: id } = queryString.parse(location.search);
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.down("sm"));

  return (
    <div className={classes.container}>
      <Grid container spacing={2}>
        <Grid item xs={12} md={8}>
          <VideoContent videoId={id} />

          {isMaxScreenSm ? (
            <SecondaryVidContent />
          ) : (
            <CommentsContent videoId={id} />
          )}
          {isMaxScreenSm && <Divider className={classes.divider} />}
        </Grid>
        <Grid item xs={12} md={4}>
          {isMaxScreenSm ? (
            <CommentsContent videoId={id} />
          ) : (
            <SecondaryVidContent />
          )}
        </Grid>
      </Grid>
    </div>
  );
}

function Dashboard({ children }) {
  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up('lg'), {
    defaultMatches: true
  });
  const [openSidebar, setOpenSidebar] = useState(false);

  const handleToggleSidebar = () => {
    setOpenSidebar(!openSidebar);
  };

  return (
    <div className={classes.root}>
      <TopBar openSidebar={openSidebar} onToggleSidebar={handleToggleSidebar} />
      <Sidebar
        onClose={handleToggleSidebar}
        open={openSidebar}
        variant={isDesktop ? 'persistent' : 'temporary'}
      />
      <main className={clsx({ [classes.contentShift]: openSidebar, [classes.content]: true })}>
        {children}
        <Footer />
      </main>
    </div>
  );
}

SideDrawer = props => {
  const { className, ...rest } = props;
  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
    defaultMatches: true
  });

  return (
    <Drawer
      anchor="left"
      classes={{ paper: classes.drawer }}
      onClose={props.closed}
      open={props.open}
      variant={props.variant}
    >
      <div className={clsx(classes.root, className)}>
        {!isDesktop ? (
          <div className={styles.Logo}>
            <Logo />
          </div>
        ) : (
          ""
        )}
        {!isDesktop ? <Divider className={classes.divider} /> : ""}
        <nav>
          <NavigationItems className={classes.nav} />
        </nav>
      </div>
    </Drawer>
  );
}

export default function MyApp({ Component, pageProps }) {

  const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)')
  const [theme, setTheme] = useState(
    prefersDarkMode ? darkTheme : lightTheme
  )

  useEffect(() => {
    setTheme(prefersDarkMode ? darkTheme : lightTheme)
  }, [prefersDarkMode])

  useEffect(() => {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }, []);

  return (
    <React.Fragment>
      <Head>
        <title>Kaustubh Odak</title>
        <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      </Head>
      <MuiThemeProvider theme={theme}>
        <CssBaseline />
        <Component {...pageProps} setTheme={setTheme}/>
      </MuiThemeProvider>
    </React.Fragment>
  );
}

SearchPage = ({ location, history }) => {
  const { search_query } = queryString.parse(location.search);
  const [videoResults, setVideoResult] = useState([]);
  const classes = useStyles();
  const theme = useTheme();
  const isMaxScreenSm = useMediaQuery(theme.breakpoints.only("xs"));

  useEffect(() => {
    const fetchVideoContent = async () => {
      try {
        const {
          data: { videos },
        } = await api.get(`/api/videos/search?search_query=${search_query}`);
        setVideoResult(videos || []);
      } catch (err) {
        setVideoResult([]);
      }
    };
    fetchVideoContent();
  }, [search_query]);

  if (!search_query) {
    return <Redirect to="/" />;
  } else {
    return (
      <Container maxWidth="xl" className={classes.root}>
        {(() => {
          if (videoResults.length && isMaxScreenSm) {
            return <VideoList type="vertical_2" videos={videoResults} />;
          } else if (videoResults.length && !isMaxScreenSm) {
            return <VideoList type="horizontal_1" videos={videoResults} />;
          } else {
            return "No videos found";
          }
        })()}
      </Container>
    );
  }
}

describe('mediaUtil tests', () => {
  it('test useIsMobile', async () => {
    useMediaQuery.mockReset();
    useMediaQuery.mockImplementation(() => true);

    const result = useIsMobile();

    expect(useMediaQuery)
      .toHaveBeenCalledWith('(max-width:600px)');
    expect(result)
      .toBeTruthy();
  });

  it('test useIsMediumMobile', async () => {
    useMediaQuery.mockReset();
    useMediaQuery.mockImplementation(() => true);

    const result = useIsMediumMobile();

    expect(useMediaQuery)
      .toHaveBeenCalledWith('(max-width:800px)');
    expect(result)
      .toBeTruthy();
  });
});

export default function MHidden({ width, children }) {
  const breakpoint = width.substring(0, 2);

  const hiddenUp = useMediaQuery((theme) => theme.breakpoints.up(breakpoint));
  const hiddenDown = useMediaQuery((theme) => theme.breakpoints.down(breakpoint));

  if (width.includes('Down')) {
    return hiddenDown ? null : children;
  }

  if (width.includes('Up')) {
    return hiddenUp ? null : children;
  }

  return null;
}

Timer = () => {
  const theme = useTheme()

  const isMD = useMediaQuery(theme.breakpoints.up('md'))
  const isLG = useMediaQuery(theme.breakpoints.up('lg'))
  const isXL = useMediaQuery(theme.breakpoints.up('xl'))

  const getCircleSize = () => {
    if (isXL) return 350
    if (isLG) return 300
    if (isMD) return 250

    return 200
  }

  return (
    <Box width={getCircleSize()} m="auto">
      <LabelButton />
      <CountdownCircle />

      <Box display="flex" justifyContent="center" alignItems="center" my={3}>
        <ResetButton />

        <Box display="flex" flexDirection="column" alignItems="center" mx={3}>
          <ToggleButton />
        </Box>

        <SkipButton />
      </Box>

      <Box display="flex" justifyContent="center">
        <RoundsCounter />
      </Box>

      <FullscreenDialog />
      <DesktopDialog />
    </Box>
  )
}

DevicesFilter = (props) => {
  const classes = useStyles();
  const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
  return (
    <Filter {...props} className={classes.filter}>
      <SearchInput
        placeholder="Tracking ID"
        source="device_tracking_key"
        className={isSmall ? classes.smSearchBar : classes.searchBar}
        alwaysOn
      />
      <SelectInput
        label="Delivery Type"
        source="delivery_mode"
        className={classes.filterSelect}
        choices={config.deliveryTypeChoices.filter((elem) => elem.filterable)}
      />
      <SelectInput
        label="Delivery Status"
        source="delivery_status"
        className={classes.filterSelect}
        choices={config.statusChoices}
      />
      <ReferenceInput
        reference="location"
        source="block"
        filterToQuery={(searchText) => ({ block: searchText })}
        filter={{ distinct_on: "block" }}
        sort={{ field: "block", order: "ASC" }}
      >
        <AutocompleteInput
          optionValue="block"
          optionText="block"
          className={classes.filterSelect}
        />
      </ReferenceInput>
    </Filter>
  );
}

NavBar = ({ mobileOpen, setMobileOpen, tabletOpen, setTabletOpen }) => {
  // used to check current url
  const location = useLocation();

  const theme = useTheme();
  // true if in tablet mode
  const tablet = useMediaQuery(theme.breakpoints.only('sm'));
  const mobile = useMediaQuery(theme.breakpoints.only('xs'));
  const isLoggedIn = location.pathname !== '/login';
  const classes = useStyles(isLoggedIn);

  const { expiryListBadge } = useContext(ExpiryListContext);

  // handle opening and closing of drawer
  const handleDrawerToggle = () => {
    if (tablet) {
      setTabletOpen(!tabletOpen);
    } else {
      setMobileOpen(!mobileOpen);
    }
  };

  return (
    <div className={classes.root}>
      <AppBar position='fixed'>
        <Toolbar>
          <Hidden mdUp>
            <IconButton
              edge='start'
              className={classes.menuButton}
              color='inherit'
              onClick={handleDrawerToggle}
            >
              {tabletOpen ? (
                <ChevronLeftIcon />
              ) : (
                <Badge
                  badgeContent={expiryListBadge}
                  color='primary'
                  overlap='circle'
                  className={classes.tabBadge}
                  invisible={!mobile}
                >
                  <MenuIcon />
                </Badge>
              )}
            </IconButton>
          </Hidden>
          <Typography variant='h6' className={classes.title}>
            Inventory Management Web App
          </Typography>

          <AlertDialog />
        </Toolbar>
      </AppBar>
    </div>
  );
}

Header = () => {
  const {
    title,
    drawer: { open: drawerOpen }
  } = useStoreState(state => state.app);
  const { setOpen: setDrawOpen } = useStoreActions(
    actions => actions.app.drawer
  );
  const theme = useTheme();
  const justify = !useMediaQuery(`(min-width:${theme.breakpoints.values.sm}px)`)
    ? 'space-between'
    : 'flex-end';

  const handleDrawerToggle = () => {
    setDrawOpen(!drawerOpen);
  };

  return (
    <StyledAppBar position="fixed">
      <Grid container direction="row" alignItems="center" justify={justify}>
        <Grid item>
          <Hidden smUp>
            <Grid container direction="row" alignItems="center">
              <StyledMenuButton
                edge="start"
                color="inherit"
                onClick={handleDrawerToggle}
              >
                <MenuIcon />
              </StyledMenuButton>
              <StyledTitle variant="h6" noWrap>
                {title}
              </StyledTitle>
            </Grid>
          </Hidden>
        </Grid>
        <Grid item>
          <Toolbar />
        </Grid>
      </Grid>
    </StyledAppBar>
  );
}

LabelsMenu = ({ anchor }) => {
  const [anchorEl, setAnchorEl] = useState(anchor || null)

  const { data, labelSelected, menuOpened } = useSelector(
    (state) => state.labels
  )
  const dispatch = useDispatch()

  const theme = useTheme()
  const isMediumScreen = useMediaQuery(theme.breakpoints.up('md'))

  useEffect(() => {
    if (anchor) {
      setAnchorEl(anchor)
    }
  }, [anchor])

  const handleClose = (label) => {
    dispatch(setMenuOpened(false))

    if (label && label.id && label.name && label.color) {
      dispatch(setLabelSelected(label))
    }
  }

  const handleAdd = (e) => {
    e.stopPropagation()

    if (isMediumScreen) {
      dispatch(setDesktopDialog(true))
    } else {
      dispatch(setFullscreenDialog(true))
    }
  }

  return (
    <Menu
      id="long-menu"
      anchorEl={anchorEl}
      keepMounted
      open={menuOpened}
      onClose={handleClose}
      margin="dense"
    >
      {data.map((label) => (
        <LabelMenuItem
          key={label.id}
          selected={labelSelected && label.id === labelSelected.id}
          onClick={() => handleClose(label)}
          px={0}
          touchscreen={'ontouchstart' in document.documentElement ? 1 : 0}
        >
          <Label label={label} />
        </LabelMenuItem>
      ))}
      <MenuItem onClick={handleAdd}>
        <AddLabelIcon />
        Add new label
      </MenuItem>
    </Menu>
  )
}

PostList = props => {
    const classes = useStyles();
    const isSmall = useMediaQuery(theme => theme.breakpoints.down('sm'));
    return (
        <List
            {...props}
            bulkActionButtons={<PostListBulkActions />}
            filters={<PostFilter />}
            sort={{ field: 'published_at', order: 'DESC' }}
            exporter={exporter}
        >
            {isSmall ? (
                <SimpleList
                    primaryText={record => record.title}
                    secondaryText={record => `${record.views} views`}
                    tertiaryText={record =>
                        new Date(record.published_at).toLocaleDateString()
                    }
                />
            ) : (
                <Datagrid rowClick={rowClick} expand={PostPanel} optimized>
                    <TextField source="id" />
                    <TextField source="title" cellClassName={classes.title} />
                    <DateField
                        source="published_at"
                        cellClassName={classes.publishedAt}
                    />

                    <BooleanField
                        source="commentable"
                        label="resources.posts.fields.commentable_short"
                        sortable={false}
                    />
                    <NumberField source="views" />
                    <ReferenceArrayField
                        label="Tags"
                        reference="tags"
                        source="tags"
                        sortBy="tags.name"
                        cellClassName={classes.hiddenOnSmallScreens}
                        headerClassName={classes.hiddenOnSmallScreens}
                    >
                        <SingleFieldList>
                            <ChipField source="name" />
                        </SingleFieldList>
                    </ReferenceArrayField>
                    <PostListActionToolbar>
                        <EditButton />
                        <ShowButton />
                    </PostListActionToolbar>
                </Datagrid>
            )}
        </List>
    );
}

Label = ({ label }) => {
  const theme = useTheme()
  const isMediumScreen = useMediaQuery(theme.breakpoints.up('md'))

  const dispatch = useDispatch()

  const handleEdit = (e) => {
    e.stopPropagation()

    dispatch(setLabelEditting(label))
    dispatch(setFormValue({ name: label.name, color: label.color }))

    if (isMediumScreen) {
      dispatch(setDesktopDialog(true))
    } else {
      dispatch(setFullscreenDialog(true))
    }
  }

  const handleDelete = (e) => {
    e.stopPropagation()

    dispatch(setLabelEditting(label))
    dispatch(setDeleteAlert(true))
  }

  return (
    <Box
      display="flex"
      alignItems="center"
      justifyContent="space-between"
      width="100%"
    >
      <Box display="flex" alignItems="center">
        <ColorIndicator
          color={
            theme.palette.type === 'dark'
              ? materialColors[label.color][200]
              : materialColors[label.color][500]
          }
        ></ColorIndicator>
        <span>{label.name}</span>
      </Box>

      <Box display="flex">
        <ActionButton aria-label="Edit label" onClick={handleEdit} size="small">
          <EditIcon />
        </ActionButton>

        <ActionButton
          hide={!isMediumScreen ? 1 : 0}
          aria-label="Delete label"
          onClick={handleDelete}
          size="small"
        >
          <DeleteIcon />
        </ActionButton>
      </Box>
    </Box>
  )
}

MainNavMenu = () => {
  const theme = useTheme();

  const isMinScreenMd = useMediaQuery(theme.breakpoints.up("md"));
  const dispatch = useDispatch();
  const handleItemClick = () => {
    if (!isMinScreenMd) {
      dispatch(toggleDrawer(isMinScreenMd));
    }
  };

  return (
    <List>
      {[
        {
          title: "Home",
          icon: HomeIcon,
          path: "/",
        },
        {
          title: "Trending",
          icon: TrendingIcon,
          path: "/trending",
        },
        ...menuAuthIcons,
      ].map((item, index) => {
        return (
          <React.Fragment key={index}>
            <NavItem
              to={item.path}
              title={item.title}
              icon={item.icon}
              onClick={handleItemClick}
            />
            {index === 1 && <Divider />}
          </React.Fragment>
        );
      })}
    </List>
  );
}

export default function Landing() {

    const classes = useStyles();
    const theme = useTheme();
    const mdDown = useMediaQuery(theme.breakpoints.down('sm'));

    return (
        <Grid container justify="center" alignItems="center" className={classes.cont}>
            <Grid item xs={12} lg={6}>
                <Typography variant={mdDown ? "h2" : "h1"}>
                    {landing.title}
                </Typography>
                <Typography variant={mdDown ? "h5" : "h4"} component="h2" className={classes.subtitle}>

                    <ReactTyped
                        strings={landing.subtitles}
                        typeSpeed={40}
                        backSpeed={50}
                        loop
                    />
                </Typography>
                <Grid container direction="row" spacing={2}>
                    {
                        professionalDetails.map(({ alt, icon, link }, i) =>
                            <Grid item key={i}>
                                <a href={link} target="_blank" rel="noopener noreferrer">
                                    <Zoom in={true} style={{ transitionDelay: `${100 * i}ms` }}>
                                        <Tooltip title={alt} placement="top">
                                            <Avatar variant="rounded" className={clsx([classes.avatar, classes[alt]])}>
                                                {icon}
                                            </Avatar>
                                        </Tooltip>
                                    </Zoom>
                                </a>
                            </Grid>
                        )
                    }
                </Grid>
            </Grid>

            <Hidden mdDown>
                <Fade in={true} style={{ transitionDelay: '100ms' }}>
                    <Grid item lg={6}>
                        <Image
                            src="/landing.svg"
                            alt="Landing"
                            width="900.94"
                            height="787"
                        />
                    </Grid>
                </Fade>
            </Hidden>
        </Grid>
    )
}

SortableTable = (props) => {
  const classes = useStyles();
  const theme = useTheme();
  const squish = useMediaQuery(theme.breakpoints.down('xs'));
  const {columns, rows, defaultSortColumn} = props;

  const [orderingBy, setOrderingBy] = React.useState(defaultSortColumn);
  const [direction, setDirection] = React.useState(orderingBy.defaultDirection);

  const sortFn = (a, b) =>
      compareStable(
          a, b, orderingBy.key, columns, direction === orderingBy.defaultDirection);
  const sorted = [...rows].sort((a, b) =>
      direction === 'asc' ? sortFn(a, b) : sortFn(b, a));

  const createUpdateSort = (column) => () => {
    setOrderingBy(column);
    setDirection(
        orderingBy === column
            ? opposite(direction) : column.defaultDirection);
  };

  return (
    <Table size="small" className={squish ? classes.squishText : ''}>
      <TableHead>
        <TableRow>
          {columns.map((column) =>
            <TableCell key={column.key}>
              <TableSortLabel
                  active={orderingBy.key === column.key}
                  direction={
                    orderingBy === column ? direction : column.defaultDirection}
                  hideSortIcon={squish}
                  onClick={createUpdateSort(column)}
              >
                {squish ? column.shortLabel || column.label : column.label}
              </TableSortLabel>
            </TableCell>
          )}
        </TableRow>
      </TableHead>
      <TableBody>
        {sorted.map((row) =>
          <TableRow key={row.id}>
            {columns.map(({key, contextKey, renderShortNumber}) =>
              <TableCell key={key}>
                {render(row[key], renderShortNumber)}
                {row[contextKey] && ` (${row[contextKey]})`}
              </TableCell>
            )}
          </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

Home = (props: any) => {
  const classes = useStyles();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down('xs'));
  const [shrink, setShrink] = useState(false);
  const [showDrawer, setShowDrawer] = useState(!isMobile);
  useEffect(() => {
    setShowDrawer(!isMobile);
  }, [isMobile]);
  const onShrinkToggle = (shrinkState) => {
    setShrink(shrinkState);
  };
  const onDrawerToggle = (show) => {
    setShowDrawer(show);
  };
  return (
    <Router>
      <ToolBar
        showDrawer={showDrawer}
        onDrawerToggle={onDrawerToggle}
        onShrinkToggle={onShrinkToggle}
        navItems={navItems}
      ></ToolBar>
      <main
        data-testid="homepage-main-content"
        className={clsx(classes.mainContent, {
          [classes.mainContentMobile]: isMobile,
          [classes.drawerOpen]: !isMobile && showDrawer,
          [classes.drawerClosed]: !isMobile && !showDrawer,
          [classes.drawerOpenShrink]: !isMobile && shrink,
        })}
      >
        <Container className={classes.wrapperContainer}>
          <Routes>
            {navItems.map((it) => (
              <Route
                key={it.navLink}
                path={it.navLink}
                element={
                  it.element ??
                  (() => (
                    <div
                      data-testid="nav-routes"
                      style={{ fontSize: '32px', textAlign: 'center' }}
                    >
                      {it.label}
                    </div>
                  ))
                }
              ></Route>
            ))}
            <Route path="*" element={navItems[0].element}></Route>
          </Routes>
        </Container>
      </main>
    </Router>
  );
}

Toolbar = () => {
  const isUserPerm = useSelector((state) => state.auth.name)
  const [isOnline, setIsOnline] = useState(navigator.onLine)
  const mdScreen = +useMediaQuery('(min-width:600px) and (min-height:500px)')

  useEffect(() => {
    const handleOnline = () => {
      setIsOnline(true)
    }

    const handleOffline = () => {
      setIsOnline(false)
    }

    window.addEventListener('online', handleOnline)
    window.addEventListener('offline', handleOffline)

    return () => {
      window.removeEventListener('online', handleOnline)
      window.removeEventListener('offline', handleOffline)
    }
  }, [])

  return (
    <MatToolbar style={{ paddingTop: 'env(safe-area-inset-top)' }}>
      <Box
        width="100%"
        display="flex"
        justifyContent="space-between"
        alignItems="center"
      >
        <Logo mdscreen={mdScreen} src={logo} alt="Pomodor logo" />

        {isOnline ? (
          isUserPerm ? (
            <UserAvatar />
          ) : (
            <SignIn />
          )
        ) : (
          <OfflineIcon data-role="offline-icon" />
        )}
      </Box>
    </MatToolbar>
  )
}

CorporateDevicesList = (props) => {
  const isSmall = useMediaQuery((theme) => theme.breakpoints.down("sm"));
  const classes = useStyles();
  const postRowClick = (id, basePath, record) =>
    record.device_verification_record ? "show" : "edit";
  return (
    <List
      {...props}
      bulkActionButtons={false}
      title="Corporate Donors List"
      className={isSmall ? classes.smList : classes.list}
      sort={{ field: "id", order: "DESC" }}
      filters={<DevicesFilter />}
    >
      {isSmall ? (
        <SimpleList
          primaryText={(record) => record.name}
          tertiaryText={(record) => record.device_tracking_key}
          linkType="edit"
        />
      ) : (
        <Datagrid rowClick={postRowClick}>
          <DateField label="Date" locales="en-IN" source="created_at" />
          <TextField
            label="Company Name"
            source="device_donation_corporate.company_name"
          />
          <TextField label="Name" source="device_donation_corporate.poc_name" />
          <TextField
            label="Email"
            source="device_donation_corporate.poc_email"
          />
          <TextField
            label="Phone Number"
            source="device_donation_corporate.poc_phone_number"
          />
          <TextField label="Tracking ID" source="device_tracking_key" />
          <FunctionField
            label="Delivery Staus"
            render={(record) =>
              getChoice(config?.statusChoices, record.delivery_status)?.name
            }
          />
        </Datagrid>
      )}
    </List>
  );
}

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

Layout = props => {
  const { children } = props;

  const classes = useStyles();
  const theme = useTheme();
  const isDesktop = useMediaQuery(theme.breakpoints.up("lg"), {
    defaultMatches: true
  });
  const { loaderStatus } = useContext(LoaderContext);
  if (auth.getToken() != null && isDesktop) {
    return (
      <React.Fragment>
        <div
          className={clsx({
            [classes.root]: true,
            [classes.shiftContent]: isDesktop
          })}
        >
          <SideAndTopNavBar />
          <main className={classes.content}>{children}</main>
        </div>
        <Backdrop className={classes.backdrop} open={loaderStatus}>
          <CircularProgress color="inherit" />
        </Backdrop>
      </React.Fragment>
    );
  } else {
    return (
      <React.Fragment>
        <div
          className={clsx({
            [classes.root]: true,
            [classes.shiftContent]: false
          })}
        >
          <SideAndTopNavBar />
          <main className={classes.content}>{children}</main>
        </div>
        <Backdrop className={classes.backdrop} open={loaderStatus}>
          <CircularProgress color="inherit" />
        </Backdrop>
      </React.Fragment>
    );
  }
}