Add changes to logged in function to run each time user logs in/out t…

…o alter navbar. Relates #44. Co-authored-by: Giovanna <[email protected]>
fac19 · Apr 24, 2020 · 6c1fc5d · 6c1fc5d
1 parent 3667a3b
commit 6c1fc5d
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 42 deletions.
diff --git a/app.js b/app.js
@@ -1,4 +1,6 @@
 import router from "./router.js";
+import isLoggedIn from "./auth-status.js";
+isLoggedIn();
 
 //Other
 import home from "./routes/home.js";

diff --git a/auth-status.js b/auth-status.js
@@ -1,27 +1,20 @@
 const header = document.querySelector("#navBar");
-const token = localStorage.getItem("token");
 
 function isLoggedIn() {
-    const link1 = document.createElement("a");
-    const link2 = document.createElement("a");
-    if (token) {
-        link1.href = "/log-out";
-        link1.textContent = "Log Out";
-        link1.setAttribute("id", "logOutBtn");
-        link2.href = "/user"; // View my dogs
-        link2.textContent = "View My Dogs";
-        link2.setAttribute("id", "viewMyDogsBtn");
-    } else {
+    const link1 = document.querySelector("#link1");
+    const link2 = document.querySelector("#link2");
+    const token = localStorage.getItem("token");
+    if (!token) {
         link1.href = "/log-in";
         link1.textContent = "Log In";
-        link1.setAttribute("id", "logInBtn");
         link2.href = "/sign-up";
         link2.textContent = "Sign Up";
-        link2.setAttribute("id", "signUpBtn");
+    } else {
+        link1.href = "/log-out";
+        link1.textContent = "Log Out";
+        link2.href = "/user"; // View my dogs
+        link2.textContent = "View My Dogs";
     }
-
-    header.append(link1);
-    header.append(link2);
 }
 
-isLoggedIn();
+export default isLoggedIn;
diff --git a/index.html b/index.html
@@ -3,20 +3,20 @@
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <!-- <script defer type="module" src="./auth-status.js"></script> -->
         <script defer type="module" src="./app.js"></script>
         <title>API-Interface</title>
-        <link rel="stylesheet" href="style.css">
+        <link rel="stylesheet" href="style.css" />
     </head>
 
     <body>
-
         <nav id="navBar" class="navbar">
             <a href="/">Home</a>
-            <script defer src="./auth-status.js"></script>
+            <a id="link1" href="#"></a>
+            <a id="link2" href="#"></a>
         </nav>
         <div id="app" class="app-container">
             <!-- Append from routes -->
         </div>
-
     </body>
 </html>
diff --git a/routes/all-dogs.js b/routes/all-dogs.js
@@ -2,8 +2,8 @@ import query from "../query.js";
 const app = document.querySelector("#app");
 
 // The secret code.
-let audio = document.createElement("audio");
-audio.src = "../surprise/who-let-the-dogs-out-ringtone.mp3";
+// let audio = document.createElement("audio");
+// audio.src = "../surprise/who-let-the-dogs-out-ringtone.mp3";
 
 const html = /*html*/ `
 <h1>Our Fury Friends!</h1>
@@ -35,7 +35,7 @@ function createDogElement(dog) {
 function allDogs() {
     query("https://dogs-rest.herokuapp.com/v1/dogs")
         .then(arrayDogs => {
-            audio.play();
+            // audio.play();
             app.innerHTML = html;
             const addDog = document.querySelector("#addDog");
             const token = localStorage.getItem("token");

diff --git a/routes/log-in.js b/routes/log-in.js
@@ -1,4 +1,5 @@
 import query from "../query.js";
+import isLoggedIn from "../auth-status.js";
 
 const app = document.querySelector("#app");
 
@@ -32,6 +33,7 @@ function logIn({redirect}) {
             .then(body => {
                 window.localStorage.setItem("token", body.access_token);
                 window.localStorage.setItem("userId", body.id);
+                isLoggedIn();
                 redirect("/dogs"); // After login go to show all dogs
             })
             .catch(error => {

diff --git a/routes/log-out.js b/routes/log-out.js
@@ -1,23 +1,11 @@
-import query from "../query.js";
 const app = document.querySelector("#app");
+import isLoggedIn from "../auth-status.js";
 
-// const html; /*html template literal*/
-
-function logOut() {
-    const button = document.querySelector("#logOutBtn");
+function logOut({redirect}) {
+    window.localStorage.removeItem("id");
+    window.localStorage.removeItem("token");
+    isLoggedIn();
+    redirect("/");
 }
 
 export default logOut;
-
-function home({redirect}) {
-    const token = localStorage.getItem("token");
-    if (!token) {
-        app.innerHTML = loggedOut;
-    } else {
-        app.innerHTML = loggedIn;
-        app.querySelector("#logOut").addEventListener("click", () => {
-            window.localStorage.removeItem("token");
-            redirect("/");
-        });
-    }
-}