{"size": 1901, "ext": "js", "max_stars_repo_path": "www/components/Header/index.js", "max_stars_repo_name": "digitalsurgeons/goodform", "max_stars_repo_stars_event_min_datetime": "2019-04-13T18:30:26.000Z", "max_stars_repo_stars_event_max_datetime": "2019-04-13T18:30:26.000Z", "max_issues_repo_path": "www/components/Header/index.js", "max_issues_repo_name": "digitalsurgeons/goodform", "max_issues_repo_issues_event_min_datetime": "2019-05-23T15:45:54.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-29T22:38:16.000Z", "max_forks_repo_path": "www/components/Header/index.js", "max_forks_repo_name": "digitalsurgeons/goodform", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": 24, "max_forks_count": null, "avg_line_length": 23.4691358025, "max_line_length": 71, "alphanum_fraction": 0.5928458706}
import { useState } from 'react'
import Link from 'next/link'
import firebase from 'firebase/app'
import { Head, AuthButton, Avatar } from './styles'
import 'firebase/auth'
import 'firebase/firestore'
import '@fortawesome/fontawesome-free/js/all'
import Container from '@material-ui/core/Container'

function Header() {
  const [user, setUser] = useState({})
  const provider = new firebase.auth.GithubAuthProvider()
  provider.addScope('repo')

  if (!firebase.apps.length) {
    firebase.initializeApp({
      apiKey: 'AIzaSyAwFqYtlB34EoaRXHcmAR_U90ChT0vRxUs',
      authDomain: 'goodform-d0096.firebaseapp.com',
      databaseURL: 'https://goodform-d0096.firebaseio.com',
      projectId: 'goodform-d0096',
      storageBucket: 'goodform-d0096.appspot.com',
      messagingSenderId: '1090475289248',
      appId: '1:1090475289248:web:9464f7c31608f743'
    })
  }

  firebase.auth().onAuthStateChanged(user => {
    if (user) {
      setUser(user)
    }
  })

  function auth() {
    if (!user.email) {
      firebase
        .auth()
        .signInWithPopup(provider)
        .then(result => {
          setUser(result.user)
        })
        .catch(error => {
          console.log(error)
        })
    } else {
      window.location = '/logout'
    }
  }

  const authBtn = user.email ? (
    <span>Logout</span>
  ) : (
    <div>
      <i className="fab fa-github fa-lg" style={{ marginRight: 15 }} />
      <span>Login with GitHub</span>
    </div>
  )

  let profileImage = ''
  if (user.photoURL) {
    profileImage = <Avatar src={user.photoURL} />
  }

  return (
    <Container maxWidth="md">
      <Head>
        <Link href="/">
          <a>
            <img src="/static/logo.png" />
          </a>
        </Link>
        {profileImage}
        <AuthButton onClick={auth} href="#">
          {authBtn}
        </AuthButton>
      </Head>
    </Container>
  )
}

export default Header
