cleanup, add button to resend messages

src/Model/chatModel.ts

@@ -38,6 +38,7 @@ export class Chat {
   primaryChannelInput: React.State<string>;
 
   cannotSendMessage: React.State<boolean>;
+  cannotResendMessage: React.State<boolean>;
   cannotAddSecondaryChannel: React.State<boolean>;
   cannotSetChannel: React.State<boolean>;
   cannotUndoChannel: React.State<boolean>;
@@ -84,6 +85,14 @@ export class Chat {
         this.isSubscribed.value == false ||
         isConnected.value == false
     );
+    this.cannotResendMessage = React.createProxyState(
+      [this.primaryChannel, this.isSubscribed, isConnected, senderName],
+      () =>
+        this.primaryChannel.value == "" ||
+        senderName.value == "" ||
+        this.isSubscribed.value == false ||
+        isConnected.value == false
+    );
     this.cannotAddSecondaryChannel = React.createProxyState(
       [this.newSecondaryChannelName],
       () => this.newSecondaryChannelName.value == ""
@@ -141,9 +150,19 @@ export class Chat {
   };
 
   // messages
-  sendMessage = async (): Promise<void> => {
+  sendNewMessage = async (): Promise<void> => {
     if (this.cannotSendMessage.value == true) return;
 
+    this.sendMessageText(this.composingMessage.value);
+    this.composingMessage.value = "";
+  };
+
+  resendMessage = (message: ChatMessage) => {
+    if (this.cannotResendMessage.value == true) return;
+    this.sendMessageText(message.body);
+  };
+
+  sendMessageText = async (messageText: string): Promise<void> => {
     // get channels
     const secondaryChannelNames: string[] = [
       ...this.secondaryChannels.value.values(),
@@ -156,11 +175,8 @@ export class Chat {
     // encrypt
     const encrypted =
       this.encryptionKey.value == ""
-        ? this.composingMessage.value
-        : (await encryptString(
-            this.composingMessage.value,
-            this.encryptionKey.value
-          )) || this.composingMessage.value;
+        ? messageText
+        : await encryptString(messageText, this.encryptionKey.value);
 
     // create object
     const joinedChannelName = allChannelNames.join("/");
@@ -174,9 +190,6 @@ export class Chat {
 
     // send
     UDN.sendMessage(joinedChannelName, messageString);
-
-    // clear
-    this.composingMessage.value = "";
   };
 
   clearMessages = (): void => {

src/Views/messageComposer.tsx

@@ -12,11 +12,11 @@ export function MessageComposer(chat: Chat) {
         style="max-width: unset"
         placeholder={translation.composerPlaceholder}
         bind:value={chat.composingMessage}
-        on:enter={chat.sendMessage}
+        on:enter={chat.sendNewMessage}
       ></input>
       <button
         class="primary"
-        on:click={chat.sendMessage}
+        on:click={chat.sendNewMessage}
         toggle:disabled={chat.cannotSendMessage}
       >
         <span class="icon">send</span>

src/Views/threadView.tsx

@@ -6,6 +6,10 @@ import { translation } from "../translations";
 
 export function ThreadView(chat: Chat) {
   const messageConverter: React.ListItemConverter<ChatMessage> = (message) => {
+    function resendMessage() {
+      chat.resendMessage(message);
+    }
+
     function copyMessage() {
       navigator.clipboard.writeText(message.body);
     }
@@ -28,9 +32,16 @@ export function ThreadView(chat: Chat) {
         <div class="flex-column">
           <div class="flex-row justify-apart align-center secondary">
             <span class="padding-h ellipsis">
-              <b class="info">{message.sender}</b> - {message.channel}
+              <b class="info">{message.sender}</b>
             </span>
             <span class="flex-row">
+              <button
+                aria-label={translation.resendMessage}
+                on:click={resendMessage}
+                toggle:disabled={chat.cannotResendMessage}
+              >
+                <span class="icon">replay</span>
+              </button>
               <button
                 aria-label={translation.copyMessage}
                 on:click={copyMessage}
@@ -50,9 +61,7 @@ export function ThreadView(chat: Chat) {
           </div>
           <div class="flex-column padding-h padding-bottom">
             <b class="break-word" subscribe:innerText={messageBody}></b>
-            <span class="secondary">
-              {new Date(message.isoDate).toLocaleString()}
-            </span>
+            <span class="secondary"><b>{new Date(message.isoDate).toLocaleString()}</b> - {message.channel}</span>
           </div>
         </div>
       </div>

src/cryptUtility.ts

@@ -5,8 +5,8 @@ const ENCRYPTION_ALG = "AES-GCM";
 export async function encryptString(
   plaintext: string,
   passphrase: string
-): Promise<string | false> {
-  if (!window.crypto.subtle) return false;
+): Promise<string> {
+  if (!window.crypto.subtle) return plaintext;
 
   const iv = generateIV();
   const key = await importKey(passphrase, "encrypt");

src/translations.ts

@@ -55,6 +55,7 @@ const englishTranslations = {
   composerPlaceholder: "Type a message...",
   sendMessage: "Send",
 
+  resendMessage: "Resend message",
   decryptMessage: "Decrypt message",
   copyMessage: "Copy message",
   deleteMessage: "Delete message",
@@ -119,6 +120,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     composerPlaceholder: "Escribe un mensaje...",
     sendMessage: "Enviar",
 
+    resendMessage: "Enviar de nuevo",
     decryptMessage: "Descifrar mensaje",
     copyMessage: "Copiar mensaje",
     deleteMessage: "Eliminar este mensaje",
@@ -180,6 +182,7 @@ const allTranslations: { [key: string]: typeof englishTranslations } = {
     composerPlaceholder: "Neue Nachricht...",
     sendMessage: "Senden",
 
+    resendMessage: "Erneut senden",
     decryptMessage: "Nachricht entschlüsseln",
     copyMessage: "Nachricht kopieren",
     deleteMessage: "Nachricht löschen",