having one solution for different components of app

2022-01-27 20:17:00 -08:00
parent 0d23d1dfd7
commit 0f7e5a831b
256 changed files with 7997 additions and 0 deletions
@@ -0,0 +1,134 @@
+import { GetServerSidePropsContext, GetServerSidePropsResult } from "next";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+import Header from "../../components/Dashboard/Header";
+import Rooms from "../../components/Dashboard/Rooms";
+import TeamVoiceLine from "../../components/Dashboard/TeamVoiceLine";
+import BackgroundLayout from "../../components/Layouts/BackgroundLayout";
+import Loading from "../../components/Loading";
+import AudioContextProvider from "../../contexts/keyboardContext";
+import { useAuth } from "../../contexts/authContext";
+import {
+  TeamDashboardContextProvider,
+  useTeamDashboardContext,
+} from "../../contexts/teamDashboardContext";
+import { Team } from "../../models/team";
+import { TeamMemberStatus } from "../../models/teamMember";
+import { UserStatus } from "../../models/user";
+import TeamService from "../../services/teamService";
+import UserService from "../../services/userService";
+import Announcements from "../../components/Dashboard/Announcements";
+import Links from "../../components/Dashboard/Links";
+import Office from "../../components/Dashboard/Office";
+import ShortcutHelpModal from "../../components/Modals/ShortcutHelpModal";
+
+// 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 alertUserAboutClosing = (ev) => {
+  // change user status to offline
+
+  ev.preventDefault();
+  return (ev.returnValue = "are you sure?");
+};
+
+const userService = new UserService();
+
+function TeamDashboard() {
+  const { currUser } = useAuth();
+  const router = useRouter();
+  const teamDashboardContext = useTeamDashboardContext();
+
+  // user goes offline
+  const handleTabClosing = () => {
+    // change status of user
+    userService.updateUserStatus(currUser.uid, UserStatus.offline);
+  };
+
+  // shows browser alert to warn user of exiting
+  const alertUserAboutClosing = (event: any) => {
+    event.preventDefault();
+    event.returnValue = "";
+  };
+
+  useEffect(() => {
+    // set the document title based on the team
+    // todo: update based on who sent you a message
+    document.title = teamDashboardContext.team.name;
+
+    window.addEventListener("focus", onFocus);
+    window.addEventListener("blur", onBlur);
+    // Calls onFocus when the window first loads
+    onFocus();
+
+    // set user to online until he closes tab/window
+    userService.updateUserStatus(currUser.uid, UserStatus.online);
+
+    window.addEventListener("beforeunload", alertUserAboutClosing);
+    window.addEventListener("unload", handleTabClosing);
+    return () => {
+      // Specify how to clean up after this effect:
+      window.removeEventListener("focus", onFocus);
+      window.removeEventListener("blur", onBlur);
+      window.removeEventListener("beforeunload", alertUserAboutClosing);
+      window.removeEventListener("unload", handleTabClosing);
+    };
+  }, []);
+
+  return (
+    <>
+      <ShortcutHelpModal />
+
+      <div className="container mx-auto py-10 lg:px-10 flex flex-col space-y-5">
+        <Header />
+
+        <div className="flex flex-row items-start lg:space-x-5 h-[56rem]">
+          <div className="hidden lg:flex flex-col max-w-sm space-y-5 h-full">
+            <Office />
+
+            <TeamVoiceLine />
+          </div>
+
+          <div className="flex flex-col space-y-5 flex-1 h-full">
+            <Announcements />
+
+            <Rooms />
+          </div>
+        </div>
+
+        <Links />
+      </div>
+    </>
+  );
+}
+
+export default function TeamDashboardWrapper() {
+  return (
+    <TeamDashboardContextProvider>
+      <AudioContextProvider>
+        <BackgroundLayout>
+          <TeamDashboard />
+        </BackgroundLayout>
+      </AudioContextProvider>
+    </TeamDashboardContextProvider>
+  );
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+  // basic check if this team exists
+
+  // todo check if authenticated
+
+  // todo check if this user is in this team
+
+  return {
+    props: {},
+  };
+}