@material-ui/icons#Add JavaScript Examples

Navigators = ({ className, username, onNavigationClick }) => {
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = (type) => {
    setAnchorEl(null);
    if (type === 'log-out') {
      removeUserInformation();
      window.location.reload();
    }
  };
  return (
    <Toolbar className={className}>
      {username && (
        <React.Fragment>
          <Link to={`/home`} className="navigation-link">
            <IconButton edge="start" color="inherit" aria-label="menu">
              <Home />
            </IconButton>
          </Link>
          <IconButton color="inherit" aria-label="menu">
            <FavoriteBorderOutlined />
          </IconButton>
          <IconButton
            onClick={onNavigationClick.bind(null, 'add-media')}
            color="inherit"
            aria-label="menu"
          >
            <Add />
          </IconButton>
          {/* <Link to={`/profile/${username}`} className="navigation-link"></Link> */}
          <IconButton
            color="inherit"
            aria-label="menu"
            aria-controls="simple-menu"
            aria-haspopup="true"
            onClick={handleClick}
          >
            <Profile username={username} />
          </IconButton>
          <Menu
            id="simple-menu"
            anchorEl={anchorEl}
            keepMounted
            open={Boolean(anchorEl)}
          >
            <Link to={`/profile/${username}`} className="navigation-link">
              <MenuItem onClick={handleClose.bind(null, 'profile')}>
                Profile
              </MenuItem>
            </Link>
            <MenuItem onClick={handleClose.bind(null, 'log-out')}>
              Logout
            </MenuItem>
          </Menu>
        </React.Fragment>
      )}
      {!username && (
        <Link to="/start">
          <span>Login / Signup</span>
        </Link>
      )}
    </Toolbar>
  );
}

BehaviourAnalysis = () => {
  const [analyses, setAnalyses] = useState([]);
  const classes = useStyles();
  const [openAddAnalysis, setOpenAddAnalysis] = useState(false);

  const fetchData = () => {
    APIService.getAnalyses().then(resp => setAnalyses(resp.data));
  };

  const loadState = () => {
    setOpenAddAnalysis(false);
    fetchData();
  };

  const handleAddAnalysisOpen = () => {
    setOpenAddAnalysis(true);
  };

  const handleAddAnalysisClose = () => {
    setOpenAddAnalysis(false);
  };

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

  return (
    <div>
      <Typography color="primary" variant="subtitle1">
        Behavioral Analysis
      </Typography>
      <div style={{ margin: '20px' }} className={classes.behaviourDiv}>
        {analyses.map(analysis => (
          <AnalysesCard
            title={analysis.title}
            content={analysis.content}
            reload={fetchData}
            key={analysis.id}
            analysisId={analysis.id}
          />
        ))}
        <div className={classes.addBox} onClick={handleAddAnalysisOpen}>
          <Typography variant="h6" gutterBottom>
            <IconButton aria-label="Add analysis" component="span">
              <Add />
            </IconButton>
          </Typography>
        </div>
      </div>
      <AnalysisForm
        open={openAddAnalysis}
        onClose={handleAddAnalysisClose}
        onChange={loadState}
        isNew
      />
    </div>
  );
}

Notes = props => {
  const classes = useStyles();
  const { notes, applicationId, reload } = props;
  const [openAddNote, setOpenAddNote] = useState(false);

  const handleAddNoteOpen = () => {
    setOpenAddNote(true);
  };

  const handleAddNoteClose = () => {
    setOpenAddNote(false);
  };

  const onDelete = id => {
    APIService.deleteNote(applicationId, id).then(reload);
  };

  return (
    <div className={classes.root}>
      <Typography variant="h6" color="primary">
        Notes
      </Typography>
      <div className={classes.notes}>
        {notes.map(note => (
          <NotesCard
            applicationId={applicationId}
            title={note.title}
            content={note.content}
            id={note.id}
            key={note.id}
            onDelete={onDelete}
            onUpdate={reload}
          />
        ))}
        <div className={classes.addBox} onClick={handleAddNoteOpen}>
          <Typography variant="h6" gutterBottom>
            <Add />
          </Typography>
        </div>
      </div>
      <NoteForm
        open={openAddNote}
        onClose={handleAddNoteClose}
        onChange={reload}
        applicationId={applicationId}
        label="Add New Note"
        isNew
      />
    </div>
  );
}

function AddMusic() {
    const useStyle = useContext(ThemeContext);
    const fileRef = useRef();
    const [selected,setSelected] = useState(null);
    const selectImg = () =>{
        fileRef.current.click()
    }
    useEffect(()=>{
        fileRef.current.onchange = (e) => {
            setSelected(e.target.files[0].name)
        }
    })
    let id =musicDB[musicDB.length-1].id + 1;
    return (
        <form style={useStyle.component} className={"AddMusic"}>
            <div className="add-music-sub-container">
                <div className="d1">
                    <Button  onClick={selectImg}  style={{backgroundColor: useStyle.subTheme,width:"200px",height:"200px"}} variant={"contained"} >
                        <Image titleAccess={"Select a music cover"} style={{color:"#f0f0f0",width:"150px",height:"150px"}}/>
                    </Button>
                    <input ref={fileRef} accept="image/*" type="file" hidden id={"music-img"}/>
                    <p>{selected}</p>
                    <Button htmlFor={"music-img"} onClick={selectImg}  style={{backgroundColor: useStyle.subTheme,width:"200px",height:"200px"}} variant={"contained"} >
                        <MusicNoteTwoTone titleAccess={"Select a music"}  style={{color:"#f0f0f0",width:"150px",height:"150px"}}/>
                    </Button>
                    <input accept="audio/*" hidden type="file"/>
                    <select>
                        <option value="0">Select Language</option>
                        <option value="1">Hindi</option>
                        <option value="2">English</option>
                    </select>
                </div>
                <div className="d2">
                    <div>
                        <input type="text" value={"ID: "+id} disabled/>
                        <input type="text" placeholder={"CurrentPlayingLarge Name"} id={"name"}/>
                        <input type="text" placeholder={"Singer Name"} id={"artist"}/>
                        <Button  style={{backgroundColor: useStyle.theme}} variant={"contained"} endIcon={<Add/>}>
                            Add
                        </Button>
                    </div>
                    <div className={"preview"}>
                        <h3>Preview</h3>
                        <p>Music Cover : {selected}</p>
                        <p>Music Image : {selected}</p>
                        <p>Music Name : {selected}</p>
                        <p>Singer Name : {selected}</p>
                        <p>Language : {selected}</p>
                    </div>
                </div>
            </div>

        </form>
    );
}

function QuizzesSection(props) {
	const [loading, setLoading] = useState(true);
	const [userType, setUserType] = useState(props.type);
	const [profile, setProfile] = useState(props.profile);
	const [quizzes, setQuizzes] = useState([]);
	const [quizzesEnrolled, setQuizzesEnrolled] = useState([]);

	const [joinModal, setJoinModal] = useState(false);
	const [quizCode, setQuizCode] = useState("");
	const [quizCodeError, setQuizCodeError] = useState(false);

	const [enrollModal, setEnrollModal] = useState(false);
	const [enrollQuizName, setEnrollQuiz] = useState("");
	const [enrollQuizId, setEnrollQuizId] = useState("");

	const [enrollSnack, setEnrollSnack] = useState(false);
	const [snackbar, setSnackBar] = useState(false);
	const [errorSnack, setErrorSnack] = useState(false);

	const [infoModal, setInfoModal] = useState(false);
	const [infoLoading, setInfoLoading] = useState(false);
	const [currQuiz, setCurrQuiz] = useState({});
	const [timeRemain, setTimeRemain] = useState("");

	const [startModal, setStartModal] = useState(false);
	const [quizStarted, setQuizStarted] = useState(false);
	const [redirectId, setRedirectId] = useState("");
	const [quizDetails, setQuizDetails] = useState({});

	const [earlyError, setEarlyError] = useState(false);
	const [lateError, setLateError] = useState(false);
	const [givenSnack, setGivenSnack] = useState(false);
	const [privateWrongCode, setPrivateWrongCode] = useState(false);
	const [alreadyEnrolled, setAlreadyEnrolled] = useState(false);

	const setRefresh = props.refresh;

	const { executeRecaptcha } = useGoogleReCaptcha();

	const getCols = () => {
		if (isWidthUp("md", props.width)) {
			return 3;
		}

		return 2;
	};

	const getInfoWidth = () => {
		if (isWidthUp("sm", props.width)) {
			return "45%";
		}

		return "80%";
	};

	const onCloseHandle = () => {
		setJoinModal(false);
		setInfoModal(false);
		setStartModal(false);

		setQuizCode("");
		setQuizCodeError(false);
		setEnrollModal(false);
		setEnrollQuiz("");
		setEnrollQuizId("");
		setTimeRemain("");
		setCurrQuiz({});
	};

	const onJoinClick = () => {
		setJoinModal(true);
	};

	const handleJoinChange = (event) => {
		setQuizCode(event.target.value);
	};

	const handleEnrollButton = (quiz) => {
		setEnrollQuiz(quiz.quizName);
		setEnrollQuizId(quiz._id);
		setEnrollModal(true);
	};

	const handleInfoButton = (quiz) => {
		setInfoModal(true);
		getQuizInfo(quiz.quizId._id);
	};

	const handleStartButton = (quiz) => {
		setEnrollQuiz(quiz.quizId.quizName);
		setEnrollQuizId(quiz.quizId._id);
		setStartModal(true);
	};

	const getQuizInfo = async (id) => {
		setInfoLoading(true);

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

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

	const handleJoinSubmit = async () => {
		if (quizCode.trim().length === 0) {
			setQuizCodeError(true);
			return;
		}
		setQuizCodeError(false);
		setEnrollSnack(true);
		let url = "https://quizzie-api.herokuapp.com/quiz/enrollPrivate";
		let token = localStorage.getItem("authToken");

		let captcha = await executeRecaptcha("join_private");

		let data = {
			quizCode: quizCode,
			captcha: captcha,
		};

		try {
			await axios
				.patch(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setRefresh(true);
					onCloseHandle();
					setSnackBar(true);
				});
		} catch (error) {
			setEnrollSnack(false);
			if (error.response.status === 404) {
				setPrivateWrongCode(true);
			} else if (error.response.status === 409) {
				setAlreadyEnrolled(true);
			} else {
				setErrorSnack(true);
			}
		}
	};

	const handleEnroll = async () => {
		setEnrollSnack(true);
		let token = localStorage.getItem("authToken");
		let url = "https://quizzie-api.herokuapp.com/quiz/enroll";

		let captcha = await executeRecaptcha("quiz_enroll");

		let data = {
			quizId: enrollQuizId,
			captcha: captcha,
		};

		try {
			await axios
				.patch(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setRefresh(true);
					onCloseHandle();
					setSnackBar(true);
				});
		} catch (error) {
			console.log(error);
			setErrorSnack(true);
		}
	};

	const handleUnenroll = async () => {
		setEnrollSnack(true);
		let token = localStorage.getItem("authToken");
		let url = "https://quizzie-api.herokuapp.com/quiz/unenroll";

		let captcha = await executeRecaptcha("quiz_unenroll");

		let data = {
			quizId: currQuiz._id,
			captcha: captcha,
		};

		try {
			await axios
				.patch(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setRefresh(true);
				});
		} catch (error) {
			console.log(error);
			setErrorSnack(true);
		}
	};

	const handleQuizStart = async () => {
		setEnrollSnack(true);
		let token = localStorage.getItem("authToken");
		let url = `https://quizzie-api.herokuapp.com/quiz/start`;

		let captcha = await executeRecaptcha("quiz_start");

		let data = {
			quizId: enrollQuizId,
			captcha: captcha,
		};

		try {
			await axios
				.patch(url, data, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					setRedirectId(data.quizId);
					setQuizDetails(res.data);
					setQuizStarted(true);
				});
		} catch (error) {
			setEnrollSnack(false);
			if (error.response.status === 401) {
				setEarlyError(true);
			} else if (error.response.status === 402) {
				setLateError(true);
			} else if (error.response.status === 405) {
				setGivenSnack(true);
			}
		}
	};

	const setupEnrolled = () => {
		let quizzes = [];

		profile.quizzesEnrolled.map((quiz) => {
			if (
				!profile.quizzesGiven.find((o) => o.quizId === quiz.quizId._id)
			) {
				quizzes.push(quiz);
			}
		});

		setQuizzesEnrolled(quizzes);
	};

	const getQuizzes = async () => {
		setLoading(true);
		let token = localStorage.getItem("authToken");
		let url = "https://quizzie-api.herokuapp.com/quiz/all";

		let quizList = [];

		try {
			await axios
				.get(url, {
					headers: {
						"auth-token": token,
					},
				})
				.then((res) => {
					res.data.result.map((quiz) => {
						if (quiz.quizType === "public") {
							if (userType === "user") {
								if (
									!profile.quizzesEnrolled.find(
										(o) => o.quizId._id === quiz._id
									)
								)
									quizList.push(quiz);
							} else quizList.push(quiz);
						}
					});

					quizList.sort(function (a, b) {
						return a.scheduledFor - b.scheduledFor;
					});

					setQuizzes(quizList);
					setLoading(false);
				});
		} catch (error) {
			console.log(error);
		}
	};

	useEffect(() => {
		if (infoModal) {
			if (currQuiz.scheduledFor <= Date.now()) {
				setTimeRemain("Already Started!");
			} else {
				setTimeout(() => {
					setTimeRemain(
						countdown(
							new Date(),
							new Date(Number(currQuiz.scheduledFor))
						).toString()
					);
				}, 1000);
			}
		}
	});

	useEffect(() => {
		if (userType === "user") setupEnrolled();
		getQuizzes();
	}, []);

	if (loading) {
		return <QuizLoading />;
	} else if (quizStarted) {
		return (
			<Redirect
				to={{
					pathname: `/quiz`,
					state: {
						questions: quizDetails.data,
						duration: quizDetails.duration,
						start: quizDetails.scheduledFor,
						id: enrollQuizId,
						timeStarted: Date.now(),
						restartStatus: quizDetails.quizRestart,
					},
				}}
			/>
		);
	} else {
		return (
			<div className="quizzes-section">
				<div className="quiz-btn-section">
					{userType === "user" ? (
						<Button className="join-quiz-btn" onClick={onJoinClick}>
							<Check />
							Join a Quiz
						</Button>
					) : null}
					{userType === "admin" ? (
						<Button
							className="create-quiz-btn"
							component={Link}
							to="/createQuiz"
						>
							<Add />
							Create a quiz
						</Button>
					) : null}
				</div>
				{userType === "user" ? (
					<div className="enrolled-list">
						<Typography variant="h5" className="up-quizzes">
							Enrolled Quizzes
						</Typography>
						{quizzesEnrolled.length === 0 ? (
							<p style={{ textAlign: "center" }}>
								Sorry! No quizzes available at the moment!
							</p>
						) : (
							<div className="quiz-list root1">
								<GridList
									cols={getCols()}
									className="grid-list btn-set"
								>
									{quizzesEnrolled.map((quiz) => (
										<GridListTile
											key={quiz._id}
											className="quiz-tile"
										>
											<img src="../CC LOGO-01.svg" />
											<GridListTileBar
												title={quiz.quizId.quizName}
												actionIcon={
													<div className="inline">
														<Tooltip title="Start Quiz">
															<IconButton
																aria-label={`start ${quiz.quizId.quizName}`}
																onClick={() =>
																	handleStartButton(
																		quiz
																	)
																}
															>
																<PlayCircleFilled className="enroll-icon" />
															</IconButton>
														</Tooltip>
														<Tooltip title="Info">
															<IconButton
																aria-label={`info ${quiz.quizId.quizName}`}
																onClick={() =>
																	handleInfoButton(
																		quiz
																	)
																}
															>
																<Info className="enroll-icon" />
															</IconButton>
														</Tooltip>
													</div>
												}
											/>
										</GridListTile>
									))}
								</GridList>
							</div>
						)}
					</div>
				) : null}
				<Typography variant="h5" className="up-quizzes">
					Upcoming Quizzes
				</Typography>
				{quizzes.length === 0 ? (
					<p style={{ textAlign: "center" }}>
						Sorry! No quizzes available at the moment!
					</p>
				) : (
					<div className="quiz-list root1">
						<GridList cols={getCols()} className="grid-list">
							{quizzes.map((quiz) => (
								<GridListTile
									key={quiz._id}
									className="quiz-tile"
								>
									<img src="../CC LOGO-01.svg" />
									<GridListTileBar
										title={quiz.quizName}
										subtitle={`By: ${quiz.adminId.name}`}
										actionIcon={
											userType === "user" ? (
												<Tooltip title="Enroll">
													<IconButton
														aria-label={`enroll ${quiz.quizName}`}
														onClick={() =>
															handleEnrollButton(
																quiz
															)
														}
													>
														<Check className="enroll-icon" />
													</IconButton>
												</Tooltip>
											) : null
										}
									/>
								</GridListTile>
							))}
						</GridList>
					</div>
				)}
				<Dialog
					open={joinModal}
					onClose={onCloseHandle}
					aria-labelledby="join-quiz-modal"
					PaperProps={{
						style: {
							backgroundColor: "white",
							color: "#333",
							minWidth: "30%",
						},
					}}
					style={{ width: "100%" }}
				>
					<div className="modal-info">
						{userType === "admin" ? (
							<Typography
								variant="h6"
								className="type-head join-sub"
							>
								Organizers cannot enroll in quizzes.
							</Typography>
						) : (
							<div
								style={{
									display: "flex",
									flexDirection: "column",
								}}
							>
								<Typography variant="h5" className="type-head">
									JOIN A PRIVATE QUIZ
								</Typography>
								<Typography
									variant="h6"
									className="type-head join-sub"
								>
									Enter the code of the quiz you want to join
								</Typography>
								<TextInput
									error={quizCodeError}
									helperText={
										quizCodeError ? "Required" : null
									}
									label="Quiz Code"
									variant="outlined"
									value={quizCode}
									onChange={handleJoinChange}
									className="quiz-code-field"
								/>
								<Button
									className="join-quiz-btn join-modal-btn"
									onClick={handleJoinSubmit}
								>
									Join!
								</Button>
							</div>
						)}
					</div>
				</Dialog>
				<Dialog
					open={enrollModal}
					onClose={onCloseHandle}
					aria-labelledby="enroll-quiz-modal"
					PaperProps={{
						style: {
							backgroundColor: "white",
							color: "#333",
							minWidth: "30%",
						},
					}}
					style={{ width: "100%" }}
				>
					<div className="modal-info">
						{userType === "admin" ? (
							<Typography
								variant="h6"
								className="type-head join-sub"
							>
								Organizers cannot enroll in quizzes.
							</Typography>
						) : (
							<div>
								<Typography
									variant="h6"
									className="type-head join-sub"
								>{`Are you sure you want to join ${enrollQuizName}?`}</Typography>
								<div className="btn-div m-top">
									{/* classes in Navbar.css */}
									<Button
										className="logout-btn m-right"
										onClick={handleEnroll}
									>
										Yes
									</Button>
									<Button
										className="cancel-btn m-left"
										onClick={onCloseHandle}
									>
										No
									</Button>
								</div>
							</div>
						)}
					</div>
				</Dialog>
				<Dialog
					open={startModal}
					onClose={onCloseHandle}
					aria-labelledby="start-quiz-modal"
					PaperProps={{
						style: {
							backgroundColor: "white",
							color: "#333",
							minWidth: "30%",
						},
					}}
					style={{ width: "100%" }}
				>
					<div className="modal-info">
						<div>
							<Typography
								variant="h6"
								className="type-head join-sub"
							>{`Are you sure you want to start ${enrollQuizName}?`}</Typography>
							<div className="btn-div m-top2 start-div">
								{/* classes in Navbar.css */}
								<Button
									className="logout-btn m-right"
									onClick={handleQuizStart}
								>
									Yes
								</Button>
								<Button
									className="cancel-btn m-left"
									onClick={onCloseHandle}
								>
									No
								</Button>
							</div>
						</div>
					</div>
				</Dialog>
				<Dialog
					open={infoModal}
					onClose={onCloseHandle}
					aria-labelledby="info-quiz-modal"
					PaperProps={{
						style: {
							backgroundColor: "white",
							color: "#333",
							minWidth: getInfoWidth(),
							maxHeight: "45%",
						},
					}}
					style={{ width: "100%" }}
				>
					<DialogTitle
						style={{ textAlign: "center", fontWeight: "bold" }}
					>
						Quiz Info
					</DialogTitle>

					{/* From the profile section */}
					{infoLoading ? (
						<Loading />
					) : (
						<div
							className="modal-info no-p-top"
							style={{ textAlign: "center" }}
						>
							<Typography
								variant="h6"
								className="profile-param info-param"
							>
								Name:{" "}
								<span className="profile-data">
									{currQuiz.quizName}
								</span>
							</Typography>
							<Typography
								variant="h6"
								className="profile-param info-param"
							>
								Date:{" "}
								<span className="profile-data">
									{new Date(
										Number(currQuiz.scheduledFor)
									).toDateString()}
								</span>
							</Typography>
							<Typography
								variant="h6"
								className="profile-param info-param"
							>
								Time:{" "}
								<span className="profile-data">
									{new Date(
										Number(currQuiz.scheduledFor)
									).toLocaleTimeString()}
								</span>
							</Typography>
							<div className="time-sec">
								<Typography
									variant="h6"
									className="profile-param info-param"
								>
									<span className="profile-data time-rem">
										{timeRemain}
									</span>
								</Typography>
							</div>
							<Button
								className="unenroll-btn"
								onClick={handleUnenroll}
							>
								<Block style={{ color: "white" }} />
								Unenroll
							</Button>
						</div>
					)}
				</Dialog>
				<Snackbar
					open={snackbar}
					autoHideDuration={2000}
					onClose={() => setSnackBar(false)}
				>
					<Alert
						variant="filled"
						severity="success"
						onClose={() => setSnackBar(false)}
					>
						Successfully Enrolled!
					</Alert>
				</Snackbar>
				<Snackbar
					open={errorSnack}
					autoHideDuration={2000}
					onClose={() => setErrorSnack(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setErrorSnack(false)}
					>
						There was some error. Please try again!
					</Alert>
				</Snackbar>
				<Snackbar
					open={enrollSnack}
					autoHideDuration={5000}
					onClose={() => setEnrollSnack(false)}
				>
					<Alert
						variant="filled"
						severity="info"
						onClose={() => setErrorSnack(false)}
					>
						Processing... Please Wait!
					</Alert>
				</Snackbar>
				<Snackbar
					open={earlyError}
					autoHideDuration={5000}
					onClose={() => setEarlyError(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setEarlyError(false)}
					>
						The quiz has not yet started!
					</Alert>
				</Snackbar>
				<Snackbar
					open={lateError}
					autoHideDuration={5000}
					onClose={() => setLateError(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setLateError(false)}
					>
						This quiz has ended!
					</Alert>
				</Snackbar>
				<Snackbar
					open={givenSnack}
					autoHideDuration={5000}
					onClose={() => setGivenSnack(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setGivenSnack(false)}
					>
						Already given this quiz!
					</Alert>
				</Snackbar>
				<Snackbar
					open={privateWrongCode}
					autoHideDuration={5000}
					onClose={() => setPrivateWrongCode(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setPrivateWrongCode(false)}
					>
						This quiz code does not exists!
					</Alert>
				</Snackbar>
				<Snackbar
					open={alreadyEnrolled}
					autoHideDuration={5000}
					onClose={() => setAlreadyEnrolled(false)}
				>
					<Alert
						variant="filled"
						severity="error"
						onClose={() => setAlreadyEnrolled(false)}
					>
						Already enrolled in this quiz!
					</Alert>
				</Snackbar>
			</div>
		);
	}
}

Dashboard = () => {
  const showToast = useToast();
  const showLoader = useLoader();
  const classes = useStyles();
  const history = useHistory();
  const [applicationsData, setApplicationsData] = React.useState();
  const [boardData, setBoardData] = useState(data);
  const [openJobAdd, setOpenJobAdd] = React.useState(false);

  const handleJobAddOpen = () => {
    setOpenJobAdd(true);
  };

  const handleJobAddClose = () => {
    setOpenJobAdd(false);
  };

  const getJobApplications = () => {
    showLoader(true);
    APIService.getJobApplications()
      .then(resp => {
        const appData = resp.data;
        setApplicationsData(appData);
        const parsedData = parseApplicationData(appData);
        setBoardData(parsedData);
      }).finally(() => showLoader(false));
  };

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

  const handleDrag = (id, source, target) => {
    if (source !== target) {
      APIService.updateApplicationStatus(id, target)
        .catch(() => showToast('Error while deleting updating Job application', ToastConstants.ERROR));
    }
  };

  const cardDelete = id => {
    APIService.deleteApplication(id).catch(() => showToast('Error while deleting Job application', ToastConstants.ERROR));
  };

  const isEmptyBoard = () => {
    return applicationsData.length === 0;
  };

  return (
    <div>
      { applicationsData
        ? (
          <div>
            <Typography color="primary" variant="h5">
              Dashboard
            </Typography>
            { isEmptyBoard() && <EmptyBoard /> }

            {!isEmptyBoard() && (
            <Board
              data={boardData}
              style={{ backgroundColor: '#fff', height: 'auto' }}
              handleDragEnd={handleDrag}
              onCardDelete={cardDelete}
              onCardClick={cardId => history.push(`/application/${cardId}`)}
              laneStyle={{ backgroundColor: '#d9c8f5' }}
              cardStyle={{ backgroundColor: '#ffe' }}
            />
            )}

            <Fab
              color="primary"
              aria-label="Add job"
              className={classes.fab}
              onClick={handleJobAddOpen}
            >
              <Add />
            </Fab>
            <AddJob
              open={openJobAdd}
              onClose={handleJobAddClose}
              onChange={getJobApplications}
            />
          </div>
        )
        : <HorizontalLoader />}
    </div>
  );
}

EditLayoutModal = props => {
  const [show, setShow] = useState(false);
  const handleClose = () => {
    setShow(false);
    setTimeout(() => {
      props.onClose();
    }, 500);
  };
  const handleShow = () => setShow(true);

  return (
    <>
      <Button onClick={handleShow} variant="outlined" color="primary">
        Edit Layout
      </Button>

      <Modal
        size="lg"
        show={show}
        onHide={handleClose}
        style={{ background: "rgba(0, 0, 0,0.5)" }}
      >
        <Modal.Header closeButton>
          <Modal.Title>Edit Layout</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <Row>
            <Col lg={6}>
              <center>
                <h5>Layout options</h5>
              </center>
              <Table size="sm">
                <tbody>
                  {props.layoutOptions.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{item}</td>
                        <th style={{ textAlign: "right" }}>
                          <Button
                            variant="outlined"
                            color="primary"
                            size="small"
                            onClick={() => {
                              props.onAddLayoutItem(index);
                            }}
                          >
                            <Add fontSize="small"/>
                          </Button>
                        </th>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Col>
            <Col lg={6}>
              <center>
                <h5>Current Layout</h5>
              </center>
              <Table size="sm">
                <tbody>
                  {props.layout.map((item, index) => {
                    return (
                      <tr key={index}>
                        <td>{item}</td>
                        <th style={{ textAlign: "right" }}>
                          <Button
                            variant="outlined"
                            color="secondary"
                            size="small"
                            onClick={() => {
                              props.onRemoveLayoutItem(index);
                            }}
                          >
                            <Remove fontSize="small"/>
                          </Button>
                          &nbsp;
                          <ButtonGroup>
                            <Button
                              size="small"
                              onClick={() => {
                                props.onMoveUp(index);
                              }}
                            >
                              <ArrowUpward fontSize="small"/>
                            </Button>
                            <Button
                              size="small"
                              onClick={() => {
                                props.onMoveDown(index);
                              }}
                            >
                              <ArrowDownward fontSize="small"/>
                            </Button>
                          </ButtonGroup>
                        </th>
                      </tr>
                    );
                  })}
                </tbody>
              </Table>
            </Col>
          </Row>
        </Modal.Body>
        <Modal.Footer>
          <Button onClick={handleClose}>
            Close
          </Button>
          &emsp;
          <Button
            variant="outlined"
            color="primary"
            onClick={() => {
              setShow(false);
              props.onSaveLayout();
            }}
          >
            Save
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Option = props => {
  const [show, setShow] = useState(false);
  const handleClose = () => {
    setShow(false);
    setTimeout(() => {
    }, 500);
  };
  const handleShow = () => setShow(true);

  const [quantity, setQuantity] = useState(0);

  const add = () => {
    setShow(false);
    const position = quantity > 0 ? "long" : "short";
    props.onAddPosition(props.index, props.option["option_type"], position, quantity);
    // const quantity = 0;
    setQuantity(0);
  };

  const getColor = () => {
    return props.option.change >= 0 ? "text-success" : "text-danger";
  };

  const setSign = () => {
    return props.option.change > 0 ? "+" : "";
  };

  // const setBackground = () => {
  //   if(props.option.option_type === "put"){
  //     return props.option.strike > props.quote.last ? "#E0EBFD":"white";
  //   }
  //   else{
  //     return props.option.strike > props.quote.last ? "white": "#E0EBFD";
  //   }
  // };

  const setBorder = idx => {
    if(props.option.option_type==="put" && idx === props.layout.length-1) {
      const style = {};
      style.borderRight = props.option.strike > props.quote.last ? "6px solid #3f51b5":"";
      return style;
    }
    else if (props.option.option_type==="call" && idx === 0){
      const style = {};
      style.borderLeft = props.option.strike < props.quote.last ? "10px solid #3f51b5":"";
      return style;
    }
  };

  const displayItem = data => {
    return data ? data : "N/A";
  }

  const addOption = () => {
    setQuantity(quantity + 1);
  }
  const removeOption = () => {
    setQuantity(quantity - 1);
  }

  const changeQuantity = (event, value) => {
    var quantity = Number(event.target.value);
    setQuantity(quantity)
  }

  const setButtonColor = () => {
    if(quantity >= 0)
      return "primary";
    else
      return "secondary";
  }

  return (
    <>
      <tr style={{ textAlign: 'center'}} onClick={handleShow}>
        {props.layout.map((item, index) => {
          return <td style={setBorder(index)}>{displayItem(props.option[item.toString()])}</td>;
        })}
      </tr>

      <Modal
        size="lg"
        show={show}
        onHide={handleClose}
        style={{ background: "rgba(0, 0, 0,0.5)" }}
      >
        <Modal.Body closeButton>

          <Row>
						<Col
							lg={{ span: 12 }}
							style={{ clear: 'both', textAlign: 'center' }}
						>
							<h4 style={{ display: 'inline' }}>
								<b>{props.option.description}</b>
							</h4>
							<br />
							<h4 style={{ display: 'inline' }}>{props.option.last}</h4>
							&nbsp;&nbsp;
							<h5 className={getColor()} style={{ display: 'inline' }}>
								{setSign()}{props.option.change}
							</h5>
							&nbsp;&nbsp;
							<h5 className={getColor()} style={{ display: 'inline' }}>
								({setSign()}{props.option.change_percentage}%)
							</h5>
						</Col>
					</Row>
          <br />
          <Row style={{ fontSize: '0.8rem' }}>
						<Col lg={{ span: 5, offset: 1 }}>
							<Table>
								<tbody>
                  <tr>
										<td style={{ textAlign: 'left' }}>Bid</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.bid}</b>
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: 'left' }}>Ask</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.ask}</b>
										</td>
									</tr>
                  <tr>
										<td style={{ textAlign: 'left' }}>Open</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.open}</b>
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: 'left' }}>Previous Close</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.prevclose}</b>
										</td>
									</tr>
                  <tr>
										<td style={{ textAlign: 'left' }}>Open Interest</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.open_interest}</b>
										</td>
									</tr>
								</tbody>
							</Table>
						</Col>

						<Col lg={{ span: 5 }}>
							<Table>
								<tbody>
									<tr>
										<td style={{ textAlign: 'left' }}>Implied Volatility</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.greeks.mid_iv}</b>
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: 'left' }}>Delta</td>
										<td style={{ textAlign: 'right' }}>
											<b> {props.option.greeks.delta}</b>
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: 'left' }}>Gamma</td>
										<td style={{ textAlign: 'right' }}>
											<b>{props.option.greeks.gamma}</b>
										</td>
									</tr>
									<tr>
										<td style={{ textAlign: 'left' }}>Theta</td>
										<td style={{ textAlign: 'right' }}>
											<b> {props.option.greeks.theta}</b>
										</td>
									</tr>
                  <tr>
										<td style={{ textAlign: 'left' }}>Vega</td>
										<td style={{ textAlign: 'right' }}>
											<b> {props.option.greeks.vega}</b>
										</td>
									</tr>
								</tbody>
							</Table>
						</Col>
					</Row>
        </Modal.Body>
        <Modal.Footer>
          <IconButton color="secondary" >
            <Remove onClick={removeOption}/>
          </IconButton>
          <TextField
            size="small"
            value={quantity}
            defaultValue={0}
            onChange={changeQuantity}
            inputProps={{ maxLength: "4px" }}
            label="# of contracts" 
            variant="outlined" 
          />
          <IconButton color="primary">
            <Add onClick={addOption}/>
          </IconButton>
          <Button
            color={setButtonColor()}
            variant="outlined"
            size="small"
            disabled={quantity===0}
            onClick={() => add()}
          >
            {quantity >= 0 ? "Buy" : "Sell"}
          </Button>
          &nbsp;
          <Button 
            onClick={handleClose} 
            size="small">
            &nbsp;
            <b>Close</b>
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}