phoenixandphoenix
34644d1cd2
Closes #6 Reviewed-on: phoenix/textsender#22 Co-authored-by: phoenix <kundeng00@pm.me> Co-committed-by: phoenix <kundeng00@pm.me>
424 lines
15 KiB
React
424 lines
15 KiB
React
import { useState, useEffect, useCallback } from 'react';
|
||
|
||
import { DATA_KEY_ACCESS_TOKEN } from '../constants/app';
|
||
import { tokenService } from '../services/TokenService';
|
||
import { contactApi } from '../api/contactApi';
|
||
|
||
import './ViewContact.css';
|
||
|
||
const ViewContact = ({ isOpen, onClose, title = 'View Contacts' }) => {
|
||
const [contacts, setContacts] = useState([]);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
const [lastUpdated, setLastUpdated] = useState(null);
|
||
const [searchTerm, setSearchTerm] = useState('');
|
||
|
||
// Fetch contacts when the popup opens
|
||
const fetchContacts = useCallback(async () => {
|
||
try {
|
||
setLoading(true);
|
||
setError(null);
|
||
|
||
const accessToken = localStorage.getItem(DATA_KEY_ACCESS_TOKEN);
|
||
const userId = tokenService.getUserId();
|
||
|
||
if (!accessToken) {
|
||
throw new Error('Authentication required. Please log in again.');
|
||
}
|
||
|
||
const result = await contactApi.getContactsWithUserId(
|
||
userId,
|
||
tokenService.bearerToken()
|
||
);
|
||
|
||
if (result.data) {
|
||
setContacts(result.data);
|
||
setLastUpdated(new Date());
|
||
} else {
|
||
setLoading(false);
|
||
throw new Error(result.message || 'Failed to load contacts');
|
||
}
|
||
} catch (err) {
|
||
console.error('Error fetching contacts:', err);
|
||
setError(err.message || 'Failed to load contacts. Please try again.');
|
||
setContacts([]);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (isOpen) {
|
||
console.log('This is when I would fetch contacts');
|
||
fetchContacts();
|
||
}
|
||
}, [isOpen, fetchContacts]);
|
||
|
||
// Handle refresh button click
|
||
const handleRefresh = () => {
|
||
fetchContacts();
|
||
};
|
||
|
||
// Filter contacts based on search term
|
||
const filteredContacts = contacts.filter((contact) => {
|
||
const searchLower = searchTerm.toLowerCase();
|
||
return (
|
||
(contact.phone_number &&
|
||
contact.phone_number.toLowerCase().includes(searchLower)) ||
|
||
(contact.first_name &&
|
||
contact.first_name.toLowerCase().includes(searchLower)) ||
|
||
(contact.last_name &&
|
||
contact.last_name.toLowerCase().includes(searchLower)) ||
|
||
(contact.id && contact.id.toString().includes(searchTerm))
|
||
);
|
||
});
|
||
|
||
// Format phone number for display
|
||
const formatPhoneNumber = (phone) => {
|
||
if (!phone) return 'N/A';
|
||
// Simple formatting - you can customize this
|
||
const cleaned = phone.replace(/\D/g, '');
|
||
if (cleaned.length === 10) {
|
||
return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6)}`;
|
||
}
|
||
return phone;
|
||
};
|
||
|
||
// Format timestamp
|
||
const formatLastUpdated = () => {
|
||
if (!lastUpdated) return 'Never';
|
||
return lastUpdated.toLocaleTimeString([], {
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
});
|
||
};
|
||
|
||
if (!isOpen) return null;
|
||
|
||
return (
|
||
<div className="contact-modal-overlay" onClick={onClose}>
|
||
<div className="contact-modal" onClick={(e) => e.stopPropagation()}>
|
||
<div className="contact-card">
|
||
<div className="contact-header">
|
||
<h2 className="contact-title">{title}</h2>
|
||
<button className="close-btn" onClick={onClose} aria-label="Close">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="contact-form">
|
||
{error && (
|
||
<div className="submit-error">
|
||
<div style={{ marginBottom: '8px' }}>{error}</div>
|
||
<button
|
||
onClick={handleRefresh}
|
||
style={{
|
||
background: '#ef4444',
|
||
color: 'white',
|
||
border: 'none',
|
||
borderRadius: '4px',
|
||
padding: '6px 12px',
|
||
cursor: 'pointer',
|
||
fontSize: '12px',
|
||
}}
|
||
>
|
||
Retry Now
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{loading ? (
|
||
<div style={{ textAlign: 'center', padding: '40px' }}>
|
||
<div className="loading-spinner" />
|
||
<p style={{ marginTop: '20px', color: '#4b5563' }}>
|
||
Loading contacts...
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<>
|
||
{/* Controls */}
|
||
<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>
|
||
|
||
{/* Search Input */}
|
||
<input
|
||
type="text"
|
||
placeholder="Search contacts..."
|
||
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>
|
||
|
||
{/* Contacts List */}
|
||
{filteredContacts.length === 0 ? (
|
||
<div
|
||
style={{
|
||
textAlign: 'center',
|
||
padding: '40px',
|
||
color: '#4b5563',
|
||
}}
|
||
>
|
||
<div style={{ fontSize: '48px', marginBottom: '16px' }}>
|
||
📭
|
||
</div>
|
||
<p
|
||
style={{
|
||
fontSize: '18px',
|
||
fontWeight: '500',
|
||
marginBottom: '8px',
|
||
}}
|
||
>
|
||
{searchTerm
|
||
? 'No matching contacts found'
|
||
: 'No contacts available'}
|
||
</p>
|
||
<p style={{ marginBottom: '20px' }}>
|
||
{searchTerm
|
||
? 'Try a different search term'
|
||
: 'Add your first contact 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' }}>
|
||
{filteredContacts.map((contact, index) => (
|
||
<div
|
||
key={contact.id}
|
||
style={{
|
||
padding: '16px',
|
||
borderBottom:
|
||
index < filteredContacts.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',
|
||
}}
|
||
>
|
||
{contact.first_name || contact.last_name
|
||
? `${contact.first_name || ''} ${contact.last_name || ''}`.trim()
|
||
: 'Unnamed Contact'}
|
||
</h4>
|
||
<p
|
||
style={{
|
||
margin: '4px 0 0 0',
|
||
color: '#6b7280',
|
||
fontSize: '14px',
|
||
}}
|
||
>
|
||
📱 {formatPhoneNumber(contact.phone_number)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<span
|
||
style={{
|
||
fontSize: '12px',
|
||
color: '#9ca3af',
|
||
background: '#f3f4f6',
|
||
padding: '2px 8px',
|
||
borderRadius: '4px',
|
||
}}
|
||
>
|
||
ID: {contact.id}
|
||
</span>
|
||
</div>
|
||
|
||
{/* Additional info */}
|
||
<div
|
||
style={{
|
||
marginLeft: '40px',
|
||
fontSize: '13px',
|
||
color: '#6b7280',
|
||
}}
|
||
>
|
||
{contact.created_at && (
|
||
<div style={{ marginTop: '4px' }}>
|
||
Created:{' '}
|
||
{new Date(
|
||
contact.created_at
|
||
).toLocaleDateString()}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Summary */}
|
||
<div
|
||
style={{
|
||
marginTop: '20px',
|
||
padding: '12px 16px',
|
||
background: '#f0f9ff',
|
||
borderRadius: '6px',
|
||
border: '1px solid #bae6fd',
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
fontSize: '14px',
|
||
}}
|
||
>
|
||
<div style={{ color: '#0369a1' }}>
|
||
<strong>{filteredContacts.length}</strong> contact
|
||
{filteredContacts.length !== 1 ? 's' : ''}
|
||
{searchTerm && ` (filtered from ${contacts.length})`}
|
||
</div>
|
||
<div style={{ color: '#0284c7', fontSize: '12px' }}>
|
||
{searchTerm
|
||
? 'Showing search results'
|
||
: 'All contacts loaded'}
|
||
</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>
|
||
);
|
||
};
|
||
|
||
export default ViewContact;
|