Confirm post deletion (#461)

backend/src/common/types.ts

@@ -195,6 +195,7 @@ export type TrackingEvent =
   | 'game/session/disconnect'
   | 'game/session/unexpected-disconnection'
   | 'game/session/user-ready'
+  | 'game/post/delete'
   | 'game/post/giphy/open'
   | 'game/post/giphy/choose'
   | 'game/post/giphy/toggle'

frontend/src/common/types.ts

@@ -195,6 +195,7 @@ export type TrackingEvent =
   | 'game/session/disconnect'
   | 'game/session/unexpected-disconnection'
   | 'game/session/user-ready'
+  | 'game/post/delete'
   | 'game/post/giphy/open'
   | 'game/post/giphy/choose'
   | 'game/post/giphy/toggle'

frontend/src/translations/locales/ar-SA.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "لقد وصلت إلى الحد الأقصى لعدد المشاركات التي حددها المشرف",
     "iAmDone": "لقد انتهيت!",
     "iAmNotDoneYet": "أنا لم أنتهِ بعد...",
-    "userIsReady": "{{user}} جاهز!"
+    "userIsReady": "{{user}} جاهز!",
+    "deleteConfirmation": {
+      "title": "حذف هذا المنشور؟",
+      "description": "سيؤدي هذا إلى حذف المنشور وجميع أصواته. لا يمكن التراجع عن هذا الإجراء.",
+      "confirm": "حذف هذا المنشور",
+      "cancel": "لقد غيرت رأيي"
+    }
   },
   "GameMenu": {
     "board": "المجلس",

frontend/src/translations/locales/de-DE.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Sie haben die vom Moderator festgelegte maximale Anzahl von Beiträgen erreicht.",
     "iAmDone": "Ich bin fertig!",
     "iAmNotDoneYet": "Ich bin noch nicht fertig...",
-    "userIsReady": "{{user}} ist bereit!"
+    "userIsReady": "{{user}} ist bereit!",
+    "deleteConfirmation": {
+      "title": "Diesen Beitrag löschen?",
+      "description": "Dies löscht den Beitrag und alle seine Abstimmungen. Diese Aktion kann nicht rückgängig gemacht werden.",
+      "confirm": "Diesen Beitrag löschen",
+      "cancel": "Ich habe meine Meinung geändert"
+    }
   },
   "GameMenu": {
     "board": "Board",
@@ -182,7 +188,7 @@
     "or": "oder"
   },
   "SocialMediaLogin": {
-    "header": "OAuth",
+    "header": "OAuh",
     "info": "Dies wird einen Drittanbieter Ihrer Wahl verwenden, um Sie zu authentifizieren. Es wird kein Passwort gespeichert."
   },
   "AuthCommon": {

frontend/src/translations/locales/en-GB.json

@@ -121,22 +121,28 @@
     "reconnect": "Reconnect",
     "notLoggedIn": "You are not logged in. You can view this session as a spectator, but must login to participate.",
     "error_action_unauthorised": "You are not allowed to perform this action.",
-  "error_cannot_edit_group": "Editing the group failed.",
-  "error_cannot_edit_post": "Editing the post failed.",
-  "error_cannot_get_session": "Could not get the session data. Please reload the page.",
-  "error_cannot_register_vote": "Your vote was not registered successfully.",
-  "error_cannot_save_group": "The group you created could not be saved.",
-  "error_cannot_save_post": "The post you created could not be saved.",
-  "error_cannot_delete_group": "The group could not be deleted",
-  "error_cannot_delete_post": "The post could not be deleted",
-  "error_cannot_rename_session": "Renaming the session failed",
-  "error_cannot_save_columns": "Saving columns failed",
-  "error_cannot_save_options": "Saving options failed",
-  "error_cannot_cancel_votes": "Cancelling votes failed",
+    "error_cannot_edit_group": "Editing the group failed.",
+    "error_cannot_edit_post": "Editing the post failed.",
+    "error_cannot_get_session": "Could not get the session data. Please reload the page.",
+    "error_cannot_register_vote": "Your vote was not registered successfully.",
+    "error_cannot_save_group": "The group you created could not be saved.",
+    "error_cannot_save_post": "The post you created could not be saved.",
+    "error_cannot_delete_group": "The group could not be deleted",
+    "error_cannot_delete_post": "The post could not be deleted",
+    "error_cannot_rename_session": "Renaming the session failed",
+    "error_cannot_save_columns": "Saving columns failed",
+    "error_cannot_save_options": "Saving options failed",
+    "error_cannot_cancel_votes": "Cancelling votes failed",
     "maxPostsReached": "You have reached the maximum number of posts set by the moderator.",
     "iAmDone": "I'm done!",
     "iAmNotDoneYet": "I'm not done yet...",
-    "userIsReady": "{{user}} is ready!"
+    "userIsReady": "{{user}} is ready!",
+    "deleteConfirmation": {
+      "title": "Delete this post?",
+      "description":"This will delete the post and all its votes. This action cannot be undone.",
+      "confirm": "Delete this post",
+      "cancel": "I have changed my mind"
+    }
   },
   "GameMenu": {
     "board": "Board",

frontend/src/translations/locales/es-ES.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Has alcanzado el número máximo de mensajes establecidos por el moderador.",
     "iAmDone": "¡He terminado!",
     "iAmNotDoneYet": "No he terminado todavía...",
-    "userIsReady": "¡{{user}} está listo!"
+    "userIsReady": "¡{{user}} está listo!",
+    "deleteConfirmation": {
+      "title": "¿Eliminar esta publicación?",
+      "description": "Esto eliminará el mensaje y todos sus votos. Esta acción no se puede deshacer.",
+      "confirm": "Eliminar esta publicación",
+      "cancel": "He cambiado de opinión"
+    }
   },
   "GameMenu": {
     "board": "Tablero",

frontend/src/translations/locales/fr-FR.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Vous avez atteint le nombre de posts maximum prévu par le modérateur.",
     "iAmDone": "J'ai fini !",
     "iAmNotDoneYet": "Je n'ai pas encore fini...",
-    "userIsReady": "{{user}} est prêt !"
+    "userIsReady": "{{user}} est prêt !",
+    "deleteConfirmation": {
+      "title": "Supprimer ce post ?",
+      "description": "Vous allez supprimer le post et tous ses votes. Cette action est définitive.",
+      "confirm": "Supprimer ce post",
+      "cancel": "J'ai changé d'avis"
+    }
   },
   "GameMenu": {
     "board": "Board",

frontend/src/translations/locales/hu-HU.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Elérted a moderátor által beállított maximális bejegyzések számát.",
     "iAmDone": "Kész vagyok!",
     "iAmNotDoneYet": "Még nem végeztem...",
-    "userIsReady": "{{user}} kész!"
+    "userIsReady": "{{user}} kész!",
+    "deleteConfirmation": {
+      "title": "",
+      "description": "",
+      "confirm": "",
+      "cancel": ""
+    }
   },
   "GameMenu": {
     "board": "Tábla",

frontend/src/translations/locales/it-IT.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Hai raggiunto il numero massimo di post impostati dal moderatore.",
     "iAmDone": "Ho finito!",
     "iAmNotDoneYet": "Non ho ancora finito...",
-    "userIsReady": "{{user}} è pronto!"
+    "userIsReady": "{{user}} è pronto!",
+    "deleteConfirmation": {
+      "title": "Eliminare questo post?",
+      "description": "Questo cancellerà il post e tutti i suoi voti. Questa azione non può essere annullata.",
+      "confirm": "Elimina questo post",
+      "cancel": "Ho cambiato idea"
+    }
   },
   "GameMenu": {
     "board": "Tavola",

frontend/src/translations/locales/ja-JP.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "モデレーターが設定した投稿の最大数に達しました。",
     "iAmDone": "終わりました！",
     "iAmNotDoneYet": "まだ完了していません...",
-    "userIsReady": "{{user}} の準備ができました！"
+    "userIsReady": "{{user}} の準備ができました！",
+    "deleteConfirmation": {
+      "title": "この投稿を削除しますか？",
+      "description": "投稿とすべての投票を削除します。この操作は元に戻せません。",
+      "confirm": "この投稿を削除",
+      "cancel": "気が変わりました"
+    }
   },
   "GameMenu": {
     "board": "ボード",

frontend/src/translations/locales/nl-NL.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Je hebt het maximum aantal berichten bereikt dat door de moderator is ingesteld.",
     "iAmDone": "Ik ben klaar!",
     "iAmNotDoneYet": "Ik ben nog niet klaar...",
-    "userIsReady": "{{user}} is klaar!"
+    "userIsReady": "{{user}} is klaar!",
+    "deleteConfirmation": {
+      "title": "Dit bericht verwijderen?",
+      "description": "Dit zal het bericht en al zijn stemmen verwijderen. Deze actie kan niet ongedaan worden gemaakt.",
+      "confirm": "Dit bericht verwijderen",
+      "cancel": "Ik ben van gedachten veranderd"
+    }
   },
   "GameMenu": {
     "board": "Bord",

frontend/src/translations/locales/pl-PL.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Osiągnąłeś maksymalną liczbę postów ustawionych przez moderatora.",
     "iAmDone": "Gotowe!",
     "iAmNotDoneYet": "Jeszcze nie skończyłem...",
-    "userIsReady": "{{user}} jest gotowy!"
+    "userIsReady": "{{user}} jest gotowy!",
+    "deleteConfirmation": {
+      "title": "Usunąć ten post?",
+      "description": "Spowoduje to usunięcie wpisu i wszystkich jego głosów. Tej czynności nie można cofnąć.",
+      "confirm": "Usuń ten post",
+      "cancel": "Zmieniłem zdanie"
+    }
   },
   "GameMenu": {
     "board": "Tablica",

frontend/src/translations/locales/pt-BR.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Você atingiu o número máximo de postagens definido pelo moderador.",
     "iAmDone": "Estou pronto!",
     "iAmNotDoneYet": "Eu não terminei ainda...",
-    "userIsReady": "{{user}} está pronto!"
+    "userIsReady": "{{user}} está pronto!",
+    "deleteConfirmation": {
+      "title": "Excluir esta publicação?",
+      "description": "Isto irá excluir a publicação e todos os seus votos. Esta ação não pode ser desfeita.",
+      "confirm": "Excluir esta publicação",
+      "cancel": "Mudei de ideia"
+    }
   },
   "GameMenu": {
     "board": "Tabuleiro",

frontend/src/translations/locales/pt-PT.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Você atingiu o número máximo de postagens definido pelo moderador.",
     "iAmDone": "Estou pronto!",
     "iAmNotDoneYet": "Eu não terminei ainda...",
-    "userIsReady": "{{user}} está pronto!"
+    "userIsReady": "{{user}} está pronto!",
+    "deleteConfirmation": {
+      "title": "Excluir esta publicação?",
+      "description": "Isto irá excluir a publicação e todos os seus votos. Esta ação não pode ser desfeita.",
+      "confirm": "Excluir esta publicação",
+      "cancel": "Mudei de ideia"
+    }
   },
   "GameMenu": {
     "board": "Tabuleiro",

frontend/src/translations/locales/uk-UA.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "Ви досягли максимальної кількості повідомлень, встановлених модератором.",
     "iAmDone": "Я завершив!",
     "iAmNotDoneYet": "Я ще не завершив...",
-    "userIsReady": "{{user}} готовий!"
+    "userIsReady": "{{user}} готовий!",
+    "deleteConfirmation": {
+      "title": "Видалити це повідомлення?",
+      "description": "Ця дія видалить публікацію та всі її голоси. Цю дію не можна скасувати.",
+      "confirm": "Видалити це повідомлення",
+      "cancel": "Я передумала"
+    }
   },
   "GameMenu": {
     "board": "Дошка",

frontend/src/translations/locales/zh-CN.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "您已经达到了版主设置的帖子的最大数量。",
     "iAmDone": "我已完成！",
     "iAmNotDoneYet": "我还没有完成...",
-    "userIsReady": "{{user}} 已准备好了！"
+    "userIsReady": "{{user}} 已准备好了！",
+    "deleteConfirmation": {
+      "title": "删除此帖子？",
+      "description": "这将删除帖子及其所有投票。此操作无法撤消。",
+      "confirm": "删除此帖子",
+      "cancel": "我改变了主意。"
+    }
   },
   "GameMenu": {
     "board": "棋盘",

frontend/src/translations/locales/zh-TW.json

@@ -136,7 +136,13 @@
     "maxPostsReached": "您已達到版主設置的最大帖子數。",
     "iAmDone": "我受夠了！",
     "iAmNotDoneYet": "我還沒搞定...",
-    "userIsReady": "{{user}} 準備好了！"
+    "userIsReady": "{{user}} 準備好了！",
+    "deleteConfirmation": {
+      "title": "",
+      "description": "",
+      "confirm": "",
+      "cancel": ""
+    }
   },
   "GameMenu": {
     "board": "木板",

frontend/src/views/game/board/post/Post.tsx

@@ -38,6 +38,7 @@ import useCrypto from '../../../../crypto/useCrypto';
 import { getLorem } from './lorem';
 import useCanDecrypt from '../../../../crypto/useCanDecrypt';
 import isSearchMatch from '../../is-search-match';
+import { useConfirm } from 'material-ui-confirm';
 
 interface PostItemProps {
   index: number;
@@ -104,6 +105,8 @@ const PostItem = ({
   const postElement = useRef(null);
   const [actionsToggled, toggleAction] = useToggle(false);
   const [showGiphyEditor, setShowGiphyEditor] = useState(false);
+  const confirm = useConfirm();
+
   const upVotes = useMemo(() => countVotes(post, 'like'), [post]);
   const downVotes = useMemo(() => countVotes(post, 'dislike'), [post]);
   const upVoters = useMemo(() => enumerateVotes(post, 'like'), [post]);
@@ -137,6 +140,23 @@ const PostItem = ({
     },
     [onEditAction, encrypt]
   );
+  const handleDelete = useCallback(() => {
+    const buttonProps = {
+      color: 'error',
+      variant: 'contained',
+      'data-cy': 'delete-post-confirm',
+    };
+    confirm({
+      title: t('PostBoard.deleteConfirmation.title'),
+      description: t('PostBoard.deleteConfirmation.description'),
+      confirmationText: t('PostBoard.deleteConfirmation.confirm'),
+      cancellationText: t('PostBoard.deleteConfirmation.cancel'),
+      confirmationButtonProps: buttonProps as any,
+    }).then(() => {
+      onDelete();
+      trackEvent('game/post/delete');
+    });
+  }, [onDelete, confirm, t]);
 
   const actualContent = useMemo(() => {
     return isBlurred ? generateLoremIpsum(post.content) : decrypt(post.content);
@@ -282,7 +302,7 @@ const PostItem = ({
                           }}
                         />
                       }
-                      onClick={onDelete}
+                      onClick={handleDelete}
                     />
                   )}
                 </>