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.
|
Frontend web app used to send messages
|
||||||
|
|
||||||
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.
|
|
||||||
|
|
||||||
# Getting started
|
# Getting started
|
||||||
|
|
||||||
|
|||||||
+1
-2
@@ -2,9 +2,8 @@
|
|||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<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" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Vite + React</title>
|
<title>textsender</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
Generated
+2
-2
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "textsender",
|
"name": "textsender",
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "textsender",
|
"name": "textsender",
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dotenv": "^17.4.2",
|
"dotenv": "^17.4.2",
|
||||||
"react": "^19.2.7",
|
"react": "^19.2.7",
|
||||||
|
|||||||
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "textsender",
|
"name": "textsender",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.9",
|
"version": "0.0.10",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"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) => {
|
prepareMessage: async (reqBody, authBearerToken) => {
|
||||||
console.log('Preparing Scheduled message');
|
console.log('Preparing Scheduled message');
|
||||||
|
|
||||||
|
|||||||
@@ -8,6 +8,8 @@ import './Dashboard.css';
|
|||||||
import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
|
import SendMessageWizardModal from './SendMessageWizard/SendMessageWizardModal';
|
||||||
import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
|
import ViewContactWizardModal from './ViewContactWizard/ViewContactWizardModal';
|
||||||
|
|
||||||
|
import { APP_NAME } from '../constants/app';
|
||||||
|
|
||||||
const Dashboard = () => {
|
const Dashboard = () => {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [activeView, setActiveView] = useState('dashboard');
|
const [activeView, setActiveView] = useState('dashboard');
|
||||||
@@ -53,7 +55,7 @@ const Dashboard = () => {
|
|||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<nav className="dashboard-nav">
|
<nav className="dashboard-nav">
|
||||||
<div className="nav-logo">
|
<div className="nav-logo">
|
||||||
<span className="logo-text">Dashboard</span>
|
<span className="logo-text">{APP_NAME}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="nav-links">
|
<div className="nav-links">
|
||||||
<button
|
<button
|
||||||
@@ -62,12 +64,6 @@ const Dashboard = () => {
|
|||||||
>
|
>
|
||||||
Dashboard
|
Dashboard
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleNavClick('settings')}
|
|
||||||
>
|
|
||||||
Settings
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
||||||
onClick={() => handleNavClick('profile')}
|
onClick={() => handleNavClick('profile')}
|
||||||
@@ -159,11 +155,6 @@ const Dashboard = () => {
|
|||||||
Dashboard view is active. Select one of the buttons above.
|
Dashboard view is active. Select one of the buttons above.
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
{activeView === 'settings' && (
|
|
||||||
<p className="view-text">
|
|
||||||
Settings view - Configuration options will go here.
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
{activeView === 'profile' && (
|
{activeView === 'profile' && (
|
||||||
<p className="view-text">
|
<p className="view-text">
|
||||||
Profile view - User information will go here.
|
Profile view - User information will go here.
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
|
|
||||||
import { tokenService } from '../services/TokenService';
|
import { tokenService } from '../services/TokenService';
|
||||||
import { userApi } from '../api/loginApi';
|
import { userApi } from '../api/loginApi';
|
||||||
|
import { APP_NAME } from '../constants/app';
|
||||||
|
|
||||||
import './ProfileForm.css';
|
import './ProfileForm.css';
|
||||||
|
|
||||||
@@ -224,7 +225,7 @@ const ProfileForm = () => {
|
|||||||
{/* Navbar */}
|
{/* Navbar */}
|
||||||
<nav className="dashboard-nav">
|
<nav className="dashboard-nav">
|
||||||
<div className="nav-logo">
|
<div className="nav-logo">
|
||||||
<span className="logo-text">Dashboard</span>
|
<span className="logo-text">{APP_NAME}</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="nav-links">
|
<div className="nav-links">
|
||||||
<button
|
<button
|
||||||
@@ -233,12 +234,6 @@ const ProfileForm = () => {
|
|||||||
>
|
>
|
||||||
Dashboard
|
Dashboard
|
||||||
</button>
|
</button>
|
||||||
<button
|
|
||||||
className={`nav-link ${activeView === 'settings' ? 'active' : ''}`}
|
|
||||||
onClick={() => handleNavClick('settings')}
|
|
||||||
>
|
|
||||||
Settings
|
|
||||||
</button>
|
|
||||||
<button
|
<button
|
||||||
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
className={`nav-link ${activeView === 'profile' ? 'active' : ''}`}
|
||||||
onClick={() => handleNavClick('profile')}
|
onClick={() => handleNavClick('profile')}
|
||||||
|
|||||||
@@ -355,3 +355,102 @@
|
|||||||
.view-sent-message-list-container::-webkit-scrollbar-thumb:hover {
|
.view-sent-message-list-container::-webkit-scrollbar-thumb:hover {
|
||||||
background: #a1a1a1;
|
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;
|
||||||
|
}
|
||||||
|
|||||||
+174
-220
@@ -1,8 +1,7 @@
|
|||||||
import { useState, useEffect, useCallback } from 'react';
|
import { useState, useEffect, useCallback } from 'react';
|
||||||
|
|
||||||
import { tokenService } from '../services/TokenService';
|
import { tokenService } from '../services/TokenService';
|
||||||
import { messageEventResponseApi } from '../api/messageEventResponseApi';
|
import { messageEventResponseApi } from '../api/messageEventResponseApi';
|
||||||
|
import { scheduleApi } from '../api/scheduleApi';
|
||||||
import './ViewSentMessages.css';
|
import './ViewSentMessages.css';
|
||||||
|
|
||||||
const ViewSentMessages = ({
|
const ViewSentMessages = ({
|
||||||
@@ -11,10 +10,12 @@ const ViewSentMessages = ({
|
|||||||
title = 'View Sent Messages',
|
title = 'View Sent Messages',
|
||||||
}) => {
|
}) => {
|
||||||
const [sentMessages, setSentMessages] = useState([]);
|
const [sentMessages, setSentMessages] = useState([]);
|
||||||
|
const [scheduledMessages, setScheduledMessages] = useState([]);
|
||||||
const [lastUpdated, setLastUpdated] = useState(null);
|
const [lastUpdated, setLastUpdated] = useState(null);
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [error, setError] = useState(null);
|
const [error, setError] = useState(null);
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
const [searchTerm, setSearchTerm] = useState('');
|
||||||
|
const [activeTab, setActiveTab] = useState('sent');
|
||||||
|
|
||||||
// Fetch the sent messages or Message Event Responses
|
// Fetch the sent messages or Message Event Responses
|
||||||
const fetchSentMessages = useCallback(async () => {
|
const fetchSentMessages = useCallback(async () => {
|
||||||
@@ -33,7 +34,6 @@ const ViewSentMessages = ({
|
|||||||
setLastUpdated(new Date());
|
setLastUpdated(new Date());
|
||||||
setSentMessages(response.data);
|
setSentMessages(response.data);
|
||||||
} else {
|
} else {
|
||||||
setLoading(false);
|
|
||||||
throw new Error(response.message || 'Failed to load sent messages');
|
throw new Error(response.message || 'Failed to load sent messages');
|
||||||
}
|
}
|
||||||
} catch (err) {
|
} 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 = () => {
|
const handleRefresh = () => {
|
||||||
|
if (activeTab === 'sent') {
|
||||||
fetchSentMessages();
|
fetchSentMessages();
|
||||||
|
} else {
|
||||||
|
fetchScheduledMessages();
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@@ -55,6 +79,13 @@ const ViewSentMessages = ({
|
|||||||
}
|
}
|
||||||
}, [isOpen, fetchSentMessages]);
|
}, [isOpen, fetchSentMessages]);
|
||||||
|
|
||||||
|
// Fetch scheduled messages when tab is switched
|
||||||
|
useEffect(() => {
|
||||||
|
if (activeTab === 'scheduled' && isOpen) {
|
||||||
|
fetchScheduledMessages();
|
||||||
|
}
|
||||||
|
}, [activeTab, isOpen, fetchScheduledMessages]);
|
||||||
|
|
||||||
const filteredSentMessages = sentMessages.filter((sentMessage) => {
|
const filteredSentMessages = sentMessages.filter((sentMessage) => {
|
||||||
const searchLower = searchTerm.toLowerCase();
|
const searchLower = searchTerm.toLowerCase();
|
||||||
return (
|
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 = () => {
|
const formatLastUpdated = () => {
|
||||||
if (!lastUpdated) return 'Never';
|
if (!lastUpdated) return 'Never';
|
||||||
return lastUpdated.toLocaleTimeString([], {
|
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;
|
if (!isOpen) return null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -90,13 +149,40 @@ const ViewSentMessages = ({
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</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">
|
<div className="view-sent-message-form">
|
||||||
{error && (
|
{error && (
|
||||||
<div className="submit-error">
|
<div className="submit-error">
|
||||||
<div style={{ marginBottom: '8px' }}>{error}</div>
|
<div style={{ marginBottom: '8px' }}>{error}</div>
|
||||||
<button
|
<button
|
||||||
onClick={handleRefresh}
|
onClick={handleRefresh}
|
||||||
onStype={{
|
style={{
|
||||||
background: '#ef4444',
|
background: '#ef4444',
|
||||||
color: 'white',
|
color: 'white',
|
||||||
border: 'none',
|
border: 'none',
|
||||||
@@ -113,233 +199,101 @@ const ViewSentMessages = ({
|
|||||||
|
|
||||||
{loading ? (
|
{loading ? (
|
||||||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||||||
<div className="loafing-spinner" />
|
<div className="loading-spinner" />
|
||||||
<p style={{ marginTop: '20px', color: '#4b5563' }}>
|
<p>Loading messages...</p>
|
||||||
Loading sent messages
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div
|
{/* Sent Messages Tab Content */}
|
||||||
style={{
|
{activeTab === 'sent' && (
|
||||||
display: 'flex',
|
<div className="messages-section">
|
||||||
justifyContent: 'space-between',
|
<div className="section-header">
|
||||||
alignItems: 'center',
|
<h3>Sent Messages</h3>
|
||||||
marginBottom: '20px',
|
<span className="last-updated">
|
||||||
flexWrap: 'wrap',
|
Last updated: {formatLastUpdated()}
|
||||||
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}
|
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</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>
|
||||||
|
) : (
|
||||||
|
<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>
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<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>
|
</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_REGISTERED_USER_ID = 'registered_user_id';
|
||||||
export const DATA_KEY_USER_ID = 'user_id';
|
export const DATA_KEY_USER_ID = 'user_id';
|
||||||
export const DATA_KEY_ADDED_CONTACT_ID = 'added_contact_id';
|
export const DATA_KEY_ADDED_CONTACT_ID = 'added_contact_id';
|
||||||
|
export const APP_NAME = 'textsender';
|
||||||
|
|||||||
Reference in New Issue
Block a user