import React, {Component} from 'react';
import logo from './logo.svg';
import './App.css';
import {BrowserRouter as Router} from 'react-router-dom';
import Navbar from "./components/nav";
import firebase from './firebase';
import Questions from './components/questions';
import Stuff from './components/stuff';
class App extends Component {
    constructor(p) {
        super(p);
        this.state = {user: null}
    }

    render() {
        return (
            <div className="App">
                <Navbar/>
                {this.state.user ? <Questions/> : <Stuff/>}
            </div>
        );
    }
}

export default App;

import React from 'react';
import {Navbar as Bar, Nav, NavItem, Modal, Button, FormControl} from 'react-bootstrap';
import {BrowserRouter as Router, Link, Route} from 'react-router-dom';
import firebase, {auth} from '../firebase';

class Navbar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        this.login = this.login.bind(this);
        this.logout = this.logout.bind(this);
        this.openLogin = this.openLogin.bind(this);
        this.handleClose = this.handleClose.bind(this);
    }

    componentDidMount() {
        auth.onAuthStateChanged((user) => {
            if (user) {
                this.setState({user});
            }
        });
    }

    logout() {
        auth.signOut()
            .then(() => {
                this.setState({
                    user: null
                });
            });
    }

    login() {
        var email = document.getElementById('email').value;
        var password = document.getElementById('password').value;
        auth.signInWithEmailAndPassword(email, password)
            .then(result => {
                    const user = result.user;
                    this.setState({user});
                    document.getElementById('close').click();
                }
            ).catch(e => console.log(e));
    }

    openLogin() {
        this.setState({show: true});
    }

    handleClose() {
        this.setState({show: false});
    }

    render() {
        return (
            <React.Fragment>
                <Router>
                    <Bar>
                        <Bar.Header>
                            <Bar.Brand>
                                <a href="/home">UczIchApp</a>
                                {/*<Route path='path' component=""/>*/}
                            </Bar.Brand>
                            <Bar.Brand>

                            </Bar.Brand>
                        </Bar.Header>
                        <Nav>
                            {
                                this.state.user ?
                                    <NavItem onClick={this.logout}>Wyloguj się</NavItem>
                                    :
                                    <NavItem onClick={this.openLogin}>Zaloguj się</NavItem>
                            }
                        </Nav>
                    </Bar>
                </Router>
                <Modal show={this.state.show} onHide={this.handleClose}>
                    <Modal.Header closeButton>
                        <Modal.Title>Modal heading</Modal.Title>
                    </Modal.Header>
                    <Modal.Body>
                        <form>
                            <FormControl
                                id="email"
                                type="email"
                                label="Email address"
                                placeholder="Enter email"
                            />
                            <FormControl id="password" label="Password" type="password"/>
                            <Button onClick={this.login}>Zaloguj</Button>
                        </form>
                    </Modal.Body>
                    <Modal.Footer>
                        <Button id="close" onClick={this.handleClose}>Close</Button>
                    </Modal.Footer>
                </Modal>
            </React.Fragment>
        )
    }
}

export default Navbar;

constructor(p) {
    super(p);
    this.state = {user: null}
    this.checkUserState= this.checkUserState.bind(this);
}

checkUserState(user){
    this.seState({user});
}

<Navbar {...this}/>

this.setState({
        user: null
    },function(){
        this.props.checkUserState(this.state.user)
    });