0

i have made a pluggable react widget which has a text area used to enter and send message. For now, i am sending message just through on enter key press. For the text area, i am using draft js react package. The ultimate goal is to update the InputMessage attribute in ChatHelper entity located in mendix. But right now with my code, it doesn't seem to work or update the InputMessage attribute but when i checked the network tab in browser, it seem to commit the change that we made, but the change is still not there in InputMessage. Below is the code for my xml and jsx file.     code for jsx   import { createElement, useState, useEffect } from "react"; import { Editor, EditorState, RichUtils, ContentState } from "draft-js"; import 'draft-js/dist/Draft.css'; import "./ui/Testchat.css"; // Adjust the path to your CSS file   export const Testchat = (props) => {     const { InputMessage, mendixObject } = props;     const [editorState, setEditorState] = useState(() => EditorState.createEmpty());     const [displayMessage, setDisplayMessage] = useState(""); // State to hold the message for display       useEffect(() => {         if (typeof InputMessage === 'string') {             if (InputMessage.trim() !== "") {                 try {                     // Create ContentState from plain text                     const contentState = ContentState.createFromText(InputMessage);                     setEditorState(EditorState.createWithContent(contentState));                     setDisplayMessage(InputMessage); // Update the display message                 } catch (error) {                     console.error("Error creating ContentState:", error);                 }             } else {                 setDisplayMessage(""); // Clear display message if InputMessage is empty             }         }     }, [InputMessage]);       //for testb only       useEffect(() => {         console.log("Mendix Object:", mendixObject);     }, [mendixObject]);       if (mendixObject) {         console.log("InputMessage Attribute Exists:", mendixObject.get("InputMessage"));     } else "nothing"           //for testb inly       const handleKeyCommand = (command) => {         if (command === "send-message") {             sendMessage();             return "handled";         }         return RichUtils.handleKeyCommand(editorState, command);     };       const sendMessage = () => {         const contentState = editorState.getCurrentContent();         const rawContent = contentState.getPlainText(); // Get plain text           console.log("Plain Text to Send:", rawContent);           if (mendixObject) {             mendixObject.set("InputMessage", rawContent); // Update the InputMessage attribute             mx.data.commit({                 mxobj: mendixObject,                 callback: () => {                     console.log("Message saved successfully!");                     setEditorState(EditorState.createEmpty()); // Clear the editor after sending the message                     setDisplayMessage(""); // Clear the displayed message                 },                 error: (err) => {                     console.error("Failed to save message. Error:", err);                 }             });         } else {             // Fetch the mendixObject if not directly available             mx.data.get({                 xpath: "//TeamsIntegration.ChatHelper", // Adjust the XPath to your actual entity                 callback: function (objs) {                     if (objs && objs.length > 0) {                         const foundObject = objs[0]; // Assuming the first result is what you need                         foundObject.set("InputMessage", rawContent); // Update the InputMessage attribute                         mx.data.commit({                             mxobj: foundObject,                             callback: () => {                                 console.log("Message saved successfully!");                                 setEditorState(EditorState.createEmpty()); // Clear the editor after sending the message                                 setDisplayMessage(""); // Clear the displayed message                             },                             error: (err) => {                                 console.error("Failed to save message. Error:", err);                             }                         });                     } else {                         console.error("No objects found with the specified XPath.");                     }                 },                 error: function (err) {                     console.error("Failed to get object. Error:", err);                 }             });         }     };       const handleReturn = (e) => {         e.preventDefault();         sendMessage();         return "handled";     };       return (         <div style={{ border: '1px solid #ddd', padding: '10px', minHeight: '200px' }}>             <Editor                 editorState={editorState}                 handleKeyCommand={handleKeyCommand}                 handleReturn={handleReturn}                 onChange={setEditorState}                 placeholder="Type your message here..."             />             <div style={{ marginTop: '10px', color: '#555' }}>                 <strong>Input Message:</strong>                 <p>{displayMessage || "No message available"}</p>             </div>         </div>     ); };    

asked 2024-08-13

1 answers