nice flow and all working!!!!

components/Dashboard/Links.tsx

@@ -93,8 +93,8 @@ export default function Links() {
   const allLinks = Array.from(linksMap.values());
 
   const meLinks = allLinks.filter((link) => {
-    // if archived, don't show
-    if (link.state == LinkState.archived) {
+    // if archived or deleted, don't show
+    if (link.state != LinkState.active) {
       return false;
     }
 
@@ -112,7 +112,7 @@ export default function Links() {
   });
   const teamLinks = allLinks.filter((link) => {
     // not archived and does not have a recipients list
-    if (link.state != LinkState.archived && !link.recipients) {
+    if (link.state == LinkState.active && !link.recipients) {
       return true;
     }
     return false;
@@ -158,21 +158,6 @@ export default function Links() {
             </span>
           </span>
 
-          {/* tab pane */}
-          {/* <span className="ml-auto flex flex-row space-x-5 uppercase mr-5">
-            <span className="underline underline-offset-8 decoration-white text-white hover:text-white hover:cursor-pointer">
-              Team
-            </span>
-
-            <span className="text-gray-300 hover:text-white hover:cursor-pointer">
-              Personal
-            </span>
-
-            <span className="text-gray-300 hover:text-white hover:cursor-pointer">
-              Favorites
-            </span>
-          </span> */}
-
           <Dropdown overlay={TimePeriodFilterMenu}>
             <span className="text-sm text-gray-300 flex flex-row items-center uppercase hover:cursor-pointer">
               Week <FaAngleDown />
@@ -208,27 +193,27 @@ export default function Links() {
         >
           <Radio.Button value={LinkTypeFilter.me}>
             {LinkTypeFilter.me}{" "}
-            {/* <span className="text-xs text-orange-500">
-            {meRooms.length > 0 ? meRooms.length : ""}
-          </span> */}
+            <span className="text-xs text-orange-500">
+              {meLinks.length > 0 ? meLinks.length : ""}
+            </span>
           </Radio.Button>
           <Radio.Button value={LinkTypeFilter.team}>
             {LinkTypeFilter.team}{" "}
-            {/* <span className="text-xs text-orange-500">{teamRooms.length}</span> */}
+            <span className="text-xs text-orange-500">{teamLinks.length}</span>
           </Radio.Button>
           <Tooltip title={"coming soon"}>
             <Radio.Button disabled value={LinkTypeFilter.favorites}>
               {LinkTypeFilter.favorites}{" "}
               {/* <span className="text-xs text-orange-500">
-            {liveRooms.length > 0 ? liveRooms.length : ""}
-          </span> */}
+                {liveRooms.length > 0 ? fa.length : ""}
+              </span> */}
             </Radio.Button>
           </Tooltip>
           <Radio.Button value={LinkTypeFilter.archived}>
             {LinkTypeFilter.archived}{" "}
-            {/* <span className="text-xs text-orange-500">
-            {archivedRooms.length > 0 ? archivedRooms.length : ""}
-          </span> */}
+            <span className="text-xs text-orange-500">
+              {archivedLinks.length > 0 ? archivedLinks.length : ""}
+            </span>
           </Radio.Button>
         </Radio.Group>
       </div>

components/LinkCard.tsx

@@ -5,7 +5,7 @@ import {
   FaFilePdf,
   FaTrash,
 } from "react-icons/fa";
-import Link, { LinkType } from "../models/link";
+import Link, { LinkState, LinkType } from "../models/link";
 import Image from "next/image";
 import { BsThreeDots } from "react-icons/bs";
 import LinkIcon from "./LinkIcon";
@@ -16,11 +16,14 @@ import { Avatar, Dropdown, Menu, Tooltip } from "antd";
 import { useState } from "react";
 import SkeletonLoader from "./Loading/skeletonLoader";
 import moment from "moment";
+import { LinkService } from "../services/linkService";
 
 interface ILinkCardProps {
   link: Link;
 }
 
+const linkService = new LinkService();
+
 export default function LinkCard(props: ILinkCardProps) {
   const { currUser } = useAuth();
   const { teamUsersMap, user } = useTeamDashboardContext();
@@ -46,28 +49,38 @@ export default function LinkCard(props: ILinkCardProps) {
     return results;
   }, [] as User[]);
 
-  function handleDeleteLink() {
+  async function handleDeleteLink() {
+    setLoading(true);
     if (
       confirm(
         "Are you sure you want to delete link? It will disappear for all recipients."
       )
     ) {
       console.log("deleting link");
+
+      await linkService.updateLinkState(props.link.id, LinkState.deleted);
+
       try {
       } catch (error) {}
     }
+
+    setLoading(false);
   }
 
-  function handleArchivingLink() {
+  async function handleArchivingLink() {
+    setLoading(true);
+
     if (
       confirm(
         "Are you sure you want to archive link? It will  be in the archive tab."
       )
     ) {
-      console.log("archiving link");
+      await linkService.updateLinkState(props.link.id, LinkState.archived);
       try {
       } catch (error) {}
     }
+
+    setLoading(false);
   }
 
   if (loading) {
@@ -76,11 +89,16 @@ export default function LinkCard(props: ILinkCardProps) {
 
   const LinkOptionsMenu = (
     <Menu>
-      <Menu.Item key={1} danger onClick={handleDeleteLink} icon={<FaArchive />}>
+      <Menu.Item
+        key={2}
+        danger
+        onClick={handleArchivingLink}
+        icon={<FaArchive />}
+      >
         <button>Archive Link</button>
       </Menu.Item>
       <Menu.Item
-        key={2}
+        key={3}
         danger
         onClick={handleArchivingLink}
         icon={<FaTrash />}
@@ -94,7 +112,7 @@ export default function LinkCard(props: ILinkCardProps) {
     props.link.createdDate.toDate()
   ).fromNow();
 
-  var receiversNames = "";
+  var receiversNames = "team";
   if (receivers) {
     receiversNames = receivers.map((receiver) => receiver.firstName).join(", ");
   }
@@ -104,32 +122,34 @@ export default function LinkCard(props: ILinkCardProps) {
   return (
     <span className="flex flex-col rounded-lg ">
       {/* attmnt header */}
-      <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">
-          <span className="text-md font-bold text-white">
-            {props.link.name}
-          </span>
-
-          <span
-            className={`text-gray-200 text-xs mb-auto text-ellipsis whitespace-pre-line max-h-10 overflow-hidden`}
-          >
-            {props.link.description}
-          </span>
-        </span>
-
-        {/* attachment actions */}
-        <button
+      <Tooltip title={props.link.link}>
+        <span
           onClick={() => window.open(props.link.link, "_blank")}
-          className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
+          className="flex flex-row bg-gray-300 bg-opacity-25 py-5 px-3 items-center justify-start hover:cursor-pointer"
         >
-          <FaExternalLinkAlt className="text-sm text-white" />
-        </button>
-      </span>
+          <LinkIcon className="text-4xl mr-2" linkType={props.link.type} />
+
+          <span className="flex flex-col items-baseline mr-10 space-y-1">
+            <span className="text-md font-bold text-white">
+              {props.link.name}
+            </span>
+
+            <span
+              className={`text-gray-200 text-xs mb-auto text-ellipsis whitespace-pre-line max-h-10 overflow-hidden`}
+            >
+              {props.link.description}
+            </span>
+          </span>
+
+          {/* attachment actions */}
+          <button
+            onClick={() => window.open(props.link.link, "_blank")}
+            className="bg-gray-300 bg-opacity-25 p-2 ml-auto rounded hover:bg-opacity-40"
+          >
+            <FaExternalLinkAlt className="text-sm text-white" />
+          </button>
+        </span>
+      </Tooltip>
 
       {/* attmnt footer */}
       <Tooltip

models/link.ts

@@ -70,6 +70,7 @@ export default class Link {
 export enum LinkState {
   active = "active",
   archived = "archived",
+  deleted = "deleted",
 }
 
 export enum LinkType {

services/linkService.tsx

@@ -0,0 +1,24 @@
+import {
+  addDoc,
+  collection,
+  doc,
+  Firestore,
+  getFirestore,
+  serverTimestamp,
+  setDoc,
+} from "firebase/firestore";
+import Link, { LinkState } from "../models/link";
+import { Collections } from "./collections";
+
+export class LinkService {
+  private db: Firestore = getFirestore();
+
+  async updateLinkState(linkId: string, newState: LinkState) {
+    const docRef = doc(this.db, Collections.links, linkId);
+    await setDoc(
+      docRef,
+      { state: newState, lastUpdatedDate: serverTimestamp() },
+      { merge: true }
+    );
+  }
+}