import React, { useState } from 'react'; import { FaSpotify } from 'react-icons/fa'; import { Button } from 'antd'; import { Redirect } from 'react-router-dom'; import ReactGA from 'react-ga'; import Cookies from 'js-cookie'; const NavButton = (props) => { const [redirectPath, setRedirectPath] = useState(null); const accessToken = Cookies.get('access_token'); const isLoggedIn = accessToken && accessToken !== ''; const logout = () => { ReactGA.event({ category: 'Auth', action: 'Log out button pressed', label: 'Navbar', }); Cookies.remove('access_token'); Cookies.remove('refresh_token'); Cookies.remove('userID'); props.setAccessToken && props.setAccessToken(null); props.setRefreshToken && props.setRefreshToken(null); window.location = '/'; }; const login = () => { ReactGA.event({ category: 'Auth', action: 'Log in button pressed', label: 'Navbar', }); const URI = process.env.REACT_APP_API_URL; window.location = `${URI}/login`; }; if (redirectPath) { return <Redirect to={redirectPath} />; } return ( <div> <Button shape="round" size="large" className={'spotifyColor'} style={{ float: 'right', marginTop: '0.5em', }} onClick={isLoggedIn ? logout : login} > <span style={{ display: 'inline-flex', alignItems: 'center', }} > <FaSpotify style={{ height: '1.5em', width: '1.5em', marginRight: '5px', }} /> {isLoggedIn ? 'Log out' : 'Log in'} </span> </Button> </div> ); }; export default NavButton;