122 lines
3.7 KiB
TypeScript
122 lines
3.7 KiB
TypeScript
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 {
|
|
const formData = new FormData();
|
|
formData.append('receiverId', recipient.id);
|
|
formData.append('subject', subject);
|
|
formData.append('content', content);
|
|
|
|
await messageAPI.sendMessage(formData);
|
|
|
|
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; |