Can edit message content

matrixgw_frontend/src/widgets/messages/RoomMessagesList.tsx

@@ -5,6 +5,11 @@ import {
   Button,
   ButtonGroup,
   Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  TextField,
   Typography,
   useTheme,
 } from "@mui/material";
@@ -14,6 +19,7 @@ import type { UsersMap } from "../../api/matrix/MatrixApiProfile";
 import type { Room } from "../../api/matrix/MatrixApiRoom";
 import { useAlert } from "../../hooks/contexts_provider/AlertDialogProvider";
 import { useConfirm } from "../../hooks/contexts_provider/ConfirmDialogProvider";
+import { useLoadingMessage } from "../../hooks/contexts_provider/LoadingMessageProvider";
 import type { Message, RoomEventsManager } from "../../utils/RoomEventsManager";
 import { useUserInfo } from "../dashboard/BaseAuthenticatedPage";
 import { AccountIcon } from "./AccountIcon";
@@ -75,9 +81,12 @@ function RoomMessage(p: {
   const user = useUserInfo();
   const alert = useAlert();
   const confirm = useConfirm();
+  const loadingMessage = useLoadingMessage();
 
   const [showImageFullScreen, setShowImageFullScreen] = React.useState(false);
 
+  const [editMessage, setEditMessage] = React.useState<string | undefined>();
+
   const closeImageFullScreen = () => setShowImageFullScreen(false);
 
   const sender = p.users.get(p.message.account);
@@ -92,6 +101,27 @@ function RoomMessage(p: {
     }
   };
 
+  const handleEditMessage = () => setEditMessage(p.message.content);
+  const handleCancelEditMessage = () => setEditMessage(undefined);
+  const handleSubmitEditMessage = async (event: React.FormEvent) => {
+    event.preventDefault();
+
+    try {
+      loadingMessage.show(`Updating message content...`);
+      await MatrixApiEvent.SetTextMessageContent(
+        p.room,
+        p.message.event_id,
+        editMessage!
+      );
+      setEditMessage(undefined);
+    } catch (e) {
+      console.error(`Failed to edit message!`, e);
+      alert(`Failed to edit message content! ${e}`);
+    } finally {
+      loadingMessage.hide();
+    }
+  };
+
   return (
     <>
       {/* Print date if required */}
@@ -171,11 +201,12 @@ function RoomMessage(p: {
             right: "0px",
           }}
         >
-          {p.message.account === user.info.matrix_user_id && (
-            <Button>
-              <EditIcon />
-            </Button>
-          )}
+          {p.message.account === user.info.matrix_user_id &&
+            !p.message.image && (
+              <Button onClick={handleEditMessage}>
+                <EditIcon />
+              </Button>
+            )}
           {p.message.account === user.info.matrix_user_id && (
             <Button onClick={handleDeleteMessage}>
               <DeleteIcon color="error" />
@@ -184,6 +215,7 @@ function RoomMessage(p: {
         </ButtonGroup>
       </Box>
 
+      {/* Full screen image dialog */}
       <Dialog open={showImageFullScreen} onClose={closeImageFullScreen}>
         <img
           src={MatrixApiEvent.GetEventFileURL(
@@ -193,6 +225,36 @@ function RoomMessage(p: {
           )}
         />
       </Dialog>
+
+      {/* Edit message dialog */}
+      <Dialog open={!!editMessage} onClose={handleCancelEditMessage} fullWidth>
+        <DialogTitle>Subscribe</DialogTitle>
+        <DialogContent>
+          <DialogContentText>Enter new message content:</DialogContentText>
+          <form
+            onSubmit={handleSubmitEditMessage}
+            id={`edit-message-${p.message.event_id}`}
+          >
+            <TextField
+              autoFocus
+              required
+              margin="dense"
+              label="New content"
+              type="text"
+              fullWidth
+              variant="standard"
+              value={editMessage}
+              onChange={(e) => setEditMessage(e.target.value)}
+            />
+          </form>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={handleCancelEditMessage}>Cancel</Button>
+          <Button type="submit" form={`edit-message-${p.message.event_id}`}>
+            Edit
+          </Button>
+        </DialogActions>
+      </Dialog>
     </>
   );
 }