@material-ui/core#Grid 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 >
  );
}

export default function CoinButton(props) {
  const { coinName, coinAbbr, onClick, ...other } = props;
  const classes = useStyles();

  return (
    <ButtonBase focusRipple className={classes.button} onClick={onClick}>
      <Grid container direction="column">
        <Typography variant="h6">{coinAbbr}</Typography>
        <Typography variant="body2" className={classes.coinName}>
          {coinName}
        </Typography>
      </Grid>
    </ButtonBase>
  );
}

export default function EventsCalendar() {
  const classes = useStyles();
  const { loading, error, data, refetch } = useQuery(GET_EVENT_LIST);
  // refetches EVENT_LIST without refreshing page
  useEffect(() => {
    refetch();
  }, [refetch]);
  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;

  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Typography className={classes.heading} variant="h1" gutterBottom>
          Upcoming Events
        </Typography>
      </Box>
      <Grid className={classes.grid}>
        {data &&
          data?.events?.map((event, id) => (
            <EventCard key={id} event={event} />
          ))}
      </Grid>
    </main>
  );
}

export default function WritersFavoriteGrants() {
  const faveArr = useSelector((state) => state.favorites.favorites);
  const user = useSelector((state) => state.profileInfo.profileDetails);
  const classes = useStyles();

  if (faveArr.length === 0) {
    return <Redirect to="/Grants" />;
  }
  return (
    <div>
      <Typography variant="h3" className={classes.h3}>
        <Grid container justify="center">
          <Grid item>
            {user.org_name !== "" ? user.org_name : user.first_name}'s Favorite
            Grants
          </Grid>
        </Grid>
      </Typography>
      {faveArr.map((grant) => {
        return (
          <div key={grant.id} className={classes.container}>
            <GrantCard data={grant} />
          </div>
        );
      })}
    </div>
  );
}

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

function App() {
  const classes = useStyles();
  return (
    <GrammarContextProvider>
      <Topbar />
      <Grid container className={classes.container} spacing={2}>
        <Grid item xs={12} sm={12} md={6} className={classes.panel1}>
          <LeftPanel />
        </Grid>
        <Grid item xs={12} sm={12} md={6} className={classes.panel2}>
          <RightPanel />
        </Grid>
      </Grid>
      <Alert />
      <Loading />
    </GrammarContextProvider>
  );
}

Facts = ({ data }) => {
  const { title, body, footer, link } = data;

  const classes = useStyles();
  return (
    <Grid>
      <Typography variant="subtitle1" color="secondary">
        {title}
      </Typography>
      <Typography paragraph variant="body1" className={classes.fontChange} color="textSecondary">
        {body}
      </Typography>
      <footer>
        <Typography variant="caption">{footer}</Typography>
        {link && (
          <Button size="small" href={link}>
            Learn More
          </Button>
        )}
      </footer>
    </Grid>
  );
}

function Question(props) {
    const [value, setValue] = React.useState('none');
	const handleChange = (event) => {
		setValue(event.target.value);
	};
	return (
        <Grid item xs={10} md={8} lg={7} style={{margin: 0, padding: '2%', backgroundColor: '#111', borderBottom: '5px solid #222', minHeight: '50vh'}}>
            <FormControl style={{margin: 'auto', width:"100%"}} component="fieldset">
                <FormLabel className="label" component="legend">{props.id}</FormLabel>
                <RadioGroup aria-label="correct-choice" value={value} onChange={handleChange}>
                    <FormControlLabel value="op1" control={<Radio className="radio" />} label="Option 1" style={{margin: 0}} />
                    <FormControlLabel value="op2" control={<Radio className="radio" />} label="Option 2" style={{margin: 0}} />
                    <FormControlLabel value="op3" control={<Radio className="radio" />} label="Option 3" style={{margin: 0}} />
                    <FormControlLabel value="op4" control={<Radio className="radio" />} label="Option 4" style={{margin: 0}} />
                </RadioGroup>
            </FormControl>
        </Grid>
	)
}

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

TeamBio = styled(Grid)`
    display:flex;
    h4 {
        font-size:1rem;
    }
    h5 {
        font-size:1rem;
        padding:0 0 0.5em 0;
        font-weight:normal;
        font-style:italic;
    }
    img {
        max-width:10em;
        padding-bottom:2em;
        width:100%;    
        align-self: flex-start;
    }
    span {
        padding-left:1em;
    }
`

SurveyResponseMessage = ({ message }) => {
  const { messageRow, surveyResponse } = useStyles();
  const {
    survey: { questions },
    survey_response,
  } = message;

  return (
    <div className={messageRow}>
      <Grid className={surveyResponse}>
        <Grid item style={{ display: 'flex', justifyContent: 'space-between' }}>
          <Typography variant={'h6'}>{message.from}</Typography>
          <Typography>{message.composed_at.slice(0, 10)}</Typography>
        </Grid>
        <hr style={{ border: '0.1px solid black', width: '100%' }} />
        {survey_response &&
          questions.map((question, i) => (
            <div key={`answer - ${i}`}>
              <Typography variant={'body1'}>
                <b>Q{i + 1}:</b> {question.prompt}
              </Typography>
              <Typography variant={'body1'}>
                <b>A:</b> {survey_response[i]}
              </Typography>
            </div>
          ))}
      </Grid>
    </div>
  );
}

CardComponent = ({ className, cardTitle, value, lastUpdate, cardSubtitle }) => (
  <Grid item xs={12} md={3} component={Card} className={cx(styles.card, className)}>
    <CardContent>
      <Typography color="textSecondary" gutterBottom>
        {cardTitle}
      </Typography>
      <Typography variant="h5" component="h2">
        <CountUp start={0} end={value} duration={2.75} separator="," />
      </Typography>
      <Typography color="textSecondary">
        {new Date(lastUpdate).toDateString()}
      </Typography>
      <Typography variant="body2" component="p">
        {cardSubtitle}
      </Typography>
    </CardContent>
  </Grid>
)

render() {
        const widgets = this.getWidgets();

        return (
            <Grid container direction="column" spacing={2}>
                <Grid item>
                    <Timeline />
                </Grid>
                <Grid item>
                    <Box mt={2} ml={4}>
                        <Typography variant="h3" color="primary">
                            {t('ehr', 'Shortcuts')}
                        </Typography>
                        <Box mt={1} pl={2}>
                            <Grid container direction="row" spacing={2}>
                                <Grid item>
                                    <DashboardWidget
                                        onClick={() => this.props.toggleRequestDataModal(true)}
                                        icon="ArchiveOutlined"
                                        name={t('ehr', 'Request Data from Provider')}
                                    />
                                </Grid>
                                <Grid item>
                                    <DashboardWidget
                                        onClick={() => this.props.toggleImportDataModal(true)}
                                        icon="CloudUploadOutlined"
                                        name={t('ehr', 'Import Data')}
                                    />
                                </Grid>
                                {widgets}
                            </Grid>
                        </Box>
                    </Box>
                </Grid>
            </Grid>
        );
    }

render() {
        const dataGridDef = {
            defaultColDef: {
                resizable: true,
                sortable: true,
                filter: 'agTextColumnFilter',
                floatingFilter: true
            },
            columnDefs: this.getColumnDefs(rawData),
            rowData: this.massageRawData(rawData),
            paginationPageSize: 20
        }
        return (
            <Grid container justify="center" alignItems="center">
                <Grid item xs={12} className={['ag-theme-alpine', 'center'].join(' ')}>
                    <AgGridReact
                        rowData={dataGridDef.rowData}
                        columnDefs={dataGridDef.columnDefs}
                        defaultColDef={dataGridDef.defaultColDef}
                        // paginationAutoPageSize={true}
                        paginationPageSize={dataGridDef.paginationPageSize}
                        pagination={true}
                        onRowClicked={this.onRowClicked.bind(this)}
                    >
                    </AgGridReact>
                </Grid>
            </Grid>
        );
    }

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

StatGrid = (props) => {
  const { className, ...rest } = props;
  const { stattext, totalcount, latestcount } = props;

  const classes = useStyles();

  return (
    <Card {...rest} className={clsx(className)}>
      <CardContent>
        <Grid container justify="space-between">
          <Grid item>
            <Typography
              className={classes.title}
              color="textSecondary"
              gutterBottom
              variant="body2"
            >
              {stattext}
            </Typography>
            <Typography className={classes.count}>{totalcount}</Typography>
          </Grid>
          {latestcount ? (
            <Grid item>
              <ArrowUpwardIcon className={classes.differenceIcon} />
              <Typography className={classes.differenceValue} variant="body2">
                {latestcount}
              </Typography>
            </Grid>
          ) : null}
        </Grid>
      </CardContent>
    </Card>
  );
}

function SiteItem({ site }) {
  const { icon, value, name } = site;

  return (
    <Grid item xs={6}>
      <Paper variant="outlined" sx={{ py: 2.5, textAlign: 'center' }}>
        <Box sx={{ mb: 0.5 }}>{icon}</Box>
        <Typography variant="h6">{fShortenNumber(value)}</Typography>
        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
          {name}
        </Typography>
      </Paper>
    </Grid>
  );
}

Home = ({ contributors }) => (
  <Layout>
    <Head />
    <Grid className={styles.welcomeGridWrapper} container>
      <Typography variant={"h1"} className={styles.welcomeText}>Let's change the world together with Open source!</Typography>
      <Typography variant={"h2"} className={styles.welcomeSubText}>Hacktoberfest is open to everyone whether you're new to development, a student or a long-time contributor. Open your first pull request and generate a personalized music certificate
      <a className={styles.githubLink} href="https://github.com/OpenSourceTogether/Hacktoberfest-2020" target="_blank">here</a>.
      </Typography>
    </Grid>
    <Grid container className={styles.arrowContainer}>
      <FallingDownArrow />
    </Grid>
    <Grid container className={styles.contributorsListContainer}>
      <Typography className={styles.contributorsTitle}>{Math.floor(contributors.length/100)*100}+ contributors:</Typography>
      <Typography className={styles.contributorsSubTitle}>Tip: ? Click on an username to view their personalized music certificate.</Typography>
      {
        contributors && contributors.map((item, index) => {
          return (
            <Link href="/contributors/[slug]" key={index} as={`/contributors/${item["github-username"]}`}>
              <Chip
                style={{
                  background: `${item["favourite-color"]}`
                }}
                className={styles.userName}
                classes={{ avatar: styles.chipAvatar }}
                avatar={<Avatar>{item["favourite-emoji"]}</Avatar>}
                label={item["github-username"]}
              />
            </Link>
          )
        })
      }
    </Grid>
  </Layout>
)

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

  return (
    <div className={classes.root}>
      <Grid
        container
        justify="center"
        spacing={4}
      >
        <Grid
          item
          lg={6}
          xs={12}
        >
          <div className={classes.content}>
            <Typography variant="h1">
              404: The page you are looking for isn’t here
            </Typography>
            <Typography variant="subtitle2">
              You either tried some shady route or you came here by mistake.
              Whichever it is, try using the navigation
            </Typography>
            <img
              alt="Under development"
              className={classes.image}
              src="/images/undraw_page_not_found_su7k.svg"
            />
          </div>
        </Grid>
      </Grid>
    </div>
  );
}

BlogCard = (props) => {
    return(
    <Card className={styles.blogCard} style={{height : '100%'}}>
        <CardContent>
                <Grid container wrap="wrap">
                    <Grid item xs={12} md={2}>
                        <img src={props.Image} alt={props.title} style={{height : '100%', width : '100%', objectFit : 'cover'}}/>
                    </Grid>
                    <Grid item xs={12} md={10} container direction="column" justifyContent="space-between">
                        <Grid item className={styles.cardContent}>
                        <Grid container alignItems="flex-start" justifyContent="space-around">
                                    <Grid item container>
                                        <Grid item xs={12}><Typography style={{fontWeight : '600', fontSize : '1.3em', maxWidth : '90%'}}>{props.title}</Typography></Grid>
                                        <Grid item xs={12}><Typography variant="body1" style={{fontWeight : '500', marginBottom : '1em'}}>Author: {props.speaker}</Typography></Grid>    
                                    </Grid>
                                </Grid>
                            <Box className={styles.cardDescription} textOverflow="ellipsis" overflow="hidden">
                                {props.discription}
                            </Box>
                        </Grid>
                        <Grid item container justifyContent="space-between" className={styles.blogButtonBar}>
                            <Grid item alignItems="flex-end">
                                {props.Platform === 'GeeksForGeeks' ? <GFGIcon style={{width : '60px', display: 'flex', alignItems: 'flex-end'}}/> : props.Platform === 'Medium' ? <MediumIcon style={{width : '80px', display: 'flex', alignItems: 'flex-end'}}/> : <Typography variant="subtitle1" style={{fontWeight : '600'}}>{props.Platform}</Typography>}
                                
                            </Grid>
                            <Grid item style={{display : 'flex', justifyContent : 'flex-end'}}>
                            <Button variant="contained" color="primary" onClick={() => window.open(props.url)}>Read More</Button>
                        </Grid>
                        </Grid>

                    </Grid>
                </Grid>
        </CardContent>

    </Card>)
}

export function RemoveLiquidityField1(props) {
  // This component is used to selecting a coin and entering a value, the props are explained below:
  //      onClick - (string) => void - Called when the button is clicked
  //      symbol - string - The text displayed on the button
  //      value - string - The value of the text field
  //      onChange - (e) => void - Called when the text field changes
  //      activeField - boolean - Whether text can be entered into this field or not

  const classes = useStyles();
  const { onClick, symbol, value, onChange, activeField } = props;
  return (
    <div className={classes.container_blank}>
      <Grid
        container
        direction="row"
        justifyContent="space-between"
        alignItems="center"
        className={classes.grid}
      >
        {/* Button */}
        <Grid item xs={3}>
          <Fab
            size="small"
            variant="extended"
            onClick={onClick}
            className={classes.fab}
          >
            {symbol}
            <ExpandMoreIcon />
          </Fab>
        </Grid>
        {/* Text Field */}
        <Grid item xs={9}>
          <InputBase
            value={value}
            onChange={onChange}
            placeholder="0.0"
            disabled={!activeField}
            classes={{
              root: classes.container_input,
              input: classes.inputBase,
            }}
          />
        </Grid>
        {/* </div> */}
      </Grid>
    </div>
  );
}

export default function MyEvents() {
  const classes = useStyles();
  // Retrieves logged in user info
  const { user } = useAuth0();
  // Retrieves all events a user is registered to
  const { error, loading, data, refetch } = useQuery(GET_USER_EVENTS, {
    variables: { email: user.email },
  });

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

  if (loading) return <CircularProgress className={classes.loadingSpinner} />;
  if (error) return `Error! ${error.message}`;
  return (
    <main className={classes.root}>
      <Box className={classes.headingBox} borderBottom={2}>
        <Typography className={classes.heading} variant="h1" gutterBottom>
          My Events
        </Typography>
      </Box>
      {data.events.length >= 1 ? (
        <Grid className={classes.grid}>
          {data &&
            data?.events?.map((event, id) => (
              <MyEventCard key={id} event={event} refetch={refetch} />
            ))}
        </Grid>
      ) : (
        <>
          <Typography className={classes.noActiv}>
            You haven't registered for any events yet!
          </Typography>
          <Box className={classes.inlineNotice}>
            <Typography className={classes.noActivBlue}>
              Check out the Events Calendar
            </Typography>
            <Typography>
              , register for an event, then see all of your registered events
              here!
            </Typography>
          </Box>
        </>
      )}
    </main>
  );
}

LoginOkta = ({ baseUrl }) => {
  const { authService, authState } = useOktaAuth();
  const { push } = useHistory();
  const classes = useStyles();

  const onSuccess = async (res) => {
    authService.login("/home");
    authService.redirect({
      sessionToken: res.session.token,
    });
  };

  const handleLogoClick = () => {
    push("/");
  };

  if (authState.isPending) {
    return (
      <div className={classes.loading}>
        <CircularProgress />
      </div>
    );
  }

  return authState.isAuthenticated ? (
    <Redirect to="/home" />
  ) : (
    <Grid container wrap="wrap" className={classes.root}>
      <Hidden mdUp>
        <Grid item xs={12}>
          <AppBar className={classes.navbar} position="static">
            <Toolbar>
              <Button onClick={handleLogoClick}>
                <img className={classes.logo} src={logo} alt="SoMe logo" />
              </Button>
            </Toolbar>
          </AppBar>
        </Grid>
      </Hidden>
      <Grid item xs className={classes.widgetContainer}>
        <Hidden mdDown>
          <Button
            onClick={handleLogoClick}
            style={{ position: "absolute", top: ".8em", left: ".8em" }}
          >
            <img className={classes.logo} src={logoDark} alt="SoMe logo" />
          </Button>
        </Hidden>
        <SignInWidget
          baseUrl={process.env.REACT_APP_OKTA_DOMAIN}
          onSuccess={onSuccess}
        />
      </Grid>
      <Hidden xsDown>
        <Grid item xs={5} className={classes.imageContainer}>
          <LoginImg className={classes.image} alt="Login" />
        </Grid>
      </Hidden>
    </Grid>
  );
}

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

  return (
    <div className={classes.root}>
      <AppBar position="fixed">
        <Toolbar>
          <Grid container>
            <Grid item xs={6} sm={4} md={2}>
              <img src={logo} alt="logo" className={classes.logo} />
            </Grid>
            <Grid item xs={12} sm={6} md={8} className={classes.title}>
              <Typography variant="h5">USFM Grammar Online</Typography>
            </Grid>
            <Grid item xs={6} sm={2} md={2}>
              <Box
                display="flex"
                flexDirection="row-reverse"
                p={1}
                m={1.5}
                mr={0}
              >
                <Tooltip title="GitHub code repository">
                  <IconButton
                    variant="outlined"
                    className={classes.button}
                    color="inherit"
                    href="https://github.com/Bridgeconn/usfm-grammar"
                    target="_blank"
                    rel="noopener"
                  >
                    <GitHubIcon />
                  </IconButton>
                </Tooltip>
                <Typography className={classes.version}>v2.2.0</Typography>
              </Box>
            </Grid>
          </Grid>
        </Toolbar>
      </AppBar>
    </div>
  );
}

More = props => {
  const { moreToggle, setMoreToggle } = props;
  const classes = useStyles();
  const handleClose = () => {
    setMoreToggle(!moreToggle);
  };
  return (
    <div>
      <Drawer
        open={moreToggle}
        anchor="bottom"
        onClose={handleClose}
        transitionDuration={500}
        BackdropProps={{ invisible: true }}
        classes={{ paper: classes.paper }}
      >
        <Grid container justify="center">
          <Grid item xs={12}>
            <Typography align="center" variant="body2" className={classes.text}>
              Explor More Open Sources Softwares
            </Typography>
          </Grid>
          <Button className={classes.buttonSpirometer}>
            <Grid container direction="column">
              <WavesIcon className={classes.spirometer} onClick={handleClose} />
              <Typography variant="caption" align="center">
                Spirometer
              </Typography>
            </Grid>
          </Button>
          <Button component={Link} to="/pulse" className={classes.buttonPulse} onClick={handleClose}>
            <Grid container direction="column" alignContent="center">
              <FavoriteBorderIcon className={classes.pulse} />
              <Typography variant="caption" align="center">
                Pulse
              </Typography>
            </Grid>
          </Button>
        </Grid>
      </Drawer>
    </div>
  );
}

function NotFoundPage() {
  const classes = useStyles();

  return (
    <>
      <Helmet>
        <title>Page Not Found</title>
      </Helmet>
      <Container maxWidth="md">
        <Paper className={classes.paper}>
          <Typography
            variant="h4"
            align="center"
            color="textPrimary"
            gutterBottom>
            Page Not Found
          </Typography>
          <Typography
            variant="h5"
            align="center"
            color="textSecondary"
            paragraph>
            The page that you are looking for does not exit.
          </Typography>
          <div className={classes.heroButtons}>
            <Grid container spacing={2} justify="center">
              <Grid item>
                <Button
                  component={Link}
                  to="/"
                  variant="contained"
                  color="primary"
                  startIcon={<HomeIcon />}>
                  Home
                </Button>
              </Grid>
              <Grid item>
                <Button
                  component={Link}
                  to="/contact"
                  variant="outlined"
                  color="primary">
                  Report
                </Button>
              </Grid>
            </Grid>
          </div>
        </Paper>
      </Container>
    </>
  );
}

function PlayMenuBar() {
	const { isLoggedIn } = useContext(InfoContext);
	const [loginModalOpen, setLoginModalOpen] = useState(false);
	const [registerModalOpen, setRegisterModalOpen] = useState(false);

	const onCloseHandle = () => {
		setLoginModalOpen(false);
		setRegisterModalOpen(false);
	}

	if (!isLoggedIn) {
		return (
			<div className="play-container">
				<Grid container spacing={0}>
					<Grid item xs={12} md={6} className="not-logged-menu">
						<Typography variant="h4" className="login-msg">You are not logged in!</Typography>
						<Typography variant="h6" className="login-msg">Login/Signup to continue!</Typography>
						<div className="button-bar">
							<Button size="large" className="action-button login-button" onClick={() => setLoginModalOpen(true)}>Login</Button>
							<Button size="large" className="action-button signup-button" onClick={() => setRegisterModalOpen(true)}>SignUp</Button>
						</div>
					</Grid>
				</Grid>
				<Dialog open={loginModalOpen} onClose={onCloseHandle} aria-labelledby="form-dialog-title"
					PaperProps={{ style: { backgroundColor: 'white', color: '#333', minWidth: '40%' } }}
					style={{ width: '100%' }}>
					<div className="modal-info">
						<Typography variant="h5" className="type-head">Are you a student or an organizer?</Typography>
						<div className="modal-btns">
							<Link to="/login/user" className="link">
								<Button variant="outlined" color="primary" className="modal-select-btn modal-student">Student</Button>
							</Link>
							<Link to="/login/organizer" className="link">
								<Button variant="outlined" color="secondary" className="modal-select-btn modal-organizer">Organizer</Button>
							</Link>
						</div>
					</div>
				</Dialog>
				<Dialog open={registerModalOpen} onClose={onCloseHandle} aria-labelledby="form-dialog-title"
					PaperProps={{ style: { backgroundColor: 'white', color: '#333', minWidth: '40%' } }}
					style={{ width: '100%' }}>
					<div className="modal-info">
						<Typography variant="h5" className="type-head">Are you a student or an organizer?</Typography>
						<div className="modal-btns">
							<Link to="/register/user" className="link">
								<Button variant="outlined" color="primary" className="modal-select-btn modal-student">Student</Button>
							</Link>
							<Link to="/register/organizer" className="link">
								<Button variant="outlined" color="secondary" className="modal-select-btn modal-organizer">Organizer</Button>
							</Link>
						</div>
					</div>
				</Dialog>
			</div>
		);
	}
	else if (isLoggedIn) {
		return (
			<div className="play-container">
				<Grid container spacing={0}>
					<Grid item xs={12} md={6}>
						<div className="play-menu">
							<Link to="/dashboard" style={{textDecoration: 'none'}}>
								<Button size="large" className="quiz-button"><p className="button-text">Go to the Dashboard</p></Button>
							</Link>
						</div>
					</Grid>
				</Grid>
			</div>
		);
	}
}

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

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

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

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

function Homepage() {
  const { popular } = useContext(PopularAnimeContext);
  const [recent, setRecent] = useState([]);
  const { schedule } = useContext(ScheduleContext);

  const useStyles = makeStyles({
    root: {
      maxWidth: "100vw",
    },
    title: {
      padding: "10px",
      flexGrow: 1,
    },
    grids: {
      display: "flex",
    },
    spinner: {
      padding: "5px",
    },
  });

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

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

  const classes = useStyles();
  return (
    <div className={classes.root}>
      <Grid item container spacing={2}>
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Popular Anime
          </Typography>
        </Grid>
        <PopularCards Anime={popular} />
        <Grid item xs={12} className={classes.grids}>
          <Typography className={classes.title} variant="h5">
            Most Recent Anime
          </Typography>
        </Grid>
        <RecentCards Anime={recent} />
        <Grid item xs={12}>
          <Typography className={classes.title} variant="h5">
            Schedule
          </Typography>
          <Schedule schedule={schedule} />
        </Grid>
      </Grid>
    </div>
  );
}