75 lines
2.9 KiB
TypeScript
75 lines
2.9 KiB
TypeScript
import { useState, useEffect } from "react"
|
|
import { getStatuses, logout } from "../../api/connections"
|
|
import { ServiceType, type ConnectionStatus } from "../../types/connection"
|
|
import { ServiceCard } from "./ServiceCard"
|
|
import { ConnectModal } from "./ConnectModal"
|
|
import "./Dashboard.scss"
|
|
import { SearchModal } from "../search/SearchModal"
|
|
|
|
const SERVICES = [
|
|
{ serviceType: ServiceType.HOMEBOX, label: 'Homebox', icon: '📦' },
|
|
] as const
|
|
|
|
export function Dashboard() {
|
|
const [statuses, setStatuses] = useState<ConnectionStatus[]>([])
|
|
const [openConnectionModal, setOpenConnectionModal] = useState<string | null>(null)
|
|
const [openSearchModal, setOpenSearchModal] = useState<string | null>(null)
|
|
|
|
const refresh = () => {
|
|
getStatuses().then(setStatuses).catch(() => { })
|
|
}
|
|
|
|
useEffect(() => { refresh() }, [])
|
|
|
|
const handleDisconnect = (serviceType: ServiceType) => {
|
|
logout(serviceType).then(refresh).catch(() => { })
|
|
}
|
|
|
|
const activeConnectionModal = SERVICES.find(s => s.serviceType === openConnectionModal)
|
|
const activeSearchModal = SERVICES.find(s => s.serviceType === openSearchModal)
|
|
const activeSearchStatus = statuses.find(s => s.serviceType === openSearchModal)
|
|
|
|
return (
|
|
<div className="dashboard">
|
|
<div className="dashboard__header">
|
|
<h1 className="dashboard__title">Vaessl Dashboard</h1>
|
|
</div>
|
|
|
|
<p className="dashboard__section-label">Services</p>
|
|
<div className="dashboard__cards">
|
|
{SERVICES.map(({ serviceType, label, icon }) => (
|
|
<ServiceCard
|
|
key={serviceType}
|
|
serviceType={serviceType}
|
|
label={label}
|
|
icon={icon}
|
|
status={statuses.find(s => s.serviceType === serviceType) ?? null}
|
|
onConnect={() => setOpenConnectionModal(serviceType)}
|
|
onDisconnect={() => handleDisconnect(serviceType)}
|
|
onSearch={() => setOpenSearchModal(serviceType)}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{activeConnectionModal && (
|
|
<ConnectModal
|
|
serviceType={activeConnectionModal.serviceType}
|
|
label={activeConnectionModal.label}
|
|
onClose={() => setOpenConnectionModal(null)}
|
|
onSuccess={() => { setOpenConnectionModal(null); refresh() }}
|
|
/>
|
|
)}
|
|
|
|
{activeSearchModal && (
|
|
<SearchModal
|
|
serviceType={activeSearchModal.serviceType}
|
|
label={activeSearchModal.label}
|
|
appUrl={activeSearchStatus?.appUrl ?? ''}
|
|
username={activeSearchStatus?.username ?? ''}
|
|
onClose={() => setOpenSearchModal(null) }
|
|
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
} |