@material-ui/core#Typography JavaScript Examples

SignUpCard = (props) => {
  const classes = useStyles(props);
  const {googleLogin} = useContext(AuthContext);
  return (
    <React.Fragment>
      <Typography color="primary" className={classes.signUpHeader} variant="h5">
        Sign Up
      </Typography>
      <p>using</p>
      <div className={classes.oAuthDiv}>
        {/* <Button>
          <FacebookIcon className={classes.fb}/>
        </Button> */}
        <Button onClick={()=>googleLogin()}>
          <img src={google} alt="Google" width="30" height="30" />
        </Button>
      </div>
      <Typography color="primary" className={classes.p} variant="h6">
        <Divider />
        OR
      </Typography>
      <Button className={classes.button} component={Link} to="/user/signup">

        Register

      </Button>
    </React.Fragment>
  );
}

AppSettingsContainer = () => {
  const { isLoadingSettings } = useSettings();

  return (
    <>
      <AutoUpdater />

      {isLoadingSettings ? (
        <Box display="flex" alignItems="center" justifyContent="center" height="100%" width="100%" flexDirection="column">
          <Box paddingBottom="1rem">
            <CircularProgress size="3rem" />
          </Box>
          <div>
            <Typography variant="h5">Loading settings...</Typography>
          </div>
        </Box>
      ) : (
        <AppContainer />
      )}
    </>
  );
}

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 NavBar() {
  const classes = useStyles();

  // const preventDefault = (event) => event.preventDefault();
  return (
    <div className={classes.root}>
      <AppBar position="static">
        <Toolbar>
          <Typography variant="h6" className={classes.title}>
            Connect 4
          </Typography>

          <div>
            <Link
              href="https://github.com/BhavyaCodes/connect-4-online-multiplayer"
              target="_blank"
              rel="noopener noreferrer"
              color="inherit"
            >
              <IconButton
                aria-label="Github repository link"
                aria-controls="menu-appbar"
                aria-haspopup="true"
                color="inherit"
              >
                <GitHubIcon />
              </IconButton>
            </Link>
          </div>
        </Toolbar>
      </AppBar>
    </div>
  );
}

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 TipsLayout(props) {
    const classes = useStyles();

    return (
        <Grid item xs={false} sm={4} md={3} className={classes.image}>
            <Grid item className={classes.startText}>
                <Avatar className={classes.avatar}>
                    <DescriptionIcon />
                </Avatar>
                <Typography
                    component="h1"
                    variant="h5"
                    className={classes.spacing}
                >
                    Start Making Your Resume
                </Typography>
            </Grid>
            <Grid item className={classes.tips}>
                {props.tips}
            </Grid>
        </Grid>
    );
}

Callback = () => {
  const { authService } = useOktaAuth();
  const location = useLocation();
  const { push } = useHistory();

  useEffect(() => {
    const { oauth_token, oauth_verifier } = queryString.parse(location.search);
    axiosWithAuth(authService)
      .post("/auth/twitter/callback", {
        oauth_token,
        oauth_verifier,
      })
      .then((res) => push("/home"))
      .catch((err) => {
        console.error(err);
        push("/connect/twitter");
      });
    // eslint-disable-next-line
  }, []);

  return (
    <div style={container}>
      <Typography variant="h6">Redirecting you back to SoMe</Typography>
      <br />
      <CircularProgress />
    </div>
  );
}

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 SelectedLocationMarker({
  position: { latitude: lat, longitude: lng },
  title,
}) {
  const [marker, setMarker] = useState(null);

  const handleOnLoad = (mapMarker) => {
    setMarker(mapMarker);
  };

  const renderInfoWindow = (mapMarker) => {
    if (mapMarker === null) return null;

    return (
      <InfoWindow anchor={mapMarker}>
        <div>
          <Typography variant="subtitle2">{title}</Typography>
        </div>
      </InfoWindow>
    );
  };

  return (
    <Marker position={{ lat, lng }} onLoad={handleOnLoad}>
      {renderInfoWindow(marker)}
    </Marker>
  );
}

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

function NeedsHero({ onClick }) {
  const classes = useStyles()

  return (
    <Paper className={classes.root} onClick={onClick}>
      <Typography variant="h4">
        <Trans>Hello User</Trans>!
      </Typography>
      <Typography variant="h6">
        <Trans>Your Needs List</Trans>
      </Typography>
    </Paper>
  )
}

function TitleTypo(props) {
    return (
        <Typography 
            align={props.align || "left"} 
            variant={props.variant} 
            gutterBottom={props.gutterBottom}>
            {props.text}

            {props.smallText &&
                <small style={{marginLeft: 8}}>
                    {props.smallText}
                </small>
            }
        </Typography>
    )
}

UICard = ({
  isLoading,
  title,
  children
}) => {
  const classes = useStyles();

  return (
    <Card className={clsx(classes.root)}>
      <CardContent className={classes.content}>
        {isLoading ? <Loading size={50} /> :
          <>
            <Typography className={classes.title} gutterBottom variant="h3" component="h2">
              {title}
            </Typography>
            {children}
          </>
        }
      </CardContent>
    </Card>
  );
}

GrowerOrganization = (props) => {
  const appContext = useContext(AppContext);
  const { organizationName, assignedOrganizationId, compact } = props;

  const renderGrowerOrganization = () => (
    <Typography style={{ color: '#C0C0C0', fontStyle: 'italic' }}>
      {organizationName}
    </Typography>
  );
  const renderGrowerAssignedOrganization = (id) => {
    const assignedOrganization = getOrganizationById(appContext.orgList, id);
    return (
      <Typography>
        {assignedOrganization?.name} ({id})
      </Typography>
    );
  };
  const orgNamesMatch =
    assignedOrganizationId &&
    organizationName &&
    (
      getOrganizationById(appContext.orgList, assignedOrganizationId)?.name ||
      ''
    ).toLowerCase() === organizationName.toLowerCase();

  return (
    <>
      {assignedOrganizationId &&
        renderGrowerAssignedOrganization(assignedOrganizationId)}
      {organizationName &&
        (!compact || !assignedOrganizationId) &&
        !orgNamesMatch &&
        renderGrowerOrganization()}
    </>
  );
}

LoginCard = (props) => {
  const location = useLocation();
  let { from } = location.state || { from: { pathname: "/" } };
  //styles
  const classes = useStyles(props);
  //formik hook
  const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
    },
    validationSchema: loginSchema,
    onSubmit: (values) => {
      props.loggingUser(values, from);
    },
  });

  return (
    <React.Fragment>
      <Typography color="primary" className={classes.loginHeader} variant="h5">
        Sign In
      </Typography>
      <form
        autoComplete="off"
        className={classes.form}
        onSubmit={formik.handleSubmit}
      >
        {props.error ? <div>{props.error.msg}</div> : null}
        <input
          id="login-email"
          label="Email"
          value={formik.values.email}
          onChange={formik.handleChange}
          error={
            formik.touched.email && Boolean(formik.errors.email).toString()
          }
          variant="outlined"
          name="email"
          placeholder="Username or Email"
          type="text"
          className={classes.input}
        />
        {formik.errors.email ? <div>{formik.errors.email}</div> : null}
        <input
          name="password"
          placeholder="Password"
          type="password"
          className={classes.input}
          id="login-password"
          value={formik.values.password}
          onChange={formik.handleChange}
          error={
            formik.touched.password &&
            Boolean(formik.errors.password).toString()
          }
        />
        {formik.errors.password ? <div>{formik.errors.password}</div> : null}
        <Button
          type="submit"
          className={classes.button}
          color="secondary"
          variant="contained"
        >
          {props.auth.isLoading ? (
            <CircularProgress color="primary" />
          ) : (
            "Sign In"
          )}
        </Button>
      </form>
    </React.Fragment>
  );
}

export function ExportCertificate(props) {
  const classes = useStyles();
  const selectedWallet = useSelectedWalletFromStorage();

  useEffect(() => {
    async function init() {
      await analytics.event("deploy", "export certificate");
    }

    init();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return (
    <Dialog open={props.isOpen} onClose={props.onClose} maxWidth="sm" fullWidth>
      <DialogTitle>Export certificate</DialogTitle>
      <DialogContent dividers className={classes.dialogContent}>
        {selectedWallet && selectedWallet.cert && selectedWallet.certKey ? (
          <>
            <Typography variant="body1" className={classes.label}>
              Cert
            </Typography>
            <CodeSnippet code={selectedWallet.cert} />
            <Typography variant="body1" className={classes.label}>
              Key
            </Typography>
            <CodeSnippet code={selectedWallet.certKey} />
          </>
        ) : (
          <Alert severity="warning">
            Unable to find local certificate. Meaning you have a certificate on chain but not in the tool. We suggest you regenerate a new one to be able to use
            the tool properly.
          </Alert>
        )}
      </DialogContent>
      <DialogActions>
        <Button variant="contained" color="primary" onClick={props.onClose}>
          Close
        </Button>
      </DialogActions>
    </Dialog>
  );
}

export default function Game() {
  const [board, setBoard] = useState(intitializeBoard());
  const [playerTurn, setPlayerTurn] = useState(Player.One);
  const [gameState, setGameState] = useState(GameState.Ongoing);

  const renderCells = () => {
    return board.map((player, index) => renderCell(player, index));
  };

  const handleOnClick = (index) => () => {
    if (gameState !== GameState.Ongoing) return;

    const column = index % 7;

    makeMove(column);
  };

  const makeMove = (column) => {
    const index = findLowestEmptyIndex(board, column);

    const newBoard = board.slice();
    newBoard[index] = playerTurn;

    const gameState = getGameState(newBoard);

    setBoard(newBoard);
    setPlayerTurn(togglePlayerTurn(playerTurn));
    setGameState(gameState);
  };

  const renderCell = (player, index) => {
    return (
      <Box
        className="cell"
        key={index}
        onClick={handleOnClick(index)}
        data-player={getPrettyPlayer(player)}
      />
    );
  };

  const renderGameStatus = () => {
    let text;
    if (gameState === GameState.Ongoing) {
      text = "Game is in progress...";
    } else if (gameState === GameState.Draw) {
      text = "Game is a draw.";
    } else if (gameState === GameState.PlayerOneWin) {
      text = "Player 1 won!";
    } else if (gameState === GameState.PlayerTwoWin) {
      text = "Player 2 won!";
    }

    return (
      <Typography variant="h3" align="center" mb={1}>
        {text}
      </Typography>
    );
  };

  return (
    <Box>
      {renderGameStatus()}
      <Box className="board" my={2}>
        {renderCells()}
      </Box>
      {gameState === GameState.Ongoing ? (
        <Typography variant="h3" align="center">
          Player {playerTurn}'s Turn
        </Typography>
      ) : null}
    </Box>
  );
}

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

WorkHistory = ({writer}) => {
  const classes = useStyles();
  const workClasses = workStyles();

  return (
    <h3 className={classes.finalGrid}>
      Work History:
      {writer &&
        writer.workHistory &&
        writer.workHistory.map((writersWorkHistory) => (
          <Card
            className={workClasses.cardRoot}
            key={writersWorkHistory.id}
            variant="outlined"
          >
            <CardContent>
              <Typography
                className={workClasses.title}
                color="textSecondary"
                gutterBottom
                data-testid="company-header"
              >
                Company
              </Typography>
              <Typography variant="h5" component="h2">
                {writersWorkHistory.company}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
                data-testid="position-header"
              >
                Position: {writersWorkHistory.position}
              </Typography>
              <Typography variant="body2" component="p">
                Start Date: {writersWorkHistory.start_date}
                <br />
                {writersWorkHistory.current_position === "true"
                  ? `Current Position`
                  : `End Date: ${writersWorkHistory.end_date}`}
              </Typography>
              <Typography
                className={workClasses.pos}
                color="textSecondary"
              >
                responsibilities: {writersWorkHistory.responsibilities}
              </Typography>
            </CardContent>
          </Card>
        ))}
    </h3>
  );
}

function TwitterConnect(props) {
  const classes = useStyles();
  const { authService } = useOktaAuth();
  const [loading, setLoading] = useState(true);
  const [isConnected, setIsConnected] = useState(false);

  useEffect(() => {
    (async () => {
      const oktaUser = await authService.getUser();
      setIsConnected(oktaUser.twitter_handle);
      setLoading(false);
    })();
  }, [authService]);

  function authorizeTwitter() {
    axiosWithAuth(authService)
      .get("/auth/twitter/authorize")
      .then(({ data }) => (window.location.href = data))
      .catch((err) => console.error(err));
  }

  function disconnectTwitter() {
    setLoading(true);

    axiosWithAuth(authService)
      .get("/auth/twitter/disconnect")
      .then(({ data }) => {
        setIsConnected(false);
        setLoading(false);
      })
      .catch((err) => console.error(err));
  }

  return (
    <Grid container className={classes.root}>
      <Grid item className={classes.content}>
        {loading ? (
          <CircularProgress />
        ) : (
          <>
            <Typography variant="h4" component="h1" className={classes.header}>
              {isConnected
                ? "Your twitter account is connected."
                : "Let's get your account set up!"}
            </Typography>
            <img src={twitterLogo} alt="Twitter logo" />
            <Button
              variant="contained"
              color={isConnected ? "secondary" : "primary"}
              className={classes.button}
              disableElevation
              onClick={isConnected ? disconnectTwitter : authorizeTwitter}
            >
              {isConnected ? "Disconnect Twitter" : "Connect to Twitter"}
            </Button>
          </>
        )}
      </Grid>
    </Grid>
  );
}

FlashCards = props => {
  const { cardData, mode, score, showQuizScoreDialog, setQuizScore, updateQuizScore } = props;
  const classes = useStyles();
  const [gone] = useState(() => new Set());
  const [cardProp, set] = useSprings(cardData.length, i => ({ ...to(i), from: from(i) }));
  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
    const trigger = velocity > 0.2;
    const dir = xDir < 0 ? -1 : 1;

    if (!down && trigger) gone.add(index);
    set(i => {
      if (index !== i) return; // We're only interested in changing spring-data for the current spring
      const isGone = gone.has(index);
      const x = isGone ? (100 + window.innerWidth) * dir : down ? mx : 0; // When a card is gone it flys out left or right, otherwise goes back to zero
      const rot = mx / 100 + (isGone ? dir * velocity : 0); // How much the card tilts, flicking it harder makes it rotate faster
      const scale = down ? 1.1 : 1; // Active cards lift up a bit
      if (mode === 'quiz' && isGone) {
        const userAns = x > 0;
        if (userAns === cardData[i].answer) updateQuizScore({ score: score + 1 });
      }
      return { x, rot, scale, delay: undefined, config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 } };
    });
    if (!down && gone.size === cardData.length) {
      if (mode === 'quiz') {
        setQuizScore({ score, quizSize: cardData.length });
      }
      setTimeout(() => {
        return gone.clear() || set(i => to(i));
      }, 600);
    }
  });

  return (
    <div>
      {showQuizScoreDialog && <QuizScoreDialog />}
      <Typography color="secondary" variant="button">
        {mode === 'quiz' && `Score ${score}/${cardData.length}`}
      </Typography>
      <div className={classes.FlashCards}>
        {cardProp.map(({ x, y, rot, scale }, i) => (
          <Card
            key={`${i}card`}
            i={i}
            x={x}
            y={y}
            rot={rot}
            scale={scale}
            trans={trans}
            data={cardData[cardData.length - i - 1]}
            bind={bind}
            mode={mode}
          />
        ))}
      </div>
    </div>
  );
}

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

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

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

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 AccountEditor() {
  const classes = useStyles()
  const firebase = useFirebase()
  const { showSuccess, showError } = useNotifications()

  // Get profile from redux state
  const profile = useSelector(({ firebase }) => firebase.profile)

  if (!isLoaded(profile)) {
    return <LoadingSpinner />
  }

  function updateAccount(newAccount) {
    return firebase
      .updateProfile(newAccount)
      .then(() => showSuccess('Profile updated successfully'))
      .catch((error) => {
        console.error('Error updating profile', error.message || error) // eslint-disable-line no-console
        showError('Error updating profile: ', error.message || error)
        return Promise.reject(error)
      })
  }

  return (
    <Grid container spacing={2} justify="center">
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <Avatar
          className={classes.avatarCurrent}
          alt="DP image"
          src={(profile && profile.avatarUrl) || defaultUserImageUrl}
        />
        <div className={classes.linkedAccounts}>
          <Typography variant="h6" color="secondary">
            Linked Accounts
          </Typography>
          {!!profile && !!profile.providerData && (
            <ProviderDataForm providerData={profile.providerData} />
          )}
        </div>
      </Grid>
      <Grid item xs={12} md={6} lg={6} className={classes.gridItem}>
        <AccountForm onSubmit={updateAccount} account={profile} />
      </Grid>
    </Grid>
  )
}

export function Home(props) {
  return (
    <Typography paragraph>
      Home      
    </Typography>
  )
}

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

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

/**
   * Renders the component
   * @return {ReactComponent} <Viewer/>
   */
  render() {
    return (
      <Box p={2} display="flex" flexWrap="wrap">
        <Box mr={2}>
          <div id="cornerstone-div"
            ref={(input) => {
              this.canvasElement = input;
            }}
            style={{
              width: 500,
              height: 500,
              background: 'black',
            }}
          >
            <canvas className="cornerstone-canvas"></canvas>
          </div>
          <LinearProgress variant="buffer"
            value={this.state.renderedImagesProgress}
            valueBuffer={this.state.readyImagesProgress} /><br/>
          <TextField
            label="Max Simultaneous Requests"
            style={{width: 250}}
            defaultValue={this.state.maxSimultaneousRequests}
            onChange={(e) => {
              this.setState({maxSimultaneousRequests: Number(e.target.value)});
            }} /><br/><br/>
          <Button
            variant="contained"
            color="primary"
            disabled={this.state.isDisplaying}
            onClick={() => this.getInstances()}>
              Start
          </Button>
        </Box>
        <Box>
          <Typography variant="h5">
            Frames Loaded: {this.state.numReadyImages}
          </Typography>
          <Typography variant="h5">
            Frames Displayed: {this.state.numRenderedImages}
          </Typography>
          <Typography variant="h5">
            Total Time: {(this.state.totalTimer / 1000).toFixed(2)}s
          </Typography>
          <Typography variant="h5">
            Time to First Image: {
              (this.state.timeToFirstImage / 1000).toFixed(2)
            }s
          </Typography>
          <Typography variant="h5">
            Average FPS: {(this.state.numRenderedImages /
                        (this.state.renderTimer / 1000)).toFixed(2)}
          </Typography>
          <Typography variant="body1">
            Use your browser&apos;s developer tools to see bandwidth usage.
          </Typography>
        </Box>
      </Box>
    );
  }