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,179 @@
+import { Avatar, Tooltip } from "antd";
+import toast from "react-hot-toast";
+import { FaPhoneSlash, FaPlus, FaWalking } from "react-icons/fa";
+import { HiSpeakerphone } from "react-icons/hi";
+import { useAuth } from "../contexts/authContext";
+import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
+import OfficeRoom, { OfficeRoomState } from "../models/officeRoom";
+import { User } from "../models/user";
+import OfficeRoomService from "../services/officeRoomService";
+import { VscDebugDisconnect } from "react-icons/vsc";
+import AgoraService from "../services/agoraService";
+
+interface IOfficeCard {
+  officeRoom: OfficeRoom;
+  handleJoinChannel: Function;
+  handleLeaveChannel: Function;
+}
+
+const officeRoomService = new OfficeRoomService();
+const agoraService = new AgoraService();
+
+export default function OfficeCard(props: IOfficeCard) {
+  const { currUser } = useAuth();
+  const { teamUsersMap, user } = useTeamDashboardContext();
+
+  var allMembersInRoom = props.officeRoom.members?.reduce((results, userId) => {
+    if (userId in teamUsersMap) {
+      results.push(teamUsersMap[userId]);
+    }
+
+    if (userId == currUser.uid) {
+      results.push(user);
+    }
+
+    return results;
+  }, [] as User[]);
+
+  async function handleJoinOfficeRoom() {
+    toast.loading("Connecting");
+
+    // make sure user is not in another room
+    // get agora token from cloud function
+    // join channel for agora
+
+    if (props.officeRoom.members.includes(currUser.uid)) {
+      toast.error("You are already in this office room!");
+      return;
+    }
+
+    try {
+      // agora token from CF
+      const agoraToken = await agoraService.getAgoraToken(props.officeRoom.id);
+
+      // // function to do it all
+      // await officeRoomService.joinOfficeRoom(props.officeRoom, currUser.uid);
+
+      // handle joining agora channel
+      await props.handleJoinChannel(props.officeRoom.id, agoraToken);
+
+      // update firestore to add ourselves in the office room
+      const newMembers = [...props.officeRoom.members, currUser.uid];
+      await officeRoomService.updateMembersInOfficeRoom(
+        props.officeRoom.id,
+        newMembers
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("problem joining office room");
+    }
+
+    toast.dismiss();
+    toast.success("joined office room");
+  }
+
+  async function handleLeaveOfficeRoom() {
+    toast.loading("leaving");
+
+    if (!props.officeRoom.members.includes(currUser.uid)) {
+      toast.error("You are not in this office room!");
+      return;
+    }
+
+    try {
+      // leave agora channel
+      await props.handleLeaveChannel();
+
+      // leave from firestore database
+      const newMembersInRoom = props.officeRoom.members.filter(
+        (memberId) => memberId != currUser.uid
+      );
+
+      await officeRoomService.updateMembersInOfficeRoom(
+        props.officeRoom.id,
+        newMembersInRoom
+      );
+    } catch (error) {
+      console.error(error);
+      toast.error("problem leaving office room");
+    }
+    toast.dismiss();
+    toast.success("left office room");
+  }
+
+  // check if user is in the office room
+  var isUserInRoom: boolean = false;
+  if (props.officeRoom.members?.includes(currUser.uid)) {
+    isUserInRoom = true;
+  }
+
+  return (
+    <span
+      className={`group flex flex-row justify-start items-center  transition-all duration-500 hover:bg-gray-200 hover:bg-opacity-25
+     py-3 px-3 min-h-[3rem] rounded-lg ${
+       isUserInRoom ? "bg-orange-500 bg-opacity-25" : ""
+     }`}
+    >
+      {renderOfficePulse(props.officeRoom.state)}
+
+      {/* office location name */}
+      <span className="text-gray-200 text-md font-semibold ml-2">
+        {props.officeRoom.name}
+      </span>
+
+      {/* all members in room */}
+      <span className="ml-auto items-center flex">
+        <Avatar.Group>
+          {allMembersInRoom.map((member) => {
+            return (
+              <Tooltip key={member.id} title={member.nickName}>
+                <Avatar
+                  src={member.avatarUrl}
+                  style={{ backgroundColor: "teal", verticalAlign: "middle" }}
+                  className="shadow-xl hover:z-20 hover:cursor-pointer"
+                >
+                  {member.nickName[0]}
+                </Avatar>
+              </Tooltip>
+            );
+          })}
+        </Avatar.Group>
+      </span>
+
+      {isUserInRoom ? (
+        <button
+          onClick={handleLeaveOfficeRoom}
+          className="ml-2 bg-orange-500 bg-opacity-40 p-2 rounded"
+        >
+          <VscDebugDisconnect className="text-orange-500 text-xl" />
+        </button>
+      ) : (
+        <Tooltip title={"Join"}>
+          <button
+            onClick={handleJoinOfficeRoom}
+            className="ml-2 bg-gray-300 bg-opacity-25 p-2 rounded hover:bg-opacity-40 group-hover:flex hidden"
+          >
+            <FaWalking className="text-lg text-white" />
+          </button>
+        </Tooltip>
+      )}
+    </span>
+  );
+}
+
+function renderOfficePulse(officeRoomState: OfficeRoomState) {
+  switch (officeRoomState) {
+    case OfficeRoomState.active:
+      return (
+        <span className="h-4 w-4 rounded-full bg-green-500 animate-pulse shadow-lg"></span>
+      );
+    case OfficeRoomState.idle:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+    default:
+      return (
+        <span className="h-4 w-4 rounded-full bg-gray-400 animate-pulse shadow-lg"></span>
+      );
+  }
+}