import React, { useEffect } from "react";
import StyledFirebaseAuth from "react-firebaseui/StyledFirebaseAuth";
import Navbar from "react-bootstrap/Navbar";
import Nav from "react-bootstrap/Nav";
import NavDropdown from "react-bootstrap/NavDropdown";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
} from "@fortawesome/free-solid-svg-icons";
import Container from "react-bootstrap/Container";
import CustomNotice from "../CustomNotice";
function CustomNavbar(props) {
const { firebase } = props;
// eslint-disable-next-line react-hooks/exhaustive-deps
const unsubscribe = firebase.auth().onAuthStateChanged(user => {
props.handleUserChange(true);
props.handleUserChange(false);
// https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1
return function cleanup() {
// TODO: add some clean up logic here for logout?
const provider = new firebase.auth.GoogleAuthProvider();
provider.setCustomParameters({
.signInWithPopup(provider)
// This gives you a Google Access Token. You can use it to access the Google API.
var token = result.credential.accessToken;
// The signed-in user info.
console.log("signed-in", user);
var errorCode = error.code;
var errorMessage = error.message;
// The email of the user's account used.
// The firebase.auth.AuthCredential type that was used.
var credential = error.credential;
console.log("error", error);
<Navbar sticky="top" bg="light" expand="md">
<FontAwesomeIcon icon={faHeadphones} size="1x" />
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
{firebase.auth().currentUser ? (
<Nav.Link href="#/new-mic-recording">
<Nav className="mr-auto"></Nav>
{firebase.auth().currentUser ? (
<Nav.Link href="#/list-recordings">
<Nav.Link style={{cursor: 'default'}}>
{firebase.auth().currentUser.email}{" "}
onClick={() => firebase.auth().signOut()}
title={`sign out ${firebase.auth().currentUser.displayName}`}
<FontAwesomeIcon icon={faSignOutAlt} />
<Nav.Link onClick={signIn} title={`sign In`}>
<FontAwesomeIcon icon={faSignInAlt} />
{navigator.onLine ? null : (
description={"You are offline"}
export default CustomNavbar;