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:
@@ -1,15 +1,6 @@
|
||||
# React + Vite
|
||||
# textsender
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
|
||||
Frontend web app used to send messages
|
||||
|
||||
# Getting started
|
||||
|
||||
|
||||
+1
-2
@@ -2,9 +2,8 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React</title>
|
||||
<title>textsender</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
||||
{
|
||||
"name": "textsender",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"lockfileVersion": 3,
|
||||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "textsender",
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"dependencies": {
|
||||
"dotenv": "^17.4.2",
|
||||
"react": "^19.2.7",
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "textsender",
|
||||
"private": true,
|
||||
"version": "0.0.9",
|
||||
"version": "0.0.10",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -20,6 +20,25 @@ export const scheduleApi = {
|
||||
}
|
||||
},
|
||||
|
||||
getScheduledMessage: async (userId, authBearerToken) => {
|
||||
const response = await fetch(
|
||||
`${API_BASE_URL}/api/v1/schedule/message?user_id=${userId}`,
|
||||
{
|
||||
method: 'GET',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Authorization: authBearerToken,
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error('Error getting scheduled message');
|
||||
} else {
|
||||
return response.json();
|
||||
}
|
||||
},
|
||||
|
||||
prepareMessage: async (reqBody, authBearerToken) => {
|
||||
console.log('Preparing Scheduled message');
|
||||
|
||||
|
||||
@@ -8,6 +8,8 @@ import './Dashboard.css';
|
||||
import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
|
||||
import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
|
||||
|
||||
import { APP_NAME } from '../constants/app';
|
||||
|
||||
const Dashboard = () => {
|
||||
const navigate = useNavigate();
|
||||
const [activeView, setActiveView] = useState('dashboard');
|
||||
@@ -53,7 +55,7 @@ const Dashboard = () => {
|
||||
{/* Navbar */}
|
||||
<nav className="dashboard-nav">
|
||||
<div className="nav-logo">
|
||||
<span className="logo-text">Dashboard</span>
|
||||
<span className="logo-text">{APP_NAME}</span>
|
||||
</div>
|
||||
<div className="nav-links">
|
||||
<button
|
||||
@@ -62,12 +64,6 @@ const Dashboard = () => {
|
||||
>
|
||||
Dashboard
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
|
||||
onClick={() => handleNavClick('settings')}
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
||||
onClick={() => handleNavClick('profile')}
|
||||
@@ -159,11 +155,6 @@ const Dashboard = () => {
|
||||
Dashboard view is active. Select one of the buttons above.
|
||||
</p>
|
||||
)}
|
||||
{activeView === 'settings' && (
|
||||
<p className="view-text">
|
||||
Settings view - Configuration options will go here.
|
||||
</p>
|
||||
)}
|
||||
{activeView === 'profile' && (
|
||||
<p className="view-text">
|
||||
Profile view - User information will go here.
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { tokenService } from '../services/TokenService';
|
||||
import { userApi } from '../api/loginApi';
|
||||
import { APP_NAME } from '../constants/app';
|
||||
|
||||
import './ProfileForm.css';
|
||||
|
||||
@@ -224,7 +225,7 @@ const ProfileForm = () => {
|
||||
{/* Navbar */}
|
||||
<nav className="dashboard-nav">
|
||||
<div className="nav-logo">
|
||||
<span className="logo-text">Dashboard</span>
|
||||
<span className="logo-text">{APP_NAME}</span>
|
||||
</div>
|
||||
<div className="nav-links">
|
||||
<button
|
||||
@@ -233,12 +234,6 @@ const ProfileForm = () => {
|
||||
>
|
||||
Dashboard
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
|
||||
onClick={() => handleNavClick('settings')}
|
||||
>
|
||||
Settings
|
||||
</button>
|
||||
<button
|
||||
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
||||
onClick={() => handleNavClick('profile')}
|
||||
|
||||
@@ -355,3 +355,102 @@
|
||||
.view-sent-message-list-container::-webkit-scrollbar-thumb:hover {
|
||||
background: #a1a1a1;
|
||||
}
|
||||
|
||||
.view-sent-message-tabs {
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 10px 20px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 3px solid transparent;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
color: #6b7280;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
color: #3b82f6;
|
||||
border-bottom-color: #3b82f6;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
color: #374151;
|
||||
background-color: #f9fafb;
|
||||
}
|
||||
|
||||
.search-container {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h3 {
|
||||
margin: 0;
|
||||
color: #111827;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.last-updated {
|
||||
font-size: 12px;
|
||||
color: #6b7280;
|
||||
}
|
||||
|
||||
.no-messages {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
color: #6b7280;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.status-processing {
|
||||
background-color: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.status-sent {
|
||||
background-color: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.status-failed {
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
|
||||
.status-default {
|
||||
background-color: #f3f4f6;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
+175
-221
@@ -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 = () => {
|
||||
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
|
||||
</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>
|
||||
)}
|
||||
</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}
|
||||
{/* 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>
|
||||
</div>
|
||||
|
||||
{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>
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
|
||||
@@ -2,3 +2,4 @@ export const DATA_KEY_ACCESS_TOKEN = 'access_token';
|
||||
export const DATA_KEY_REGISTERED_USER_ID = 'registered_user_id';
|
||||
export const DATA_KEY_USER_ID = 'user_id';
|
||||
export const DATA_KEY_ADDED_CONTACT_ID = 'added_contact_id';
|
||||
export const APP_NAME = 'textsender';
|
||||
|
||||
Reference in New Issue
Block a user