messages and reviews

2025-07-17 00:16:01 -04:00
parent aa3adc58ca
commit 1dbe821e70
21 changed files with 1981 additions and 102 deletions
--- a/frontend/src/components/MessageModal.tsx
+++ b/frontend/src/components/MessageModal.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { messageAPI } from '../services/api';
+import { User } from '../types';
+
+interface MessageModalProps {
+  show: boolean;
+  onClose: () => void;
+  recipient: User;
+  onSuccess?: () => void;
+}
+
+const MessageModal: React.FC<MessageModalProps> = ({ show, onClose, recipient, onSuccess }) => {
+  const [subject, setSubject] = useState('');
+  const [content, setContent] = useState('');
+  const [sending, setSending] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError(null);
+    setSending(true);
+
+    try {
+      await messageAPI.sendMessage({
+        receiverId: recipient.id,
+        subject,
+        content
+      });
+
+      setSubject('');
+      setContent('');
+      onClose();
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (err: any) {
+      setError(err.response?.data?.error || 'Failed to send message');
+    } finally {
+      setSending(false);
+    }
+  };
+
+  if (!show) return null;
+
+  return (
+    <div className="modal d-block" tabIndex={-1} style={{ backgroundColor: 'rgba(0,0,0,0.5)' }}>
+      <div className="modal-dialog modal-dialog-centered">
+        <div className="modal-content">
+          <div className="modal-header">
+            <h5 className="modal-title">Send Message to {recipient.firstName} {recipient.lastName}</h5>
+            <button type="button" className="btn-close" onClick={onClose}></button>
+          </div>
+          <form onSubmit={handleSubmit}>
+            <div className="modal-body">
+              {error && (
+                <div className="alert alert-danger" role="alert">
+                  {error}
+                </div>
+              )}
+              
+              <div className="mb-3">
+                <label htmlFor="subject" className="form-label">Subject</label>
+                <input
+                  type="text"
+                  className="form-control"
+                  id="subject"
+                  value={subject}
+                  onChange={(e) => setSubject(e.target.value)}
+                  required
+                  disabled={sending}
+                />
+              </div>
+
+              <div className="mb-3">
+                <label htmlFor="content" className="form-label">Message</label>
+                <textarea
+                  className="form-control"
+                  id="content"
+                  rows={5}
+                  value={content}
+                  onChange={(e) => setContent(e.target.value)}
+                  required
+                  disabled={sending}
+                  placeholder="Write your message here..."
+                ></textarea>
+              </div>
+            </div>
+            <div className="modal-footer">
+              <button 
+                type="button" 
+                className="btn btn-secondary" 
+                onClick={onClose}
+                disabled={sending}
+              >
+                Cancel
+              </button>
+              <button 
+                type="submit" 
+                className="btn btn-primary"
+                disabled={sending || !subject || !content}
+              >
+                {sending ? (
+                  <>
+                    <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span>
+                    Sending...
+                  </>
+                ) : (
+                  <>
+                    <i className="bi bi-send-fill me-2"></i>Send Message
+                  </>
+                )}
+              </button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default MessageModal;