fetching team data

pages/teams/[teamid].tsx

@@ -14,11 +14,43 @@ import { Team } from "../../models/team";
 import { TeamMemberStatus } from "../../models/teamMember";
 import TeamService from "../../services/teamService";
 
+// User has switched back to the tab
+const onFocus = () => {
+  console.log("Tab is in focus");
+};
+
+// User has switched away from the tab (AKA tab is hidden)
+const onBlur = () => {
+  console.log("Tab is blurred");
+};
+
+const onClose = (ev) => {
+  // change user status to offline
+
+  ev.preventDefault();
+  return (ev.returnValue = "are you sure?");
+};
+
 function TeamDashboard() {
   const { currUser } = useAuth();
   const router = useRouter();
   const teamDashboardContext = useTeamDashboardContext();
 
+  useEffect(() => {
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("blur", onBlur);
+    // Calls onFocus when the window first loads
+    onFocus();
+    // Specify how to clean up after this effect:
+
+    window.addEventListener("beforeunload", onClose);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("blur", onBlur);
+      window.removeEventListener("beforeunload", onClose);
+    };
+  }, []);
+
   console.log(teamDashboardContext);
 
   return (

pages/teams/create.tsx

@@ -112,7 +112,10 @@ export default function CreateTeam() {
 
       <span className="flex flex-row justify-end space-x-2">
         <button
-          onClick={() => router.push("/teams")}
+          onClick={(e) => {
+            e.preventDefault();
+            router.push("/teams");
+          }}
           className="bg-gray-100 py-2 px-5 rounded text-gray-400"
         >
           Cancel