added search response into searchmodal ui, restructured folders

2026-06-24 15:57:10 +02:00
parent a1ce085123
commit 6e3d3347e2
16 changed files with 110 additions and 34 deletions
@@ -0,0 +1,75 @@
+import { useState, useEffect } from "react"
+import { getStatuses, logout } from "../../api/connections"
+import type { ConnectionStatus } from "../../types/connection"
+import { ServiceCard } from "./ServiceCard"
+import { ConnectModal } from "./ConnectModal"
+import "./Dashboard.scss"
+import { SearchModal } from "../search/SearchModal"
+
+const SERVICES = [
+    { 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: string) => {
+        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>
+    )
+}