Update ConversationFullRow.tsx

packages/web/components/Conversations/ConversationFullRow.tsx

@@ -8,6 +8,7 @@ import {
   FaRegClock,
   FaCheck,
   FaAngleRight,
+  FaStream,
 } from "react-icons/fa";
 import { useRecoilValue } from "recoil";
 import {
@@ -67,11 +68,30 @@ export default function ConversationFullRow(props: {
       toast.error("Nothing to play");
       return;
     }
-    3;
+
+    // todo: add to queue instead of playing here
     const audio = new Audio(props.conversation.cachedAudioClip.audioDataUrl);
     audio.play();
   };
 
+  // todo:
+  /**
+   * show actions based on which state it is currently in for this user
+   *
+   */
+  const currUserAssoc = usersConvosMap.get(props.conversation.id);
+
+  let currConvoMemberState: ConversationMemberState =
+    ConversationMemberState.default;
+  if (currUserAssoc) {
+    if (currUserAssoc.state == ConversationMemberState.later) {
+      currConvoMemberState = ConversationMemberState.later;
+    } else if (currUserAssoc.state == ConversationMemberState.done) {
+      currConvoMemberState = ConversationMemberState.done;
+    } else if (currUserAssoc.state == ConversationMemberState.priority) {
+      currConvoMemberState = ConversationMemberState.priority;
+    }
+  }
   return (
     <span
       onClick={handleViewConversationDetails}
@@ -120,39 +140,61 @@ export default function ConversationFullRow(props: {
           </span>
         </Tooltip>
 
-        <Tooltip title={"Priority"}>
+        {currConvoMemberState != ConversationMemberState.default && (
-          <span
+          <Tooltip title={"Inbox"}>
-            onClick={(e) => {
+            <span
-              e.stopPropagation();
+              onClick={(e) => {
-              handleOrganizeConversation(ConversationMemberState.priority);
+                e.stopPropagation();
-            }}
+                handleOrganizeConversation(ConversationMemberState.default);
-            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+              }}
-          >
+              className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
-            <FaRocket className="ml-auto text-lg" />
+            >
-          </span>
+              <FaStream className="ml-auto text-lg" />
-        </Tooltip>
+            </span>
-        <Tooltip title={"Later"}>
+          </Tooltip>
-          <span
+        )}
-            onClick={(e) => {
+
-              e.stopPropagation();
+        {currConvoMemberState != ConversationMemberState.later && (
-              handleOrganizeConversation(ConversationMemberState.later);
+          <Tooltip title={"Later"}>
-            }}
+            <span
-            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+              onClick={(e) => {
-          >
+                e.stopPropagation();
-            <FaRegClock className="ml-auto text-lg" />
+                handleOrganizeConversation(ConversationMemberState.later);
-          </span>
+              }}
-        </Tooltip>
+              className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
-        <Tooltip title={"Done"}>
+            >
-          <span
+              <FaRegClock className="ml-auto text-lg" />
-            onClick={(e) => {
+            </span>
-              e.stopPropagation();
+          </Tooltip>
-              handleOrganizeConversation(ConversationMemberState.done);
+        )}
-            }}
+
-            className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+        {currConvoMemberState != ConversationMemberState.priority && (
-          >
+          <Tooltip title={"Priority"}>
-            <FaCheck className="ml-auto text-lg" />
+            <span
-          </span>
+              onClick={(e) => {
-        </Tooltip>
+                e.stopPropagation();
+                handleOrganizeConversation(ConversationMemberState.priority);
+              }}
+              className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+            >
+              <FaRocket className="ml-auto text-lg" />
+            </span>
+          </Tooltip>
+        )}
+
+        {currConvoMemberState != ConversationMemberState.done && (
+          <Tooltip title={"Done"}>
+            <span
+              onClick={(e) => {
+                e.stopPropagation();
+                handleOrganizeConversation(ConversationMemberState.done);
+              }}
+              className="p-2 rounded-full hover:cursor-pointer hover:bg-slate-200"
+            >
+              <FaCheck className="ml-auto text-lg" />
+            </span>
+          </Tooltip>
+        )}
       </span>
     </span>
   );