@material-ui/core#Button JavaScript Examples

BetaBanner = () => {
  const [isBetaBarVisible, setIsBetaBarVisible] = useState(true);
  const classes = useStyles();

  const onCloseClick = () => {
    localStorage.setItem("isBetaBannerSeen", true);

    setIsBetaBarVisible(false);
  };

  return (
    <>
      {isBetaBarVisible && (
        <Dialog open={true} maxWidth="xs" fullWidth>
          <DialogContent className={classes.dialogContent}>
            <Typography variant="h3">
              <strong>Welcome!</strong>
            </Typography>
            <Box padding="1rem 0">
              <Chip label="BETA" color="secondary" className={classes.betaChip} size="small" />
            </Box>
            <div className={classes.betaText}>
              <Typography variant="body1">
                <strong>Akashlytics Deploy</strong> is currently in <strong>BETA</strong>. We strongly suggest you start with a new wallet and a small amount of
                AKT until we further stabilize the product. Enjoy!
              </Typography>
            </div>
          </DialogContent>
          <DialogActions>
            <Button variant="contained" onClick={onCloseClick} type="button" color="primary">
              Got it!
            </Button>
          </DialogActions>
        </Dialog>
      )}
    </>
  );
}

function Login() {

    const signIn = () => {
        auth.signInWithPopup(provider).catch((error) => alert(error.message));
    }

    return (
        <div className="login">
            
            <div className="login__logo">
                <img src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/98/Discord_logo.svg/800px-Discord_logo.svg.png" alt="" srcset=""/>
            </div>

            <Button onClick={signIn}>SignIn</Button>

        </div>
    )
}

Landing = () => {
  const isAuthenticated = useSelector((state) => state.auth.isAuthenticated);

  useEffect(() => {
    document.title = 'TrelloClone';
  }, []);

  if (isAuthenticated) {
    return <Redirect to='/dashboard' />;
  }

  return (
    <section className='landing'>
      <nav className='top'>
        <h2>TrelloClone</h2>
        <div>
          <Button color='inherit' href='/login'>
            Login
          </Button>
          <Button variant='contained' href='/register'>
            Sign Up
          </Button>
        </div>
      </nav>
      <div className='landing-inner'>
        <h1>TrelloClone</h1>
        <p>
          Just like <a href='https://trello.com/'>Trello</a>, but made by just one guy!
        </p>
        <div className='buttons'>
          <Button variant='outlined' color='inherit' href='/register'>
            Sign Up
          </Button>
        </div>
      </div>
    </section>
  );
}

export default function LoadingButton(props) {
  const classes = useStyles();
  const { children, loading, valid, success, fail, onClick, ...other } = props;
  return (
    <div className={classes.wrapper}>
      <Button
        variant="contained"
        color="primary"
        fullWidth
        disabled={loading || !valid}
        type="submit"
        onClick={onClick}
        {...other}
      >
        {children}
      </Button>
      {loading && <CircularProgress size={24} className={classes.progress} />}
    </div>
  );
}

export default function Login() {
  const iRef = useRef();
  const setUser = useContext(DispatchUserContext);
  function handleSubmit(e) {
    e.preventDefault();
    setUser({ id: v4(), name: iRef.current.value });
  }

  return (
    <Container maxWidth="sm">
      <Box textAlign="center" pt={4}>
        <form onSubmit={handleSubmit}>
          {/* <label>Name:</label> */}
          <TextField
            id="outlined-basic"
            label="Enter your name"
            variant="outlined"
            inputRef={iRef}
            required
          />
          <Box py={4}>
            <Button type="submit" variant="contained" color="primary">
              Submit
            </Button>
          </Box>
        </form>
      </Box>
    </Container>
  );
}

NavBar = () => {
  const classes = useStyles();
  const { isAuthenticated, loginWithRedirect } = useAuth0();
  return (
    <nav className={classes.container}>
      <Box className={classes.acsBanner}>
        <img
          className={classes.acsBrand}
          src={acsLogo}
          alt="angel city sports brand"
        />
      </Box>
      <Box className={classes.box}>
        <Box className={classes.btnContainer}>
          {/* If a user is not logged in (authenticated), will redirect to Auth0 log in modal. */}
          {!isAuthenticated && (
            <Button
              className={classes.navBtn}
              onClick={() => loginWithRedirect({})}
            >
              Sign Up
            </Button>
          )}
          <Button
            className={classes.navBtn}
            aria-label="Access log in modal"
            onClick={() => loginWithRedirect({})}
          >
            Log in
          </Button>
        </Box>
      </Box>
    </nav>
  );
}

EditButton = (props) => {
  const viewerId = props.viewerId;
  const profileId = props.profileId;
  const dispatch = useDispatch();

  const editToggle = () => {
    dispatch(toggleEditing());
  };

  if (Number(viewerId) === Number(profileId)) {
    return <Button onClick={editToggle}>Edit Profile</Button>;
  } else {
    return null;
  }
}

CreatePostButton = ({ listId }) => {
	const [isOpen, setIsOpen] = useState(false);

	return (
		<>
			<Button
				style={{ height: 50 }}
				fullWidth
				color="primary"
				onClick={() => setIsOpen(true)}
			>
				<AddIcon size="small" color="disabled" />
			</Button>
			<CreatePostModal
				listId={listId}
				open={isOpen}
				handleClose={() => setIsOpen(false)}
			/>
		</>
	);
}

FactQuizContainer = () => {
  const [factsOrQuiz, setFactsQuiz] = useState('facts');
  const setQuiz = () => setFactsQuiz('quiz');
  const setFacts = () => setFactsQuiz('facts');
  const classes = useStyles();

  return (
    <Grid>
      <Grid>
        <ButtonGroup>
          <Button className={classes.buttonGroup} onClick={setFacts} variant={factsOrQuiz === 'facts' && 'contained'}>
            Facts
          </Button>
          <Button className={classes.buttonGroup} onClick={setQuiz} variant={factsOrQuiz === 'quiz' && 'contained'}>
            Quiz
          </Button>
        </ButtonGroup>
        <Typography variant="body1" color="textSecondary">
          {factsOrQuiz === 'facts' && `Swipe to the right or left to learn more about COVID-19`}
          {factsOrQuiz === 'quiz' && `QUIZ TIME! Swipe right if true and left if false`}
        </Typography>
      </Grid>
      {factsOrQuiz === 'facts' && <FlashCards mode="facts" cardData={cardData} />}
      {factsOrQuiz === 'quiz' && <FlashCards mode="quiz" cardData={quizData} />}
    </Grid>
  );
}

function ProfileSection(props) {
	const [userType, setUserType] = useState(props.type);
	const profile = props.profile;

	return (
		<div className="profile-section">
			<Typography variant="h6" className="profile-param">Name: <span className="profile-data">{profile.name}</span></Typography>
			<Typography variant="h6" className="profile-param">E-mail: <span className="profile-data resp-text">{profile.email}</span></Typography>
			<Typography variant="h6" className="profile-param">Phone Number: <span className="profile-data">{profile.mobileNumber}</span></Typography>
			{userType === "user" ?
				<div>
					<Typography variant="h6" className="profile-param">Quizzes Enrolled: <span className="profile-data">{profile.quizzesEnrolled.length}</span></Typography>
					<Typography variant="h6" className="profile-param">Quizzes Completed: <span className="profile-data">{profile.quizzesGiven.length}</span></Typography>
				</div>
			: <Typography variant="h6" className="profile-param">Quizzes Created: <span className="profile-data">{profile.quizzes.length}</span></Typography> }
			<div className="m-top">
				<Button className="profile-btn update-prof-btn" component={Link} to={`/updateProfile/${userType}`}>Update Profile</Button>
				{profile.googleId === undefined ? <Button className="profile-btn" component={Link} to={`/updatePassword/${userType}`}>Update Password</Button> : null }
			</div>
		</div>
	)
}

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

render() {
    const { classes } = this.props;
    const { signInError, signInPassword, signInEmail } = this.state;
    return (
      <div>
        {signInError ? (
          <p>{signInError}</p>
        ) : (
          <div>
            <form onSubmit={this.onSignIn}>
              <div className={classes.handle}>
                <p>Sign In</p>
                <TextField
                  type="email"
                  required
                  placeholder="email"
                  value={signInEmail}
                  onChange={this.onchangeInputs("signInEmail")}
                />
                <br />
                <TextField
                  type="password"
                  required
                  placeholder="Password"
                  value={signInPassword}
                  onChange={this.onchangeInputs("signInPassword")}
                />
                <br />
                <Button type="submit" variant="contained" color="primary">
                  Sign In
                </Button>
              </div>
            </form>
          </div>
        )}
        ;
      </div>
    );
  }

ApplicationItem = props => {
	return (
		<li className="application-item">
			<h2 className="application--title">{props.title}</h2>
			<h3 className="application--subtitle">{props.subtitle}</h3>
			<img className="application--image" src={props.displayImage} alt=""></img>
			<h4 className="application-description">{props.description}</h4>
			<A local href={`/apps/${props.pageLink}`}>
				<Button className="application--link">{props.linkText}</Button>
			</A>
		</li>
	);
}

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 App() {

  const [option, setOption] = useState('home');

  function handleClick(event) {

    const { name } = event.currentTarget;
    if (name === 'home') {
      setOption('home');
      document.getElementById('encoded-image').style.display = 'none';
    } else if (name === 'encode') {
      setOption('encode');
    } else if (name === 'decode') {
      setOption('decode');
    }
  }

  return (
    <div className='content'>
      <h1>IMAGE<span id="word"> STEGO</span></h1>
      {option === 'home' && <Button style={{margin: '1rem'}} name='encode' onClick={handleClick} variant="contained">Encode</Button>}
      {option === 'home' && <Button style={{margin: '1rem'}} name='decode' onClick={handleClick} variant="contained">Decode</Button>}
      {option === 'encode' && <TextField variant="outlined" multiline type="text" id="secret" name="secret" placeholder="Enter secret message" />}
      {option !== 'home' && <UploadButton />}
      {option === 'encode' && <Button style={{margin: '1rem'}} onClick={encode} variant="contained">Encode</Button>}
      {option === 'decode' && <Button style={{margin: '1rem'}} onClick={decode} variant="contained">Decode</Button>}
      {option !== 'home' && <Button style={{margin: '1rem'}} name='home' onClick={handleClick} variant="contained">Return</Button>}
      <img id="encoded-image" alt='encoded output'></img>
      <canvas id="canvas"></canvas>
    </div>
  );
}

TimetablePage = (props) => {

  const classes = useStyles();
  console.log(props.tablePage)

  const containerVariants = {
    hidden: {
      opacity: 0,
      x:100,
      
    },
    visible: {
      opacity: 1,
      x:0,
      transition: {
        delay:0.5,
        duration:0.5
      }
    },
    exit: {
      x: "-100vw",
      transition:{ease:"easeInOut"}
    },
    
  }
    
  return (
    <motion.div variants={containerVariants}
    initial="hidden"
    animate="visible"
    exit="exit"
    className={classes.page}
    > <div>
      <Typography variant="h3" style={{color:"black", marginTop:'0.5vw',marginLeft: '5vw',textShadow:'2px 2px 2.2px #ff3399' }} >Time Table</Typography>
      <Typography variant="h4" style={{color:"black", marginTop:'0.5vw', marginLeft: '8vw'}} >Classes</Typography>
      <Typography variant="h4" style={{color:"black", marginTop:'-2vw',marginLeft: '65vw'}} >Labs</Typography>
      </div>
      <div>
      <Button onClick={() => props.setTablePage()} className={classes.save} variant='contained' color='secondary' component={ Link } to='/'>Save</Button>
      <Button onClick={() => props.setTablePage()} className={classes.cancel} variant='contained' color='secondary' component={ Link } to='/'>Cancel</Button>
      </div>
    </motion.div>
  )
}

AccountsModal = ({ onClose }) => {
  const classes = useStyles();
  const { address, setSelectedWallet, wallets, setWallets } = useWallet();
  const { localCerts, setLocalCert, setValidCertificates, setSelectedCertificate } = useCertificate();
  const { wallets: storageWallets } = useStorageWallets();
  const history = useHistory();

  const handleSelectAccount = (wallet) => {
    if (wallet.address !== address) {
      const newWallet = wallets.find((w) => w.address === wallet.address);

      // Update memory wallets
      for (let i = 0; i < wallets.length; i++) {
        wallets[i].selected = wallets[i].address === wallet.address;
      }

      // Update storage wallets
      const newStorageWallets = storageWallets.map((w) => ({ ...w, selected: w.address === wallet.address }));
      const localCert = localCerts.find((c) => c.address === wallet.address);

      updateStorageWallets(newStorageWallets);
      setWallets(wallets);
      setSelectedWallet(newWallet);
      setValidCertificates([]);
      setSelectedCertificate(null);

      if (localCert) {
        setLocalCert(localCert);
      }

      onClose();

      history.replace(UrlService.dashboard());
    }
  };

  const handleAddAccount = () => {
    history.push(UrlService.register(true));
    onClose();
  };

  return (
    <Dialog open={true} onClose={onClose} maxWidth="xs" fullWidth>
      <DialogTitle>
        <span className={classes.dialogTitle}>
          Accounts
          <Button variant="contained" size="small" color="primary" onClick={handleAddAccount}>
            Add account
          </Button>
        </span>
      </DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        <List className={classes.list}>
          {storageWallets.map((wallet) => {
            return (
              <ListItem key={wallet.address} dense button onClick={() => handleSelectAccount(wallet)}>
                <ListItemIcon>{wallet.address === address && <CheckIcon color="primary" />}</ListItemIcon>
                <ListItemText
                  classes={{ secondary: classes.secondaryText }}
                  primary={
                    <Box display="flex" alignItems="center" justifyContent="space-between" fontSize="1rem">
                      {wallet.name}
                    </Box>
                  }
                  secondary={wallet.address}
                />
              </ListItem>
            );
          })}
        </List>
      </DialogContent>
      <DialogActions>
        <Button onClick={onClose} type="button" autoFocus variant="contained" color="primary">
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

ArchivedCards = () => {
  const cards = useSelector((state) => state.board.board.cardObjects);
  const lists = useSelector((state) => state.board.board.listObjects);
  const dispatch = useDispatch();

  const onDelete = async (listId, cardId) => {
    dispatch(deleteCard(listId, cardId));
  };

  const onSendBack = async (cardId) => {
    dispatch(archiveCard(cardId, false));
  };

  return (
    <div>
      <List>
        {cards
          .filter((card) => card.archived)
          .map((card, index) => (
            <ListItem key={index} className='archived-card'>
              <Card>
                <CardContent>{card.title}</CardContent>
              </Card>
              <div>
                <Button
                  color='secondary'
                  onClick={() =>
                    onDelete(
                      lists.find((list) => list.cards.includes(card._id))._id,
                      card._id
                    )
                  }
                >
                  Delete Card
                </Button>
                <Button onClick={() => onSendBack(card._id)}>Send to List</Button>
              </div>
            </ListItem>
          ))}
      </List>
    </div>
  );
}

export default function SwitchButton(props) {
  const { setDeploy } = props;

  const changeStyles = (K) => {
    if (K === true) {
      let add_button = document.getElementById("add-button");
      add_button.style.backgroundColor = "#ff0000";

      let remove_button = document.getElementById("remove-button");
      remove_button.style.backgroundColor = "#9e9e9e";
    } else {
      let remove_button = document.getElementById("remove-button");
      remove_button.style.backgroundColor = "#ff0000";

      let add_button = document.getElementById("add-button");
      add_button.style.backgroundColor = "#9e9e9e";
    }
  };

  return (
    <div>
      <ButtonGroup size="large" variant="contained">
        <Button
          id="add-button"
          color="primary"
          text="white"
          onClick={() => {
            setDeploy(true);
            changeStyles(true);
          }}
        >
          Deploy Liquidity
        </Button>

        <Button
          id="remove-button"
          color="secondary"
          text="white"
          onClick={() => {
            setDeploy(false);
            changeStyles(false);
          }}
        >
          Remove Liquidity
        </Button>
      </ButtonGroup>
    </div>
  );
}

export default function SimpleModal({ activity, activityData }) {
  const classes = useStyles();
  // getModalStyle is not a pure function, we roll the style only on the first render
  const [modalStyle] = React.useState(getModalStyle);
  const [open, setOpen] = React.useState(false);

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

  const handleClose = () => {
    setOpen(false);
  };
  const body = (
    <Container style={modalStyle} className={classes.paper}>
      <Box className={classes.imgBox}>
        <img
          className={classes.img}
          src={
            (activity && activity?.event?.imgUrl) ||
            (activityData && activityData?.event?.imgUrl)
          }
          alt="Event"
        />
      </Box>
      <Box className={classes.modalMiddle}>
        <Typography className={classes.title} id="simple-modal-title">
          {activity.name}
        </Typography>
        <Typography className={classes.date}>{activity.startTime}</Typography>
        <Typography className={classes.details} id="simple-modal-description">
          {activity?.details}
        </Typography>
      </Box>
      <Box className={classes.modalBottom}>
        <Box>
          <Button className={classes.modalBtn2} onClick={handleClose}>
            Close
          </Button>
        </Box>
      </Box>
    </Container>
  );

  return (
    <div>
      <Button className={classes.btn} onClick={handleOpen}>
        {activity.name}
      </Button>
      <Modal
        open={open}
        onClose={handleClose}
        aria-labelledby="simple-modal-title"
        aria-describedby="simple-modal-description"
      >
        {body}
      </Modal>
    </div>
  );
}

AddAllergens = (props) => {
  const classes = buttonStyles();

  return (
    <FieldArray name="allergens">
      {({ push, remove }) => (
        <div
          className="restriction"
          style={{
            marginTop: "10px",
            display: "none",
            flexDirection: "column",
          }}
        >
          <Typography>Allergens</Typography>
          {props.values.allergens.map((allergen, index) => {
            return (
              <div
                key={index}
                style={{ display: "flex", alignItems: "center" }}
              >
                <Field
                  component={TextField}
                  margin="normal"
                  variant="outlined"
                  label="Allergen"
                  name={`allergens[${index}]`}
                  value={allergen}
                />
                <Button
                  className={classes.button}
                  margin="none"
                  type="button"
                  color="secondary"
                  variant="outlined"
                  onClick={() => remove(index)}
                >
                  x
                </Button>
              </div>
            );
          })}
          <Button
            className={classes.button}
            type="button"
            variant="outlined"
            onClick={() => push("")}
          >
            Add Allergen
          </Button>
        </div>
      )}
    </FieldArray>
  );
}

GeneralInfoComponent = (props) => {
  const [edit, setEdit] = useState(false);

  const classes = useStyles();

  const id = localStorage.getItem("draftID");
  const { loading, error, data } = useQuery(GET_DRAFT_QUERY, {
    variables: { id },
  });

  const [info, setInfo] = useState({
    email: "",
    name: "",
  });

  if (loading) return <p>loading</p>;
  if (error) return <p>ERROR: {error.message}</p>;
  if (!data) return <p>Not found</p>;

  console.log(data, "data inside of review General info");

  const saveInfo = (event) => {
    event.preventDefault();
    // props.addData(info);
    setEdit(false);
  };

  const onChange = (event) => {
    setInfo({ ...info, [event.target.name]: event.target.value });
  };

  if (data) {
    if (edit) {
      return (
        <Card>
          <h1>
            General Info{" "}
            <EditIcon color="primary" onClick={() => setEdit(!edit)}>
              Edit
            </EditIcon>
          </h1>
          <CardContent>
            <form onSubmit={saveInfo}>
              <ReviewGeneralInfoFormTemplate
                onChange={onChange}
                info={data.getDraft}
              />
              <Button
                type="submit"
                fullWidth
                variant="contained"
                color="primary"
                className={classes.submit}
              >
                Save
              </Button>
            </form>
          </CardContent>
        </Card>
      );
    } else {
      return (
        <Card>
          <h1>
            General Info{" "}
            <EditIcon color="disabled" onClick={() => setEdit(!edit)}>
              Edit
            </EditIcon>
          </h1>
          <CardContent className={classes.cardContent}>
            <p>Your Name: {data.getDraft.name}</p>
            <p>Email Address: {data.getDraft.email} </p>
          </CardContent>
        </Card>
      );
    }
  }
}

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

function ParseJson() {
  const classes = useStyles();
  const { jsonValue, setUsfmValue, alert, tabValue, setOpen } =
    useContext(GrammarContext);
  const disabled = tabValue === 0 ? false : true;
  const parseText = () => {
    if (jsonValue === "") {
      return alert("warning", "No Data to Convert");
    }
    setUsfmValue("");
    setOpen(true);
    setTimeout(() => {
      jsonParser();
    }, 300);
  };
  const jsonParser = () => {
    try {
      const myJsonParser = new grammar.JSONParser(jsonValue);
      var usfmOutput = myJsonParser.toUSFM();
      setUsfmValue(usfmOutput);
    } catch (e) {
      setUsfmValue(e.toString());
      alert("error", "Error parsing JSON data");
    }
    setOpen(false);
  };
  return (
    <div>
      <Tooltip title="Convert">
        <Button
          variant="contained"
          color="primary"
          onClick={parseText}
          startIcon={<KeyboardArrowLeftIcon />}
          disabled={disabled}
          className={classes.button}
        >
          <span className={classes.buttonText}>Convert</span>
        </Button>
      </Tooltip>
    </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>
  );
}

render() {
    return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <Typography
              className={this.props.classes.heading}
              variant="display1"
              color="inherit"
            >
              Chat Server
            </Typography>
            <Hidden mdUp>
              <IconButton
                color="inherit"
                onClick={this.handleMenubutton}
                className={this.props.classes.menuButton}
              >
                <MenuIcon />
              </IconButton>
            </Hidden>
            <Hidden smDown>
              <Typography className={this.props.classes.links}>
                <Button href="/api/signup" color="primary" variant="contained">
                  Signup
                </Button>

                <Button href="/api/signin" color="primary" variant="contained">
                  Signin
                </Button>

                <Button href="/api/chat" color="primary" variant="contained">
                  Chat
                </Button>
              </Typography>
            </Hidden>
          </Toolbar>
        </AppBar>
        <Hidden mdUp>
          <Drawer
            variant="persistent"
            anchor="top"
            open={this.state.open}
            classes={{ paperAnchorTop: this.props.classes.drawerColor }}
          >
            <div className={this.props.classes.drawerWidth}>
              <IconButton onClick={this.handleMenubutton}>
                <KeyboardArrowUpIcon />
              </IconButton>

              <List>
                {["SignUp", "SignIn", "Chat"].map((text, index) => (
                  <ListItem button key={index}>
                    <Button href={`#${text}`} onClick={this.handleMenubutton}>
                      <ListItemText primary={text} />
                    </Button>
                  </ListItem>
                ))}
              </List>
            </div>
          </Drawer>
        </Hidden>
      </div>
    );
  }