@material-ui/core#Paper JavaScript Examples

export function ProviderCard({ provider, leases }) {
  const classes = useStyles();
  const history = useHistory();

  const cardClick = () => {
    history.push(UrlService.providerDetail(provider.owner))
  }

  return (
    <Grid item xs={12}>
      <Paper elevation={1} className={classes.root} onClick={cardClick}>
        <ProviderSummary provider={provider} leases={leases} />
      </Paper>
    </Grid >
  );
}

function ConnectWalletPage() {
  const classes = useStyles();
  return (
    <div>
      <div className="Title">
        <h1 className="navbar-logo">
          Alternative Uniswap Interface
        </h1>
      </div>

      <Container>
        <Paper className={classes.paperContainer}>
          <Typography
            variant="h6"
            className={classes.title}
            color="common.white"
          >
            Please connect an Ethereum wallet to your browser to use the
            application
          </Typography>
        </Paper>
      </Container>

      <Grid
        container
        className={classes.footer}
        direction="row"
        justifyContent="center"
        alignItems="flex-end"
      >
        <p>
          Alternative Uniswap Interface | Get AUT for use in the bakerloo testnet{" "}
          <a href="https://faucet.bakerloo.autonity.network/">here</a>
        </p>
      </Grid>
    </div>
  );
}

WriterEducation = (props) => {
  const classes = useStyles();
  return (
    <Paper className={classes.profilePaper}>
      <h3 className={classes.userEducation}>
        Background:
        <div className={classes.educationText}>
          Education:<div className={classes.bodyText}>USC 2010-2014</div>
        </div>
      </h3>
    </Paper>
  )
}

function ResumeComponent(props) {
  const params = useParams();

  const classes = useStyles();

  console.log(params.draftID, "\n DraftID");

  const { data, loading, error } = useQuery(GET_DRAFT_QUERY, {
    variables: { draftID: params.draftID },
  });

  if (loading) return <div>Loading... </div>;

  if (error) return <div>Error: {error}</div>;

  console.log(data, "resume query response");

  const { getDraft } = data;
  return (
    <div className={classes.wrapper}>
      <Paper className={classes.paper}>
        <Grid>
          <div className={classes.name}>{getDraft.name}</div>
          <div>{getDraft.email}</div>
        </Grid>
        <Grid>Education</Grid>
        <Grid>Jobs</Grid>
        <Grid>Projects</Grid>
        <Grid>Tech Skills</Grid>
        <Grid>General Skills</Grid>
        <Grid>Languages</Grid>
        <Grid>Hobbies</Grid>
      </Paper>
    </div>
  );
}

AvgTemperature = props => {
  const { observations, tempUnit } = props;

  const classes = useStyles();

  const averageTemperature = observations.length
    ? Math.round(
        observations.reduce((sum, record) => {
          return sum + record.physical.feverSeverity * 10;
        }, 0) / observations.length
      ) / 10
    : '--';

  return (
    <Paper className={classes.root}>
      <Typography variant="overline">Average Temperature:</Typography>
      {tempUnit === 'fahrenheit' ? (
        <Typography variant="body2">{averageTemperature}&#8457;</Typography>
      ) : (
        <Typography variant="body2">{averageTemperature}&#8451;</Typography>
      )}
    </Paper>
  );
}

function LogoutPage() {
  const classes = useStyles();
  const auth = useAuth();
  const history = useHistory();

  useEffect(() => {
    auth.signOut().then(() => {
      history.replace('/');
    });
  }, [auth, history]);

  return (
    <Container maxWidth="md">
      <Helmet>
        <title>Logging Out</title>
      </Helmet>
      <Paper className={classes.paper}>
        <Typography
          variant="h5"
          align="center"
          color="textPrimary"
          gutterBottom>
          Logging out...
        </Typography>
        <LinearProgress />
      </Paper>
    </Container>
  );
}

export function MetaBox(props) {
  const classes = useStyles();

  const meta = props.meta;
  return (
    <Paper className={classes.paper} variant="outlined">
      <Grid container direction="row">
        <Grid item xs={12} md={8}>
          <Grid container direction="row">
            { meta.operation &&
              <Box className={classes.flexBox}>
                <Typography className={classes.metaBoxTypo}>{meta.operation.method}</Typography>
                <Typography className={classes.metaBoxTypo}>/{meta.operation.entityName}</Typography>
              </Box>
            }
            <Typography>{meta.title}</Typography>
          </Grid>
        </Grid>
        <Grid item xs={12} md={4}>
          <Grid container direction="row-reverse">
            { meta.operation &&
              <Button variant="contained" color="primary" size='small'>상세</Button>
            }
            { !meta.operation &&
              <Button variant="contained" color="primary" size='small' component={Link} to={{ pathname: `/metas/${meta.id}/back`, state: {meta: meta}}}>operation 설정</Button>
            }
          </Grid>
        </Grid>
      </Grid>
    </Paper>
  )
}

function SearchList({ results, handleResetKeyword }) {
  const classes = useStyles();
  let slicedResults;
  if (results.length !== 0) slicedResults = results.slice(0, 4);
  return (
    <>
      {slicedResults ? (
        <div className={classes.root}>
          <Paper className={classes.paper} elevation={10}>
            <SearchResultCard
              results={slicedResults}
              handleResetKeyword={handleResetKeyword}
            />
          </Paper>
          <Button
            fullWidth
            variant="contained"
            color="secondary"
            className={classes.btn}
          >
            See More
          </Button>
        </div>
      ) : (
        ""
      )}
    </>
  );
}

export default function DataPreview() {
  const { state } = useState();
  const classes = useStyles();

  if (state.sample_dataset == null) {
    return null;
  }
  const metadata = datasetMetadata[state.sample_dataset];
  function getFormatted(label, index) {
    if (metadata.units) {
      return label + " (" + metadata.units[index] + ")";
    }
    return label;
  }

  return (
    <Grid direction="column" container className={classes.noPadding}>
      {/* Data Attributes */}
      <Grid item>
        <div className={classes.root}>
          {chipData(state).map((data, index) => {
            return (
              <li key={index}>
                <Chip label={data} color="primary" className={classes.chip} />
              </li>
            );
          })}
        </div>
      </Grid>
      {/* Table */}
      <Grid item className={classes.fullWidth}>
        <TableContainer component={Paper} className={classes.table}>
          <Table size="small" aria-label="a dense table">
            <TableHead>
              <TableRow>
                {metadata.columns.map((column, index) => (
                  <TableCell key={index}>
                    {getFormatted(
                      metadata.columnsMap
                        ? metadata.columnsMap[column]
                        : column,
                      index
                    )}
                  </TableCell>
                ))}
              </TableRow>
            </TableHead>
            <TableBody>
              {metadata.data.slice(0, 5).map((row, index) => (
                <TableRow key={index}>
                  {metadata.columns.map((column, index) => (
                    <TableCell key={index} component="th" scope="row">
                      {row[column]}
                    </TableCell>
                  ))}
                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
      </Grid>
    </Grid>
  );
}

render() {
    const { depth, onCancel, id, replyUser } = this.props;
    const { body, loading } = this.state;
    let title = 'Editing Comment';
    if (!id) {
      if (replyUser) {
        title = `Replying to ${replyUser}`;
      } else {
        title = 'New Comment';
      }
    }

    return (
      <Paper elevation={depth} className="paper-border">
        <div style={{ width: '100%' }} className="body-container">
          <Typography variant="body2">
            {title}
          </Typography>
          <WYSIWYG
            type={EDITOR_TYPE.COMMENT}
            value={body}
            onSave={this.handleSave}
            onCancel={onCancel}
            label="Enter your comment here."
            readOnly={loading}
            noMargin
            maxLength={MAX_LENGTH}
            getCharCount={this.handleCharCount}
          />
        </div>
      </Paper>
    );
  }

export default function SearchNotFound({ searchQuery = '', ...other }) {
  return (
    <Paper {...other}>
      <Typography gutterBottom align="center" variant="subtitle1">
        Not found
      </Typography>
      <Typography variant="body2" align="center">
        No results found for &nbsp;
        <strong>&quot;{searchQuery}&quot;</strong>. Try checking for typos or using complete words.
      </Typography>
    </Paper>
  );
}

AboutCardView = () => {
    const classes = useStyles()
    return(
    <Paper className={classes.aboutContentView} elevation={0} square>
        <Box style={{textAlign : 'center', display : 'flex', flexDirection : 'column',justifyContent : 'center', alignItems : 'center'}}>
            <Typography variant="h5" component='h5' style={{fontWeight : '600'}}>What is our <Box style={{display : 'inline'}} color="primary.main">Purpose</Box>?</Typography>
            <Typography variant="body2" style={{marginBottom : '1em'}}>Google Developer Groups (GDGs) are for developers who are interested in Google's developer technology.</Typography>
        </Box>
        <Grid container justifyContent="center" style={{maxWidth : '1300px'}} className={styles.AboutCardView}>
            <Grid item xs={6} md><AboutCard image={<ChatBubbleIcon style={{color : '#1FA9E5', height : '64px', width : '64px'}}/>} title="Talks" body="Get in touch with the latest technology and news." hashtag="#techtalks"/></Grid>
            <Grid item xs={6} md><AboutCard image={<CodeIcon style={{color : 'orange', height : '64px', width : '64px'}}/>} title="CodeLabs" body="Get practical experience under the mentorship of the community members." hashtag="#practicalexperience"/></Grid>
            <Grid item xs={6} md><AboutCard image={<LiveTvIcon style={{color : 'red', height : '64px', width : '64px'}} />} title="Live Events" body="Catch us live with all our online events." hashtag="#liveevents"/></Grid>
            <Grid item xs={6} md><AboutCard image={<BubbleChartSharpIcon style={{color : 'green', height : '64px', width : '64px'}}/>} title="RoadShows" body="Share your knowledge and make an Impact." hashtag="#makeadifference"/></Grid>
        </Grid>
    </Paper>)
}

NotFoundPage = () => {
  const classes = useNotFoundPageStyles();

  return (
    <Container disableGutters>
      <Paper variant="outlined" className={classes.mainPaper}>
        <div className={classes.textWrapper}>
          <SvgIcon color="primary" className={classes.icon}>
            <Error404 />
          </SvgIcon>
          <Typography color="secondary" variant="h4">
            Page Not Found
          </Typography>
          <Typography color="secondary" variant="h6">
            The page you requested does not exist
          </Typography>
        </div>
      </Paper>
    </Container>
  );
}

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

export default function SimpleTabs() {
  const classes = useStyles();
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };
  const [breedName, setBreedName] = useState(null);
  return (
    <div>
      <AppBar position="sticky" className={classes.root}>
        <Tabs value={value} onChange={handleChange} variant="fullWidth">
          <Tab label="Breeds" />
          <Tab label="Image" />
          <Tab label="About" />
        </Tabs>
      </AppBar>
      <Paper>
        <TabPanel value={value} index={0}>
          <MyList {...{ breedName, setBreedName,value,setValue }} />
        </TabPanel>
        <TabPanel value={value} index={1}>
          <Image {...{ breedName }} />
        </TabPanel>
        <TabPanel value={value} index={2}>
          <About />
        </TabPanel>
      </Paper>
    </div>
  );
}

LoginCallback = ({ loading, error }) => {
    return (
        <div className={cn(styles.login)}>
            <Container>
                <Grid container justify="center">
                    <Grid item md={6}>
                        <Paper>
                            <h2>Logg inn</h2>
                            {loading && (
                                <Box justifyContent="center" display="flex">
                                    <CircularProgress />
                                </Box>
                            )}
                            {error ? (
                                <Alert color="danger" className="mt-3">
                                    {error.message}
                                </Alert>
                            ) : (
                                ''
                            )}
                        </Paper>
                    </Grid>
                </Grid>
            </Container>
        </div>
    );
}

export default function RecruitmentTimeline() {
  function assignAOS(id) {
    if (id % 2 === 0) {
      return "fade-left";
    } else {
      return "fade-right";
    }
  }

  return (
    <Timeline align="alternate">
      {TimelineSteps.map((step, id) => {
        return (
          <TimelineItem>
            <TimelineSeparator>
              <TimelineDot color="#35166b" />
              <TimelineConnector />
            </TimelineSeparator>
            <TimelineContent data-aos={assignAOS(id)}>
              <Paper elevation={0} style={paperstyle}>
                {" "}
                {step}
              </Paper>
            </TimelineContent>
          </TimelineItem>
        );
      })}
    </Timeline>
  );
}

function CoordinateToolTip() {
  const classes = useStyles();
  const cursorPosition = useSelector(state => state.cursor.position);

  return (
    <Paper className={classes.paper}>
      {cursorPosition ? 'row: ' + cursorPosition.x + ', col: ' + cursorPosition.y : null}
    </Paper>
  );
}

export default function FoodboxFlow() {
  const classes = useStyles();
  const [state, dispatch] = useReducer(reducer, initialState);

  const ActiveComponent = stepComponents[state.step];

  return (
    <div className={classes.root}>
      <Paper className={classes.tabMargin} elevation={3} square>
        <Tabs value={state.step} indicatorColor="primary" textColor="primary" centered>
          {tabNames.map((tab, idx) => (
            <CustomTab icon={<H4>{idx + 1}</H4>} key={tab} label={tab} disableRipple />
          ))}
        </Tabs>
      </Paper>
      <div className={classes.content}>
        <ActiveComponent state={state} dispatch={dispatch} />
      </div>
      <ErrorSnackbar
        open={state.error !== null}
        handleClose={() => dispatch({ type: "ERROR", payload: null })}
        errorMessage={state.error}
        autoHideDuration={null}
      />
    </div>
  );
}

export default function VolunteerSignupPlaceholder() {
  const classes = useStyles();
  const { search } = useLocation();
  const isSuccess = search.includes("success=true");

  return (
    <Paper className={classes.heroContent}>
      {isSuccess ? (
        <Box mb={4}>
          <Typography variant="h5" gutterBottom>
            Thank you so much for volunteering!
          </Typography>
          <Typography variant="subtitle1">
            You should hear back from the medical provider soon.
          </Typography>
        </Box>
      ) : (
        <>
          <div
            className={classes.belowPhoneMax}
            dangerouslySetInnerHTML={{
              __html:
                '<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shr3okipJzPefgm2X?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="1800" style="background: transparent; border: 1px solid #ccc;"></iframe>',
            }}
          />
          <div
            className={classes.abovePhoneMax}
            dangerouslySetInnerHTML={{
              __html:
                '<script src="https://static.airtable.com/js/embed/embed_snippet_v1.js"></script><iframe class="airtable-embed airtable-dynamic-height" src="https://airtable.com/embed/shr3okipJzPefgm2X?backgroundColor=cyan" frameborder="0" onmousewheel="" width="100%" height="1700" style="background: transparent; border: 1px solid #ccc;"></iframe>',
            }}
          />
        </>
      )}
    </Paper>
  );
}

render () {
    const { classes } = this.props
    return (
      <>
        <Grid item xs={12} sm={5}>
          <Paper className={classes.paper}>
            <h2>SUBMIT NETLIST</h2>
            <form onSubmit={this.onFormSubmit} style={{ marginTop: '45px' }}>
              <label htmlFor="netlist" className={classes.finlabel}>
                {this.state.filename}
              </label>
              <input
                type="file"
                id="netlist"
                onChange={this.onChange}
                className={classes.finput}
              />
              <br />
              <Button
                type="submit"
                variant="contained"
                color="primary"
                style={{ marginTop: '30px' }}
              >
                Upload
              </Button>
            </form>
            <br />
            {this.fileData()}
          </Paper>
        </Grid>
        <Grid item xs={12} sm={7}>
          <Paper className={classes.paper}>
            <h2>GRAPH OUTPUT</h2>
          </Paper>
        </Grid>
      </>
    )
  }

export function BidGroup({
  bids,
  gseq,
  selectedBid,
  handleBidSelected,
  disabled,
  providers,
  filteredBids,
  deploymentDetail,
  isFilteringFavorites,
  groupIndex,
  totalBids
}) {
  const classes = useStyles();
  const [resources, setResources] = useState();
  const allBidsClosed = bids.every((b) => b.state === "closed");
  const fBids = bids.filter((bid) => filteredBids.includes(bid.id));

  useEffect(() => {
    const currentGroup = deploymentDetail?.groups.find((g) => g.group_id.gseq === parseInt(gseq));
    if (currentGroup) {
      const resourcesSum = {
        cpuAmount: deploymentGroupResourceSum(currentGroup, (r) => parseInt(r.cpu.units.val) / 1000),
        memoryAmount: deploymentGroupResourceSum(currentGroup, (r) => parseInt(r.memory.quantity.val)),
        storageAmount: deploymentGroupResourceSum(currentGroup, (r) => getStorageAmount(r))
      };
      setResources(resourcesSum);
    }
  }, [deploymentDetail, gseq]);

  return (
    <Paper elevation={4} className={classes.root}>
      <List
        subheader={
          <ListSubheader component="div" className={classes.subHeader}>
            <Box display="flex" alignItems="center">
              <Typography variant="h6">
                <LabelValue label="GSEQ:" value={gseq} />
              </Typography>

              {resources && (
                <Box marginLeft={2}>
                  <SpecDetail
                    cpuAmount={resources.cpuAmount}
                    memoryAmount={resources.memoryAmount}
                    storageAmount={resources.storageAmount}
                    color={allBidsClosed ? "default" : "primary"}
                    size="small"
                  />
                </Box>
              )}
            </Box>

            <Box display="flex" alignItems="center">
              {!!selectedBid && <CheckIcon color="primary" />}
              <Box marginLeft="1rem">
                {groupIndex + 1} of {totalBids}
              </Box>
            </Box>
          </ListSubheader>
        }
      >
        {fBids.map((bid) => {
          const provider = providers && providers.find((x) => x.owner === bid.provider);
          return <BidRow key={bid.id} bid={bid} provider={provider} handleBidSelected={handleBidSelected} disabled={disabled} selectedBid={selectedBid} />;
        })}

        {isFilteringFavorites && fBids.length === 0 && (
          <Box padding=".5rem 1rem">
            <Alert severity="info" variant="outlined">
              <Typography variant="caption">There are no favorite providers for this group...</Typography>
            </Alert>
          </Box>
        )}
      </List>
    </Paper>
  );
}

WriterServices = (props) => {
  const [value, setValue] = React.useState(0);
  const classes = useStyles();

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  function TabPanel(props) {
    const { children, value, index, ...other } = props;
  
    return (
      <div
        role="tabpanel"
        hidden={value !== index}
        id={`vertical-tabpanel-${index}`}
        aria-labelledby={`vertical-tab-${index}`}
        {...other}
      >
        {value === index && (
          <Box p={3}>
            <Typography>{children}</Typography>
          </Box>
        )}
      </div>
    );
  }
  
  TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
  };
  
  function a11yProps(index) {
    return {
      id: `vertical-tab-${index}`,
      "aria-controls": `vertical-tabpanel-${index}`,
    };
  }

  return (

    <div className={classes.userServices}>
            <h3 className={classes.userEducation}>Services Offered:</h3>
            <Paper>
              <Tabs
                orientation="vertical"
                variant="scrollable"
                value={value}
                onChange={handleChange}
                aria-label="Vertical tabs example"
                className={classes.tabs}
              >
                <Tab label="Grant Writing" {...a11yProps(0)} />
                <Tab label="Grant Research" {...a11yProps(1)} />
              </Tabs>
              <TabPanel value={value} index={0}>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos
                blanditiis tenetur unde suscipit, quam beatae rerum inventore
                consectetur, neque doloribus, cupiditate numquam dignissimos
                laborum fugiat deleniti? Eum quasi quidem quibusdam.
              </TabPanel>
              <TabPanel value={value} index={1}>
                This is just here to show you this works.
              </TabPanel>
            </Paper>
          </div>
  );
}

function BlogPage() {
  const classes = useStyles();
  const [posts, setPosts] = useState([]);
  const [loaded, setLoaded] = useState(false);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_BLOG_POST_URL}index.json`)
      .then((res) => res.json())
      .then((data) => {
        setLoaded(true);
        setPosts(data);
        setLoading(false);
      })
      .catch(() => {
        setLoaded(false);
        setLoading(false);
      });
  }, []);

  if (!loaded && !loading) {
    return <Redirect to="/*" />;
  }
  return (
    <>
      <Helmet>
        <title>Blog</title>
      </Helmet>
      <Container maxWidth="md">
        <Typography variant="h5" gutterBottom>
          Blog
        </Typography>
        {posts.map((post) => {
          return (
            <Paper className={classes.paper} key={post.id}>
              <Post
                slug={post.slug}
                title={post.title}
                author={post.author}
                date={post.createdAt.substring(0, 10)}
                key={post.id}
                content={post.summary}
              />
            </Paper>
          );
        })}
      </Container>
    </>
  );
}

export function Show(props) {
  const dispatch = useDispatch();
  const history = useHistory();
  const classes = useStyles();
  const [newMetaOpen, setNewMetaOpen] = useState(false);
  const [dataType, setDataType] = useState();

  const { id } = useParams();
  const api = useSelector(state => state.apis.dict)[id];

  useEffect(() => {
    dispatch(apiActions.getApi(id)).then((response) => {
      if(response.error) {
        /**
         * 문제가 발생하는 경우 목록 페이지로 redirect
         */
        alertActions.handleError(dispatch, response.error);
        history.push("/apis");
        return;
      }
    })
  }, [])

  const handelMeneSelected = (dataType) => {
    setDataType(dataType)
    setNewMetaOpen(true);
  }

  return (
    <Container maxWidth={false}>
      { api &&
        <Box>
          <NewMetaDialog dataType={dataType} api={api} open={newMetaOpen} setOpen={setNewMetaOpen}/>
          
          <Box mt={2}>
            <Grid container>
              <Grid item xs={12} md={6}>
                { api.metas && api.metas.map(el => {
                  return (
                    <MetaBox meta={el}/>
                  )
                })}

                <Paper className={`${classes.defaultPaper} ${classes.spaceBetween}`}>
                  <div>
                    오퍼레이션 추가
                  </div>                  
                  
                  <ButtonGroup color="primary" size="small" aria-label="outlined primary button group">
                    <Button onClick={() => handelMeneSelected("upload")}>파일 직접 등록</Button>
                    <Button onClick={() => handelMeneSelected("url")}>파일 URL 등록</Button>
                    <Button onClick={() => handelMeneSelected("dbms")}>DBMS 접속 정보 등록</Button>
                  </ButtonGroup>
                </Paper>
              </Grid>
              <Grid item xs={12} md={6}>
                <Box textAlign="left">
                  <SwaggerUI url={`${server}/stages/${api.id}/api-docs`}/>
                </Box>
              </Grid>
            </Grid>
          </Box>
        </Box>
      }
    </Container>
  )
}

function App() {
  const [darkMode, setDarkMode] = useState(true);
  const [schedule, setSchedule] = useState({});

  const [popular, setPopular] = useState([]);

  const darkTheme = createTheme({
    palette: {
      type: darkMode ? "dark" : "light",
    },
  });

  useEffect(() => {
    getSchedule();
    getPopular();
  }, []);

  const getPopular = () => {
    axios
      .get("/api/v1/anime/popular/1", {})
      .then((res) => {
        setPopular(res.data);
      })
      .catch((err) => console.log(err));
  };

  const getSchedule = () => {
    axios
      .post("/api/v1/schedule", { day: "" })
      .then((sche) => {
        setSchedule(sche.data);
      })
      .catch((err) => console.log(err));
  };

  return (
    <ThemeProvider theme={darkTheme}>
      <Paper>
        <DarkModeContext.Provider value={{ darkMode, setDarkMode }}>
          <ScheduleContext.Provider value={{ schedule }}>
            <PopularAnimeContext.Provider value={{ popular }}>
              <Layout>
                <Switch>
                  <Route exact path="/" component={Homepage} />
                  <Route exact path="/anime/:slug" component={WatchAnime} />
                  <Route exact path="/waifu" component={Waifu} />
                </Switch>
              </Layout>
            </PopularAnimeContext.Provider>
          </ScheduleContext.Provider>
        </DarkModeContext.Provider>
      </Paper>
    </ThemeProvider>
  );
}

Inbox = ({ threads, selected, handleListItemClick }) => {
  const { paper, searchInbox, list, listItem, listText, avatar } = useStyles();
  const [search, setSearch] = useState('');

  return (
    <Paper className={paper}>
      <List className={list}>
        {threads
          .filter((thread) => {
            if (search === '') {
              return thread;
            } else if (
              thread.userName.toLowerCase().includes(search.toLowerCase())
            ) {
              return thread;
            }
          })
          .map((thread, i) => (
            <ListItem
              key={`${thread.userName}-${i}`}
              alignItems="flex-start"
              className={listItem}
              selected={thread.userName === selected}
              onClick={() => handleListItemClick(thread.userName)}
            >
              <ListItemAvatar>
                {thread.messages[0].type === 'message' ? (
                  <Avatar src={thread.avatar} className={avatar}></Avatar>
                ) : thread.messages[0].type === 'announce' ? (
                  <Announcement color="inherit" />
                ) : (
                  <Ballot color="inherit" />
                )}
              </ListItemAvatar>
              {thread.messages[0].type === 'survey' ||
              thread.messages[0].type === 'announce' ? (
                <ListItemText
                  primary={thread.messages[0].subject}
                  secondary={
                    thread.messages[0].subject
                      ? thread.messages[0].composed_at.slice(0, 10)
                      : thread.userName
                  }
                  className={listText}
                />
              ) : (
                <ListItemText primary={thread.userName} className={listText} />
              )}
              <Typography>
                {timeAgoFormatDate(
                  new Date(
                    thread.messages[thread.messages.length - 1].composed_at
                  )
                )}
              </Typography>
            </ListItem>
          ))}
      </List>
      <SearchInbox className={searchInbox} setSearch={setSearch} />
    </Paper>
  );
}

render() {
    const { postId } = this.props;
    const { comments, commentCount, newComment, sortAsc } = this.state;

    return (
      <div className="section" id="comments">
        <AppBar position="static">
          <Toolbar variant="dense">
            <Typography variant="h6" className="title-text">
              Comments ({commentCount})
            </Typography>
            <Tooltip title={`Show ${sortAsc ? 'Newest' : 'Oldest'} First`}>
              <IconButton color="inherit" onClick={this.setSortAsc(!sortAsc)}>
                <SortIcon />
              </IconButton>
            </Tooltip>
            <IfPerm permission="comment.create">
              <Tooltip title="Write Comment">
                <IconButton color="inherit" onClick={this.handleNewComment}>
                  <CreateIcon />
                </IconButton>
              </Tooltip>
            </IfPerm>
          </Toolbar>
        </AppBar>
        <Paper className="body-container space-children comments-container">
          <Collapse in={newComment} unmountOnExit>
            <EditComment
              postId={postId}
              depth={2}
              onCancel={this.cancelNewComment}
              onUpdateComments={this.updateComments}
            />
          </Collapse>

          {comments && comments.map(comment => (
            <Comment
              {...comment}
              onUpdateComments={this.updateComments}
              key={`comment-${comment.id}`}
              depth={2}
              sortAsc={sortAsc}
            />))}
          {(!comments || comments.length === 0) &&
          <Typography align="center">
            There are no comments on this topic.
          </Typography>}
        </Paper>
      </div>
    );
  }

function Events() {
    const classes = useStyles()
    const [ Events, setEvents] = useState([]);
    const [ upcomingEvents, setUpcomingEvents ] = useState([])
    const [ isLoading, setLoading ] = useState(false)
    const URL = "https://dscbppimt-cms.herokuapp.com/files/"
    useEffect(() => {
        const today = new Date()
        const todayDate = today.toISOString()
        console.log(todayDate)
        // 2020-10-11T09:10:30.698Z
        setLoading(true);
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_gte=${todayDate}&_sort=Date:desc&_limit=2`).then(res => {
          console.log(res.data);
          setUpcomingEvents(res.data);
          setLoading(false)
        });
        Axios.get(`https://dscbppimt-cms.herokuapp.com/our-events?Date_lt=${todayDate}&_sort=Date:desc`).then(res => {
            console.log(res.data);
            setEvents(res.data);
            setLoading(false)
          });
    },[])
    return (
        <Layout>
            <Box>
                <Container style={{marginBottom : '4em'}}>
                    <Typography variant="h4" style={{fontWeight : '500', margin : '1em 0px'}}>Our Events</Typography>
                    <Grid container spacing={2}>
                    {isLoading ? <Skeleton variant="rect" width="100%" height="150px"/> : upcomingEvents.length !== 0 ? upcomingEvents.map(event => (
                        <Grid item xs={12} sm={6} md={12} key={event._id}>
                        <EventCard 
                        Image={URL+(event.Image.formats.thumbnail.url)}
                        title={event.Title} 
                        speaker={event.Speaker === 'None' ? null : event.Speaker } 
                        description={event.Description} 
                        date={event.Date}
                        data={event.Image}
                        register={event.Register}
                        learn={event.Learn}
                        />
                        </Grid>
                    )) : <Container style={{width: '100%', textAlign: 'center', margin: '4em 0'}}><Typography align="center" >No Upcoming Events</Typography></Container>}
                    </Grid>
                </Container>
            </Box>
            <Container style={{padding : '2em'}}>
                <Box style={{display : 'flex', justifyContent : 'space-between'}}>
                    <Typography variant="h6">Past Events</Typography>
                </Box>
                <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Event</TableCell>
            <TableCell align="center">Speaker</TableCell>
            <TableCell align="center">Date</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {Events.map((row) => (
            <TableRow key={row.Title}>
              <TableCell component="th" scope="row" align="center">{row.Title}</TableCell>
              <TableCell align="center">{row.Speaker}</TableCell>
              <TableCell align="center">{row.Date}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
            </Container>

        </Layout>
    )
}