import React, { useState, useEffect } from "react"; import { useOktaAuth } from "@okta/okta-react/dist/OktaContext"; import { axiosWithAuth } from "../../utils/axiosWithAuth"; import twitterLogo from "../../assets/imgs/twitter-logo.svg"; // Material-UI import { Grid, makeStyles, Typography, Button, CircularProgress, } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ root: { height: "100vh", flexWrap: "wrap", position: "relative", display: "flex", justifyContent: "center", }, content: { height: "100vh", width: "100%", display: "flex", flexDirection: "column", justifyContent: "space-evenly", alignItems: "center", margin: "0 4%", }, header: { fontWeight: "bold", fontFamily: "Roboto Condensed", textAlign: "center", color: theme.palette.text.secondary, }, button: { width: "330px", maxWidth: "90%", }, })); 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> ); } export default TwitterConnect;