77 lines
2.6 KiB
TypeScript
77 lines
2.6 KiB
TypeScript
import { useState, useEffect } from 'react'
|
|
import { Modal } from './components/ui/Modal.tsx'
|
|
import { Button } from './components/ui/Button.tsx'
|
|
import { TicketTable } from './components/tickets/TicketTable.tsx'
|
|
import { NewTicketForm } from './components/tickets/NewTicketForm.tsx'
|
|
import { useModal } from './hooks/useModal.ts'
|
|
import { useStorageMode } from './hooks/useStorageMode.ts'
|
|
import { getStorage } from './lib/storage.ts'
|
|
import type { Ticket } from './lib/types.ts'
|
|
import { Layout } from './components/ui/Layout.tsx'
|
|
import { PlusIcon } from './components/icons/plus.tsx'
|
|
|
|
function TicketApp({ storageMode }: { storageMode: 'local' | 'remote' }) {
|
|
const storage = getStorage(storageMode)
|
|
const [tickets, setTickets] = useState<Ticket[]>([])
|
|
const newTicketModal = useModal()
|
|
|
|
// load tickets — handles both sync (local) and async (remote)
|
|
useEffect(() => {
|
|
const result = storage.getTickets()
|
|
if (result instanceof Promise) {
|
|
result.then(setTickets)
|
|
} else {
|
|
setTickets(result)
|
|
}
|
|
}, [storageMode])
|
|
|
|
const handleCreateTicket = async (form: Pick<Ticket, 'subject' | 'description' | 'type'>) => {
|
|
const result = storage.createTicket(form)
|
|
const ticket = result instanceof Promise ? await result : result
|
|
setTickets(prev => [ticket, ...prev])
|
|
newTicketModal.close()
|
|
}
|
|
const handleDeleteTicket = async (id: string) => {
|
|
const result = storage.deleteTicket(id)
|
|
if (result instanceof Promise) await result
|
|
setTickets(prev => prev.filter(t => t.id !== id))
|
|
}
|
|
|
|
return (
|
|
<Layout>
|
|
<div className="mb-8 flex items-center justify-between">
|
|
<div>
|
|
<h1 className="text-lg font-semibold text-fg-100">Support Tickets</h1>
|
|
<p className="mt-0.5 text-sm text-fg-300">
|
|
{tickets.length} {tickets.length === 1 ? 'ticket' : 'tickets'} total
|
|
</p>
|
|
</div>
|
|
<Button onClick={newTicketModal.open}>
|
|
<PlusIcon className="size-3" />
|
|
New Ticket
|
|
</Button>
|
|
</div>
|
|
|
|
<TicketTable tickets={tickets} onDelete={handleDeleteTicket} />
|
|
|
|
<Modal isOpen={newTicketModal.isOpen} onClose={newTicketModal.close} title="New Ticket">
|
|
<NewTicketForm onSubmit={handleCreateTicket} />
|
|
</Modal>
|
|
</Layout>
|
|
)
|
|
}
|
|
|
|
export default function App() {
|
|
const storageMode = useStorageMode()
|
|
|
|
if (storageMode === 'pending') {
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center">
|
|
<p className="text-sm text-fg-300">Loading...</p>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return <TicketApp storageMode={storageMode} />
|
|
}
|