<repo_name>CharlesWalsh/react_Todo<file_sep>/src/App.js
import React, { Component } from 'react';
import 'firebase/database';
import './App.css';
import {BrowserRouter, Route} from "react-router-dom"
import Login from "./Login"
import todoApp from "./todoApp";

class App extends Component {

  render()
  {
      return (
          <BrowserRouter>
              <div>
                  <Route exact path={"/login"} component={Login}/>
                  <Route exact path={"/"} component={todoApp}/>
              </div>
          </BrowserRouter>
      );
  }
}

export default App;
<file_sep>/src/todoApp.js
import React, { Component } from 'react';
import Note from './note/Note';
import NoteForm from './noteFrom/NoteForm';
import firebase from 'firebase/app';
import 'firebase/database';
import './App.css';
import Navbar from "./components/Navbar"
import {BrowserRouter, Route,Link} from "react-router-dom"
import Login from "./Login"

class todoApp extends Component {
    constructor(){
        super();
        this.state = {
            auth:false,
            todos: []
        }
        this.addTodo = this.addTodo.bind(this);
        this.database = firebase.database().ref().child('notes');
        this.removeTodo=this.removeTodo.bind(this)
    }

    componentWillMount() {

        this.removeAuthListener=firebase.auth().onAuthStateChanged((user)=>
        {
            if(user) {
                this.setState({
                    auth: true
                })
            }else
            {
                this.setState({
                    auth: false
                })
            }
        })

        const lastTodo = this.state.todos;

        this.database.on('child_added', snap => {
            lastTodo.push({
                id: snap.key,
                todoContent: snap.val().todoContent,
            })

            this.setState({
                todos: lastTodo
            })
        })
        this.database.on("child_removed",snap=>{
            for(var x=0; x<lastTodo.length;x++)
            {
                if(lastTodo[x].id===snap.key){
                    lastTodo.splice(x,1);
                }
            }
            this.setState({
                todos: lastTodo
            })
        })
    }

    addTodo(todo){
        this.database.push().set({todoContent: todo});
    }
    removeTodo(todoId){
        this.database.child(todoId).remove();
    }
    render()
    {
        if(this.state.auth) {
            return (
                <BrowserRouter>
                    <div>
                        <Route exact path={"/Login"} component={Login}/>
                        <div>
                            <div>
                                <div>
                                    <Navbar/>
                                </div>
                                <div className="todoBody">
                                    {
                                        this.state.todos.map((todo) => {
                                            return (
                                                <Note todoContent={todo.todoContent}
                                                      todoId={todo.id}
                                                      key={todo.id}
                                                      removeTodo={this.removeTodo}/>
                                            )
                                        })
                                    }
                                </div>
                                <div className={"container"}>
                                    <NoteForm addTodo={this.addTodo}/>
                                </div>
                            </div>
                        </div>
                    </div>
                </BrowserRouter>
            );
        }
        else {
            return(
                <div>
                    <Link className={"btn"} to={"./Login"}>Login or Register</Link>

                </div>
        )
        }
    }
    componentWillUnmount() {
        this.removeAuthListener();
    }

}

export default todoApp;
<file_sep>/src/note/Note.js
import React, { Component } from 'react';
import './Note.css';
class Note extends Component{

    constructor(props){
        super(props);
        this.todoContent = props.todoContent;
        this.todoId = props.todoId;
        this.handleRemoveNote = this.handleRemoveNote.bind(this);

    }

    handleRemoveNote(id){
        this.props.removeTodo(id);
    }


    render(props){
        return(
            <div className="note fade-in">
                <span className="closebtn"
                      onClick={() => this.handleRemoveNote(this.todoId)}>
                      REMOVE
                </span>
                <p className="noteContent">{ this.todoContent }</p>
            </div>
        )
    }
}


export default Note;<file_sep>/src/components/Navbar.js
import React from 'react'
function Navbar(){
    return(
        <nav className={"nav-wrapper grey darken-3"} >
            <div className={"container"}>
                <a href={"/"} className="brand-logo">My TodoList</a>
            </div>
        </nav>
    )
}
export default Navbar