tsk-10: View scheduled messages (#17)
Closes #10 Reviewed-on: phoenix/textsender#17
This commit was merged in pull request #17.
This commit is contained in:
+177
-223
@@ -1,20 +1,21 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
|
||||
import { tokenService } from '../services/TokenService';
|
||||
import { messageEventResponseApi } from '../api/messageEventResponseApi';
|
||||
|
||||
import { scheduleApi } from '../api/scheduleApi';
|
||||
import './ViewSentMessages.css';
|
||||
|
||||
const ViewSentMessages = ({
|
||||
isOpen,
|
||||
onClose,
|
||||
title = 'View Sent Messages ',
|
||||
title = 'View Sent Messages',
|
||||
}) => {
|
||||
const [sentMessages, setSentMessages] = useState([]);
|
||||
const [scheduledMessages, setScheduledMessages] = useState([]);
|
||||
const [lastUpdated, setLastUpdated] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState(null);
|
||||
const [searchTerm, setSearchTerm] = useState('');
|
||||
const [activeTab, setActiveTab] = useState('sent');
|
||||
|
||||
// Fetch the sent messages or Message Event Responses
|
||||
const fetchSentMessages = useCallback(async () => {
|
||||
@@ -33,7 +34,6 @@ const ViewSentMessages = ({
|
||||
setLastUpdated(new Date());
|
||||
setSentMessages(response.data);
|
||||
} else {
|
||||
setLoading(false);
|
||||
throw new Error(response.message || 'Failed to load sent messages');
|
||||
}
|
||||
} catch (err) {
|
||||
@@ -44,8 +44,32 @@ const ViewSentMessages = ({
|
||||
}
|
||||
}, []);
|
||||
|
||||
const fetchScheduledMessages = useCallback(async () => {
|
||||
try {
|
||||
const userId = tokenService.getUserId();
|
||||
const response = await scheduleApi.getScheduledMessage(
|
||||
userId,
|
||||
tokenService.bearerToken()
|
||||
);
|
||||
if (response) {
|
||||
const scheduledMessages = response.data;
|
||||
|
||||
setScheduledMessages(scheduledMessages);
|
||||
} else {
|
||||
throw new Error(response.message || 'Failed to get scheduled messages');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to load scheduled messages:', err);
|
||||
setScheduledMessages([]);
|
||||
}
|
||||
}, []);
|
||||
|
||||
const handleRefresh = () => {
|
||||
fetchSentMessages();
|
||||
if (activeTab === 'sent') {
|
||||
fetchSentMessages();
|
||||
} else {
|
||||
fetchScheduledMessages();
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
@@ -55,6 +79,13 @@ const ViewSentMessages = ({
|
||||
}
|
||||
}, [isOpen, fetchSentMessages]);
|
||||
|
||||
// Fetch scheduled messages when tab is switched
|
||||
useEffect(() => {
|
||||
if (activeTab === 'scheduled' && isOpen) {
|
||||
fetchScheduledMessages();
|
||||
}
|
||||
}, [activeTab, isOpen, fetchScheduledMessages]);
|
||||
|
||||
const filteredSentMessages = sentMessages.filter((sentMessage) => {
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
return (
|
||||
@@ -66,6 +97,15 @@ const ViewSentMessages = ({
|
||||
);
|
||||
});
|
||||
|
||||
// Filter scheduled messages
|
||||
const filteredScheduledMessages = scheduledMessages.filter((message) => {
|
||||
const searchLower = searchTerm.toLowerCase();
|
||||
return (
|
||||
(message.status && message.status.toLowerCase().includes(searchLower)) ||
|
||||
(message.id && message.id.toString().includes(searchTerm))
|
||||
);
|
||||
});
|
||||
|
||||
const formatLastUpdated = () => {
|
||||
if (!lastUpdated) return 'Never';
|
||||
return lastUpdated.toLocaleTimeString([], {
|
||||
@@ -74,6 +114,25 @@ const ViewSentMessages = ({
|
||||
});
|
||||
};
|
||||
|
||||
// Format date for scheduled messages
|
||||
const formatScheduledDate = (dateString) => {
|
||||
return new Date(dateString).toLocaleString();
|
||||
};
|
||||
|
||||
// Get status badge styling
|
||||
const getStatusBadgeClass = (status) => {
|
||||
switch (status) {
|
||||
case 'PROCESSING':
|
||||
return 'status-processing';
|
||||
case 'SENT':
|
||||
return 'status-sent';
|
||||
case 'FAILED':
|
||||
return 'status-failed';
|
||||
default:
|
||||
return 'status-default';
|
||||
}
|
||||
};
|
||||
|
||||
if (!isOpen) return null;
|
||||
|
||||
return (
|
||||
@@ -90,13 +149,40 @@ const ViewSentMessages = ({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Add tabs for navigation */}
|
||||
<div className="view-sent-message-tabs">
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'sent' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('sent')}
|
||||
>
|
||||
Sent Messages
|
||||
</button>
|
||||
<button
|
||||
className={`tab-button ${activeTab === 'scheduled' ? 'active' : ''}`}
|
||||
onClick={() => setActiveTab('scheduled')}
|
||||
>
|
||||
Scheduled Messages
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Search input */}
|
||||
<div className="search-container">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search messages..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
className="search-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="view-sent-message-form">
|
||||
{error && (
|
||||
<div className="submit-error">
|
||||
<div style={{ marginBottom: '8px' }}>{error}</div>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
onStype={{
|
||||
style={{
|
||||
background: '#ef4444',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
@@ -113,233 +199,101 @@ const ViewSentMessages = ({
|
||||
|
||||
{loading ? (
|
||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||
<div className="loafing-spinner" />
|
||||
<p style={{ marginTop: '20px', color: '#4b5563' }}>
|
||||
Loading sent messages
|
||||
</p>
|
||||
<div className="loading-spinner" />
|
||||
<p>Loading messages...</p>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
flexWrap: 'wrap',
|
||||
gap: '10px',
|
||||
}}
|
||||
>
|
||||
<button
|
||||
onClick={handleRefresh}
|
||||
style={{
|
||||
background: '#f3f4f6',
|
||||
color: '#4b5563',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '6px',
|
||||
padding: '8px 16px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<span></span> Refresh
|
||||
</button>
|
||||
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Search sent messages..."
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
style={{
|
||||
flex: 1,
|
||||
minWidth: '200px',
|
||||
maxWidth: '300px',
|
||||
padding: '8px 12px',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '6px',
|
||||
fontSize: '14px',
|
||||
}}
|
||||
/>
|
||||
|
||||
<div
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: '#6b7280',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
}}
|
||||
>
|
||||
<span>Updated: {formatLastUpdated()}</span>
|
||||
<span
|
||||
style={{
|
||||
display: 'inline-block',
|
||||
width: '8px',
|
||||
height: '8px',
|
||||
borderRadius: '50%',
|
||||
background: lastUpdated ? '#10b981' : '#9ca3af',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sent Messages List */}
|
||||
{filteredSentMessages.length === 0 ? (
|
||||
<div
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
padding: '40px',
|
||||
color: '#4b5563',
|
||||
}}
|
||||
>
|
||||
<div style={{ fontSize: '48px', marginBottom: '16px' }}>
|
||||
X
|
||||
{/* Sent Messages Tab Content */}
|
||||
{activeTab === 'sent' && (
|
||||
<div className="messages-section">
|
||||
<div className="section-header">
|
||||
<h3>Sent Messages</h3>
|
||||
<span className="last-updated">
|
||||
Last updated: {formatLastUpdated()}
|
||||
</span>
|
||||
</div>
|
||||
<p
|
||||
style={{
|
||||
fontSize: '18px',
|
||||
fontWeight: '500',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
{searchTerm
|
||||
? 'No matching sent messages found'
|
||||
: 'No sent messages available'}
|
||||
</p>
|
||||
<p style={{ marginBottom: '20px' }}>
|
||||
{searchTerm
|
||||
? 'Try a different search term'
|
||||
: 'Create a contact and send a message to get started'}
|
||||
</p>
|
||||
{searchTerm && (
|
||||
<button
|
||||
onClick={() => setSearchTerm('')}
|
||||
style={{
|
||||
background: '#f3f4f6',
|
||||
color: '#4b5563',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '6px',
|
||||
padding: '8px 16px',
|
||||
cursor: 'pointer',
|
||||
fontSize: '14px',
|
||||
marginBottom: '10px',
|
||||
}}
|
||||
>
|
||||
Clear Search
|
||||
</button>
|
||||
|
||||
{filteredSentMessages.length > 0 ? (
|
||||
<div className="view-sent-message-list-container">
|
||||
<table className="view-sent-message-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Status</th>
|
||||
<th>Sent Time</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredSentMessages.map((message) => (
|
||||
<tr key={message.id}>
|
||||
<td>{message.id.substring(0, 8)}...</td>
|
||||
<td>
|
||||
<span
|
||||
className={`status-badge ${getStatusBadgeClass(message.status)}`}
|
||||
>
|
||||
{message.status}
|
||||
</span>
|
||||
</td>
|
||||
<td>{message.sent || 'N/A'}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-messages">No sent messages found.</div>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
maxHeight: '400px',
|
||||
overflowY: 'auto',
|
||||
border: '1px solid #e5e7eb',
|
||||
borderRadius: '8px',
|
||||
background: '#fafafa',
|
||||
}}
|
||||
>
|
||||
<div style={{ padding: '4px' }}>
|
||||
{filteredSentMessages.map((sentMessage, index) => (
|
||||
<div
|
||||
key={sentMessage.id}
|
||||
style={{
|
||||
padding: '16px',
|
||||
borderBottom:
|
||||
index < filteredSentMessages.length - 1
|
||||
? '1px solid #e5e7eb'
|
||||
: 'none',
|
||||
background: 'white',
|
||||
transition: 'all 0.2s',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'flex-start',
|
||||
marginBottom: '8px',
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
}}
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
background: '#667eea',
|
||||
color: 'white',
|
||||
width: '28px',
|
||||
height: '28px',
|
||||
borderRadius: '50%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
fontSize: '12px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{index + 1}
|
||||
</span>
|
||||
<div>
|
||||
<h4
|
||||
style={{
|
||||
margin: 0,
|
||||
color: '#111827',
|
||||
fontSize: '16px',
|
||||
fontWeight: '600',
|
||||
}}
|
||||
>
|
||||
{sentMessage.status}
|
||||
</h4>
|
||||
<h5>Sent: {sentMessage.sent}</h5>
|
||||
</div>
|
||||
</div>
|
||||
<span
|
||||
style={{
|
||||
fontSize: '12px',
|
||||
color: '#9ca3af',
|
||||
background: '#f3f4f6',
|
||||
padding: '2px 8px',
|
||||
borderRadius: '4px',
|
||||
}}
|
||||
>
|
||||
Id: {sentMessage.id}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Scheduled Messages Tab Content */}
|
||||
{activeTab === 'scheduled' && (
|
||||
<div className="messages-section">
|
||||
<div className="section-header">
|
||||
<h3>Scheduled Messages</h3>
|
||||
</div>
|
||||
</>
|
||||
|
||||
{filteredScheduledMessages.length > 0 ? (
|
||||
<div className="view-sent-message-list-container">
|
||||
<table className="view-sent-message-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Scheduled Time</th>
|
||||
<th>Created Time</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{filteredScheduledMessages.map((message) => (
|
||||
<tr key={message.id}>
|
||||
<td>{message.id.substring(0, 8)}...</td>
|
||||
<td>
|
||||
{formatScheduledDate(message.scheduled)}
|
||||
</td>
|
||||
<td>{formatScheduledDate(message.created)}</td>
|
||||
<td>
|
||||
<span
|
||||
className={`status-badge ${getStatusBadgeClass(message.status)}`}
|
||||
>
|
||||
{message.status}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
) : (
|
||||
<div className="no-messages">
|
||||
No scheduled messages found.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<div className="form-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="cancel-btn"
|
||||
onClick={onClose}
|
||||
disabled={loading}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="submit-btn"
|
||||
onClick={handleRefresh}
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Refreshing...' : 'Refresh List'}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user