implementing block and report message

app/client/web/src/constants/Strings.ts

@@ -226,9 +226,15 @@ export const en = {
   microphone: 'Microphone',
   camera: 'Camera',
 
+  flagMessage: 'Flag Message',
+  flagMessagePrompt: 'Are you sure you want to flag the message to the admin?',
+  flag: 'Flag',
+  blockMessage: 'Block Message',
+  blockMessagePrompt: 'Are you sure you want to block the message?',
+
   ignoring: 'Ignoring Contact',
   connfirmIgnoring: 'Are you sure you want to ignore the request?',
-  denying: 'Denyping Contact',
+  denying: 'Denying Contact',
   confirmDenying: 'Are you sure you want to deny the request?',
   reporting: 'Reporting Contact',
   confirmReporting: 'Are you sure you want to report the contact?',
@@ -271,6 +277,12 @@ export const fr = {
   token: 'Code',
   delayMessage: 'La génération de clé peut prendre plusieurs minutes.',
 
+  flagMessage: 'Signaler le message',
+  flagMessagePrompt: 'Êtes-vous sûr de vouloir signaler le message à l\'administrateur?',
+  flag: 'Signaler',
+  blockMessage: 'Bloquer le message',
+  blockMessagePrompt: 'Êtes-vous sûr de vouloir bloquer le message?',
+
   code: 'fr',
   settings: 'Paramètres',
   contacts: 'Contacts',
@@ -531,6 +543,12 @@ export const sp = {
   token: 'Código',
   delayMessage: 'La generación de claves puede tardar varios minutos.',
 
+  flagMessage: 'Marcar mensaje',
+  flagMessagePrompt: '¿Está seguro de que desea marcar el mensaje para el administrador?',
+  flag: 'Marcar',
+  blockMessage: 'Bloquear mensaje',
+  blockMessagePrompt: '¿Está seguro de que desea bloquear el mensaje?',
+
   code: 'sp',
   settings: 'Configuración',
   contacts: 'Contactos',
@@ -790,6 +808,12 @@ export const pt = {
   token: 'Code',
   delayMessage: 'A geração da chave pode levar vários minutos.',
 
+  flagMessage: 'Sinalizar mensagem',
+  flagMessagePrompt: 'Tem certeza de que deseja sinalizar a mensagem para o administrador?',
+  flag: 'Sinalizar',
+  blockMessage: 'Bloquear mensagem',
+  blockMessagePrompt: 'Tem certeza de que deseja bloquear a mensagem?',
+
   code: 'pt',
   settings: 'Configurações',
   contacts: 'Contatos',
@@ -1049,6 +1073,12 @@ export const de = {
   token: 'Token',
   delayMessage: 'Die Schlüsselgenerierung kann mehrere Minuten dauern.',
 
+  flagMessage: 'Nachricht melden',
+  flagMessagePrompt: 'Sind Sie sicher, dass Sie die Nachricht an den Administrator melden möchten?',
+  flag: 'Melden',
+  blockMessage: 'Nachricht blockieren',
+  blockMessagePrompt: 'Sind Sie sicher, dass Sie die Nachricht blockieren möchten?',
+
   code: 'de',
   settings: 'Einstellungen',
   contacts: 'Kontakte',
@@ -1308,6 +1338,12 @@ export const ru = {
   token: 'Токен',
   delayMessage: 'Генерация ключа может занять несколько минут.',
 
+  flagMessage: 'Пожаловаться на сообщение',
+  flagMessagePrompt: 'Вы уверены, что хотите пожаловаться на сообщение администратору?',
+  flag: 'Пожаловаться',
+  blockMessage: 'Заблокировать сообщение',
+  blockMessagePrompt: 'Вы уверены, что хотите заблокировать сообщение?',
+
   code: 'ru',
   settings: 'Настройки',
   contacts: 'Контакты',

app/client/web/src/conversation/useConversation.hook.ts

@@ -150,7 +150,8 @@ export function useConversation() {
     if (focus && contact && identity) {
       const setTopics = (topics: Topic[]) => {
         if (topics) {
-          const sorted = topics.sort((a, b) => {
+          const filtered = topics.filter(topic => !topic.blocked);
+          const sorted = filtered.sort((a, b) => {
             if (a.created < b.created) {
               return -1;
             } else if (a.created > b.created) {

app/client/web/src/message/Message.tsx

@@ -2,16 +2,17 @@ import { useRef, useEffect, useState, useCallback } from 'react';
 import { avatar } from '../constants/Icons'
 import { Topic, Card, Profile } from 'databag-client-sdk';
 import classes from './Message.module.css'
-import { Textarea, Button, Image, Skeleton, ActionIcon } from '@mantine/core'
+import { Textarea, Button, Image, Skeleton, ActionIcon, Text } from '@mantine/core'
 import { ImageAsset } from './imageAsset/ImageAsset';
 import { AudioAsset } from './audioAsset/AudioAsset';
 import { VideoAsset } from './videoAsset/VideoAsset';
 import { BinaryAsset } from './binaryAsset/BinaryAsset';
 import type { MediaAsset } from '../conversation/Conversation';
 import { useMessage } from './useMessage.hook';
-import { IconForbid, IconTrash, IconEdit, IconAlertSquareRounded, IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
+import { IconForbid, IconTrash, IconEdit, IconFlag, IconChevronLeft, IconChevronRight, IconFileAlert } from '@tabler/icons-react';
 import { useResizeDetector } from 'react-resize-detector';
 import DOMPurify from 'dompurify';
+import { modals } from '@mantine/modals'
 
 export function Message({ topic, card, profile, host }: { topic: Topic, card: Card | null, profile: Profile | null, host: boolean }) {
   const { state, actions } = useMessage();
@@ -26,6 +27,83 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
   const [editing, setEditing] = useState(false);
   const [editText, setEditText] = useState('');
   const [saving, setSaving] = useState(false);
+
+  const remove = async () => {
+    modals.openConfirmModal({
+      title: state.strings.deleteMessage,
+      withCloseButton: false,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{ state.strings.messageHint }</Text>,
+      labels: { confirm: state.strings.remove, cancel: state.strings.cancel },
+      onConfirm: async () => {
+        try {
+          await actions.remove(topic.topicId);
+        } catch (err) {
+          console.log(err);
+          showError();
+        }
+      }
+    })
+  };
+
+  const report = async () => {
+    modals.openConfirmModal({
+      title: state.strings.flagMessage,
+      withCloseButton: false,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{ state.strings.flagMessagePrompt }</Text>,
+      labels: { confirm: state.strings.flag, cancel: state.strings.cancel },
+      onConfirm: async () => {
+        try {
+          await actions.flag(topic.topicId);
+        } catch (err) {
+          console.log(err);
+          showError();
+        }
+      }
+    })
+  }
+
+  const block = async () => {
+    modals.openConfirmModal({
+      title: state.strings.blockMessage,
+      withCloseButton: false,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3,
+      },
+      children: <Text>{ state.strings.blockMessagePrompt }</Text>,
+      labels: { confirm: state.strings.block, cancel: state.strings.cancel },
+      onConfirm: async () => {
+        try {
+          await actions.block(topic.topicId);
+        } catch (err) {
+          console.log(err);
+          showError();
+        }
+      }
+    })
+  }
+
+  const showError = () => {
+    modals.openConfirmModal({
+      title: state.strings.operationFailed,
+      withCloseButton: true,
+      overlayProps: {
+        backgroundOpacity: 0.55,
+        blur: 3, 
+      },
+      children: <Text>{state.strings.tryAgain}</Text>,
+      cancelProps: { display: 'none' },
+      confirmProps: { display: 'none' },
+    })
+  }
   
   const save = async () => {
     setSaving(true);
@@ -128,10 +206,10 @@ export function Message({ topic, card, profile, host }: { topic: Topic, card: Ca
                   <IconEdit className={classes.option} onClick={edit} />
                 )}
                 { (host || profile) && (
-                  <IconTrash className={classes.careful} />
+                  <IconTrash className={classes.careful} onClick={remove} />
                 )}
-                <IconForbid className={classes.careful} />
-                <IconAlertSquareRounded className={classes.careful} />
+                <IconForbid className={classes.careful} onClick={block} />
+                <IconFlag className={classes.careful} onClick={report} />
               </div>
             </div>
           </div>

app/client/web/src/message/useMessage.hook.ts

@@ -23,10 +23,27 @@ export function useMessage() {
   }, [display.state]);
 
   const actions = {
+    block: async (topicId: string) => {
+      const focus = app.state.focus;
+      if (focus) {
+        await focus.setBlockTopic(topicId);
+      }
+    },
+    flag: async (topicId: string) => {
+      const focus = app.state.focus;
+      if (focus) {
+        await focus.flagTopic(topicId);
+      }
+    },
+    remove: async (topicId: string) => {
+      const focus = app.state.focus;
+      if (focus) {
+        await focus.removeTopic(topicId);
+      }
+    },
     saveSubject: async (topicId: string, sealed: boolean, subject: any) => {
       const focus = app.state.focus;
       if (focus) {
-console.log("SAVING", subject);
         await focus.setTopicSubject(topicId, sealed ? 'sealedtopic' : 'superbasictopic', ()=>subject, [], ()=>true);
       }
     },