fixing sign out issues

components/Dashboard/Header.tsx

@@ -82,8 +82,6 @@ export default function Header() {
 
     try {
       await logOut();
-
-      router.push("/teams/landing");
     } catch (error) {
       console.log(error);
       toast.error("Unable to log out!");

components/Modals/PowerPlayer.tsx

@@ -41,8 +41,24 @@ export default function PowerPlayer(props: {
     handleAddAudioToQueue([url]);
   }
 
+  function handleClose(e) {
+    props.handleCloseModal();
+  }
+
   return (
-    <Modal title="Power Playback " visible={props.show}>
+    <Modal
+      title="Power Playback "
+      visible={props.show}
+      onCancel={handleClose}
+      footer={
+        <button
+          onClick={handleClose}
+          className="ml-auto text-sm text-orange-500 font-semibold py-1 px-4 bg-gray-200 rounded"
+        >
+          👋 Close
+        </button>
+      }
+    >
       <span className="flex flex-col items-start">
         <span>One timeline to listen to the past 24 hours.</span>
 

contexts/authContext.js

@@ -6,8 +6,10 @@ import {
   signOut,
   User,
 } from "firebase/auth";
+import { useRouter } from "next/router";
 import React, { useContext, useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import Loading from "../components/Loading";
 import firebase from "../services/firebaseService";
 
 const AuthContext = React.createContext(null);
@@ -19,8 +21,12 @@ export function AuthProvider({ children }) {
   const [currUser, setCurrUser] = useState();
   const [loading, setLoading] = useState(true);
 
+  const router = useRouter();
+
   useEffect(() => {
     const unsubscribe = onAuthStateChanged(auth, async (user) => {
+      setLoading(true);
+
       console.log("change in auth");
       if (user) {
         setCurrUser(user);
@@ -67,10 +73,14 @@ export function AuthProvider({ children }) {
       });
   };
 
-  const logOut = () => {
+  const logOut = async () => {
+    setLoading(true);
+
     console.log("logging user out");
 
-    return signOut(auth);
+    Promise.resolve(await signOut(auth));
+
+    router.push("/teams/landing");
   };
 
   const value = {

contexts/teamDashboardContext.tsx

@@ -50,8 +50,11 @@ const db = getFirestore();
 
 export function TeamDashboardContextProvider({ children }) {
   const { currUser } = useAuth();
-  const [loading, setLoading] = useState<Boolean>(true);
+
   const router = useRouter();
+
+  const [loading, setLoading] = useState<Boolean>(true);
+
   const { teamid } = router.query;
 
   // this context can only be used if it's a specific route: '/teams'
@@ -212,7 +215,9 @@ export function TeamDashboardContextProvider({ children }) {
     })();
 
     return () => {
-      userListener();
+      if (userListener) {
+        userListener();
+      }
 
       unsubs.forEach((unsub) => {
         unsub();
@@ -232,6 +237,12 @@ export function TeamDashboardContextProvider({ children }) {
   useEffect(() => {
     // todo for new messages, change document.title
 
+    if (!currUser) {
+      console.log("not authenticated...routing from dashboard to teams home");
+      router.push("/teams/login");
+      return;
+    }
+
     /**
      * QUERY:
      * - last 24 hours only