refactoring to react-routes 80% done

package.json

@@ -13,6 +13,7 @@
     "react": "^16.13.0",
     "react-dom": "^16.13.0",
     "react-firebaseui": "^4.1.0",
+    "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0",
     "reset-css": "^5.0.1"
   },

src/App.js

@@ -1,12 +1,27 @@
+// React stuff
 import React, { useState, useEffect } from 'react';
+import { BrowserRouter, Route } from 'react-router-dom';
 import firebase from './firebase/firebase';
+
+// CSS and Libs
 import 'assets/scss/App.scss';
 import 'libs/loading_overlay/css/main.css'
 
+// Models
+import Nap from 'models/Nap';
+
+// Components
 import Login from 'components/login/Login';
 import Dashboard from 'components/dashboard/Dashboard';
+import NavBar from 'components/menu/NavBar';
+import Header from 'components/header/Header';
+import Footer from 'components/footer/Footer';
+import ProfileMenu from 'components/profile/ProfileMenuView';
+import Modal from "components/modal/Modal";
+import Naps from 'components/naps/Naps';
 
 function App() {
+    // Authentication
     let [currentUser, setCurrentUser] = useState(null);
 
     useEffect(() => {
@@ -38,11 +53,130 @@ function App() {
         firebase.firestore().collection('users').doc(user.uid).set(newUserData, { merge: true });
     }
 
-    if (currentUser) {
-        return <Dashboard firebase={firebase} currentUser={currentUser} />;
-    } else {
-        return <Login firebase={firebase} />
-    }
+    // Modal View
+    let [modalContent, setModalContent] = useState("");
+    let [modalVisibility, setModalVisibility] = useState(false);
+    const modal = {
+        setContent: (content) => setModalContent(content),
+        toggleVisibility: () => setModalVisibility(!modalVisibility),
+        hide: () => setModalVisibility(false),
+        show: () => setModalVisibility(true),
+        modalVisibility,
+        modalContent
+    };
+
+    // Naps
+    let [runningNap, setRunningNap] = useState(null);
+    // const nc = new NapsController(props.firebase, props.currentUser, runningNap);
+    useEffect(() => {
+        // console.log('useEffect in Dashboard.js');
+
+        // bind to running nap
+        if (currentUser && currentUser.uid) {
+            const ref = firebase.firestore().collection(`users/${currentUser.uid}/naps`);
+            let last = ref.orderBy('start').where('start', '>', 0).where('end', '==', 0).limit(1);
+            const unmountRunningNapListener = last.onSnapshot(snapshot => {
+                if (snapshot.empty) {
+                    setRunningNap(null);
+                } else {
+                    const nap = new Nap();
+                    nap.fromFirebaseDoc(snapshot.docs[0]);
+                    setRunningNap(nap);
+                }
+            }, err => {
+                console.log(`Encountered error: ${err}`);
+            });
+            return () => {
+                unmountRunningNapListener();
+            };
+        }
+
+    }, [currentUser]);
+
+    const naps = {
+        isNapRunning: () => {
+            return runningNap ? true : false;
+        },
+        startNap: () => {
+            let newNap = new Nap(Date.now());
+            const ref = firebase.firestore().collection(`users/${currentUser.uid}/naps`);
+            ref.add(newNap.toObject())
+                .then(function() {
+                    console.log("Document successfully written!");
+                })
+                .catch(function(error) {
+                    console.error("Error writing document: ", error);
+                });
+        },
+
+        finishNap: () => {
+            const ref = firebase.firestore().collection(`users/${currentUser.uid}/naps`);
+            ref.doc(runningNap.id).update({ end: Date.now() });
+        },
+
+        deleteNap: nap => {
+            const ref = firebase.firestore().collection(`users/${currentUser.uid}/naps`);
+            ref.doc(nap.id).delete();
+        },
+
+        getNaps: (...args) => {
+            if (!currentUser || !currentUser.uid) {
+                return false;
+            }
+
+            let ref = firebase.firestore().collection(`users/${currentUser.uid}/naps`);
+
+            if (!isNaN(args[0]) && parseInt(args[0]) < 100) {
+                // get last n Items
+                return ref.orderBy("start", "desc").limit(parseInt(args[0]));
+            }
+
+            if (args.length === 0) {
+                // get all Items of today
+                let from = Date.now() - 1 * 24 * 60 * 60 * 1000; // - 1 day
+                let to = Date.now();
+                return ref
+                    .where("start", ">=", from)
+                    .where("start", "<=", to)
+                    .orderBy("start", "desc");
+            }
+        }
+    };
+
+    return (
+        <BrowserRouter>
+            <div className="wrapper">
+                <Header />
+                <NavBar currentUser={currentUser} />
+                <ProfileMenu
+                    currentUser={currentUser}
+                    firebase={firebase}
+                    modal={modal}
+                />
+                <Route
+                    exact
+                    path="/"
+                    render={props => (
+                        <Dashboard
+                            {...props}
+                            firebase={firebase}
+                            currentUser={currentUser}
+                            naps={naps}
+                            runningNap={runningNap}
+                        />
+                    )}
+                />
+                <Route exact path="/naps" render={props => <Naps {...props} naps={naps} />} />
+                <Route
+                    exact
+                    path="/login"
+                    render={props => <Login {...props} firebase={firebase} />}
+                />
+                <Footer />
+                <Modal modal={modal}>{modalContent}</Modal>
+            </div>
+        </BrowserRouter>
+    );
 
 }
 

src/assets/scss/App.scss

@@ -42,4 +42,5 @@ body {
 @import './main.scss';
 @import './naps.scss';
 @import './footer.scss';
-@import './modal.scss';
+@import './modal.scss';
+@import './login.scss';

src/assets/scss/globals.scss

@@ -9,13 +9,16 @@
 }
 
 .menuPoint {
+    height: 100%;
+    box-sizing: border-box;
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     cursor: pointer;
     padding: 1rem;
-    min-width: 4rem;
+    min-width: 6rem;
+    text-decoration: none;
 
     .icon {
         color: $highlight;

src/assets/scss/header.scss

@@ -1,6 +1,7 @@
 header {
     grid-area: header;
     background-color: $black;
+    padding: 1rem;
 
     h1 {
         font-size: 3rem;

src/assets/scss/login.scss

@@ -0,0 +1,5 @@
+.login {
+    padding: 2rem;
+    background-color: $mid;
+    grid-area: main;
+}

src/assets/scss/mainMenu.scss

@@ -1,7 +1,7 @@
 .mainMenu {
     grid-area: nav;
     display: flex;
-    justify-content: space-between;
+    justify-content: flex-start;
     padding: 0 !important;
 
     ul {