442 lines
19 KiB
React
442 lines
19 KiB
React
import { useState, useEffect } from 'react'
|
|
import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
|
|
import { Dropdown } from 'react-bootstrap'
|
|
import axios from 'axios'
|
|
import { useAuth } from './contexts/AuthContext'
|
|
import ConversationList from './components/ConversationList'
|
|
import MessageThread from './components/MessageThread'
|
|
import Activity from './components/Activity'
|
|
import Calls from './components/Calls'
|
|
import DateFilter from './components/DateFilter'
|
|
import Upload from './components/Upload'
|
|
import Search from './components/Search'
|
|
import ChangePasswordModal from './components/ChangePasswordModal'
|
|
import SettingsModal from './components/SettingsModal'
|
|
import './App.css'
|
|
|
|
const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8081/api'
|
|
|
|
function App() {
|
|
const navigate = useNavigate()
|
|
const location = useLocation()
|
|
const { user, logout } = useAuth()
|
|
const [conversations, setConversations] = useState([])
|
|
const [conversationsLoading, setConversationsLoading] = useState(false)
|
|
const [selectedConversation, setSelectedConversation] = useState(null)
|
|
const [startDate, setStartDate] = useState(null)
|
|
const [endDate, setEndDate] = useState(null)
|
|
const [dateRange, setDateRange] = useState({ min: null, max: null })
|
|
const [showUpload, setShowUpload] = useState(false)
|
|
const [showPasswordModal, setShowPasswordModal] = useState(false)
|
|
const [showSettingsModal, setShowSettingsModal] = useState(false)
|
|
const [searchFilter, setSearchFilter] = useState('')
|
|
const [version, setVersion] = useState('...')
|
|
const [settings, setSettings] = useState({
|
|
conversations: {
|
|
show_calls: true
|
|
}
|
|
})
|
|
|
|
// Mobile sidebar state
|
|
const [showSidebar, setShowSidebar] = useState(true)
|
|
|
|
// Search state (persisted across tab switches)
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [searchResults, setSearchResults] = useState([])
|
|
const [searchLoading, setSearchLoading] = useState(false)
|
|
const [searchExecuted, setSearchExecuted] = useState(false)
|
|
const [searchScrollPosition, setSearchScrollPosition] = useState(0)
|
|
|
|
// Derive activeView from URL
|
|
const activeView = location.pathname.startsWith('/activity')
|
|
? 'activity'
|
|
: location.pathname.startsWith('/calls')
|
|
? 'calls'
|
|
: location.pathname.startsWith('/search')
|
|
? 'search'
|
|
: 'conversations'
|
|
|
|
useEffect(() => {
|
|
fetchSettings()
|
|
fetchDateRange()
|
|
fetchVersion()
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
// Fetch conversations after settings are loaded
|
|
fetchConversations()
|
|
}, [startDate, endDate, settings])
|
|
|
|
const fetchVersion = async () => {
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/version`)
|
|
setVersion(response.data.version || 'unknown')
|
|
} catch (error) {
|
|
console.error('Failed to fetch version:', error)
|
|
setVersion('unknown')
|
|
}
|
|
}
|
|
|
|
const fetchSettings = async () => {
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/settings`)
|
|
setSettings(response.data)
|
|
} catch (error) {
|
|
console.error('Failed to fetch settings:', error)
|
|
// Use default settings if fetch fails
|
|
setSettings({
|
|
conversations: {
|
|
show_calls: true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// Sync selected conversation from URL and manage sidebar visibility
|
|
useEffect(() => {
|
|
const match = location.pathname.match(/^\/conversation\/(.+)$/)
|
|
if (match) {
|
|
const address = decodeURIComponent(match[1])
|
|
// Find conversation by address
|
|
const conversation = conversations.find(c => c.address === address)
|
|
if (conversation) {
|
|
setSelectedConversation(conversation)
|
|
} else if (conversations.length > 0) {
|
|
// If conversation not found in list, create a minimal conversation object
|
|
setSelectedConversation({ address, contact_name: address, type: 'message' })
|
|
}
|
|
// Hide sidebar on mobile when viewing a conversation (from direct link or navigation)
|
|
setShowSidebar(false)
|
|
} else {
|
|
// Not viewing a specific conversation
|
|
setSelectedConversation(null)
|
|
// Show sidebar when navigating to any non-conversation view
|
|
setShowSidebar(true)
|
|
}
|
|
}, [location.pathname, conversations])
|
|
|
|
const fetchDateRange = async () => {
|
|
try {
|
|
const response = await axios.get(`${API_BASE}/daterange`)
|
|
setDateRange({
|
|
min: new Date(response.data.min_date),
|
|
max: new Date(response.data.max_date)
|
|
})
|
|
} catch (error) {
|
|
console.error('Error fetching date range:', error)
|
|
}
|
|
}
|
|
|
|
const fetchConversations = async () => {
|
|
setConversationsLoading(true)
|
|
try {
|
|
const params = {}
|
|
if (startDate) params.start = startDate.toISOString()
|
|
if (endDate) params.end = endDate.toISOString()
|
|
|
|
const response = await axios.get(`${API_BASE}/conversations`, { params })
|
|
const conversationList = response.data || []
|
|
|
|
setConversations(conversationList)
|
|
} catch (error) {
|
|
console.error('Error fetching conversations:', error)
|
|
} finally {
|
|
setConversationsLoading(false)
|
|
}
|
|
}
|
|
|
|
const handleUploadSuccess = () => {
|
|
setShowUpload(false)
|
|
fetchDateRange()
|
|
fetchConversations()
|
|
}
|
|
|
|
const handleSelectConversation = (conversation) => {
|
|
if (conversation) {
|
|
navigate(`/conversation/${encodeURIComponent(conversation.address)}`)
|
|
// Hide sidebar on mobile when conversation is selected
|
|
setShowSidebar(false)
|
|
}
|
|
}
|
|
|
|
const handleViewChange = (view) => {
|
|
if (view === 'activity') {
|
|
navigate('/activity')
|
|
} else if (view === 'calls') {
|
|
navigate('/calls')
|
|
} else if (view === 'search') {
|
|
navigate('/search')
|
|
} else {
|
|
navigate('/')
|
|
}
|
|
}
|
|
|
|
// Filter conversations based on search text
|
|
const filteredConversations = conversations.filter(conv => {
|
|
if (!searchFilter) return true
|
|
|
|
const searchLower = searchFilter.toLowerCase()
|
|
const nameMatch = conv.contact_name && conv.contact_name.toLowerCase().includes(searchLower)
|
|
const addressMatch = conv.address && conv.address.toLowerCase().includes(searchLower)
|
|
|
|
return nameMatch || addressMatch
|
|
})
|
|
|
|
return (
|
|
<div className="vh-100 d-flex flex-column bg-light">
|
|
{/* Header */}
|
|
<header className="bg-primary bg-gradient text-white py-1 px-2 shadow" style={{zIndex: 1030}}>
|
|
<div className="d-flex justify-content-between align-items-center">
|
|
<div className="d-flex align-items-center gap-2">
|
|
<svg style={{width: '1.75rem', height: '1.75rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
|
|
</svg>
|
|
<h1 className="h5 mb-0 fw-bold">SMS Backup Viewer</h1>
|
|
</div>
|
|
<div className="d-flex align-items-center gap-2">
|
|
<button
|
|
onClick={() => setShowUpload(true)}
|
|
className="btn btn-light btn-sm shadow-sm d-flex align-items-center gap-1"
|
|
>
|
|
<svg style={{width: '1rem', height: '1rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
</svg>
|
|
<span className="d-none d-sm-inline">Upload</span>
|
|
</button>
|
|
<Dropdown align="end">
|
|
<Dropdown.Toggle
|
|
variant="outline-light"
|
|
size="sm"
|
|
className="d-flex align-items-center"
|
|
style={{ backgroundColor: 'transparent', borderColor: 'rgba(255, 255, 255, 0.5)' }}
|
|
>
|
|
<svg style={{width: '1.25rem', height: '1.25rem'}} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
|
|
</svg>
|
|
</Dropdown.Toggle>
|
|
<Dropdown.Menu>
|
|
<Dropdown.ItemText className="fw-semibold">
|
|
{user?.username}
|
|
</Dropdown.ItemText>
|
|
<Dropdown.ItemText className="small text-muted">
|
|
Version {version}
|
|
</Dropdown.ItemText>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Item onClick={() => setShowSettingsModal(true)}>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
|
</svg>
|
|
Settings
|
|
</Dropdown.Item>
|
|
<Dropdown.Item onClick={() => setShowPasswordModal(true)}>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z" />
|
|
</svg>
|
|
Change Password
|
|
</Dropdown.Item>
|
|
<Dropdown.Divider />
|
|
<Dropdown.Item onClick={logout}>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
|
|
</svg>
|
|
Logout
|
|
</Dropdown.Item>
|
|
</Dropdown.Menu>
|
|
</Dropdown>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
{/* View Switcher */}
|
|
<div className="bg-white border-bottom shadow-sm">
|
|
<div className="container-fluid">
|
|
<ul className="nav nav-tabs border-0">
|
|
<li className="nav-item">
|
|
<button
|
|
className={`nav-link ${activeView === 'conversations' ? 'active' : ''}`}
|
|
onClick={() => handleViewChange('conversations')}
|
|
>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
|
|
</svg>
|
|
<span className="d-none d-sm-inline">Conversations</span>
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button
|
|
className={`nav-link ${activeView === 'calls' ? 'active' : ''}`}
|
|
onClick={() => handleViewChange('calls')}
|
|
>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
|
|
</svg>
|
|
<span className="d-none d-sm-inline">Calls</span>
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button
|
|
className={`nav-link ${activeView === 'search' ? 'active' : ''}`}
|
|
onClick={() => handleViewChange('search')}
|
|
>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<span className="d-none d-sm-inline">Search</span>
|
|
</button>
|
|
</li>
|
|
<li className="nav-item">
|
|
<button
|
|
className={`nav-link ${activeView === 'activity' ? 'active' : ''}`}
|
|
onClick={() => handleViewChange('activity')}
|
|
>
|
|
<svg style={{width: '1rem', height: '1rem'}} className="me-sm-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<span className="d-none d-sm-inline">Activity</span>
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Date Filter */}
|
|
<div className="date-filter-container bg-white border-bottom shadow-sm" style={{zIndex: 1025, position: 'relative'}}>
|
|
<DateFilter
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
minDate={dateRange.min}
|
|
maxDate={dateRange.max}
|
|
onStartDateChange={setStartDate}
|
|
onEndDateChange={setEndDate}
|
|
/>
|
|
</div>
|
|
|
|
{/* Main Content */}
|
|
<div className="flex-fill d-flex overflow-hidden gap-1 p-1 position-relative">
|
|
{activeView === 'conversations' ? (
|
|
<>
|
|
{/* Conversation List */}
|
|
<div
|
|
className={`conversation-sidebar bg-white rounded-3 shadow overflow-hidden border ${showSidebar ? 'show' : ''}`}
|
|
>
|
|
<div className="bg-light border-bottom p-1">
|
|
<h2 className="h6 mb-1 d-flex align-items-center gap-1 px-1">
|
|
<svg style={{width: '1rem', height: '1rem'}} className="text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z" />
|
|
</svg>
|
|
Conversations
|
|
</h2>
|
|
<div className="position-relative">
|
|
<svg style={{width: '0.875rem', height: '0.875rem', position: 'absolute', left: '0.5rem', top: '50%', transform: 'translateY(-50%)'}} className="text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
|
</svg>
|
|
<input
|
|
type="text"
|
|
className="form-control form-control-sm ps-4"
|
|
placeholder="Search..."
|
|
value={searchFilter}
|
|
onChange={(e) => setSearchFilter(e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="overflow-auto" style={{height: 'calc(100% - 4.5rem)'}}>
|
|
<ConversationList
|
|
conversations={filteredConversations}
|
|
selectedConversation={selectedConversation}
|
|
onSelectConversation={handleSelectConversation}
|
|
loading={conversationsLoading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Message Thread */}
|
|
<div className="flex-fill bg-white rounded-3 shadow overflow-hidden border message-thread-container" style={{minWidth: 0}}>
|
|
<MessageThread
|
|
conversation={selectedConversation}
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : activeView === 'search' ? (
|
|
/* Search View */
|
|
<div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
|
|
<Search
|
|
searchQuery={searchQuery}
|
|
setSearchQuery={setSearchQuery}
|
|
results={searchResults}
|
|
setResults={setSearchResults}
|
|
loading={searchLoading}
|
|
setLoading={setSearchLoading}
|
|
searched={searchExecuted}
|
|
setSearched={setSearchExecuted}
|
|
scrollPosition={searchScrollPosition}
|
|
setScrollPosition={setSearchScrollPosition}
|
|
/>
|
|
</div>
|
|
) : activeView === 'calls' ? (
|
|
/* Calls View */
|
|
<div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
|
|
<Calls
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
/>
|
|
</div>
|
|
) : (
|
|
/* Activity View */
|
|
<div className="flex-fill bg-white rounded-3 shadow overflow-hidden border" style={{minWidth: 0}}>
|
|
<Activity
|
|
startDate={startDate}
|
|
endDate={endDate}
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Upload Modal */}
|
|
{showUpload && (
|
|
<Upload
|
|
onClose={() => setShowUpload(false)}
|
|
onSuccess={handleUploadSuccess}
|
|
/>
|
|
)}
|
|
|
|
{/* Settings Modal */}
|
|
<SettingsModal
|
|
show={showSettingsModal}
|
|
onClose={() => setShowSettingsModal(false)}
|
|
onSettingsUpdated={(newSettings) => {
|
|
setSettings(newSettings)
|
|
// Reload conversations if show_calls setting changed
|
|
fetchConversations()
|
|
}}
|
|
/>
|
|
|
|
{/* Change Password Modal */}
|
|
{showPasswordModal && (
|
|
<ChangePasswordModal
|
|
onClose={() => setShowPasswordModal(false)}
|
|
onSuccess={() => {
|
|
// Password changed successfully
|
|
console.log('Password changed successfully')
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{/* Settings Modal */}
|
|
<SettingsModal
|
|
show={showSettingsModal}
|
|
onClose={() => setShowSettingsModal(false)}
|
|
onSettingsUpdated={(newSettings) => {
|
|
setSettings(newSettings)
|
|
// Reload conversations if show_calls setting changed
|
|
fetchConversations()
|
|
}}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default App
|