nice flow almost done

components/LinkCard.tsx

@@ -1,21 +1,113 @@
-import { FaArchive, FaExternalLinkAlt, FaFilePdf } from "react-icons/fa";
+import {
+  FaAngleDoubleRight,
+  FaArchive,
+  FaExternalLinkAlt,
+  FaFilePdf,
+  FaTrash,
+} from "react-icons/fa";
 import Link, { LinkType } from "../models/link";
 import Image from "next/image";
 import { BsThreeDots } from "react-icons/bs";
 import LinkIcon from "./LinkIcon";
+import { useTeamDashboardContext } from "../contexts/teamDashboardContext";
+import { useAuth } from "../contexts/authContext";
+import { User } from "../models/user";
+import { Avatar, Dropdown, Menu, Tooltip } from "antd";
+import { useState } from "react";
+import SkeletonLoader from "./Loading/skeletonLoader";
+import moment from "moment";
 
 interface ILinkCardProps {
   link: Link;
 }
 
 export default function LinkCard(props: ILinkCardProps) {
+  const { currUser } = useAuth();
+  const { teamUsersMap, user } = useTeamDashboardContext();
+  const [loading, setLoading] = useState<boolean>(false);
+
+  var sender: User;
+
+  if (props.link.createdByUserId == currUser.uid) {
+    sender = user;
+  } else {
+  }
+
+  var receivers: User[] = props.link.recipients?.reduce((results, userId) => {
+    if (userId in teamUsersMap) {
+      results.push(teamUsersMap[userId]);
+    }
+
+    // if I am the receiver still add me to the receivers
+    if (userId == currUser.uid) {
+      results.push(user);
+    }
+
+    return results;
+  }, [] as User[]);
+
+  function handleDeleteLink() {
+    if (
+      confirm(
+        "Are you sure you want to delete link? It will disappear for all recipients."
+      )
+    ) {
+      console.log("deleting link");
+      try {
+      } catch (error) {}
+    }
+  }
+
+  function handleArchivingLink() {
+    if (
+      confirm(
+        "Are you sure you want to archive link? It will  be in the archive tab."
+      )
+    ) {
+      console.log("archiving link");
+      try {
+      } catch (error) {}
+    }
+  }
+
+  if (loading) {
+    return <SkeletonLoader />;
+  }
+
+  const LinkOptionsMenu = (
+    <Menu>
+      <Menu.Item key={1} danger onClick={handleDeleteLink} icon={<FaArchive />}>
+        <button>Archive Link</button>
+      </Menu.Item>
+      <Menu.Item
+        key={2}
+        danger
+        onClick={handleArchivingLink}
+        icon={<FaTrash />}
+      >
+        <button>Delete Link</button>
+      </Menu.Item>
+    </Menu>
+  );
+
+  const relativeDateTime: string = moment(
+    props.link.createdDate.toDate()
+  ).fromNow();
+
+  var receiversNames = "";
+  if (receivers) {
+    receiversNames = receivers.map((receiver) => receiver.firstName).join(", ");
+  }
+
+  console.log(receiversNames);
+
   return (
-    <span
+    <span className="flex flex-col rounded-lg ">
-      onClick={() => window.open(props.link.link, "_blank")}
-      className="flex flex-col rounded-lg hover:cursor-pointer"
-    >
       {/* attmnt header */}
-      <span className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start">
+      <span
+        onClick={() => window.open(props.link.link, "_blank")}
+        className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start hover:cursor-pointer"
+      >
         <LinkIcon className="text-4xl mr-2" linkType={props.link.type} />
 
         <span className="flex flex-col items-baseline mr-10 space-y-1">
@@ -40,29 +132,45 @@ export default function LinkCard(props: ILinkCardProps) {
       </span>
 
       {/* attmnt footer */}
-      <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
+      <Tooltip
-        <span className="inline-flex flex-row-reverse items-center shrink-0 mr-1">
+        title={
-          <span className="relative flex">
+          sender.nickName + " -> " + receiversNames + ": " + relativeDateTime
-            <span className="bg-gray-200 rounded-full shadow-md absolute w-full h-full"></span>
+        }
-            <Image
+      >
-              className=""
+        <span className="flex flex-row items-center bg-gray-400 bg-opacity-30 p-3">
-              src={"/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-06.svg"}
+          <Avatar src={sender.avatarUrl} className="shadow-xl" />
-              alt="profile"
+
-              width={30}
+          <FaAngleDoubleRight className="text-orange-500 text-2xl mx-2" />
-              height={30}
+
-            />
+          <Avatar.Group>
+            {receivers ? (
+              receivers.map((receiverUser, i) => {
+                return (
+                  <Avatar
+                    key={receiverUser.id}
+                    src={receiverUser.avatarUrl}
+                    className="shadow-xl"
+                  />
+                );
+              })
+            ) : (
+              <span className="text-xs my-3 text-white bg-emerald-400 p-1 rounded-md font-bold flex flex-row space-x-2 items-center">
+                <span>team</span>
+              </span>
+            )}
+          </Avatar.Group>
+
+          <span className="ml-auto">
+            <Dropdown
+              className="ml-auto"
+              overlay={LinkOptionsMenu}
+              trigger={["click"]}
+            >
+              <BsThreeDots className="text-white ml-2 hover:cursor-pointer" />
+            </Dropdown>
           </span>
         </span>
-
+      </Tooltip>
-        <span className="flex flex-col items-baseline">
-          <span className="text-xs text-gray-200 font-bold">Adriana</span>
-          <span className="text-xs text-gray-200 font-extralight">
-            5 minutes ago
-          </span>
-        </span>
-
-        <BsThreeDots className="text-white ml-auto hover:cursor-pointer" />
-      </span>
     </span>
   );
 }

components/RoomCard.tsx

@@ -282,7 +282,7 @@ export default function RoomCard(props: IRoomCardProps) {
                   isUserInRoom
                     ? " bg-gray-400 bg-opacity-25 text-gray-400"
                     : "bg-gray-300 bg-opacity-25 text-white"
-                }   bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40`}
+                }  bg-gray-400 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40`}
               >
                 <FaLink className="text-sm" />
               </button>

models/link.ts

@@ -45,7 +45,10 @@ export default class Link {
       return LinkType.github;
     } else if (url.includes(LinkType.atlassian)) {
       return LinkType.atlassian;
-    } else if (url.includes(LinkType.googleDrive)) {
+    } else if (
+      url.includes(LinkType.googleDrive) ||
+      url.includes("docs.google")
+    ) {
       return LinkType.googleDrive;
     } else if (
       url.includes(".png") ||