diff --git a/app/doors/page.tsx b/app/doors/page.tsx
index dfa72b6..0b9e0ad 100644
--- a/app/doors/page.tsx
+++ b/app/doors/page.tsx
@@ -9,8 +9,9 @@ import Col from "react-bootstrap/Col";
import Spinner from "react-bootstrap/Spinner";
import { apiFetch } from "@/lib/api";
import DoorCard, { type Door, type DoorStatus } from "@/components/DoorCard";
+import AuthGate from "@/components/AuthGate";
-export default function DoorsPage() {
+function DoorsPageInner() {
const { data: session } = useSession();
const token = session?.accessToken ?? "";
@@ -152,6 +153,7 @@ export default function DoorsPage() {
status={statuses[door.id]}
onUnlock={handleUnlock}
loading={unlocking[door.id] ?? false}
+ offline={statuses[door.id]?.guess === "offline"}
/>
))}
@@ -167,6 +169,7 @@ export default function DoorsPage() {
status={statuses[door.id]}
onUnlock={handleUnlock}
loading={false}
+ offline={statuses[door.id]?.guess === "offline"}
/>
))}
@@ -175,4 +178,12 @@ export default function DoorsPage() {
)}
);
+}
+
+export default function DoorsPage() {
+ return (
+
+
+
+ );
}
\ No newline at end of file
diff --git a/components/AuthGate.tsx b/components/AuthGate.tsx
index 3614f38..87d974d 100644
--- a/components/AuthGate.tsx
+++ b/components/AuthGate.tsx
@@ -3,9 +3,9 @@
import { Container, Spinner } from "react-bootstrap";
import { useSession, signIn } from "next-auth/react";
import { AUTH_PROVIDER_ID, REFRESH_TOKEN_ERROR } from "@/lib/constants";
-import { useEffect } from "react";
+import { useEffect, type ReactNode } from "react";
-export default function AuthGate({ children }) {
+export default function AuthGate({ children }: {children: ReactNode}) {
const { data: session, status } = useSession({
required: true,
onUnauthenticated() {
diff --git a/components/DoorCard.tsx b/components/DoorCard.tsx
index 4d07792..3e04e54 100644
--- a/components/DoorCard.tsx
+++ b/components/DoorCard.tsx
@@ -26,6 +26,7 @@ interface DoorCardProps {
status: DoorStatus | undefined;
onUnlock: (doorId: string) => void;
loading?: boolean;
+ offline?: boolean;
}
const STATUS_COLOR: Record = {
@@ -40,6 +41,7 @@ export default function DoorCard({
status,
onUnlock,
loading = false,
+ offline = false
}: DoorCardProps) {
const guess = status?.guess ?? "unknown";
const color = STATUS_COLOR[guess] ?? STATUS_COLOR.unknown;
@@ -79,7 +81,7 @@ export default function DoorCard({
variant="primary"
className="ms-3 flex-shrink-0"
onClick={() => onUnlock(door.id)}
- disabled={loading}
+ disabled={loading || offline}
>
{loading ? (
<>