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,108 @@
+import moment from "moment";
+import Image from "next/image";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { FaCheck, FaPlay } from "react-icons/fa";
+import { useAuth } from "../contexts/authContext";
+import { useKeyboardContext } from "../contexts/keyboardContext";
+import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
+import Announcement, { AnnouncementState } from "../models/announcement";
+import { User } from "../models/user";
+import { AnnouncementService } from "../services/announcementService";
+import SkeletonLoader from "./Loading/skeletonLoader";
+
+interface IAnnouncementCardProps {
+  announcement: Announcement;
+}
+
+const announcementService = new AnnouncementService();
+
+export default function AnnouncementCard(props: IAnnouncementCardProps) {
+  const { currUser } = useAuth();
+  const { teamUsersMap, user } = useTeamDashboardContext();
+  const { handleAddAudioToQueue } = useKeyboardContext();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  function playAnnouncement() {
+    handleAddAudioToQueue([props.announcement.audioDataUrl], true);
+  }
+
+  async function resolveAnnouncement() {
+    setLoading(true);
+
+    try {
+      await announcementService.updateAnnouncementState(
+        props.announcement.id,
+        AnnouncementState.resolved
+      );
+    } catch (error) {
+      toast.error("unable to resolve announcement");
+    }
+
+    setLoading(false);
+  }
+
+  async function deleteAnnouncement() {
+    try {
+      await announcementService.updateAnnouncementState(
+        props.announcement.id,
+        AnnouncementState.deleted
+      );
+    } catch (error) {
+      toast.error("unable to resolve announcement");
+    }
+  }
+
+  var announcementUser: User = null;
+  if (props.announcement.createdByUserId in teamUsersMap) {
+    announcementUser = teamUsersMap[props.announcement.createdByUserId];
+  } else if (currUser.uid == props.announcement.createdByUserId) {
+    announcementUser = user;
+  }
+
+  const relativeCreatedDate = moment(
+    props.announcement.createdDate.toDate()
+  ).fromNow();
+
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
+  return (
+    <span className="flex flex-row p-3 bg-gray-300 bg-opacity-25 rounded-lg items-center shrink-0">
+      <span className="relative mr-2 grid items-center justify-items-center">
+        <span className="bg-gray-200 bg-opacity-20 rounded-full shadow-md absolute w-full h-full"></span>
+
+        <Image
+          src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"}
+          alt="profile"
+          width={50}
+          height={50}
+        />
+      </span>
+
+      <span className="flex flex-col items-baseline mr-5">
+        <span className="text-md font-bold text-white">
+          {announcementUser?.nickName}
+        </span>
+        <span className="text-xs text-gray-200">{relativeCreatedDate}</span>
+      </span>
+
+      {props.announcement.state == AnnouncementState.active && (
+        <button
+          onClick={resolveAnnouncement}
+          className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40"
+        >
+          <FaCheck className="text-lg text-white" />
+        </button>
+      )}
+
+      <button
+        onClick={playAnnouncement}
+        className="bg-gray-300 bg-opacity-25 p-2 ml-2 rounded hover:bg-opacity-40"
+      >
+        <FaPlay className="text-lg text-white" />
+      </button>
+    </span>
+  );
+}