IO-1124 Archive message

client/src/components/chat-archive-button/chat-archive-button.component.jsx

@@ -0,0 +1,32 @@
+import { useMutation } from "@apollo/client";
+import { Button } from "antd";
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { TOGGLE_CONVERSATION_ARCHIVE } from "../../graphql/conversations.queries";
+
+export default function ChatArchiveButton({ conversation }) {
+  console.log(
+    "🚀  ~ file: chat-archive-button.component.jsx  ~ line 6  ~ conversation",
+    conversation
+  );
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const [updateConversation] = useMutation(TOGGLE_CONVERSATION_ARCHIVE);
+  const handleToggleArchive = async () => {
+    setLoading(true);
+
+    await updateConversation({
+      variables: { id: conversation.id, archived: !conversation.archived },
+    });
+
+    setLoading(false);
+  };
+
+  return (
+    <Button onClick={handleToggleArchive} loading={loading} type="primary">
+      {conversation.archived
+        ? t("messaging.labels.unarchive")
+        : t("messaging.labels.archive")}
+    </Button>
+  );
+}

client/src/components/chat-conversation-title/chat-conversation-title.component.jsx

@@ -1,12 +1,13 @@
 import { Space } from "antd";
 import React from "react";
 import PhoneNumberFormatter from "../../utils/PhoneFormatter";
+import ChatArchiveButton from "../chat-archive-button/chat-archive-button.component";
 import ChatConversationTitleTags from "../chat-conversation-title-tags/chat-conversation-title-tags.component";
 import ChatTagRoContainer from "../chat-tag-ro/chat-tag-ro.container";
 
 export default function ChatConversationTitle({ conversation }) {
   return (
-    <Space flex>
+    <Space wrap>
       <PhoneNumberFormatter>
         {conversation && conversation.phone_num}
       </PhoneNumberFormatter>
@@ -16,6 +17,7 @@ export default function ChatConversationTitle({ conversation }) {
         }
       />
       <ChatTagRoContainer conversation={conversation || []} />
+      <ChatArchiveButton conversation={conversation} />
     </Space>
   );
 }