tsk-6: Send Message (#22)

Closes #6

Reviewed-on: phoenix/textsender#22
Co-authored-by: phoenix <kundeng00@pm.me>
Co-committed-by: phoenix <kundeng00@pm.me>

src/components/SendMessageWizard/MessageForm.jsx

@@ -0,0 +1,104 @@
+import React, { useState } from 'react';
+import styles from './SendMessageWizard.module.css';
+import { tokenService } from '../../services/TokenService';
+import { messageApi, CreateMessageRequest } from '../../api/messageApi';
+
+function MessageForm({ message, onMessageChange, onMessageCreated }) {
+  const [characterCount, setCharacterCount] = useState(message.length);
+  const [isCreatingMessage, setIsCreatingMessage] = useState(false);
+  const [createdMessage, setCreatedMessage] = useState(null);
+
+  const handleMessageChange = (e) => {
+    const newMessage = e.target.value;
+    onMessageChange(newMessage);
+    setCharacterCount(newMessage.length);
+  };
+
+  const createMessage = async () => {
+    if (!message.trim()) {
+      return;
+    }
+
+    setIsCreatingMessage(true);
+    setCreatedMessage(null);
+
+    try {
+      const userId = tokenService.getUserId();
+      let reqBod = new CreateMessageRequest();
+      reqBod.user_id = userId;
+      reqBod.content = message;
+      const response = await messageApi.createMessage(
+        reqBod,
+        tokenService.bearerToken()
+      );
+
+      if (!response) {
+        throw new Error('Failed to create message');
+      } else {
+        const createdMessage = response.data[0];
+        setCreatedMessage(createdMessage);
+        if (onMessageCreated) {
+          console.log('Setting createdMessage');
+          onMessageCreated(createdMessage);
+        }
+        console.log('Created message: ', createdMessage);
+      }
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsCreatingMessage(false);
+    }
+  };
+
+  return (
+    <div className={styles.messageForm}>
+      <div className={styles.formGroup}>
+        <label htmlFor="message" className={styles.formLabel}>
+          Your Message
+        </label>
+        <textarea
+          id="message"
+          value={message}
+          onChange={handleMessageChange}
+          placeholder="Type your message here..."
+          className={styles.messageTextarea}
+          rows={8}
+        />
+        <div className={styles.textareaFooter}>
+          <span className={styles.characterCount}>
+            {characterCount} characters
+          </span>
+          <button
+            type="button"
+            onClick={createMessage}
+            disabled={isCreatingMessage || !message.trim()}
+            className={styles.testButton}
+          >
+            {isCreatingMessage ? 'Creating message...' : 'Create message'}
+          </button>
+        </div>
+      </div>
+
+      {createdMessage && (
+        <div
+          className={`${styles.createdMessage} ${
+            createdMessage.content ? styles.success : styles.error
+          }`}
+        >
+          {createdMessage.content}
+        </div>
+      )}
+
+      <div className={styles.messageTips}>
+        <h4>Tips:</h4>
+        <ul>
+          <li>Keep messages clear and concise</li>
+          <li>Use [Name] placeholder for personalization</li>
+          <li>Check spelling and grammar</li>
+        </ul>
+      </div>
+    </div>
+  );
+}
+
+export default MessageForm;